EverWeb Widgets

Widgets
Info^

Search EverWeb Widgets …

Responsive Grid Row Widgets [1]

These responsive grid row widgets create inline items using the CSS Grid Layout Module …
Click any widget icon to see the demo …

View Cart Add To Cart

This widget uses the power of CSS Grid Layout to create a Google style random image grid with only a few lines of code. It allows users to have control over creating a varied collage type layout independent of the actual size and aspect ratio of the images. It doesn't really matter what the aspect ratio of the original image is since the grid items use the object-fit property to make sure the images fit into the allotted space.

When viewed on a computer, the carousel scrolls by hovering the hotspot to the right. Removing the cursor from the hotspot will stop the carousel and hovering the left hotspot will reverse it.
On tablets and mobile phones, both auto and hotspot scrolling are disengaged to be replaced by touch scroll (swiping).

The Easy grid allows the user to insert images with different sizes and aspect ratio and convert this messy layout into a uniform grid by checking a box.
The grid columns use minimal to automatically arrange the number of items per row for each device type without using media queries.

The hero image is inserted in three different sizes - one for each device type - and are inserted in the background. The overlay items are a text block and a 3D image which can animate in.
The overlay image animates in and is skewed to give the illusion of 3D. There is an option for adding a logo which can be placed anywhere.

The hero image has an overlay with a heading with optional logo and a vertical navigation. The overlay uses a CSS grid layout to position the heading and navigation.
The vertical navigation can be positioned left or right when viewed on computers and is centered when viewed on mobile phones.

The hero image is inserted in three different sizes - one for each device type. The images are inserted using the HTML5 <picture> element rather than as background images so that it can be fixed for scroll over on imobilr
The heading, text block and link are positioned using an invisible grid overlay by inserting row and column numbers and column span.

The hero image has a text block with an h1 heading and text. The navigation is vertical and the links can be configured to open internal or external pages.
Each navigation link consists of a PNG icon image and link text with a background that is adjustable for color and opacity and border radius.

The hero image has a heading, text block and an optional. The image is inserted in 3 sizes for the different device types using the <picture> element.
The typing text is contained in a hidden <div> and animated using Javascript. The typing speed can be adjusted using a slider - lower is faster.

The hero image has three overlay items - an h1 heading, a text block and an optional CTA style link tab. There is an option for an absolutely positioned logo.
The text block has a heading and an HTML5 description list. The list items rotate and there is the option to set alternate colors.

The layout consists of three HTML5 <figure> elements with an image and optional overlay, vertically centered caption.
Each item is placed in a column of a three column grid and made to span 2 columns. The overlap is adjusted by varying the grid column gap using a slider.

This is a two column grid layout where the image is in one column and the text container in the other when viewed on wider screens. On narrower width screens, the layout becomes one column, the image remains in row one and the text is in row two.
There is an optional link which can be configured to open internal or external pages.

The widget inserts two images and two HTML5 article elements with the images on the left and right and the articles stacked in the center. On narrower screens the items become stacked.
The individual items use the align-self property so that they can be postitioned at the top, center or bottom of the container.

© EverWeb Widgets -