This procedure is intended for Page Designer administrators who want to create a large, highly visual Before and After presentation using the full width of the page.

It is particularly useful when the visual comparison should be a major part of the page experience rather than a smaller content element.

Although the component is primarily designed for Before and After content, administrators can also use its image composition capabilities more creatively to build full-width visual mosaics or galleries.

The Before and After Full Width component is designed to display Before and After imagery across the full available width of the page.

Unlike the standard Before and After component, this component does not use an interactive reveal mechanism where the visitor moves between the Before and After states.

Instead, the images are presented simultaneously in a predefined composition.

The visitor therefore immediately sees the different images arranged:

• Next to each other, or
• Above and below each other

This makes the component particularly suitable when the visual composition itself is part of the storytelling.

Content Type

The component supports images only for its comparisons.

It does not support video within the comparison slots.

In addition to the imagery, the component provides:

• An optional Header
• An optional Text description
• Up to four Comparisons

The Header and description can be used to explain the treatment, introduce the results, provide context for the imagery, or support another type of visual story when the component is being used creatively.

Placement and Compatibility

The Before and After Full Width component is specifically designed for a full-width presentation.

It can only be used in the Main Region.

Unlike the standard Before and After component, do not attempt to place this component inside:

• Box Layout
• Tab Wrapper
• Grid structures
• Other constrained layouts

The Main Region gives the component the space required for its visual compositions.

Comparison Capacity

The component provides up to four Comparisons.

You do not need to use all four.

Each Comparison can be configured according to the visual story being created.

A Comparison can display a standard large Before and After pair, or the available image slots can be used to create a more complex split composition.

Full-Width Comparison

For the simplest implementation, use one Before and one After image.

The two images then occupy the available comparison space and provide a large, immediately visible comparison.

This approach works particularly well when the objective is to give one result maximum visual impact.

Split Comparison

A Comparison can also contain two pairs of images.

When all four available image slots within the Comparison are used, the available space is divided between the two pairs.

The administrator can decide how the composition should be divided.

This creates two primary approaches:

• A left/right composition
• A top/bottom composition

This allows two visual comparisons to be presented simultaneously within the same Comparison.

Image Split

The component includes an Image Split setting.

The available options are:

• Horizontal
• Vertical

This controls how the images within the comparison are divided and presented.

The appropriate split depends on the visual content being displayed.

For example, one orientation may work better for a portrait or larger facial view, while another may provide a more panoramic treatment for a focused area such as the lips.

The important consideration is not simply which option looks more interesting in Page Designer. The administrator should choose the orientation according to what needs to remain visible within the final composition.

Mixed Compositions

The component provides considerable visual flexibility because the different image pairs do not necessarily need to follow the same composition.

One pair can use one Image Split orientation while another uses the other.

This makes it possible to create more dynamic, mosaic-like compositions.

For example, a Comparison could combine:

• One pair displayed next to each other
• Another pair displayed above and below each other

The result is a more editorial visual composition rather than a simple sequence of identical Before and After pairs.

Image Preparation and Ratio

The composition of the source images matters significantly because the component does not provide an interactive reveal.

When preparing a square visual around 1080 × 1080 px, dividing that visual into two equal areas effectively creates two rectangular display areas of approximately:

1080 × 540 px

or the inverse orientation depending on the selected composition.

Administrators should therefore think about the final crop and composition before selecting the images.

A photograph that works perfectly as a square image may not necessarily work once only half of that visual space is used.

The treatment area, face, product or other focal point must remain correctly positioned within the portion of the image that will actually be visible.

Intended Use: Before and After

The primary purpose of the component is to display treatment results.

It can be used for:

• One large Before and After
• Several Before and After comparisons
• Different views of the same patient
• Different treatment areas
• More editorial compositions combining several result images

The optional Header and description can provide the context necessary to understand the results.

Alternative Use: Full-Width Visual Mosaic

Despite its name, the component does not have to be used exclusively for Before and After imagery.

Because the underlying functionality is essentially the structured display of images, administrators can bend its intended purpose and use it as a full-width visual mosaic.

For example, the available image areas could contain different but complementary visuals rather than literal Before and After states.

This could support:

• Editorial imagery
• Product photography
• Lifestyle imagery
• Campaign visuals
• A visual story using several photographs
• A mosaic of related imagery

The component will still behave according to its Before and After structure, but the images themselves do not necessarily need to represent a Before and an After.

This makes the component potentially useful when a page requires a visual composition for which no dedicated mosaic component exists.

Pairing With Other Components

The Before and After Full Width component can be considered standalone.

It includes its own optional Header and description, allowing the administrator to provide context without requiring an additional Text component.

Other components can naturally be placed before or after it as part of the wider page design, but no specific pairing is required for the component to function.

Main Region Only

The Before and After Full Width component can only be used in the Main Region.

Its design relies on the available page width.

Do not attempt to reproduce the standard Before and After placement rules by placing this component inside a Box Layout, Tab Wrapper or Grid.

Images Only

The visual slots accept images.

Do not plan a Full Width comparison using video content.

There Is No Interactive Reveal

Do not confuse this component with the standard Before and After component.

The visitor does not interact with the imagery to progressively reveal the Before or After state.

The visual composition is immediately visible.

This means image selection and composition are especially important.

Choose the Image Split According to the Subject

Do not choose Horizontal or Vertical Image Split purely as a decorative decision.

Consider what part of the photograph needs to remain visible once the available space has been divided.

The wrong orientation can create an ineffective crop or remove important visual information from the composition.

Prepare Images for the Final Composition

A photograph that looks good on its own may not work once displayed within half of a comparison area.

Consider:

• Subject position
• Treatment area
• Crop
• Image orientation
• Amount of surrounding space
• How the paired images work together

Do Not Use More Comparisons Just Because They Are Available

Four Comparisons represent the component's available capacity, not a requirement.

Use the number required by the visual story.

A single strong full-width comparison may be more effective than filling every available slot.

Alternative Mosaic Usage Requires Judgment

The component can be repurposed for visual mosaics, but this is an alternative use of a component originally designed for Before and After content.

The images should still work naturally within the component's available split structures.

Do not force imagery into the component simply because a mosaic effect is desired.

1. Define the Visual Story

Before adding the component, determine what you are trying to display.

Decide whether the component will be used for:

• A traditional Before and After
• Several Before and After comparisons
• Different views or treatment areas
• A more complex Before and After composition
• An alternative visual mosaic

This decision will influence how many Comparisons you need and how the imagery should be prepared.

2. Prepare the Images

Prepare the required images before configuring the component whenever possible.

Consider the final composition rather than evaluating each image only as a standalone asset.

If the image will occupy only part of the available space, make sure the important visual information remains visible within that area.

Upload the required assets to the Media Library so that they are ready for selection when configuring the component.

3. Add the Component to the Main Region

Locate the Before and After Full Width component in the Page Designer component list.

Drag and drop it into the Main Region.

Do not place this component inside another layout or wrapper.

4. Configure the Optional Header

Complete the Header if the component requires a title or introduction.

The Header is optional.

Its content depends on the story being presented. It does not have to literally say "Before and After."

For an alternative mosaic implementation, the Header can instead introduce the campaign, subject or visual story being displayed.

5. Configure the Optional Description

Add supporting text when additional context is useful.

The description can explain:

• The treatment
• The patient or results
• The purpose of the comparison
• The visual story
• The campaign or subject when using the component as a mosaic

The description is optional and should be used according to the needs of the page.

6. Open the Comparison Section

Locate the Comparison section of the component.

The component supports up to four Comparisons.

Start with the first Comparison and determine how much imagery you want to display within it.

7. Create a Large Single Comparison

For a straightforward full-width Before and After presentation, use one pair of images.

Select the relevant images for the comparison.

This provides a simple, large visual treatment and is appropriate when one result should receive maximum attention.

8. Create a Split Comparison

If you want to display two pairs within the same Comparison, use the additional available image slots.

Using all four image slots allows the Comparison area to be divided between the two pairs.

Decide whether the two pairs should be arranged:

• Next to each other, or
• Above and below each other

Choose the arrangement according to the imagery and the story you want to create.

9. Configure Image Split

Locate the Image Split setting.

Choose between:

• Horizontal
• Vertical

Review how the selected orientation affects the visible portions of the images.

Choose the option that best presents the focal area of the photographs.

For example, a particular split may work well for a broader facial composition, while another may provide a more panoramic treatment for a focused area such as the lips.

10. Mix Split Orientations When Appropriate

If the visual story benefits from a more dynamic composition, different image pairs can use different split approaches.

For example, one pair may use one orientation while the second pair uses the other.

This can create a more varied mosaic-style composition.

Do not mix orientations simply because the functionality is available. Use the combination when it improves the presentation of the selected imagery.

11. Add Additional Comparisons if Required

Continue configuring the remaining Comparison sections if the page requires additional imagery.

The component provides up to four Comparisons, but you do not need to use all of them.

Use only what contributes to the intended visual story.

12. Alternative Approach: Build a Visual Mosaic

If you are using the component outside its traditional Before and After purpose, select the images according to the mosaic you want to create.

The images do not need to represent literal Before and After states.

They can instead be complementary visuals forming a larger editorial composition.

For example, you could combine different:

• Product images
• Lifestyle images
• Campaign photographs
• Detail shots
• Editorial visuals

Use the available Comparison and Image Split controls to determine how those images are arranged.

Remember that you are bending the intended purpose of the component. The component's underlying structure remains the same, so select imagery that works naturally within those constraints.

13. Review the Composition

Before saving, review the complete component.

Confirm that:

• The component is located in the Main Region.
• The correct images have been selected.
• The number of Comparisons is appropriate.
• The selected Image Split orientation works with the subject.
• Important parts of the images are not lost because of the split.
• The different images work together as a composition.
• The Header is correct if used.
• The description provides sufficient context if used.
• A mosaic implementation still looks intentional rather than appearing like a misconfigured Before and After.

14. Click Apply

Once the component has been configured, click Apply.

Apply saves the Before and After Full Width component configuration.

15. Validate the Final Result on Staging

Validate the completed component on the appropriate staging storefront.

Do not rely exclusively on the Page Designer editing view to judge the final visual composition.

On staging, confirm that:

• The component uses the full intended width.
• The Header and description display correctly.
• All selected images display correctly.
• The split orientation works as intended.
• The focal areas remain visible.
• Before and After imagery is immediately understandable when used traditionally.
• Multiple comparisons form a coherent composition.
• Any alternative mosaic usage looks deliberate and visually balanced.

If the composition does not work, reconsider the source imagery, crop, number of images or Image Split orientation rather than trying to move the component into a more constrained layout.