Sections management - Page Layouts

Adding a pre-filled section

Pre-filled sections provide a very fast way of creating your page layout, and take much of the design/layout thinking away from the process. Using pre-filled sections is somewhat like creating a wireframe of your intended page, ready for you to simply replace your images and text within the page.

To add a pre-filled section:

1. Click the 'Add section' button if you have an empty page, or the + icon at the centre bottom of any section.
   1. This will open the sections panel. Pre-filled sections show by default.
2. Select from the list of section types, to reveal the various types of pre-filled sections and find one that suits your purpose.
3. Click on the desired section, to apply it to your page.
4. Your section is now ready to customise.

This help video shows you how to create sections within your page.

Adding an empty section

Sections help you create different page layouts and make it incredibly flexible to get the page design you want.

To add an empty section:

1. Click the 'Add section' button if you have an empty page, or the + icon at the centre bottom of any section.
   1. This will open the sections panel. Pre-filled sections are shown by default, so you'll need to click the 'Empty sections' tab.
2. Choose the width and number of columns you want, to filter and find a suitable section.
3. Click on the desired section, to apply it to your page.
4. Your section is now ready to add elements into, and customise.

This help video shows you how to:

1. create sections within your page.
2. change the layout of an already created section - Experimenting with change layouts once you have placed content in helps better visualise what type of section works best for you.

Deleting a section

To delete a section:

1. Hover over the section and look for these icons at the bottom of the section
   
2. Click on the X icon
3. It will give you a warning to confirm deleting. Click 'Ok' to confirm or Cancel if you change your mind.
4. Once a section has been deleted it cannot be retrieved.

Section Settings

Section settings are a part of the content sections (not the header or footer). These help provide the ability to change the design of each section.

Editing section settings

You can edit a sections settings at any time by clicking the coloured wheel icon as highlighted below, updating any settings and saving your changes.

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

Background gradient colour

Within each section you have the ability to create a gradient background colour.

To setup a gradient:

1. Open 'Choose your own colours'
2. In the background colour row, you'll see a gradient colour swatch.
3. Click the gradient swatch, and it will expand your gradient options.
4. When you select the 'Starting colour', it will set the 'Ending colour' as the same automatically. This is to make it easier for you if you only want a slight variant of colour in your gradient.
5. Starting location defines where in your section the colour will start to turn into a gradient. When set to 0%, your gradient will be softer and more gradual across the section.
6. Ending location defines where the gradient ends.  When set to 100%, your gradient will be softer and more gradual across the section.
7. Angle sets the direction the gradient sits within the section.
8. Mobile options are important as the way the gradient looks on desktop may be very different on a smaller mobile device. Make sure you switch between devices views to adjust this as required.

Tip: if you set both the starting and ending location at 50%, it gives a hard line seperating both colours. This can also be very useful for a nice design effect.

Shape divider

Using shape dividers, you can create interesting designs within a section. You can set just a top shape, a bootom shape, or use both at the same time. When adjusting shapes, you can see these changing in real time.

1. Shape colour changes the colour for the selected shape. 
2. Shape height sets the height of the shape at the shape.
3. Mobile options are important as the way the shape looks on desktop may be very different on a smaller mobile device. Make sure you switch between devices views to adjust this as required.

Saved sections

Saved sections are sections that can be saved to your sections panel and be reused across the site. A saved section can only be used once on a page. Due to this, once a saved section has been used on a page, it will no longer appear in the sections panel while viewing that page. If you need to have another section matching that, you can use 'duplicate sections'.

This help video shows you how to create and use saved sections:

Modifying a saved section

If you wish to use and slightly modify a saved section, e.g. you want to use only part of that section, or tweak that section, and not have it update everywhere else that section is used throughout, do this:

1. Create and then insert the saved section onto the new page where you want to modify it
2. Then you can do 1 of 2 things:
   1. Delete that section as a saved section so it is no longer connected to the existing saved section. Then you can edit that text on the page to match the new page (please note it breaks the connection between any page that saved section is used on), or
   2. Duplicate that saved section as per the instruction below​. This duplicate creates an independent copy that is not connected to the original section.
      1. Then remove the saved section
      2. And modify the newly duplicated section.

This help video below gives an example of how to work with saved and duplicate sections to reuse part of a section across your site.

Duplicating sections

Being able to duplicate sections saves time when you want to create another section on your page that is the same or very similar to another section.

This help video shows you how to duplicate sections within a page:

Header Layout

To learn about changing header layouts click here.

Footer Layout

To learn about working with footers click here.