Learn to customize your Section Layout Settings to optimize your users' experience when viewing your section on desktop and mobile devices.
In this article:
- What are section layout settings?
- Customizing the section desktop layout
- Customizing the section mobile layout
What are section layout settings?
Section Layout Settings are the Desktop Layout and Mobile Layout Settings in each Section:
Your Section Layout Settings adjust the content positioning, padding, and alignment to optimize your users' experience when viewed on different devices.
Section Layout Settings give you the power to design beautifully designed and organized Sections on your pages built with Kajabi.
Customizing the section desktop layout
To access the Section Desktop Layout Settings:
- Open the Website tab from the Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- Navigate to the sidebar editor and select the Section you wish to customize.
- Navigate to the Section Settings and click Desktop Layout:
Desktop Layout Settings
Customize your Desktop Layout Settings to optimize your users' experience with the Section when viewed on a Desktop device.
Hide Section
Hiding a Section in your Desktop Layout Settings will make the specified Section invisible (or hidden) to users viewing the Section on a Desktop device.
Test out this setting by simply checking and unchecking Hide Section when viewed with the Desktop Preview (located in the bottom right corner of the Template Editor) and watch as your Section disappears and reappears before your eyes:
Desktop Section Padding
Customize the padding inside the Section with your desired values. Changing your Section Padding will shift all Blocks in the Section to your desired appearance.
To reset your padding values to the default setting, simply delete your custom value:
Vertical Alignment
Selecting a vertical alignment (Top, Center, Bottom) in a Section vertically aligns all Blocks in the Section to the tallest Block in its row:
Horizontal Alignment
The Horizontal Alignment setting shifts the Blocks in the Section to align horizontally with the 12-column grid.
The Horizontal Alignment setting can be set to Left, Center, or Right aligned or create Space Between or Space Around all Blocks in the Section:
Equal Height Blocks
Enable Equal Height Blocks in your Section Desktop Layout Settings to adjust all Blocks in the Section to align together at the top of the Section. Enabling this feature will adjust the Blocks to be equal height and align together at the top:
Learn more about creating equal height blocks.
Make Section Full Width
Enabling this setting will cause the Section to fill the full width of your users' browser windows. This will adjust all content within the Section to adjust to the size of the browser window:
Make Section Full Height
Similar to making the Section Full Width, enabling this setting will cause the Section to fill the full height of your users' browser windows:
Customizing the section mobile layout
To access the Section Mobile Layout Settings:
- Open the Website tab from the Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- Navigate to the sidebar editor and select the Section you wish to customize.
- Navigate to the Section Settings and click Mobile Layout:
Mobile Layout Settings
Customize your Mobile Layout Settings to optimize your users' experience with the Section when viewed on a Mobile device.
Hide Section
Hiding a Section in your Mobile Layout Settings will make the specified Section invisible (or hidden) to users viewing the Section on Mobile devices.
Test out this setting by simply checking and unchecking Hide Section with the Mobile Preview (located in the bottom right corner of the Template Editor) and watch as your Section disappears and reappears before your eyes:
Mobile Section Padding
Adjusting the Section Padding changes the appearance of the padding inside the Section when viewed on Mobile devices. Change the Section Padding to shift the Blocks in the Section to your desired appearance.
To reset your padding values to the default setting, simply delete your custom value:
And that's how to customize your Section Layout Settings! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!
