EverWeb Widgets

Viewport Height Media

Viewport height items fill the browser or device window on page load - no matter what size it is. These widhets create responsive width items which fill the height of the viewport and have built in smooth scroll down chevron icons to scroll to the next section.
The header widgets have a built in mobile "hamburger" icon which opens the mobile version of the navigation when the header is combined with either of the navigation widgets listed below.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Image

The viewport size image is loaded in three different sizes - one for each device type. The optional overlay can have a heading, text and a CTA style link tab. Its color and opacity can be varied and it can animate in with controls for the animation time and delay.
The optional smooth scroll down tab can be styled and show a title on hover when viewed on computers if required.

Image Header

The Image Header adds an optional logo and the mobile navigation icon which can be styled for icon color, background color and its opacity and border radius.
The optional smooth scroll down tab can be styled and the scroll time set in milliseconds. The image can be fixed in position to allow the content below to scroll over it.

Scale Image

The image has a scale animation over time which creates an effect similar to the Ken Burns type. The scale amount can be adjusted along with the time to complete on cycle. The iteration count is adjustable or it can be set to infinite.
It has an overlay with options for a heading, text and a link and loads different sizes of images for each device type to improve download speed and efficiency.

Scale Image Header

The header version of the Scale Image adds an optional logo and the mobile navigation icon which can be styled for icon color, background color and its opacity and border radius.
The optional smooth scroll down tab can be styled and the scroll time set in milliseconds. The image can be fixed in position to allow the content below to scroll over it.

Slider

The lazy loading slideshow is navigated using directional arrows on computers and by swiping on touch devices.
The captions and the CTA style link tabs are optional and are turned on globally.
The captions and links can animate in from different directions. The animation type is set per slide for each item and the animation time and delay are set globally.

Slider Header

The header version of the lazy loading slider has all the functions of the above with the addition of an optional logo and a navigation icon which appears when it is viewed on a mobile device.
The slideshow should be used with one of the VPH Nav widgets shown below to create a built in one or two level navigation for the page.

Video Header

The full size background MP4 video is set to autoplay and be muted so that it will autoplay in Safari for computers and iOS devices. There is a large Play/Pause button which can be positioned in any corner with options for styling it and change the text.
It has a navigation icon built in and an optional smooth scroll down function.

Video MP4

The video player shows a full width, responsive viewport height poster image on page load and the video file is prevented from downloading until the visitor clicks the large center play button.
The player uses the VideoJS scripts to show a uniform control bar on all devices and the only setting required is for initial volume.

YouTube

A viewport size poster image appears on page load with a large central play button. The video itself has responsive width and height and is centered vertically inside the viewport height section for the best possible viewing performance on all devices.
The are no controls and the video can be paused by clicking/tapping it.

Text/Image Header

The header version of the content widget adds an option for logo and has the mobile navigation icon built in.
The navigation is added by using one of the VPH Nav widgets described below. These can be used to create single and two level navigation menus which switch from inline tabs when viewed on computers to a vertical drop navigation on tablets and mobile phones.

Text/Image Content

This widget complements the viewport height media widgets by creating a section which is 100vh and centers the content horizontally and vertically.
There are options for a heading, an image with alt text, text description and a CTA style link tab which can be configured to open an internal or external page.

Navigation - Single Level

A single level navigation for use with the Viewport Height Header widgets. The navigation switches from inline on computers to a dropdown style opened by clicking a "hamburger" icon on mobile devices.
The navigation overlays the top of the header widget and can be made sticky by checking a box. It can have up to 14 links - the last two of which can be configured as external and open in a new window.

Navigation - Two Level

This is a two level navigation for use with the Viewport Height Header widgets. The navigation can have up to 6 top level links and 3 directories - each with up to six links. The last two top level link can be configured to open an external page.
The mobile version of the navigation has accordion style drop downs to reveal the directory links.

© EverWeb Widgets -