EverWeb Widgets

Responsive Grid Module - Video + 2 Grid

Grid

The grid has an MP4 video player to the left and two stacked images on the right when viewed on wider screens. At the first break point, the smaller images sit side by side below the large one and then they all stack vertically when viewed on mobile phones.
The items can be spaced out using the "grid-gap" property and the left right padding can be adjusted. Both the grid background and the full width container background have controls for adjusting the background color and its opacity. The container has a vertical spacing control to adjust its spacing from the items above and below.
The captions overlay the bottom of the images and can be set to only show on hover when viewed on computers. They appear on page load when viewed on touch devices.

Grid Items

The images should be cropped to size before importing into EverWeb and must all have the same aspect ratio. The poster image in this example is 800 × 450px and has the same aspect ratio as the video file. The sidebar images are half that size.
MP4 Video Player
The player requires an MP4 video file and a poster image. The video file size should be kept as small as possible since it will be downloaded on mobile phones. The poster image displays at pagr load and the video file is prevented from downloading until the center play button is clicked. The poster image must have the same aspect ratio as the video file.
The player has a control for setting the initial volume and is set to play inline on iPhones.
Sidebar Items
The sidebar items can be simply captioned images or be configured as link to various sources.
Each one has a button to choose the image and fields for entering the alt text and the caption.
Sidebar Image Options
[1] The first option - if just a captioned image is required - is to check the "No Link" box and ignore the other options.
[2] The second option is to configure the image as a link to another page. There are checkboxes for "Image Link" and "Show Link Icon". The link icon appears at the top right if selected. The link can be to an internal or external page and open in a new window if required.
[3] The third option is to open a Vimeo or YouTube video in a lightbox window by checking the appropriate box and entering the Vimeo or YouTube ID. In this case, a play buttom will appear in the center of the image.
[4] The last option creates an MP3 player. The play button in the center of the image will change to a pause button when the audio file is playing.
NOTE: It is really important to make sure that only one option is selected!

Navigation

The navigation is created using the Responsive Banner Navigation widget. This is placed below the slider on the EverWeb design canvas and appears as an overlay at the top of the item above it.
As shown in this example, it has the option to fix it in position to make a sticky menu which is always in view and to indicate the current page with a contrasting color.

More Info