Color Changing Sections

Introduction

Color Changing Sections is a new visual enhancement available for the Row element in the Page Builder. When enabled, this feature smoothly animates the page’s background color to match the selected Row background as the user scrolls that section into view.

This creates a dynamic, immersive scrolling experience — ideal for storytelling layouts, visually segmenting content, or guiding user focus through long-form pages.

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.