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:
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.
Sections help you create different page layouts and make it incredibly flexible to get the page design you want.
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.
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.
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 ytou with 2 options:
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. 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.
|
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. Animation |
Animation allows you to set an override animation for that particular section. Site wide animation must already be set for this to work.
|
11. Anchor Point | This allows you to create a linkage directly to this section on the page. To learn more about using anchors click here. |
Within each section you have the ability to create a gradient background colour.
To setup a gradient:
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.
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.
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:
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:
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.
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:
To learn about changing header layouts click here.
To learn about working with footers click here.
Try using searching below: