Section Layout
A range of content blocks that respond to the user's device and used to build a 'tree' of content blocks. Generic Section Layouts have a section to build blocks in and a range of settings to modify the layout and the content blocks inside.
There are 5 Section Layouts to choose from:
Settings
Section Layouts have the following settings:
- Hide - hides the whole page layout together with the page components inside.
- Alternative Heading Color - changes the heading colors inside the Section Layout to an accessible alternative color.
- Mobile Content Direction - swaps page components sort order inside the Section Layout on mobile devices (device width less than 992px).
- Content Vertical Position - sets the vertical position of the content inside the Section Layout.
- Section Layout Width - sets the Section Layout width to build page components in.
- Section Background Color - sets the Section Layout color to be shown on the page.
Alternative Heading Color
Toggling this setting will change the color of all the headings inside the Section Layout to an accessible alternative color. Examples below showcase different heading colors inside different color Section Layouts with Alternative Heading Color setting enabled.
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
Alternative Heading Color
Standard Heading Color
! No Paragraph Text Should be Placed Inside the Teal Layout - only Headings !
Alternative Heading Color
! No Paragraph Text Should be Placed Inside the Teal Layout - only Headings !
Mobile Content Direction
Toggling this setting will swap page components sort order inside the Section Layout on mobile devices (device width less than 992px). This has no impact on desktop devices and One Column Section Layout. It is useful when content is built in a zig-zag pattern on desktop and the content should be consistent on mobile devices without having a zig-zag pattern in a column.
An example below showcases the functionality of the toggle (change the browser size to see the results).
First example has the toggle turned off
Once the device width goes to below 992px, the Column 1 stays at the top and Column 2 goes below it.
Column 1
Column 2
Second example has the toggle turned on
Once the device width goes to below 992px, the Column 2 stays at the top and Column 1 goes below it.
Column 1
Column 2
Content Vertical Position
Sets the vertical position of the content inside the Section Layout. Active only when one of the columns has more content than the other. By default, the content will be centered in the center.
Top Content Vertical Position
Top
Content
Vertical
Position
Center Content Vertical Position
Center
Content
Vertical
Position
Bottom Content Vertical Position
Bottom
Content
Vertical
Position
Section Layout Width
Sets the Section Layout width to build page components in.
Extra Narrow Section Layout
Column
Narrow Section Layout
Column
Section Background Color
Sets the Section Layout color to be shown on the page.
White Section Layout
Gray Section Layout
Dark Teal Section Layout
Bright Teal Section Layout
Green Section Layout
Yellow Section Layout
Blue Section Layout
Teal Section Layout
! No Paragraph Text Should be Placed Inside the Teal Layout - only Headings !
Padding Settings
Padding settings are a way to configure the empty space or in other way called padding around the Section Layout. Padding settings are split into two categories - Mobile Padding and Desktop Padding. These groups have a number of settings to modify the Section Layout padding.
Mobile Padding
Section Layouts have the following mobile padding settings:
- Mobile Custom Padding - activates custom Section Layout padding on mobile devices (device width less than 992px). Without this toggle enabled, any changes done to Mobile Top Padding and/or Mobile Bottom Padding won't have any effect.
- Mobile Top Padding - changes the Section Layout top padding.
- Mobile Bottom Padding - changes the Section Layout bottom padding.
Examples below showcases the padding functionality on mobile devices (the padding on desktop devices is left unchanged as the Desktop Custom Padding setting is not enabled) - change the browser size to see the results:
Section Layout with Mobile Padding enabled and Top and Bottom Padding set to 6
Section Layout with Mobile Padding enabled and Top and Bottom Padding set to 0
Section Layout with Mobile Padding enabled, Top Padding set to 6 and Bottom Padding set to 0
Desktop Padding
Section Layouts have the following desktop padding settings:
- Desktop Custom Padding - activates custom Section Layout padding on desktop devices (device width more or equal to 992px). Without this toggle enabled, any changes done to DesktopTop Padding and/or Desktop Bottom Padding won't have any effect.
- Desktop Top Padding - changes the Section Layout top padding.
- Desktop Bottom Padding - changes the Section Layout bottom padding.
Examples below showcases the functionality on desktop devices (the padding on mobile devices is left unchanged as the Mobile Custom Padding setting is not enabled):
Section Layout with Desktop Padding enabled and Top and Bottom Padding set to 6
Section Layout with Desktop Padding enabled and Top and Bottom Padding set to 0
Section Layout with Desktop Padding enabled, Top Padding set to 6 and Bottom Padding set to 0
Previous section:
Section Layouts
Next section: