EverWeb Widgets

Grid Overl y Widgets

Items using the CSS Grid Layout Module to create horizontal or vertical overlays with portrait image, portrait and landscape sliders and an image lightbox album.
Click any widget icon to see the demo …

View CartAdd To Cart

Background Image

The overlay widgets can be layed out over a background image created using this widget. Since a full size background image shouldn't be used on responsive pages, this one has its position fixed and is set to fill the viewport height so that the content scrolls over it.
The image is inserted in two different sizes for computers and mobile devices to help speed up page download time on mobile devices.

Header

The header widget can have relative or fixed position and will appear at the top of the page to either scroll with the rest of the content or stick in position.
It combines a logo with link option, a phone number which switches to a phone icon on mobile phones, the h1 heading and a drop down navigation.

Spacer

The overlay items can be spaced out using two types of spacer. This one can have a background image or a coloured background. The image is inserted in two sizes - one for computers and the other for mobile devices.
The spacer has the option to add a heading which has numerous styling options and can be positioned at the top, center or bottom of the container.

Text/Spacer

The text spacer can be used as a spacer or a text section with a heading, text and optional link. The link can open internal or external pages and in a new window if required.
The text is positioned using column start number and column span so it can be offset to allow overlay an item below to overlap it without obscuring the content.

Landscape Image & Text

The item consists of a full width background with a grid overlay which is centered with a maximum width. The grid has an image and a text panel which can overlap the image and animate in if required.
There are control for animation time and delay in seconds and for setting the animation direction which can be down, right, up or left.

Panel Image Links

The item consists of a full width background image with a grid overlay. The overlay has four columns and two rows and has a maximum width setting. It can accommodate up to eight overlay images or up to six when the text block is inserted.
The image links can animate in with a fade in and each can have a different delay time.

Panel Lightbox Image Links

The lightbox version has all the same features as the panel described above except the overlay images open a large image in a lightbox on click rather than a another page.
The lightbox image is responsive up to the width of the image file and can be closed by clicking/tapping the close icon or anywhere on the overlay.

Portrait Image & Text

The portrait image can be aligned left or right in the container. The info section has a heading, text and an optional link which can open internal or external pages.
The column span of both items can be adjusted and made to overlap and the image can be extended up to overlay the item above.

Portrait Slider

A lazy loading, swipe slider for portrait images. The captions can be styled and the images can be configure as hyperlinks to open internal or external pages.
The slideshow can be navigated using the directional arrows or swipe on mobile devices and has an autoplay with stop at last slide option.

Image Album

This has the same layout and functions as the portrait image and slider except that the image with the overlay caption opens a lightbox slideshow on click or tap.
The slideshow is navigated using directional arrows or can be swiped on touch devices. The images have captions and there is a slide counter.

Landscape Slider

The grid has 8 columns and 3 rows. The images span 6 columns and the text module 3 columns so that they overlap. The image can be positioned left or right in the grid and the slider can either be full width or be centered with a maximum width setting. The text section can animate in from four different directions with a different one for each slide.

Toolbar

The toolbar has a phone number which switches to a phone button, an email link and a popup icon link bar which can be configured to open internal or external pages.
The toolbar can be positioned on its own or can overlay the bottom of the item above it - such as a hero image - by checking a box.

© EverWeb Widgets -