This procedure is intended for Page Designer administrators who want to enhance text content by placing it on a colored background and controlling the overall text color displayed within that background.

Component Objective

The Background Color Component is a container component primarily intended to add a colored background behind text content.

Its main purpose is to provide additional visual treatment to a text block when a standard Textbox or Textbox Plus on its own is too visually simple.

The basic structure is:

Background Color Component

↓

Content

↓

Textbox / Textbox Plus

The component controls the surrounding background and can also control the text color displayed within it.

Content-Driven Height

The Background Color Component does not create a fixed-height colored area.

Instead, the height of the background matches the size of the content placed inside it.

If the content requires more vertical space, the colored background grows with it.

This makes the component particularly useful for adding a background treatment to text without having to define a separate visual height.

Background Settings

When the Background Color Component is selected in the Page Structure, its properties expose Background Settings.

The available settings are:

Background Color

Background Color is required.

Administrators can define the color using:

• The available color selection
• A hexadecimal color code

For example, a hex value can be entered directly into the color field.

Text Color

The Text Color setting controls the text color used by content within the Background Color Component.

As with Background Color, administrators can use:

• The available color selection
• A hexadecimal color code

This makes it possible to coordinate the text color with the selected background and maintain appropriate contrast.

Using Textbox Inside Background Color

The standard Textbox Component can be inserted into the Background Color Component.

The Background Color Component then provides the surrounding colored treatment, while the Textbox provides the actual text content.

This is a straightforward way to visually enhance a standard text section.

Using Textbox Plus Inside Background Color

Textbox Plus can also be inserted into the Background Color Component.

However, there is an important interaction between the color settings of the two components.

Text Color Override

If a normal text color is selected directly inside Textbox Plus, the Text Color defined on the Background Color Component overrides it.

For example:

1. A text color is selected inside Textbox Plus.
2. A different Text Color is configured on the parent Background Color Component.
3. The Background Color Component's Text Color takes precedence.

Therefore, changing the standard text color inside Textbox Plus may appear to have no effect when the component is being used inside a Background Color Component.

This is expected behavior.

Textbox Plus Color Overlay Exception

There is an exception to the Text Color override behavior.

If a color overlay is applied to text inside Textbox Plus, that overlay remains.

It is not overridden by the Text Color configured on the Background Color Component.

This means that Textbox Plus can still be used to retain specifically highlighted text treatments while the Background Color Component controls the general text color.

Conceptually:

Background Color Text Color

overrides

Textbox Plus standard text color

but does not override

Textbox Plus color overlay

This distinction is important when combining the two components.

Intended Use

The primary intended use of the Background Color Component is to enhance a text block with a colored background.

It can be used when a section of text needs:

• More visual presence
• Separation from surrounding content
• A contrasting background
• A coordinated background and text color treatment

The Background Color Component provides the visual container, while the text component placed inside it provides the content.

Additional Technical Possibilities

Although its primary intended use is with text, the Background Color Component is a container.

Other compatible Page Designer components may therefore be inserted into its Content area.

For example, the Clinic Locator Map has been demonstrated inside a Background Color Component.

However, this should not be interpreted as confirmation that every Page Designer component is compatible with Background Color.

Use the component primarily for its intended text-background use case unless another combination has been validated.

Versatility

The Background Color Component adds another design option to content that would otherwise appear directly against the page background.

It is particularly useful with:

• Textbox
• Textbox Plus

Textbox Plus provides additional text formatting possibilities, while Background Color provides the overall background and text-color treatment.

When using Textbox Plus, remember the specific color override behavior described in this procedure.

Background Color Is a Container

The Background Color Component does not create the actual text content.

Add the required content component inside its Content area.

Background Color Is Required

A Background Color must be configured.

It can be selected using the available color selection or entered using a hex code.

Background Height Depends on Content

The height of the colored area follows the size of the content placed inside the component.

Do not treat Background Color as a fixed-height banner.

Background Color Text Color Overrides Standard Textbox Plus Color

When Textbox Plus is used inside Background Color, the parent component's Text Color overrides a standard text color selected within Textbox Plus.

If an administrator changes the normal text color inside Textbox Plus and does not see the expected result, review the Text Color configured on the parent Background Color Component.

Textbox Plus Color Overlay Is Not Overridden

A color overlay applied inside Textbox Plus remains visible even when the parent Background Color Component defines a different Text Color.

Do not assume that all Textbox Plus color treatments are overridden.

Do Not Assume Universal Child-Component Compatibility

Although Background Color is a container and has been demonstrated with content beyond text, this does not confirm that every Page Designer component can or should be inserted inside it.

Use validated combinations and common sense.

1. Determine Whether a Colored Text Background Is Required

Review the content and determine whether a standard text presentation provides enough visual emphasis.

Use the Background Color Component when you want to enhance the section by placing its content on a colored background.

2. Add the Background Color Component

Locate the Background Color Component in Page Designer.

Add it to the required location in the page structure.

Once added, the component exposes a Content area into which the required content can be inserted.

3. Open the Background Color Properties

Select Background Color in the Page Structure.

The component properties open on the right side of Page Designer.

Under Background Settings, configure:

• Background Color
• Text Color

4. Configure the Background Color

Set the required Background Color.

Use either:

• The available color selection
• A hexadecimal color code

If using a hex code, enter the required value directly into the Background Color field.

5. Configure the Text Color

Set the Text Color according to the intended design and selected background.

Use either:

• The available color selection
• A hexadecimal color code

Choose a combination that provides appropriate visual contrast between the content and its background.

6. Add the Text Component

Inside the Background Color Component's Content area, add the required text component.

This can be:

• Textbox
• Textbox Plus

Configure the text content according to the requirements of the selected text component.

7. Understand the Resulting Background Height

The Background Color Component automatically follows the height of the content placed inside it.

There is no need to define a separate background height.

As the content occupies more or less vertical space, the background follows it.

8. If Using Textbox Plus, Check the Text Color Hierarchy

If Textbox Plus is used, remember that a standard text color selected inside Textbox Plus can be overridden by the Text Color configured on the parent Background Color Component.

If the Textbox Plus text is not displaying the color selected within Textbox Plus:

1. Select the parent Background Color Component.
2. Review its Text Color.
3. Remember that this setting takes precedence over the standard Textbox Plus text-color selection.

This behavior is expected.

9. Use Textbox Plus Color Overlay Where Required

If a color overlay has been applied to specific text inside Textbox Plus, that treatment remains even when the parent Background Color Component defines its own Text Color.

This can be used when the general text should follow the parent Text Color while particular text retains its own overlay treatment.

10. Apply the Configuration

After configuring the Background Color Component, click Apply to save the component configuration.

When configuring the Textbox or Textbox Plus inside it, also complete the required Apply actions for that component.

Remember that when using the full-screen editor in Textbox Plus, there are two separate actions:

1. Click Apply inside the full-screen editor.
2. Click Apply again at component level to save the Textbox Plus configuration.

11. Review the Complete Composition

Confirm that:

• The intended Background Color is displayed.
• The text remains readable against the background.
• The background height follows the content correctly.
• The text color behaves as expected.
• Any standard Textbox Plus text colors are correctly subject to the parent Text Color.
• Any Textbox Plus color overlays that should remain are displayed correctly.
• The overall colored section provides the intended visual treatment.

12. Validate on Staging

Validate the completed page on the appropriate staging storefront.

Confirm that:

• The background color renders correctly.
• The background follows the height of the content.
• The configured text color renders correctly.
• Text remains readable.
• Textbox Plus color overrides behave as expected.
• Any Textbox Plus color overlays remain visible where used.
• The composition displays correctly across the required screen sizes.

The key principle is:

Use the Background Color Component primarily to enhance text content with a content-driven colored background. Configure the overall Background Color and Text Color at container level, and remember that the container's Text Color overrides standard Textbox Plus text colors, while Textbox Plus color overlays remain preserved.