EverWeb Widgets

Responsive Grid Widgets [5]

Responsive widgets based on the CSS Grid Layout Module for better responsive page design using less code.
Click any widget icon to see the demo …

View Cart Add To Cart

The full width, fixed height hero image has two optional headings and a centered overlay image that animates in with a spin. The heading can animate in up or down.
The spin animation time and delay are set in seconds and the angle in degrees. The angle can be set to a negative value by checking box to reverse the rotation direction.

This is a two level navigation menu which opens on clicking the "hamburger" icon. The icon can be placed relative to the top and right and can scroll with the page content by choosing "absolute" position or made sticky by choosing "fixed" position.. The navigation can have between two and eight top level links and any amount of directories - each with up to seven links.

Each grid item has a header with a heading and a chevron down icon. When the header is clicked or tapped, the content is revealed and the icon switches to a chevron up. When an item is opened, a previously opened one will close.
The content has a heading, text block and optional CTA style link.

The Hero Switch Scale widget not only switches from fixed height above the break point to responsive below it but also has a scale animation. There is a choice of animation type and the iteration count can be set to a fixed number or infinity. The overlay has controls for adjusting the color and its opacity and options to add a heading at the top and a CTA style link at the bottom.

The image appears with a twist animation on page load. This is a custom animation which is create by scale and skew transforms with a cubic-bezier timing function.
The overlay has a grid layout with five columns and three rows so that the items can be positioned where required. There is an h1 heading, a text block and an optional link tab.

The number of items per row can be specified for computer, tablet landscape, tablet portrait and mobile phone. The item spacing can be adjusted as well as the top/bottom and left/right padding.
The overlay can appear on hover or on page load when viewed on computers. It has a caption, a line separator and a description. There is a control for adjusting the vertical spacing of the items. The link icons are optional.

This is a lightbox gallery version of the previous widget were the link icon opens a lightbox slideshow rather than an internal or external page.
The lightbox slideshow has animated image captions and a slide counter. Navigation is by directional arrows or by swiping on touch devices.

This versatile image grid has functions to sort the items and to search them for keywords. The grid can have a fixed height to allow it to scroll or an auto height to have all the items in view.
The search function finds keywords in the item heading and displays the results. The entries can be sorted alphabetically - rather than by inserted order - by checking a box in the widget settings.

This image grid is ideal for ringing the changes. The order of the images in the grid is shuffled every time the page is loaded in the browser.
The captions and link icons are in an overlay at the bottom of the image and can appear on hover when viewed on computers. The first image in the grid can be showcased by making it larger than the rest.

This is a lightbox gallery version of the previous widget were the link icon opens a lightbox slideshow rather than an internal or external page.
The lightbox slideshow has animated image captions and a slide counter. Navigation is by directional arrows or by swiping on touch devices.

Each item in the image grid has a chevron down icon at the upper right. When clicked or tapped, an info overlay slides down. The overlay has a heading, paragraph and an optional link.
The links can be turned on individually and can be configured to open internal or external pages and in a new window if required.

The responsive image is inserted in two sizes and has an overlay into which up to twelve markers can be inserted. The markers can have ID numbers or letters which can show on page load or hover.
The markers are positioned in the X and Y axis using percentage values so that they maintain their position when the browser/device width changes.