EverWeb Widgets

Hero Switch Widgets

The hero image, slideshow or video is a show stopper designed to grab attention on the website's landing page and is hugely popular. It has a fixed height and is full width responsive.
The hero works really well when display on computer screens but not so good in touch devices like the iPad and iPhone. For good quality on computers, it requires a large image file which is way too big for mobile phone users to download. At narrower screens widths, only the center of the image can be seen.
These widgets overcome the viewing problem by switching the layout from "hero" when viewed on computers to responsive width and height on mobile devices.
Where possible, the image is provided in three different sizes - one for each device type. This allows much faster download times and a better visitor experience.
Click any widget icon to see the demo …

View CartAdd To Cart

Image

The images are inserted in an HTML5 element with media queries to change the file at the different browser/device widths. The widget includes a polyfill for ancient browsers that don't support the tag.
There is an option for a header overlay at the top and a caption at the bottom. These can animate in on page load if required using the controls for animation time and delay.

Slider

The slideshow can be manual or autoplay and has controls for transition time and autoplay slide time expressed in milliseconds, show/hide navigation arrows and hide on mobile where the slides can be swiped.
The optional overlay has a heading by default and there are options for adding a text field and a link tab. The overlay background can be adjusted for color and opacity.

Animated Slider

This manual slider has options to animate in a caption and/or a link tab. The animation time and delay is shared by all the slides but the animation direction can be varied for each slide. The animation direction for each item can be in down, in right, in up, in left or none. The slideshow has controls for transition time and to hide the directional arrows on mobile devices where the slides can be swiped.

Animated Overlay

The full width, fixed height image has options for another image and an overlay with a caption and optional text description and a CTA style link. The image switches to 100vh in height when viewed on mobile phones so that it fills the screen vertically as well as horizontally.
The second image has a scale animation and the overlay animation is fade in.

Text Scroller

The image is inserted in three different sizes for each device type and has a transparent overlay for scrolling text. The scroller can be located at the top or bottom of the image.
The scrolling animation is created using CSS rather than Javascript and is prevented when the page is viewed on a mobile phone where the text is centered.

Scroll Over Image

The full width, fixed height image has a an overlay with a caption, optional text description and a CTA style link. The image switches to responsive height when viewed on mobile devices. It can be set to viewport height on computers so that it fills the screen vertically as well as horizontally. The image allows the content below to slide up over it on scroll. On mobile devices, the image scrolls with the rest of the content.

MP4 Video

The video is full width responsive with a fixed height when viewed on computers. At narrower screen widths and on mobile devices, it switches to fully responsive width and height for a better viewing experience. The video player loads a poster image and prevents the video file from downloading at page load for a faster page download time. This is really important for mobile devices. The video has a control for setting the initial volume.

Vimeo

The video is full width responsive with a fixed height when viewed on computers. At narrower screen widths and on mobile devices, it switches to fully responsive width and height and only requires the Vimeo ID.
It has controls for adjusting the video file width and height if the video is not the default 560 x 315. This is important for the responsive action to work properly.

YouTube

The video is full width responsive with a fixed height when viewed on computers. At narrower screen widths and on mobile devices, it switches to fully responsive width and height and only requires the YouTube ID.
It has controls for adjusting the video file width and height if the video is not the default 560 x 315. This is important for the responsive action to work properly.

Navigation

This creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices with up to fourteen links. The last two links can be configured as external.
The navigation can be situated above or below a full width item like a hero image and be made to overlay it at either the top or bottom.

Contact | Phone | Email

The contact bar has options to add a phone number which switches to a phone button on mobile phones, a contact icon which launches a modal window with a contact form and an email icon which has fields for the recipient email address and subject. The form can either show a success message when it is submitted or return the visitor to another page of the site.

Custom Site Search

The search bar has options to add three out of four items. The first is a phone number which switches to a phone button on mobile phones or a contact icon which provides a link to a page with a contact form. In the center is the spyglass icon which launches a modal window with a Google custom website search function. On the right is the email icon which includes code to prevent spammers using scraping software to find the email address.

© EverWeb Widgets -