Layout Field

The page content is created by first selecting a Layout in which you can place the Blocks you would like to use. You can choose from one to three columns in a single row or multiple rows. There are settings auto columns and the use of a panel or background image.

Layout examples

Two columns are a fixed layout, they also display as two columns on smaller screens. Three display as two columns on smaller screens.

Two columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Satellite image
photo: usgs

Two columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Satellite image
photo: usgs

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Three columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos delectus, pariatur voluptates mollitia.

Auto columns

Auto columns will fill columns automatically with a minimum width of 140 px.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Auto columns

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Background image

In the layout settings you can select the use of a ‘panel’, a grey box, or a background image. The opacity of the overlay, for the background image, can be adjusted with a slider.

Background image

  • Lorem ipsum dolor sit amet

  • Amet consectetur adipisicing

  • Dignissimos delectus pariatur

  • Consectetur adipisicing

Background image

  • Lorem ipsum dolor sit amet

  • Amet consectetur adipisicing

  • Dignissimos delectus pariatur

  • Consectetur adipisicing

Background image

  • Lorem ipsum dolor sit amet

  • Amet consectetur adipisicing

  • Dignissimos delectus pariatur

  • Consectetur adipisicing

Background image

  • Lorem ipsum dolor sit amet

  • Amet consectetur adipisicing

  • Dignissimos delectus pariatur

  • Consectetur adipisicing

Layout

The Panel preview for auto columns doesn’t correspond with the front end display. Settings for a background image and panel currently don’t get a preview in the Panel.

Options

One, two and three columns in single or multiple rows, (four columns with auto columns setting).

Settings

Background image with overlay slider, panel, auto columns and class attribute.


Lighthouse for this page

Tooltips

Please turn on javascript

1) Lighthouse

Mobile Desktop
Performance 100 100
Accessibility 100 100
Best Practices 100 100
SEO 100 100