The Section element is a useful tool in building page content block-by-block. Choose from pre-made sections and easily tweak images, colors, and backgrounds.
Step 1
Go the Editor and select a Design (template).
Step 2
Browse the pre-set Section categories and select one to add it to your website.
Step 3
The elements in the section you've chosen will automatically be added to your website. You can easily edit these by clicking on them.
Step 4
You can also adjust the section settings:
Choose a background color by clicking on one of the colored circles. These colors are based on the palette set up for your website, to maintain consistency. Use the settings (gear) icon to adjust the width of the section to S (small), M (medium), or L (large).
Option: image background
If you add an image background, you can click on the image icon in the gray toolbar and adjust the color to dark or light. Enabling the Background option will improve the readability of the text on the image. You can of course switch the image for another if you're not satisfied with how it looks!
For example, the Services section (which is also used as an example above) could look like this with an image as a background:
Step 5
If you'd like to expand a page with even more sections, you can click on the plus (+) button at the bottom of the current section. With each new section, you can follow the above steps again to customize it.
How to make a zig-zag layout
To make a zig-zag layout, with two different images and differently-colored text blocks, start by adding two sections one on top of the other. The top section should have an image on the left, while the bottom section has the image on the right (or vice versa). You can choose the color for both blocks. On mobile, these blocks are neatly displayed one on top of the other.
✔ Tip: If you add different sections to a page, you can set up alternating colored blocks. To do this, alternate the sections with the color of your standard page background and one other color. It should look something like this: