EverWeb Widgets

Hero Switch 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.
Header
An optional header which overlays the top of the video frame has controls for setting its background color and opacity.
Break Point
The break point at which the video switches from hero to responsive mode can be selected from a drop down menu in the widget settings.

Navigation

The Hero Switch Navigation widget creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices.
If viewing this page on a computer, reduce the browser width to see the navigation switch from one type to the other.
It can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
The navigation is designed to be used in conjunction with a hero image or other full width item. It can appear above or below or overlay the top or the bottom of the item. For an overlay, the navigation is placed below the hero image on the EverWeb design canvas and then the appropriate box in the widget settings is checked to place it in the required overlay position when viewed in the browser.
Current Page
The widget has an option to display the current page tab in a different color and also to add an animated underline to it.

Search Bar

The search bar has options to add three out of four items …
On the left hand side 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. Click the link below to set up a custom search and get an ID.
To the right is the email icon which includes code to prevent spammers using scraping software to find the email address.
The icons are SVGs so there are no images to download. This allows the color to be changed and they can show a title on hover when viewed on computers.
The search bar can be set to overlay the item above it if required as shown in the example on this page.

Custom Search