EverWeb Widgets

Responsive Grid Row Media

These items display media at half the container width when viewed on wider screens and then full width below the break point. In this case, the break point is set to 799px to make the layout change on tablets in portrait mode. This means that any images or other media files don't need to be any bigger than 800px in width.
The video file is prevented from download at page load and the slideshow images are lazy loading. These features allow a much faster page download time.

Slideshow

Swiper slideshow with lazy loading images. Autoplay option with stop on last.

Lightbox Slider

Styles

There are quite a few styling options so it is important experiment with them. For example, if a box shadow is added to the media, the container requires padding to be added so that the shadow will be seen all arounfdthe item.
If the container is given a box shadow it needs to be given vertical spacing and have its percentage width reduced to 98 or less.
Vertical Align
Both the media file and the article element with the text and link are vertically centered using the gid property "align-self". If a lot of text is added, the <article> will expand vertically and the media file will remain vertically centered in the container.

Map

The interactive map is inserted using the street address for the center point. The initial zoom level can be set.
The map aspect ratio can be adjusted using a slider.

Lightbox Map

MP4 Video

The poster image displays on page load and must have the same aspect ratio as the video file.
If autoplay is selected, the soundtrack will be muted.

Lightbox Video

Vimeo Player

The player has checkboxes for adding fullscreen, autoplay and loop.
Videos with aspect ratios different from the default 16:9 can be inserted by entering their file width and height.

Lightbox Vimeo

YouTube Video

A YouTube video with controls to allow fullscreen playback and autoplay.

Lightbox YouTube