EverWeb Widgets

Responsive Grid Module - YouTube + 2 Grid

Grid

The grid has an YouTube 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 should have the same aspect ratio as the video file which is normally 16:9.
Video Player
The player only requires the YouTube ID to be inserted. It is set to display standard 16:9 aspect ratio videos. If the video has a different aspect ratio, enter the width and height of the video file and the code will recalculate for that aspect ratio.
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