EverWeb Widgets

Responsive Grid Widgets [1]

Hero images with overlay items, auto image grid and gallery and responsive overlapping items for cutting edge web page designa..
Click any widget icon to see the demo …

View CartAdd To Cart

Hero Image Grid Layout

This is an introduction to the CSS Grid Layout Module. The widget creates a hero image, inserted in three sizes width three overlay items - heading, text block and link.
The widget has an overlay grid that can be turned on to make learning how to position grid items visual rather than theoretical.

Hero Switch Image

Hero images which have a responsive width and a fixed height look great when viewed on desktop browsers but not so good on mobile. On mobile phones, the image is so squashed it is almost unrecognisable.
In this case, the image switches from fixed height on computers to responsive height on touch devices to give a much better viewing experience.

Hero Image

The image is inserted in three sizes - one for each device type. The overlay has three optional items - a heading, text module and a CTA style link which can be configured to open internal or external pages and in a new window.
These items have a background with adjustable color and opacity and can animate in.
On computers, the image can be fixed in position by checking a box to allow the items below to scroll over.

Action Hero

The hero image has an animated overlay with a heading, a text block and a CTA style link tab. These items are positioned over the image by defining their position as grid column and grid row.
The image height can be fixed or made 100vh to fill the browser or device window.
The main heading can have an underline animation and the link tab can have a draw box animated border.

Action Switch Hero

This has the same functions as the Action Hero widget and adds the function to switch the image from full width, fixed height on computers to responsive width and height on tablets and phones.
The CTA link in both the Action Hero and the Action Switch hero can be used as a smooth scroll down in conjunction with a suitable anchor widget.

Splash Overlay

Splash pages are usually avoided due to text content and there is nothing much for the search engines to index. This widget solves the problem by animating the splash item in over the page content area on page load and then animating out on click. Since it is an overlay - rather than a separate page - all the main page content is available for the search engines to crawl through and index.

Image Auto Fit Grid

This is a grid of thumbnail images with overlay captions and the option to configure the images as links to internal or external pages with a new window option.
The widget uses the CSS grid "minmax" selector to automatically define the number of items per row for each device type.

Image Auto Fit Gallery

This is a gallery version of the Auto Fit Grid widget. The thumbnail captions can appear on hover when viewed on computers and the large image caption is derived from the thumbnail's alt text attribute.
Clicking or tapping any thumbnail opens the responsive lightbox slideshow which has a slide counter and directional arrows which can be hidden on touch devices to be replaced by swiping.

Alternating Grid

When viewed at wide browser/device screen widths, the grid has images to one side and a text block on the other. As items are added the positions of the image an text block are alternated.
The text block has options for a heading, text and a CTA style link and the items are vertically center to keep them in line despite varying content and screen width.

Hero Stack

This widget creates images with overlapping text blocks which are gaining popularity in leading responsive designs.
The number of grid columns and rows can be configured to create the required positions for the text and image and overlay amount for the text.
The text item can overlay horizontally or vertically

Overlapping Images

For those used to conventional responsive web design techniques, these layout may see complicated to achieve if not impossible.
Using the CSS Grid Layout Module allows us to overlap items in the same way that drag and drop fixed width design did except the items are also responsive.

Text & Graphiic

The widget creates inline items which has an image and a text block. The text can overlap the image in various ways and can be located left or right.
The number of columns and rows in the grid can be changed to suit the situation and the items are set in place using the start column or row and the column or row span.

© EverWeb Widgets -