Section Styling

Each component has some amount of customization that can be done to it, though it can vary from library to library if they are made by different creators. There are two main ways you can customize a section:

Changing Component Design

Some components have options that change the look and feel of the component. Click the settings icon at the top of the editor panel. If the component you’re working with has configurable options, customize them to suit your needs. You can also click on the presets tab which will have the options preconfigured by the developer of the library.

Changing Section Colours

Clicking on the palette icon will allow you to change colours for the individual section you’re working in. For any colours that you do not change, they will be inherited from the website. You can also set different colours for light, dim, and dark mode, then your website can automatically changed based on the preferences of your visitors.

How to change Section Colours

Switching Colour Context

1. From the website editor, click the

   in the toolbar.

2. Select Light, Dim, or Dark in the Lightness section of the left panel.

Your colours will automatically update based on your website colours or base colours of the section.

Switching Element-specific colours

1. From the website editor, click the

   in the toolbar.

2. In the left panel, click Custom colours.

3. Adjust the colours for the elements you want to change. Note: Sections will use the primary, secondary, accent, and neutral colours by default based on what the Foundation creator specified. The Per-element colours will override the base colours.

Applying Backgrounds and Section Effects

Some Site Foundations and components will support image/gradient backgrounds and advanced animations. You can access these through the design menu.

Change section background

1. From the website editor, click the

   in the toolbar.

2. In the left panel, click Background & Contrast.

3. Use the tabs in the left panel to select what you want to use as your background: Gradient, Image, or Video

4. For Gradient, select your colours and gradient options. For Image or video, upload the file.

5. Optionally, enable the content readability mask. This will overlay a semi-transparent white or black to make sure your content meets accessibility guidelines.

Apply section animations

1. From the website editor, click the

   in the toolbar.

2. In the left panel, click Animation effects.

3. Click the

   next to Enable animation effect.

4. Configure the effect and duration to your liking.

Transferring Section Styles to Other Sections

1. From the website editor, click the

   in the toolbar.

2. Click the

   
   lat the top of the of the left panel. This will copy all of the settings from every category (Component options, Background & contrast, Animation effects, and custom colours). Note: You can also select one of the categories and copy directly from there.

3. Navigate to the section you want to restyle.

4. Click the

   in the toolbar.

5. Click

   
   at the top of the left panel. Note: if you copied from one of the subsections of settings, you need to navigate into that section before pasting.