This procedure is intended for Page Designer administrators who need to display Before and After results using image comparisons.

The component can support several types of presentations, including a straightforward Before and After for one patient, several views of the same patient, or a small gallery featuring results from several patients.

Objective

The Before and After component is designed to present visual comparisons using pairs of images.

Each comparison consists of:

• One Before image
• One After image

The component supports up to four comparison pairs, meaning that a single component can contain between 2 and 8 images depending on how many comparison slots you choose to use.

You do not need to use all four available pairs.

Content Type

The comparison itself supports images only.

The Before and After component is not intended for video comparisons.

In addition to the comparison images, the component includes content fields that allow administrators to provide context around the visual results:

• Header
• Text Block
• Optional Button / CTA

The Header can be used freely depending on the story being presented. For example, it could contain the patient's name or introduce the results being shown.

The Text Block can provide additional context such as information about the patient, the treatment, the results being presented, or any other information relevant to the content.

Using the Text Block is strongly recommended. The images may communicate the visual difference, but accompanying text helps the visitor understand what they are looking at and why it is relevant.

Placement and Compatibility

The Before and After component requires sufficient horizontal space to display correctly.

The recommended placement order is:

1. Box Layout, recommended
2. Main Region
3. Tab Wrapper, possible but less ideal

The Box Layout is the preferred option because it gives the component sufficient space while maintaining the page margins.

The Main Region also provides enough room for the component to display correctly.

A Tab Wrapper can be used when appropriate, although it is not the preferred configuration.

The component should not be placed inside small or crowded Grid layouts. Although Page Designer may technically allow the component to be dropped there, the available space can become too restricted and cause the component design to break.

Image Specifications

Before and After images should use a square format.

The recommended image size is:

1080 × 1080 px

Smaller square images, for example approximately 400 × 400 px, can also work.

There is generally no benefit in uploading unnecessarily large, very high-resolution files. Larger files increase the amount of content the website needs to load and may negatively affect page performance.

Media Library

Images can be selected from the Media Library.

There are two possible workflows.

Recommended workflow

Prepare the assets before building the page:

1. Create the appropriate folder in the Media Library.
2. Upload all Before and After images required for the project.
3. Organize the assets.
4. Build the page and select the prepared images from the Media Library.

This is the recommended approach because it keeps asset management and page building separate and generally makes the authoring process cleaner and faster.

Alternative workflow

Images can also be uploaded while building the page.

If an image is not already available, the administrator can upload it to the Media Library during the page-building process and then select it for the component.

Both approaches work. Preparing the assets beforehand is simply the recommended working method.

Versatility and Typical Uses

The component can be used in several ways.

Single Patient

The simplest implementation is to display one Before and After pair for one patient.

The Header and Text Block can then provide information specifically related to that patient and their results.

Multiple Views of One Patient

The four available comparison pairs can be used to show several views or angles of the same patient.

For example, different pairs could show the patient from different perspectives while keeping all results within a single component.

Mini Gallery

The component can also be used more creatively as a small Before and After gallery.

The four pairs do not have to represent the same person.

For example:

• Comparison 1: Patient A
• Comparison 2: Patient B
• Comparison 3: Patient C
• Comparison 4: Patient D

The Header and Text Block can then introduce the broader story or message connecting those results.

In this configuration, the component can effectively become a teaser for a larger collection of results.

An optional CTA can then direct visitors towards another page containing additional information or more Before and After content.

CTA Capabilities

The Button / CTA is optional.

If the Before and After content does not need to lead anywhere else, there is no requirement to add a CTA.

When a CTA is useful, it can direct visitors to destinations such as:

• Another page
• A product page
• A category
• An external URL

The available button styles are:

• Solid
• Outline

The choice between Solid and Outline is primarily a design decision and should be made according to the desired visual treatment of the page.

Pairing With Other Components

The Before and After component can be considered standalone.

It already provides its own Header, Text Block, comparisons and optional CTA, so additional components are not required for visitors to understand or interact with it.

The internal Text Block should be used when context is required rather than adding components unnecessarily around the Before and After component.

Do Not Use the Component in Constrained Grid Layouts

The Before and After component needs sufficient space.

Avoid placing it inside small, crowded or highly divided Grid structures.

Even if Page Designer technically allows the placement, the component can become too constrained and the design may break.

Use:

1. Box Layout whenever possible.
2. Main Region when appropriate.
3. Tab Wrapper when the page design requires it and sufficient space remains available.

Use Square Images

Before and After assets should be square.

Aim for 1080 × 1080 px when preparing the assets.

Smaller square images can also work, but avoid unnecessarily large files that may affect page-loading performance.

Do Not Upload Video

The comparison slots are intended for images, not videos.

Do Not Assume All Four Comparison Pairs Must Be Used

Four pairs represent the maximum capacity, not a requirement.

Use only the number of comparisons necessary to tell the story effectively.

Give the Images Context

Avoid dropping Before and After images onto the page without explaining what the visitor is seeing.

Use the component's Header and especially its Text Block to provide appropriate context around the results.

1. Prepare the Before and After Images

Whenever possible, prepare the images before beginning the page build.

Open the Media Library and create or use an appropriate folder for the project.

Upload the Before and After images you intend to use.

Prepare the assets in a square format, ideally:

1080 × 1080 px

Organizing the assets beforehand is recommended because it makes the subsequent page-building process faster and cleaner.

If the images have not been uploaded beforehand, they can still be uploaded to the Media Library while configuring the component.

2. Choose Where the Component Will Be Placed

Determine where the Before and After component should sit within the page structure.

The recommended options are:

1. Box Layout
2. Main Region
3. Tab Wrapper

Prefer the Box Layout for the standard implementation.

Avoid narrow Grid structures or other highly constrained areas where the component will not have sufficient space to display correctly.

3. Add the Before and After Component

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

Drag and drop it into the selected area of the page.

4. Add a Header

Complete the Header according to the content you are presenting.

There is no single required approach to the Header.

For example, it could identify a patient or introduce the broader result story being presented by the component.

5. Add Supporting Text

Use the component's Text Block to give context to the images.

The text can provide information such as:

• The patient or patients being presented
• Treatment information
• An introduction to the results
• Additional context supporting the visual comparison

The exact content depends on the purpose of the page.

The important point is to avoid presenting visual results without enough information for the visitor to understand their context.

6. Decide Whether a CTA Is Required

The CTA is optional.

If the component should simply present the Before and After results, you can leave the CTA unused.

If visitors should be able to continue to another destination, configure the button and its link.

Depending on the intended journey, the CTA can lead to a page, product page, category, external URL or another available destination.

Choose the appropriate button style:

• Solid
• Outline

7. Configure the Comparison

Open the Comparison section.

Select the first Before image from the Media Library.

Then select the corresponding After image.

This creates one complete comparison pair.

8. Add Additional Comparison Pairs if Required

Repeat the process if additional comparisons are needed.

The component supports a maximum of:

4 Before images + 4 After images = 8 images

You are not required to complete all four pairs.

Only add the number of comparisons required for the experience you are creating.

9. Choose the Appropriate Storytelling Approach

Consider what the component is intended to communicate.

Option A: One Patient, One Comparison

Use a single Before and After pair and provide contextual information about that patient in the Header and Text Block.

Option B: One Patient, Several Views

Use several comparison pairs to show different views or angles of the same patient.

Up to four Before and After pairs can be used for this approach.

Option C: Mini Gallery

Use the available comparison pairs to feature several different patients.

For example, each comparison pair can represent a different patient.

Use the Header and Text Block to introduce the overall message connecting the different results.

If more results are available elsewhere, consider using the optional CTA to turn the component into a teaser, directing visitors towards a larger collection or dedicated results page.

10. Review the Complete Component

Before saving, review the component as a whole.

Confirm that:

• The correct Before image is paired with the correct After image.
• The images are displayed in the intended order.
• The Header is appropriate.
• The Text Block provides sufficient context.
• Only the necessary comparison slots have been used.
• The CTA has been configured correctly if one is required.
• The CTA destination is correct.
• The selected Solid or Outline button style is appropriate.

11. Apply the Configuration

Once the component is complete, click Apply.

Apply saves the configuration you have created for the Before and After component.

Do not leave the component without applying your changes.

12. Validate the Component on Staging

Preview the completed page and validate the result on staging.

Check that:

• The Before and After images display correctly.
• The component has sufficient space.
• The design has not been broken by its placement.
• The Header and Text Block display correctly.
• The comparisons are easy to understand.
• The CTA displays and leads to the intended destination if one has been configured.
• Page loading remains acceptable with the selected image assets.

If the component appears constrained or broken, reconsider its placement and move it to a Box Layout or Main Region rather than attempting to force it into a smaller Grid structure.