Sections management - Page Layouts

Adding a pre-filled section template

Pre-filled sections offer a quick way to create your page layout, similar to a wireframe. These templates simplify the design process, allowing you to easily replace images and text.

To add a pre-filled section:

1. Click the 'Add section' button on an empty page, or the + icon at the center bottom of any section.
2. The sections panel will open, showing pre-filled sections by default.
3. Select a section type from the list to find a suitable template.
4. Click on the desired section to apply it to your page.
5. Customize the section as needed.

Watch the help video to see how to create sections within your page.

Adding an empty section

Empty sections provide flexibility to design your page layout as you wish.

To add an empty section:

1. Click the 'Add section' button on an empty page, or the + icon at the center bottom of any section.
2. In the sections panel, click the 'Empty sections' tab.
3. Choose the desired width and number of columns.
4. Click on the desired section to apply it to your page.
5. Customise the section by adding elements and adjusting the layout.

Watch the help video to learn how to create and modify sections within your page for optimal design.

Deleting a section

To delete a section:

1. Hover over the section to display the icons at the bottom.
2. Click on the X icon.
3. A warning will appear asking for confirmation. Click 'OK' to confirm or 'Cancel' if you change your mind.

Note: Once a section is deleted, it cannot be retrieved.

Section Settings

Section settings are part of the content sections (excluding the header and footer). These settings allow you to customise the design of each section.

Editing section settings

1. Click the coloured wheel icon to access the settings.
2. Update any desired settings.
3. Save your changes.

The numbers in green in the screenshot correspond with the numbers in bold in the table below.

Background gradient colour

Each section allows you to create a gradient background colour.

To setup a gradient:

1. Open 'Choose your own colours'.
2. In the background colour row, click the gradient swatch to expand the gradient options.
3. Select the 'Starting colour'; the 'Ending colour' will be set automatically to match.
   • Tip: This simplifies creating a slight colour variant.
4. Adjust the 'Starting location' (0% for a soft, gradual gradient).
5. Adjust the 'Ending location' (100% for a soft, gradual gradient).
6. Set the gradient angle.
7. Mobile Options: Switch between desktop and mobile views to ensure the gradient looks good on all devices.
   • Tip: Mobile views can differ significantly from desktop, so make necessary adjustments for each.

Design Tip: Setting both the starting and ending locations at 50% creates a distinct line, useful for sharp design effects.

Shape divider

Shape dividers let you create visually interesting designs within a section. You can set a shape at the top, bottom, or both, and adjustments can be viewed in real-time.

Settings:

1. Shape Colour: Change the colour of the selected shape.
2. Shape Height: Adjust the height of the shape.
3. Mobile Options: Ensure the shape looks good on all devices by switching between desktop and mobile views and making necessary adjustments.

Using these options, you can enhance the visual appeal of your sections effectively.

Saved sections

Saved sections allow you to save and reuse sections across your site. Each saved section can be used only once per page. Once used, it won't appear in the sections panel for that page, but you can duplicate sections if needed.

When a saved section is deleted from the panel, it remains in existing pages but is no longer connected.

Watch the help video below for a detailed example of working with saved and duplicate sections.

Modifying a saved section

To use and modify a saved section without affecting other instances:

1. Insert the Saved Section: Add it to the new page where you want to make changes.
2. Option 1:
   • Delete the section from the saved sections panel to break the connection.
   • Edit the text on the page as needed.
   • Note: This breaks the link with all other instances.
3. Option 2:
   • Duplicate the saved section to create an independent copy.
   • Remove the original saved section.
   • Modify the duplicated section as needed.

Watch the help video below for a detailed example of working with saved and duplicate sections.

Duplicating sections

Duplicating sections saves time when creating similar content on your page.

• Creates a copy of the section and its elements.
• The duplicated section is independent, allowing edits without affecting the original.
• You can duplicate a section on an individual page multiple times, unlike saved sections which can only be used once per page.

Watch the help video to learn how to duplicate sections within a page.

Troubleshooting and Tips

Common Issues:

1. Section Won't Save: If you can't save a section, it might be a saved section that cannot be saved again. Convert it to a normal section or duplicate it to make changes.
   • Note: the save icon colour for duplicating will be a black colour instead of white when it already is a saved section.
2. Misaligned Elements: Ensure you are using the correct alignment and spacing settings. Check mobile and desktop views to adjust as needed.

Tips:

1. Organise Sections: Use clear naming conventions for sections to keep your page organised.
2. Optimise Images: Use optimised images to improve load times and overall site performance.
3. Preview Changes: Always preview changes on different devices to ensure responsiveness and consistency.
   These tips and troubleshooting steps can help you effectively manage sections and improve your site's functionality.

Header Layout

To learn about changing header layouts click here.

Footer Layout

To learn about working with footers click here.