EverWeb Widgets

Responsive Grid Module - Slider + 2 Grid

Grid

The grid has a lazy load slideshow 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 slideshow images in this example are 1200px × 720px and the sidebar images are half that size.
Slideshow
The slide show images lazy load and can be configured as hyperlinks to other pages if required. They have alt text and a caption which is centered over the bottom the image.
The transition can be fade or slide and there is an option for autoplay by setting a slide time in milliseconds. If the autoplay option is chosen, it is advisable to also select the option to autoplay through the slides once and then stop at the last one.
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