EverWeb Widgets

Responsive Grid Module - Image + 2 Grid

responsive image grid — Main Image Caption

Grid

The grid has a large image 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 large image in this example is 1120px × 630px and the smaller ones are half that size.
Main Item
The main image has fields for entering the alt text for the search engines and the caption. The caption can use a web safe font or a non web safe or Goole hosted font with a web safe fallback. There are controls for setting the font size and color and the background color and its opacity and a checkbox for showing the captions on hover when viewwed on computers.
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