EverWeb Widgets

Responsive Grid Widgets [2]

Responsive widgets using the CSS Grid Layout module for better page design and performance with less code.
Click any widget icon to see the demo …

View CartAdd To Cart

Block Text Content

The blocks use a two column grid layout so that the items can be positioned and vertically centered easily. The image has an alt text attribute and can be placed left or right in relation to the text when viewed on wider screens. At screen widths below the break point, the text block is positioned below the image.
The content is a heading, text and a CTA style ink tab.

Block List

This version of the Grid Block is used for showing a product or illustrating a service.
It has a heading and a list for features. The list can be styled with disc, square, letters, numbers etc which can be inside or outside. There are controls for adjusting the list item inset and their vertical spacing.

Block Specification List

This version of the Grid Block is used for listing specifications. There is a heading and a two column list - one for the item and the other for the info or specification.
Using a grid layout allows the two items to remain vertically centered even when one has more content than the other and then readjust when the items are stacked on narrower device screens.

Draw Info Links

The grid items have an image with alt text, an optional heading, a description and a box link tab. The links can be configured to open internal or external pages with a new window option.
The links have a border animation which is drawn using CSS and animated using Javascript. The border can be drawn once or every time the item enters the viewport

Info Image Grid

Each grid item has an image and an info tab link and options to add a heading and description. The info tabs can be configured to open internal or external pages with a new window option.
The image can be created round by checking a box and have a hover scale animation when the page is viewed on computers.

PNG Icon Grid

The grid can have up to 48 items and the number of items per row set for each device type. Each item has an image, caption and text description.
The items can be created as links to internal or external pages and open in a new window if required. The links can show a title on hover when viewed on computers.

Price Comparison

The price comparison module is used for selling software and/or services with different features and price. On wider screens, the three items are inline with the center one scaled up. They stack vertically on screen widths below the break point. Each item has options for a heading, text block, a price band, a second text block and an info link that can open internal or external pages.

Slide Over Info

When viewed computers, the text block and the image sit side by side. At the break point, the text block slides over the image with a transparent background.
The image can be situated to the left or right and has responsive width and fixed height. When viewed on mobile phones in portrait mode, the image becomes viewport height and fills the height of the device window.

Star Reviews

The widget creates a responsive grid for displaying customer reviews of a product or service. Each item has a heading, rating stars, text and a "Show More" button.
The stars are created using CSS and the ratings range from zero to 5 in half star increments. The text shows a preset number of characters and then reveals the remainder when the tab is clicked.

Testimonials

This grid can hold a large number of customer testimonials in a small space using a "Show More" function. The number of items to show and items to load per click can be set for computer and mobile.
The customer's input is displayed in the HTML5 <blockquote> element which can be enclosed in fancy quotes and followed by a "signature" which use Google hosted fonts.

Text In Images

This is one of these layouts where you ask, "How did they do that ?". The centered text block is surrounded by images when viewed on wider screens, sits below the first four on tablets and below the first two on phones.
The text block can actually be moved to any point in the grid by specifying which column and row it should appear in and how many columns/rows it should span.

Text In Images 2

CSSS grid makes "impossile" responsive layouts possible. The layout has four images with two centered text blocks.
On tablets, the image pairs align themselves above and below the text and on mobile phones, all the items are stacked vertically.
There is an option to add a background image which disappears on mobile phones.

© EverWeb Widgets -