Sections management - Page Layouts

This help page takes you through how to create and setup your page layout, giving you full flexibility to create the page and site you want.

Sections Management gives you 2 essential options:

  1. Creating sections from pre-set layouts
  2. Creating empty sections, giving you more flexibility for the design you want.
Sections are only available on Version 2 themes (all current themes)

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.

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.

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
    Deleting a 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.

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!
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!
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.
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 ytou 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.
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.
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.

Note: 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.
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.
Animation

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

Site wide animation must already be set for this to work.
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

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'.

Important: Saved sections are connected to each other. If you make a change to one saved section, it changes that same section everywhere in the site it is used.

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

When deleting a saved section from the saved sections panel, each section remains in each page, but will no longer be connected.

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.

When duplicating a section, it creates a copy of the section and the element within the section. What you have just duplicated/copied becomes independent and you can edit without affecting the original section. Duplicate section allows you to duplicate a section on an individual page as many times as you want, as opposed to saved sections which can only be used once on a page.

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.


Can't find the answer you are looking for?

Try using searching below: