EverWeb Widgets

Responsive Grid Row Widgets [3]

These responsive grid row widgets create inline, hero and full page items for displaying images, map, video, Vimeo, YouTube and sliders.
Click any widget icon to see the demo …

View CartAdd To Cart

Resize Header & Navigation

The full width header resizes on scroll when viewed on computers. It has options for a logo and has an inline navigation that switches to a drop down on mobile devices.
The navigation has options for styling the inline and mobile versions and can indicate the current page with a contrasting color.

Overlay Heading

This creates h1 through h4 headings with options for styling including letter spacing and text shadow. It has a maximum width setting and both the heading and the container have controls for background color and its opacity. The heading can be placed below an item like a full width image and be made to overlay at the bottom. When placed below the first media item on the page, it can overlay at the top.

Hero Switch Image

When viewed on computers, the image has full width and fixed height. On tablets and phones in portrait mode, it switches to responsive and then to full height on phones in portrait mode.
The image is inserted in three different sizes for the different device types and has an animated overlay with heading, text and a CTA style link tab.

Viewport Height Image

The image is inserted in three sizes - one for each device type - and fills the height of the browser or devices window. It has a control for fixing its position to allow scroll over to simulate a background image which would otherwise not be sensible for responsive. pages.
It has an animated overlay with heading, text and a CTA style link tab.

Full Height Slideshow

This is a very lightweight slider that fills the browser or device window. It can autoplay on computers with pause on hover and switch to manual play on touch devices.
In manual mode, the slides can be navigated using pager dots and/or directional arrow which are located at the bottom right for convenience and switch to the center on mobile phones.

Text Scroller

The scrolling text is created using CSS animation rather than Javascript to make it more suitable and efficient for use on mobile devices. The text has an extra span tag for text which will disappear when viewed on phones and the animation is removed.
The text background has an opacity setting for use when it is over-layed on the item above it.

Grid Row Image

On computers, the media file and the text block are inline. When the layout changes at the break point, they relocate - one above the other. There are checkboxes to locate the image left or right and to position the text above or below it when viewed on narrower devices. The image has alt text and the text block has a heading, a paragraph and an optional CTA style link which can be configured to open internal or external pages.

Grid Row Map

The media section of this widget has a responsive and interactive Google map. The map does not require a key code and is created by entering the street address of the center marker. The initial zoom level can be set.
Like the other media widgets, the map can have a border and the container can have padding and a border and/or a box shadow.

Grid Row Slider

The slideshow has the essential feature of a responsive slideshow - lazy loading images. If the slideshow is set to manual play, only the first, previous and next images are downloaded. The rest download "on demand".
Since autoplay should never be used on items that will be viewed on mobile phones due to excessive power drain, this slider has an option to autoplay and stop at the last slide.

Grid Row Video

The MP4 video is prevented from downloading at page load and the player displays a poster image. This image must have the same aspect ratio as the video file and doesn't need to be any wider than about 600px to 800px.
The player is set to play inline on iPhones and there is an autoplay function. When autoplay is selected, the video soundtrack is automatically muted.

Grid Row Vimeo

Vimeo videos are inserted on a web page using an iframe. In this case, the iframe is made responsive using bottom padding equal to the intrinsic aspect ratio.
The player has controls for setting autoplay and loop and there is a checkbox to allow fullscreen playback by showing the button in the control bar if required.

Grid Row YouTube

The YouTube player API has changed a lot recently and the number of options drastically reduced. Unless your visitors have paid for a premium license, they will be inflicted with advertising and prompts to select similar videos when the player is paused.
The basic player has an autoplay and fullscreen option but loop is no longer available.

© EverWeb Widgets -