Skip to main content

Color Changing Sections

Color Changing Sections is an option on the Row element in the page builder. When it is on, the page background animates to the row's background color as that row scrolls into view, so the whole page changes color section by section.

It suits long storytelling pages and any layout where each section should read as its own scene.

Usage​

1. Enable the Feature​

  1. Open the Page Builder.
  2. Select a Row element you want to visually highlight.
  3. Navigate to the Animation tab in the Row settings.
  4. Toggle Color Change Section to On.

2. Choose the Background Color​

The feature uses the Row’s existing Background Color setting:

  1. While editing the same Row, go to the Background section.
  2. Select the background color you want the page to transition to when this Row becomes visible. If you want to set a custom text color, you can do so in the General tab.
  3. Save your settings.

3. Preview the Effect​

Scroll through your page in the preview mode or on the live site. When the enabled Row enters the viewport:

  • The page’s background color will smoothly animate to match the Row’s background.

4. Important Notes​

If you want the background color to transition back to a default (or another) color when the user leaves a section, make sure the next Row also has a background color set and has Color Change Section enabled. Each color change remains active once triggered, and it will only update again when the user reaches another Row with Color Change Section turned on.