Sections management - Page Layouts

On this page:

  1. Adding a pre-filled section
  2. Adding an empty section
  3. Deleting a section
  4. Section Settings
  5. Background gradient colour
  6. Shape divider
  7. Saved sections
  8. Modifying a saved section
  9. Duplicating sections
  10. Extra image and animation
  11. Troubleshooting and Tips
  12. Header Layout
  13. Footer Layout

This help page guides you through creating and setting up your page layout, offering full flexibility to design the page and site you want.

Sections Management provides two essential options:

  1. Creating Sections from Pre-Set Layouts (Section Templates):
    • Use pre-designed templates to quickly add structured sections to your page.
  2. Creating Empty Sections:
    • Start with a blank section for complete design flexibility, allowing you to create custom layouts tailored to your needs.

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:

Deleting 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

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.

Section settings properties

1. Top spacing this controls the padding at the top of your section. Sizing is set to a 'grid', so that no matter what setting you choose, your page will have spacing that matches and keeps your design looking professional and sharp!
2. Bottom spacing this controls the padding at the bottom of your section. Sizing is set to a 'grid', so that no matter what setting you choose, your page will have spacing that matches and keeps your design looking professional and sharp!
3. Section colour scheme Section colour scheme will only be active when a colour palette has been applied to the website. Where it is applied, it will allow you to choose from your preset colours to set a colour set for that section.
4. Choose your own colours This is an expandable section allowing you to set custom colours for this section. It can also override the colour palette selection if you wish. It contains these next 5 options:
1. Heading colour Heading colour overrides any style settings set at the styles section of your site that use a heading. Usually only used when you set a background image or colour when the default site
2. Text colour Text colour overrides any style settings set at the styles section of your site. Usually only used when you set a background image or colour when the default site
3. Link colour Link colour overrides any style settings set at the styles section of your site. Usually only used when you set a background image or colour when the default site
4. Background colour

Background colour sets a background colour over the entire section, but behind any text or elements placed into the section. This setting provides you with 2 options:

  1. Gradient background, or
  2. Solid Background

A small tick icon will indicate the colour option currently being used.

More information can be found below for setting gradients.
5. Background image overlay The background overlay sets a colour and allows you to control the opacity of that colour. The purpose of this setting is where an image is quite busy and interferes with reading/viewing the content within the section. Setting an overlay helps improve readability.
5. Background image A background image sets a background image over the entire section, but behind any text or elements placed into the section. The image fits the width of the section, and will be cropped top and bottom of taller.
7 & 8. Shape dividers

Shape dividers give you a choice from different shapes that can be inserted to the top or bottom of the section. More on how these work below.

By default when creating a shape it is white, so you may not see it if you have a white background on your section. In this instance, adjust the colour to see your shape.
9. 100% Height This allows you to make a section take up 100% of the screen size of the device a user is viewing the page. It is very useful where the contents of that section are important to be seen all at once without needing to worry about how you'll fit everything in.
10. Vertically centred Turning this feature on vertically aligns the text within this section. This is quite useful when you have a multi-column section and want the text to align nicely with an element that may be taller than the text.
11 & 12. Animation

Animation allows you to set an override animation for that particular section. 

Direction controls the direction that animation comes in from.

Site wide animation must already be set for this to work.
13. Anchor Point This allows you to create a linkage directly to this section on the page. To learn more about using anchors click here.

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.

Important: Changes to a saved section affect all instances of that section across your site.

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.

Extra image and animation

You can add an additional image to the background of a section to give your page design an improved feel, like this section shows.

To active this feature:

  1. Open section settings
  2. Towards the bottom look for 'Other image' and switch it to 'On'
  3. Upload your image, and adjust the settings to give it the effect you want.
Image width Controls the size of your image on all devices
Mobile image width Allows you to override the mobile size of the image
Horizontal offset Adjusts the horizontal position of the image within the section
Vertical offset Adjusts the vertical position of the image within the section
Alignment Controls the starting point of the image within the section
Scroll effect You can choose to make your image static, or animate it. Animating the image can give more life to your page.
Hide on mobile As your image won't always look good on mobile as well, it is good to check and decide if you want to have it showing on mobile or not.

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.

Can't find the answer you are looking for?

Try using searching below: