Customizing Section Layout Settings

David Giali

Updated

Learn to customize your Section Layout Settings to optimize your users' experience when viewing your section on desktop and mobile devices.

To learn how to edit the layout of your Blocks on a page, make sure to check out this article.

In this article:


What are section layout settings? 

Section Layout Settings are the Desktop Layout and Mobile Layout Settings in each Section:

42C1EF4C-8FDC-49CC-8D8D-CC5CFCA9DD92.png

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 either Website Pages or Landing Pages.
  • 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:

Tip:
Create two duplicate Sections, one designed specifically for Desktop viewing and the other for Mobile viewing. Then, select Hide Section in your Desktop Layout Settings for the section optimized for Mobile viewing. Repeat for the Section optimized for Desktop viewing. This will ensure that your users view your Section exactly as you intend regardless of the device used.

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:

Tip:
Enable Grid (as shown above) in your Design Tools to view how your Blocks adjust in reference to the 12-column grid.

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.

Note:
Enabling Equal Height Blocks will not change the height of your uploaded images, in order to retain the original image ratio. Instead, each image will vertically align to the top of the tallest Block in its row.

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 either Website Pages or Landing Pages.
  • 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:

Tip:
Change your Template Editor Preview to Mobile (located at the top of the Template Editor) when customizing your Mobile Layout to see exactly how your page will appear when viewed on Mobile devices.

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:

Tip:
Create two duplicate Sections, one designed specifically for Mobile viewing and the other for Desktop viewing. Then, select Hide Section in your Mobile Layout Settings for the Section designed to be viewed from a Desktop device. Repeat for the Section optimized for Mobile devices. This will ensure that your users view your Section exactly as you intend, regardless of the device used.

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:

 

Tip:
Quickly adjust your padding in increments of 10 in both your Mobile and Desktop Layouts by holding the "shift" key as you click the up/down arrows to change in increments/decrements of 10.

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!

Did you find this article helpful?

Need more help?

Contact Us