Four Columns

Each column can have an image with alt text. a heading, a block of text and a CTA style link. The links are positioned absolutely at the bottom so that they remain inline despite varying column content.
The columns are in line when viewed on wider screens. They switch to two pairs of columns on tablets and then stack vertically on mobile phones.

Three Columns

Each column can have an image with alt text. a heading, a block of text and a CTA style link. The links are positioned absolutely at the bottom so that they remain inline despite varying column content.
The columns are in line when viewed on wider screens and then switch to two columns side by side and one below on tablets and then stack on mobile phones.

Column List

Using auto columns for fairly long lists on responsive pages overcomes the appearance problem when there a are a large number of short list items. The list items automatically fill the columns as they are added.
The number of columns can be reduce for tablet users and then the layout is switched to one column on mobile phones.

Sidebar

The layout consists of a main section with an image, text and optional and a sidebar with a heading, image, text and a link. On computers and tablets in landscape mode, the main and sidebar sit side by side. As the viewport width is reduced, the layout switches at the break point so that both elements become full width and the sidebar slides below the main article.

Sidebar Navigation

The container is centered in the browser with a maximum width setting. It has its own controls for background color and opacity and for the grid gap and vertical spacing. The main section is responsive and the sidebar has a fixed width when viewed on wider screens. Below the break point the navigation becomes full width, responsive and positions itself above the main section.

Sidebar News Items

Display a responsive width main item with heading, optional image with alt text, text description and an optional link with a fixed width sidebar.
The sidebar can have up to 48 items - each with an image and options for a heading, date, text description and a link.

Sidebar Info

The widget creates a main section with a heading, optional image, text and an optional image and a sidebar. The sidebar is the same height as the main section and the overflow scrolls to reveal the items.
Each sidebar item has a heading, text and a CTA style link which can be configured to open internal or external pages and in a new window if required.

Sidebar Grid

The widget creates a responsive width, fixed height hero image and grid sidebar. At narrower browser/device widths, the sidebar switches from two columns to one column and then slides below the image on small mobile devices.
The grid sidebar items can be used for latest news items, links to products or pages, blog posts or podcast episodes etc.

Sidebar Hero & Text

The item has two columns - one with a fixed height image and the other with text. It can either be full width to fill the browser or centered with a maximum width
On wide screens, the image and sidebar sit side by side. If the text overflows the container's height it can be scrolled. On screen widths below the break point, the text sits below the image and becomes full height.

Sidebar Slide Navigation

The widget inserts a hero image with two overlays - one for the h1 heading and an optional logo and another for the sidebar navigation.
As the browser/device window decreases, the sidebar navigation disappears to be replaced by a "hamburger" icon at the top right. Clicking the icon slides the menu out from the left.

Split Sidebar

The main section has an optional image with alt text, a heading, text and an optional CTA Style link.
The sidebar has a vertical navigation and an "Ad" block which has an optional image, a heading, a span for price/date info, text and an optional link.
The navigation can be configured to open internal and external links.

Sidebar Sticky Ads

The main content has an image with alt text, an h1 heading, a text block and an optional CTA style link. The sidebar has an optional h1 heading with scroll indicators and ad blocks which contain an image, heading text and CTA style link.
The sidebar can have an auto height so that it shows all the content or a fixed height with the overflow set to scroll.

EverWeb Widgets

Columns & Sidebars