EverWeb Widgets

Portrait Image

The grid layoutin this example has six columns. This is a text div vertically centered inside an <article> element. It starts in column 1 and spans 4 columns.
The image is in a <figure> element which starts in column 4 and spans 3 columns.

Panel

Text Content Spacer

The item can be used as a spacer or a text section with a heading, text and optional link.
In this item the grid has 12 columns and the text starts in column 6 and spans 7 column above the break point.

Alternative Layout

Portrait Image

The grid layoutin this example has six columns. This is a text div vertically centered inside an <article> element. It starts in column 3 and spans 3 columns.
The image is in a <figure> element which starts in column 1 and spans 3 columns.

Slider

Overlay Image Album

This is a text div vertically centered inside an <article>. The article starts at column 1 and spans as many rows as required - in this case 4.
The image is in a <figure> element with an overlay caption at the top or bittom. It spans three rows and opens the lightbox slide on click.

Slideshow

Items

The RGL Combo Header widget has a fixed position in this case and appears at the top of the page and sticks. It combines a logo with link option, a phone number which switches to a phone icon on mobile phones, the h1 heading and a drop down navigation. In this casse the background opacity slider has been set to about 50%.
The header can scroll with the page content as can be seen on the previous page.
Overlay
The overlay items are set up in a container with a text block and a media item. The media can be an image, portrait slider or a lightbox image album. These can be positioned usinf the values for column start and column span.
The overlay is created by applying a negiative top margin to the media container when the page is viewed at screen browser/widths above the break point.
The item above could be a hero image, a spacer - with or without a background image - or the text spacer shown further up this page. The text widget allows the content to be offset to one side to make space for the media item.

Toolbar

With responsive design, items like phone number/phone call button, social media links, email icon etc need to be organised and a toolbar is a good option.
In the toolbar below, the grid has 3 columns …
Column 1 has the phone number which switches to a "Call Me" phone icon on phones.
Column 2 has an Android style "open" icon. The links slide up on click and use Ionicon icons. The links can open internal or external pages and have a new window option.
The email icon is in column 3. It has basic spam protection and a field for the email subject.

Tel: 012 345 6789