How do I give a section a background color?

Step 1: Select the section

Click on the edge of the section in the editor, or open the List view at the top left and click on Section. If you accidentally click on a block or column, you will see different settings on the right.

Step 2: Open Background color

On the right sidebar, the panel Background color is displayed. Click on the title to expand it.

Step 3: Choose a color

Click on the circle of the color you want. In the editor, you will immediately see the section in that color. Save the page with Update or Save as draft. A new section is white by default.

Why does the text color change too?

Every color in your brand style has a fixed text color that goes with it. On a black or dark section, the text will be white, and on a white section, it will be dark. This way, your text remains readable without having to choose a color for each text. This also applies to headings and links in the section.

Therefore, you cannot set the text color independently for each section. Do you want white text? Then choose a dark background color.

What colors can I choose?

You will see the colors from your own brand style, with their English names. In most websites, these include:

• Primary: your main color.
• Secondary and Tertiary: your second and third colors.
• White, Black, Gray, and Dark gray: neutral colors.
• Transparent: no custom color.
• Yellow, Success, Warning, and Error: signal colors intended for notifications. It is better not to use them as section colors.

The exact color behind each name varies by website. You can read more about your brand style in colors and fonts of your website.

Two sections with the same color stacked on top of each other

Each section has space above and below. If you stack two sections with the same color, you double the space and create a large gap. Two solutions:

• Place the content in one section, possibly with a column of 12 as a subheading.
• Reduce the space at the top of the bottom section. You can do this in Size settings; see adjusting the height and space of a section.

If you alternate your colors, for example white and light gray, you won’t have this problem.

Not working?

• You do not see the Background color panel: you have selected a column or block instead of the section. Choose the section in the list view.
• The color does not change on your site: have you saved the page? Then refresh the page on your site with Ctrl+F5.
• The text is poorly readable: choose a color with more contrast, such as Black or Primary instead of a light color.
• A column has a different color than the section: that column is a card with its own color. See a column as a card.
• The color you are looking for is not listed: please contact us.

Frequently Asked Questions