EverWeb Widgets

Responsive Grid Row Widgets [2]

These responsive grid row widgets create animated headers and a carousel, fixed header, slide up image links, a logo header/nav, a contact section, contact toolbar and an info toolbar.
Click any widget icon to see the demo …

View CartAdd To Cart

Image Header

The header has a split background with a color to the left and an image on the right. The text section animates from the left and has an h1 heading, text, an optional link tab and a logo which can be at the top or bottom.
The image floats in from the right and has an alt text attribute and an optional overlay caption, a maximum width setting and can have a border and/or a box shadow.

Video MP4 Header

The header has a split background with a color to the left and an image on the right. The text section animates from the left and has an h1 heading, text, an optional link tab and a logo which can be at the top or bottom.
The video player uses the VideoJS scripts and floats in from the right show a poster image. There is an option for adding the video title below the video stage.

Slider Header

The header has a split background with a color to the left and an image on the right. The text section animates from the left and has an h1 heading, text, an optional link tab and a logo which can be at the top or bottom.
The slideshow floats in from the right. It has lazy loading images and options for both captions and to create the images as links.

Lightbox Header

The header has a split background with a color to the left and an image on the right. The text section animates from the left and has an h1 heading, text, an optional link tab and a logo which can be at the top or bottom.
An image with a caption floats in from the right. When clicked, it opens a lightbox slideshow with image captions, slide counter and swipe navigation on touch devices.

Vimeo/YouTube Header

The header has a split background with a color to the left and an image on the right. The text section animates from the left and has an h1 heading, text, an optional link tab and a logo which can be at the top or bottom.
The video player can play either Vimeo or YouTube videos and floats in from the right. There is an option for adding the video title below the video stage.

Slide Up Carousel

The carousel can hold up to 48 images of the same size and aspect ratio. The images are lazy loading and the overlay captions are optional.
The carousel has a slide up animation and can overlay the item above as can be seem in the demo. It can be set to continuous autoplay or to autoplay through the slides and then stop at the last one.

Hero Fixed Header

This header was created to overcome the problem of fixed background images not staying fixed on iOS devices. The images are inserted in three different sizes for the various devices using the HTML5 picture element rather than as background images. This allows them to be fixed in position with some tricky CSS and lets the content below scroll over on iPad and iPhone.

Slide Up Image Links

The widget contains two images which have an optional overlay and caption and can be configured as links to internal or external pages and open in a new window if required.
The slide up animation is turned on by checking a box. The animation occurs every time the item enters the viewport. There is a checkbox to make the animation only fire once.

Logo Header Navigation

When viewed on computers, the navigation links are inline and can be centered or aligned right if the optional logo is inserted. It switches to dropdown on mobile devices and can indicate the current page.
The optional logo can show an image and an optional text field. The image - and the text if present - can be configured as a hyperlink to open internal or externals pages and in a new window if required.

Contact Form & Info

On responsive pages, it is not pretty or practical to show a contact form on its own in a row surrounded by large amounts of white space
This contact info section uses two columns. The contact info is in the left column on wider screens and the form is located in the right column. On mobile phones, the form is positioned in row 2 below the text.

Contact Bar

The toolbar has options for a phone number which switches to a phone icon on mobile phones, a contact icon link and an email icon. The contact and email icons can show a title on hover when viewed on computers if required.
The contact icon can be a link to an internal page in the same project file or an external link or to a page on a different project file.

Toolbar

The toolbar has options for a phone number which switches to a phone icon on mobile phones, a smooth scroll down to the next section chevron and an email icon. The scroll down and email icons can show a title on hover when viewed on computers if required.
The email address has basic protection to stop spammers from harvesting it using data mining software.

© EverWeb Widgets -