Introduction
This guide walks you through creating and setting up your page layout, offering full flexibility to design the page and site you want. There are two main approaches: using pre-filled section templates or creating empty sections from scratch.
Adding a Pre-Filled Section Template
Pre-filled sections function as quick-start templates similar to wireframes, allowing you to replace images and text easily to suit your needs.
Steps to Add a Pre-Filled Section
- 1Click the 'Add section' button on an empty page, or click the + icon at the bottom centre of any existing section
- 2The sections panel opens showing pre-filled sections by default
- 3Select a section type from the list to find a suitable template
- 4Click your desired section to apply it to the page
- 5Customise the section content as needed
Adding an Empty Section
Empty sections provide flexibility to design your page layout exactly as you wish, without any pre-set content.
Steps to Add an Empty Section
- 1Click the 'Add section' button or the + icon at the bottom centre of a section
- 2In the sections panel, click the 'Empty sections' tab
- 3Choose your desired width and column number
- 4Click the section layout to apply it to your page
- 5Customise by adding <a href="/support/kb/content-blocks">elements</a> and adjusting the layout
Deleting a Section
Steps to Delete a Section
- 1Hover over the section to display the icons at the bottom
- 2Click the X icon
- 3A warning appears requesting confirmation — click 'OK' to confirm or 'Cancel' to keep the section
Once a section is deleted, it cannot be retrieved. Make sure you are certain before confirming.
Section Settings
Section settings apply to content sections (excluding the header and footer). Click the coloured wheel icon on any section to access its settings. Available options include:
Spacing and Colour
Top and bottom spacing — controls padding using grid-based sizing for a professional appearance.
Section colour scheme — only active when a colour palette has been applied to your website; lets you choose preset colours for the section.
Choose your own colours — an expandable area with five options: heading colour, text colour, link colour, background colour (gradient or solid), and background image overlay with opacity control.
Section colour scheme — only active when a colour palette has been applied to your website; lets you choose preset colours for the section.
Choose your own colours — an expandable area with five options: heading colour, text colour, link colour, background colour (gradient or solid), and background image overlay with opacity control.
Shape Dividers and Layout
Shape dividers — insert decorative shapes at the top or bottom of a section. By default shapes are white, so they may not be visible on a white background.
100% height — makes the section take up the full screen height.
Vertically centred — aligns content vertically within the section, useful for multi-column layouts.
100% height — makes the section take up the full screen height.
Vertically centred — aligns content vertically within the section, useful for multi-column layouts.
Animation and Anchor Points
Animation — sets an override animation for the section with directional control. Note: site-wide animation must already be set for this to work.
Anchor point — creates a direct link target to this section on the page. Learn more about anchor links.
Anchor point — creates a direct link target to this section on the page. Learn more about anchor links.
Background Gradient Colour
Setting Up a Gradient Background
- 1Open 'Choose your own colours' in the section settings
- 2In the background colour row, click the gradient swatch to expand options
- 3Select a 'Starting colour' — the 'Ending colour' is set automatically to match
- 4Adjust the 'Starting location' (0% for a soft, gradual gradient)
- 5Adjust the 'Ending location' (100% for a soft, gradual gradient)
- 6Set the gradient angle
- 7Switch between desktop and mobile views to check the appearance on all devices
Setting both starting and ending locations at 50% creates a distinct line, useful for sharp design effects. Mobile views can differ significantly from desktop, so adjust each independently.
Shape Dividers
Shape dividers let you create visually interesting transitions between sections. You can adjust the shape colour, shape height, and switch between desktop and mobile views to ensure compatibility across devices.
Saved Sections
Saved sections allow you to save and reuse sections across your site. Once applied, they become a 'global section' — updating one instance updates it everywhere. Key points: a saved section can only be used once per page, and when deleted from the saved sections panel it remains on existing pages but the connection is broken.
Changes to a saved section affect all instances of that section across your entire site. If you need an independent copy, duplicate the saved section first.
Modifying a Saved Section Independently
Option 1: Insert the saved section to a new page, delete it from the saved sections panel to break the connection, then edit freely. Note this breaks the link with all other instances.
Option 2: Duplicate the saved section to create an independent copy, remove the original, then modify the duplicate as needed.
Option 2: Duplicate the saved section to create an independent copy, remove the original, then modify the duplicate as needed.
Duplicating Sections
Duplicating sections saves time when creating similar content. The duplicated section is fully independent — edits do not affect the original. Unlike saved sections (limited to once per page), you can duplicate a section multiple times on the same page.
Extra Background Image and Animation
Adding an Extra Image to a Section
- 1Open the section settings
- 2Towards the bottom, find 'Other image' and switch it to 'On'
- 3Upload an image and adjust settings — image width, mobile image width, horizontal offset, vertical offset, alignment, scroll effect (static or animated), and hide on mobile
Flex Sections
Flex Sections are a newer layout feature providing advanced control over column layouts, spacing, and the ability to hide columns on mobile devices. They are ideal for users seeking greater flexibility while maintaining a grid-based design.
Adding a Flex Section
- 1Hover over an existing section and click the '+' icon on the outer border
- 2The section types menu opens — click 'Empty Sections'
- 3Select 'Flex' from the options
- 4Click the Flex Section to insert it into your page
- 5Configure section width, column count, column widths (via slider), gap between columns, and hide-on-mobile settings
Switch to mobile view to verify your flex section settings, especially if you have chosen to hide any columns on mobile devices.
Troubleshooting and Tips
Use clear naming conventions for sections to keep your page organised. Use optimised images to improve load times. Always preview changes on different devices to ensure responsiveness.
Was this helpful?
Related Articles
Adding & Duplicating Pages
Create new pages, use AI-assisted page generation, duplicate existing pages, and manage your site structure.
7 min readVideo
Content Blocks
Add, edit, move, and style text content blocks — the core building block of every page.
4 min readVideo
Header: Logo, Call to Action & Favicon
Customise your site header — add your logo, set up a call-to-action button, change the layout, and add a favicon.
8 min readVideo
Still need help?
Submit a Support Ticket