Section layout settings control how the Blocks in a Section are positioned, spaced, and aligned on desktop and mobile. Section background settings add an image, video, or color behind them. Use both to make sure your page looks right on every device and reflects your brand.
This article covers settings for a whole Section. To change a single Block instead, see Customize block layout settings and Customize block background settings. To learn how Sections and Blocks fit together, read Add Sections to pages.
Open a Section's settings
From the Dashboard, click Website.
Select Website Pages or Landing Pages.
Open the page editor for your Page. Learn more about the page editor.
In the sidebar editor, select the Section you want to customize.
Scroll to Section Settings.
Click Desktop Layout, Mobile Layout, or Background, depending on the setting you want to change.
Click Save to keep your changes.
Section Settings has four groups: Background, Desktop Layout, Mobile Layout, and Time Reveal. This article covers the first three. To show a Section only after an event or a delay, see Time Reveal settings.
Desktop layout settings
Open Desktop Layout to control how a Section appears on desktop devices:
Hide a Section on desktop
Toggle Hide Section to make a Section invisible to visitors on desktop devices. To test it, toggle and untoggle Hide Section in the Desktop Preview in the Template Editor and watch the Section disappear and reappear. Save your changes after testing. If a Section stays hidden unexpectedly, make sure Hide Section is untoggled.
Tip: Create two copies of a Section: one designed for desktop and one for mobile. Toggle Hide Section in Desktop Layout on the mobile version, and toggle Hide Section in Mobile Layout on the desktop version. Visitors then see only the version built for their device. Use the Desktop and Mobile Preview to test each Section.
Set desktop section padding
Enter your own values for the top, right, bottom, and left padding to change the space inside the Section. Changing the padding shifts every Block in the Section. On desktop, the defaults are 100 pixels for top and bottom and 40 pixels for left and right. To reset padding to the default, delete your custom value.
Vertical & horizontal alignment
Open Layout to align, position, and control the direction of the Blocks of 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.
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
Mobile layout settings
Open Mobile Layout to control how a Section appears when your page is viewed in a browser window narrower than 768 pixels:
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.
Hide a Section on mobile
Toggle Hide Section to hide a Section from visitors whose browser window is narrower than 768 pixels.
Tip: Pair this setting with Hide Section in Desktop Layout to show a different version of a Section on each device. The steps are in Hide a Section on desktop.
Set mobile section padding
Enter values for the top, right, bottom, and left padding to shift the Blocks in a Section on mobile. The defaults are 40 pixels for top and bottom and 10 pixels for left and right. To reset padding to the default, delete your custom value.
Tip: Hold Shift while you click the up or down arrows to change padding in steps of 10. This works in both Mobile Layout and Desktop Layout.
Section background settings
Open Background to add an image or video behind a Section, position the image, and choose a background color. Sections and Blocks adjust to different screen sizes automatically, so test your choices on both desktop and mobile.
Choose a background media type
Set Background Media Type to None, Image, or Video to choose which media the Section displays. Add your media in the Background Image or Background Video setting. For example, choosing Image displays the image from the Background Image setting. If you have not added an image or video, nothing displays, so add your media first and then select its type. For a background image, use an image about 2880 by 1200 pixels.
Note: Background media does not show until you make Background Color transparent. See Show a background image or video through the overlay color.
Tip: If background media does not display on your phone while you test, check whether low power mode is on. Turn it off when you test your page.
Position a background image
If you chose Image, adjust the vertical position of the image in the Section to Top, Center, or Bottom.
Fix a background image on scroll
Check Fixed Background Image to keep the image still while visitors scroll, so the Blocks in the Section scroll over it. Uncheck it to let the image scroll with the Section. This applies only in browser windows 768 pixels wide or wider.
Note: Fixed Background Image does not apply on mobile devices or in browser windows narrower than 768 pixels.
Set a background color
Use Background Color to create a solid background without an image or video. When you add an image or video, the same color sits on top of it as an overlay.
Show a background image or video through the overlay color
To display an image or video behind your Section, make the overlay color transparent. Use the Opacity slider in the color picker to adjust the overlay.