With the Page Section component, you can add a content area to a page of your site. New pages will have at least one by default, so adding more gives you more control over the design and layout of pages. To get started, click on Add Content at the top of the website editor, then drag the Page Section component to a page of your site. Next, click on the section to open the options panel.
Tip: When moving your mouse over an existing section, you’ll see a Plus button at the top and bottom of the section. Click on that button to add a new section.
Adding and Managing Section Content
There are a few different ways to add and edit content within a section. One way to do this to click the Add Content button within the options panel or at the top of the editor, then drag components into the section. Another way to do it that will save you time is to add a section layout. To do that, click the Add a Section Layout button, then click on a layout in the list and edit the content. Note: if you click the Plus button to add a new section it will automatically load the popup to choose a layout, including a blank section.
Anchor Link
Anchor links are useful when you want to link to specific sections on a page. Edit the text of the Anchor Link field in the options panel to specify a unique text for the anchor.
Layout
Within the Layout options group in the options panel are the following options to control the overall layout of the section:
- Max Width - With this option, you can control how wide the draggable content area is within the section, from very narrow all the way up to the full width of the section. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Min Height - Sections expand vertically as you add components, but they have a default height to start. Use this option to control the default starting height of the section. This can also be set separately for different screen sizes.
- Content Align - This option aligns content vertically within the section to the top, bottom, or middle.
- Gap - With this option you can control the space between components added to the section, and can set it separately for different screen sizes.
Design
The options within the Design option group control the overall styling of your section.
- Border - With this option you can add a border around the section, and control the width, style, and color of the border.
- Background - You can set a background for your section with this option, and choose from a color, gradient, image, image with overlay, video, and slides of images.
- Text Color - Use this option to set a custom color for text within the section.
- Link Styles - By default, links within the section will use the global styling of your site. However, you can toggle this option on and customize color, hover color, underline, and hover underline styles of links. This, along with the Text Color option, can be helpful in making sure that they are visible against different backgrounds.
Effects
The Reveal option found in the Effect options group will make content within the section fade-in when the page loads. By default this option is toggled off.
Spacing
The Padding option controls the space between the border of the section and the content within it. You can set this individually for each side or all together, and can set it separately for different screen sizes by clicking the desktop/mobile icon.
Hover
To control how the section looks when a visitor hovers over it with a mouse, click on Hover at the top of the options panel. You can customize the style, width, and color of the border, and set a color, gradient, image, or image with overlay as the background.