Creating a New Layout
This video illustrates the steps of effectively designing a new layout for a section.
Summary
1. To add a section from the Page editor, scroll down to the Body field and click Add content and then select Section.
2. This opens up the Section editor, type in a name for the section. There are two options for Container, Full width and Responsive.
The Full Width container consistently maintains a maximum width of 100%, while
Responsive utilizes the framework's container, resulting in the section's content having a fixed maximum width determined by the screen size.
Choose Responsive.
3. Within section, you can assign a layout to control how the content will be visually presented.
Layout lets you lay content out in rows and columns and control where and how they're positioned.
To add a layout, click Add content. This opens up the Layout editor, click Create new layout.
4. Enter a name for the new layout. This creates a basic layout that can be customized. Click Edit layout. Initially, the new layout only contains two slots but can accommodate more. To include additional slots, click Add Item to insert one more slot.
5. Select Slot 1. Each slot's settings are divided into breakpoints.
Breakpoints are utilized to adjust the styling of a page according to the screen width of the device it's viewed on.
XS and SM represent mobile devices and tablets, while MD to XL includes laptops and other larger screens.
In this tutorial, the three-column layout will only be displayed on large screens, while a three-row layout is designed for mobile and tablets. To achieve a three-column layout, the span for MD needs to be defined.
The Span is used to specify how many columns a cell should cover. A full-width column span is 12. To equally divide the column into a three-column layout, set the Span under MD to 4. Repeat steps for Slot 2 and 3.
6. The left window illustrates a three-column layout, each spanning four columns, as it appears in MD to XL.
Choose XS to observe its display on mobile and tablets.
Observe that when XS is selected, the preview reverts to a three-row layout, as the span for both XS and SM is set to 12.
7. Offsets. Margin and padding properties have been utilized to position content on the page.
Offset is another property specifically designed to achieve similar results, which we will discuss in this tutorial. It governs the positioning of the content.
In this demonstration, we have a four-column span that needs to be centered.
Assign a value to the Offset to move the slot to the center. The preview window indicates that the slot is shifted 4 spans to the right.
When the offset properties are not specified, absolutely positioned elements remain in their original position.
8. The Order property determines the visual order of contents.
Choose Slot 3 to adjust its order.
Orders can also be specified per breakpoints. Choose MD and modify the order from 3 to 1.
This action places Slot 3 to the top.
9. Select XS in the preview.
In XS, Slot 3 maintains its position on the bottom order while it remains at the top for MD to XL.
10. Padding is use to create space around within an element.
With layout, there's full control over the padding. Properties exist for setting the padding for each side of an element: top, bottom, left, and right.
It can be set on all four sides of an element simultaneously.
Select Slot 3 to add padding.
When one value is specified, it applies the same padding to all four sides.
When setting padding on XS, all breakpoints inherit the same value automatically unless specified.
To set padding for a specific property, click on the icon to expand the settings.
11. Visibility, in the layout editor, is a property that determines whether a specific element is visible or not. Visibility can also be defined per breakpoints.
Modify the visibility of Slot 1 for XS from Visible to Hidden.
Slot 1 is automatically moved to the bottom and labeled as currently Hidden.
Select MD view to observe how Slot 1 will appear on larger screens.
In MD to XL, Slot 1 remains visible.
In this scenario, mobile users won't be able to see the content in Slot 1, while visitors using laptops and larger screens will see the content.
12. Click Grid Settings
The Gap property defines the size of the gap between the rows and between the columns in the layout.
Similar to padding, Gap can be set collectively or individually for each property.
Click on the icon to expand the setting.
For the XS Vertical property, set the gap to 3 to add spaces between rows.
Click MD to define the Horizontal gap for columns.
Set the Horizontal gap on MD to 3.
Observe the addition of a gap between row and columns.
13. In this section, you can also specify the Layout name. Additional details for the layout can be added under Layout Description.
After making the layout adjustments, click Save.
Click Confirm.
14. Click the back button to go back to the Section editor.
Add in your content
On the right is an example of a 3-column layout designed for medium to extra-large screens (MD to XL). Select XS to view how the layout is displayed on mobile and small screens.