This procedure is intended for Page Designer administrators who need to create a simple visual section combining a full-width image with overlay text and, optionally, a CTA.

The Full Width Image with Text Component is a straightforward media component with relatively limited design controls.

It is intended for situations where the administrator wants a strong visual treatment without needing granular control over the position of the text or CTA.

Component Objective

The Full Width Image with Text Component combines:

• A full-width image
• Mandatory text displayed over the image
• An optional CTA

The component provides a simple way to create a visual content section without requiring administrators to independently assemble an image, text and CTA using several different components.

Its design is intentionally straightforward.

Administrators have some control over the content and contrast, but limited control over how the composition itself renders.

Content Type

The Full Width Image with Text Component is a media component with text overlay.

Its main visual element is the image, while the text provides the message or context associated with that visual.

A CTA can optionally be added when the component also needs to direct visitors toward another destination.

Composition and Structure

The component contains the following main elements:

• Content
• Invert text color
• Image
• Image alt
• Optional Button

The Button configuration contains:

• Text
• Link
• Style

Full-Width Behavior

The component is designed to render its image across the full width available to the component.

Administrators do not have granular controls for changing the internal composition or positioning of the image and text.

The component determines the overall presentation.

This makes it easy to configure, but less flexible than components designed to provide greater control over their internal layout.

Text Content

The Content field is mandatory.

A Full Width Image with Text Component must contain text.

The component should therefore not be selected when the requirement is simply to display an image without any accompanying text.

The Content field uses the legacy-style rich-text editing experience.

It does not provide the advanced formatting flexibility available in Textbox Plus.

Text Position

The overlay text follows a predefined position within the component.

The text is:

• Left aligned
• Positioned approximately around the middle of the image

Administrators cannot freely reposition the text elsewhere within the image.

This fixed positioning should be taken into consideration when choosing the visual.

The image should work with the predefined location of the overlay text rather than relying on the component to move the text around the image.

Invert Text Color

The Invert text color option provides a simple way to improve contrast between the overlay text and the selected image.

When enabled, the text becomes white.

Use this option when white text provides better contrast against the selected visual.

When deciding whether to enable the option, prioritize the readability of the content over the image.

Image

The image provides the visual background of the component.

Because the text position is largely predetermined, select an image that works naturally with the overlay.

The administrator has limited ability to alter the final composition through the component itself.

Image selection is therefore particularly important.

Image Alt

Use the Image alt field to provide the appropriate alternative text for the selected image.

The alternative text should correspond to the visual being used.

Optional CTA

The CTA is optional.

This means that the component can be used either as:

Image + Text

or:

Image + Text + CTA

The CTA follows the standard CTA configuration and includes:

• Text
• Link
• Style

Use the CTA when the component should encourage the visitor to continue toward another destination.

If no navigation or action is required, the component can be used without a CTA.

Placement and Compatibility

The Full Width Image with Text Component can be used across different Page Designer layouts.

Its name describes how the image behaves within the available component area, rather than meaning that it must only be placed in one specific Page Designer region.

However, administrators should use common sense when selecting its placement.

The component is designed to provide a significant visual area.

Do not squeeze the component into an excessively narrow or constrained space.

Even if a particular layout technically accepts the component, that does not necessarily make it an appropriate design choice.

Prioritize:

1. Image visibility
2. Text readability
3. CTA visibility where used
4. Overall visual balance

Versatility

The component is relatively versatile in terms of where it can be placed and what message it can communicate.

However, it is not highly versatile in terms of internal design control.

The administrator cannot freely determine where the text appears or substantially redesign the internal composition.

This makes the component particularly appropriate when a simple, predictable image-and-text treatment is sufficient.

If a design requires precise control over the relationship between text and imagery, another component may be more appropriate.

Pairing With Other Components

The Full Width Image with Text Component can be considered standalone.

It already combines:

• Visual content
• Textual context
• Optional navigation

It therefore does not require a separate Textbox or CTA component to function.

It can nevertheless be combined with other components as part of a larger page composition.

Content Is Mandatory

The Content field is mandatory.

Do not use this component when the requirement is to display only an image.

CTA Is Optional

Unlike the Content field, the CTA does not need to be populated.

Only add a CTA when the visual section requires an action or navigation destination.

Text Position Is Fixed

The text remains left aligned and approximately positioned around the middle of the visual.

Administrators do not have granular controls allowing them to freely move the text around the image.

Choose the image with this limitation in mind.

Limited Design Control

This is intentionally a basic media component.

Do not select it when the design requires extensive control over how the text, CTA and visual are positioned relative to one another.

Text Uses Legacy Formatting

The Content field uses the legacy text-editing capabilities.

Do not expect the same formatting freedom available in Textbox Plus.

Textbox Plus remains the dedicated text element providing the enhanced level of formatting control.

Invert Text Color Makes the Text White

Enable Invert text color when white text creates better contrast with the selected image.

Do not select this option automatically. The appropriate setting depends on the visual being used.

Do Not Over-Constrain the Component

The component may fit within different Page Designer layouts, but avoid placing it in a very small or narrow area.

The component requires enough room for the image and overlay content to remain effective and readable.

1. Determine Whether the Component Fits the Requirement

Use Full Width Image with Text when the section requires:

• A prominent image
• Text displayed over the image
• Optionally, a CTA

Remember that the text is mandatory and its position is largely predetermined.

If the requirement calls for extensive control over the composition, consider whether another component would be more appropriate.

2. Choose the Placement

Determine where the component should appear within the page.

The component can fit into different Page Designer structures, provided sufficient space is available.

Avoid unnecessarily narrow or constrained placements.

Consider the final available width before selecting the location.

3. Add the Full Width Image with Text Component

Locate Full Width Image with Text in the Page Designer component list.

Drag and drop it into the required location.

Open the component configuration.

4. Configure the Content

Locate the required Content field.

Enter the text that should appear over the image.

Remember:

Content is mandatory.

The component cannot be configured as an image-only component.

5. Format the Content if Required

Use the available legacy rich-text formatting options to structure the content.

Keep in mind that the field does not provide the enhanced formatting freedom of Textbox Plus.

Review the amount of text being used in relation to the image.

Because the content is displayed over a visual, keep readability in mind when preparing the copy.

6. Review the Fixed Text Position

Remember that the component positions the text:

• On the left
• Approximately around the middle of the visual

You do not need to configure this positioning.

Instead, take it into account when selecting the image.

7. Configure Invert Text Color

Review the selected image and determine which text treatment provides sufficient contrast.

If white text is required, enable Invert text color.

When enabled:

Text → White

Use the setting according to the visual rather than applying it systematically.

8. Select the Image

Locate the required Image field.

Select the image that should be used for the component.

Choose a visual that works with:

• The full-width presentation
• The fixed left-aligned text
• The approximate middle positioning of the text
• The intended text color
• The optional CTA where used

Because the component provides limited positioning controls, the image itself needs to support the composition.

9. Configure the Image Alt

Complete the Image alt field with the appropriate alternative text for the selected image.

10. Decide Whether a CTA Is Required

Determine whether the component needs to direct visitors toward another destination.

If no action is required, the CTA can remain unused.

If navigation is required, proceed with the Button configuration.

11. Configure the CTA Text

Within the Button section, enter the required CTA wording in the Text field.

Keep the CTA clear and appropriate to the destination.

12. Configure the CTA Link

Enter or select the required destination in the Link field.

The CTA works as a standard CTA and should point to the intended destination.

13. Configure the CTA Style

Select the appropriate available Style for the CTA.

Review the CTA against the selected image and text treatment to ensure that it remains clearly visible.

14. Review the Complete Composition

Before saving, confirm that:

• Mandatory Content has been entered.
• The copy works with the fixed left-aligned presentation.
• The image is appropriate for the available width.
• The text remains readable over the image.
• Invert Text Color is enabled or disabled appropriately.
• Image alt has been completed.
• The optional CTA has only been added when required.
• CTA text, link and style are correct where used.
• The component has not been placed in an excessively constrained area.

15. Click Apply

Once the configuration is complete, click Apply to save the Full Width Image with Text Component.

16. Validate on Staging

Validate the completed component on the appropriate staging storefront.

Confirm that:

• The image renders correctly across the available width.
• The image composition works with the selected placement.
• The text is left aligned and appears in the expected position.
• The text is readable against the image.
• White text displays correctly if Invert text color was enabled.
• The CTA displays correctly where used.
• The CTA leads to the correct destination.
• The component has sufficient space and does not appear squeezed.
• The overall composition remains effective across the required responsive views.

If the content technically fits but the image, text or CTA becomes difficult to read because of the available space, reconsider the component placement rather than forcing the Full Width Image with Text Component into an unsuitable layout.