EverWeb Widgets

Responsive Columns & Grids

Responsive widgets for creating two, three and four column layouts, a scrolling sidebar and grid items for displaying images and info.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View Cart Add To Cart

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Two columns are displayed side by side one computers and one above the other on tablets in portrait mode and mobile phones. Each column has a heading, image, text and a CTA style link. The links can be configured as internal or external and open in a new window if required.
The column widths are adjusted using a slider which adjusts the width of the right column in relation to the left.

The columns are of equal width and each has a heading, optional image, text and an optional CTA style link which can be configured to open internal or external pages and in a new window if required.
The columns sit side by side when viewed on computers and tablets in landscape mode. On tablets in portrait mode and smart phones, they stack vertically

The four equal columns have the same content as the other column widgets with options for a heading, an image with alt text, text description and a CTA link.
On computers and tablets in landscape mode, the columns sit side by side. On tablets in portrait mode, the last two columns slide below the first two and then they all stack vertically on mobile phones.

The main section has options for a heading, image and text. The height of this section determines the height of the item
The sidebar can accommodate any amount of items with a heading, text and link. When these items overflow they are hidden and accessed by scrolling when viewed on computers.

The widget creates an image grid with up to 48 equal size images with alt text and a caption below the image. The caption can extend to two or more lines and the images can be hyperlinks with a link icon showing on hover on computers and on page load on touch devices. The spacing between the grid items is adjustable and the number of images per row set for each device type.

The widget creates an image grid with up to 48 equal size images with alt text and an overlay caption. The captions appear on hover on computers and on page load on touch devices. The images can be hyperlinks to an internal or external page and open in a new window
The spacing between the grid items is adjustable and the number of images per row set for each device type.

The widget creates an image grid with up to 48 equal size images with alt text and a transparent overlay with centered caption. The overlay appears on hover on computers and on page load on touch devices. The images can be hyperlinks to an internal or external page and open in a new window
The spacing between the grid items is adjustable and the number of images per row set for each device type.

Drag a bunch of images with different sizes and aspect ratios onto this widget and it will create a justified grid. The size of the images is set by the value for row height and both the spacing between the images and the spacing around the ground can be adjusted. The images can be hyperlinks to internal or external pages and have an overlay caption which is derived from the alt text attribute.

Each grid item has a Font Awesome icon which can be configured as a link, a heading and descriptive text. The links can be internal or external with a new window option.
The spacing between the grid items is adjustable and the number of images per row set for each device type. The grid items can have a different background color from the container's background.

Each item in the info grid has an image, heading and text description. A square image can be made round with a box shadow and a the image can have a scale animation when hovered on computers.
The info link is created from an icon which is positioned in the top right corner. It can link to internal or external pages and open in a new window if required.

Each item in the product grid has a heading for the product name, an image, a text description and a CTA style link to a page with more info.
The heading can have a contrasting background color and the grid items can be spaced and have a border with radiuses corners if required.

The text in the testimonial items is wrapped in quotes. These quotes, and the "signature", can have a contrasting color. The widget allows the use of three different Google hosted fonts - one for the text, one for the fancy quotes and a hand writing text for the "signature".
The grid can have an optional heading and a bottom link to more testimonials.