Adding Sections to a Page

A section is the most basic element that allows you to add other elements when editing a page. It also lets you adjust the content layout to look neat and tidy.

Most of the time, it's important to add a section as the base container before adding other elements to ensure the content layout is responsive on different screen sizes.

Adding a Section to a Page

• Open the page editor by navigating to Dashboard > Website > Pages, then create a new page or select an existing page.
• Click the Insert button in the left panel.
• Under the Layout heading, drag the Section element into the page editing area.
• Add your content to the section.
• Adjust the section padding to change the spacing around the content.

Moving a Section on a Page

You can move a section on a page to change where it appears in the page layout. This is useful when you want to re-order sections, move a banner higher on the page, or place content above or below another section.

To move or re-order a section on a page

• Open the page editor by navigating to Dashboard > Website > Pages, then select the page you want to edit.
• Hover over the section you want to move.
• Click and hold the section control.
• Drag the section above or below another section on the page.
• Release the section when it is in the correct position.
• Click Save to apply the change.

Note: Make sure you are moving the section itself, not an element inside the section. Moving a section will also move the content inside it.

Section options

There are many options to configure on the Section, giving you the flexibility to customize the content to your needs.

• Content Size: This changes the maximum width of the content area in the section. You can choose Large, Medium, or Small.
• Full Height: This changes the height of the section to cover the whole screen.
• Background: You can set the background of the section with a colour, an image, or a video.
• Font Color: You can configure the color of the text within this section.

Adjusting the Background Image Position

You can adjust how a background image is positioned within its section. This gives you flexibility to highlight specific parts of the background image.

To adjust the background image position:

1. In the Background Options menu, scroll down to the Background Position section.
2. Click one of the position areas (for example, Center, Left, or Right) to choose how the background image is positioned.
3. To customise the position, drag the blue ⭘ icon to the exact spot you want.

Tip: Use this feature to ensure the most important part of your background image remains visible in its section.
You can use the same method to adjust an image position after cropping.

Adding a Video Background to a Section

You can use a video as the background of a section. When a video is used as a section background, it will play continuously in a loop. This can help add movement to a page header, banner, or feature section without adding a separate video element.

To add a video background:

• Open the section you want to edit.
  
• Click Background in the section options.
  
• Select a video from the media folder, or upload a video file.
  
• Once the video has been uploaded, adjust the size of the section to suit your page layout.
  

Note: You can still use Colorwash with a video background. This can help improve text contrast when content appears over the video.

Tips:

• Use short videos with subtle movement.
  
• Avoid placing important information inside the video itself.
  
• Check that text remains easy to read over the video.
  
• Test the section on desktop and mobile screen sizes.
  
• Use a compressed video file where possible to help the page load faster.

Adding Section Dividers

You can add visual dividers to the top or bottom of any section. Dividers help separate content and create smoother transitions between sections. All options are available directly in the page editor.

To add a divider：

1. Open the section you want to edit.
2. Go to Section Options.
3. In the Dividers area, click "+" to add a divider.
4. Click the divider to edit its properties.

Divider options

• Style: Choose from more than 30 built-in divider styles to match your layout or support your brand identity.
• Position: Place dividers at the top or bottom of any section.
• Height: Adjust the divider height using any CSS unit (px, rem, vmin, etc.).
• Color: Override the divider color to match your brand or preserve the original SVG colors.
• Repeat: Control how many times the pattern tiles horizontally for different visual effects.
• Flip: Mirror the divider horizontally to create variety and match your design flow.

Note:

• You can upload your own custom SVG files to create completely unique dividers that match your brand identity.
• You can add multiple dividers to both the top and bottom of a section, creating a layered effect.

Section Sizing

To configure the default section sizing:

• Navigate to Dashboard > Website > Design.
• Click the primary Design to edit.
• Click the “Style” button in the left panel, then select the “Section Sizing” option.
• Adjust the width of Sections (small, medium, large) and the height of the Full-Height Sections.

Note: You can also add one section into another section.