The grid layout in 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.
The grid layoutin this example has 7 columns. This is a text div vertically centered inside an <article> element. It starts in column 4 and spans 4 columns.
The image is in a <figure> element which starts in column 1 and spans 4 columns.
![Slide [1]](ewExternalFiles/soa-1.jpg)
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.
![Slide [2]](ewExternalFiles/soa-2.jpg)
![Slide [3]](ewExternalFiles/soa-3.jpg)
![Slide [4]](ewExternalFiles/soa-4.jpg)
![Slide [5]](ewExternalFiles/soa-5.jpg)
![Slide [6]](ewExternalFiles/soa-6.jpg)
The first item on the page is the RGL OL BG widget that creates the page background. Since a full size background image shouldn't be used on responsive pages, this one has its position fixed and is set to fill the viewport height so that the content scrolls over it.
The image is inserted in two different sizes for computers and mobile devices. The images used in this demo were resized to 1200 x 800px (120KB) and 600 x 400px (54KB) before importing into EverWeb.
Header
The next on the page is the RGL OL Header widget which is relatively positioned and will appear at the top of the page and scroll with the rest of the content. 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 zero.
The header can also be fixed in position if required as can be seen on the next page.
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.
Overlay
The overlay is created by applying a negative 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.
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.
