Section Layouts
There are 8 different Section Layouts available to build content pages with. We can use as many different types on a page as we want to build a 'tree' of content blocks. These blocks respond to the user's device, so there's no need to create separate desktop and mobile websites - building just one will look good regardless of what the user is accessing it with. Page components and content inside the Section Layouts is displayed in a row on desktop devices (device width more or equal to 992px) and switches to displaying it in a column on mobile devices (device width less than 992px).
One Column
A content block that spans the entire page's width.
Column
One Column with Background Image
A content block that spans the entire page's width, with an image set as the background.
Two Column
A content block that has two columns displayed side by side on desktop and tablet landscape mode, or two blocks one above the other on tablet portrait mode and mobile devices.
Column
Column
Two Column with Background Image
The same layout as Two Column, but with an image set as the background.
Two Column Asymmetric Right
A content block that has two columns, a small one to the left, and a large one to the right, displayed side by side on desktop and tablet landscape mode, or two blocks one above the other on tablet portrait mode and mobile devices.
Column
Column
Two Column Asymmetric Left
The same layout as Two Column Asymmetric Right but with the smaller column on the right.
Column
Column
Three Column
A content block with three equal size columns that are displayed side by side on desktop and tablet landscape mode, or three blocks one above the other on tablet portrait mode and mobile devices.
Column
Column
Column
Content Container
A content block that is used to set a background color behind the Page Components inside it. This layout can only be created inside other layouts. An example below uses Two Column Layout with Content Containers inside of it.
Column
Column
Table below displays Content Container availability inside every Section Layout.
✔ - available, ◍ - partially available on some layout configurations
Previous section:
Footer
Next section: