This procedure is intended for Page Designer administrators who need a responsive two-column layout, particularly when creating a split composition involving video content.

Although Video Split is presented as its own component in Page Designer, it is fundamentally a Grid-type layout component.

Component Objective

The Video Split Component creates a responsive layout containing two areas into which Page Designer components can be inserted.

Its predefined structure is:

Desktop / Tablet

1 row × 2 columns

The two areas are displayed side by side.

Mobile

2 rows × 1 column

The two areas are stacked vertically.

The component therefore follows the same responsive structure as the generic:

2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop) Grid Layout.

Intended Use

As its name suggests, Video Split is primarily expected to be used for split compositions involving video content.

For example, it provides a convenient two-column structure when video needs to be combined with another piece of content.

However, the name communicates an intended use, rather than a unique technical layout capability.

Relationship With the Generic Grid Layout

Video Split and the generic 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop) Grid provide the same responsive layout behavior.

	Video Split	Equivalent Grid
Desktop / Tablet	1 row × 2 columns	1 row × 2 columns
Mobile	2 rows × 1 column	2 rows × 1 column
Side-by-side desktop presentation	Yes	Yes
Stacked mobile presentation	Yes	Yes
Page Designer component	Separate Video Split component	Generic Grid component

Therefore, Video Split should not be understood as providing a responsive structure that cannot otherwise be created with a Grid.

The generic Grid Layout can technically achieve the same result.

Why Use Video Split?

Video Split provides a purpose-oriented option when the intended composition is specifically a video split.

Its name immediately communicates the expected design intention to the administrator building or reviewing the page.

When the requirement is specifically to create a video split composition, Video Split is therefore the natural component to consider first.

When the requirement is simply to create a generic two-column composition, the equivalent Grid Layout can provide the same technical structure.

Layout Behavior

The responsive behavior is predefined.

Desktop / Tablet

The two areas are displayed:

Column 1 | Column 2

This creates the side-by-side split.

Mobile

The same areas become:

Column 1

Column 2

The content therefore stacks vertically rather than remaining squeezed into two narrow mobile columns.

Adding Components

Video Split is a layout component, not a visitor-facing content component by itself.

Once it has been added, components can be inserted into its available areas.

The inserted components provide the actual visitor-facing content.

This follows the same basic principle as a Grid:

Video Split

↓

Available areas

↓

Page Designer components

Component Selection and Available Space

Use common sense when selecting the components to insert.

On desktop, each side occupies part of the available horizontal area.

A component may technically be accepted within the structure while still requiring more room than the layout provides.

Technical compatibility does not guarantee a good visual result.

Do not squeeze a component into one side of Video Split if that component requires substantially more horizontal space to work properly.

Responsive Considerations

Always consider both the desktop and mobile presentations.

A composition that works well side by side on desktop also needs to make sense when the two areas stack on mobile.

Consider:

• The relationship between the two pieces of content
• The amount of content in each area
• The space required by each inserted component
• How the sequence will work once stacked on mobile

The responsive transformation is part of the component's predefined behavior.

Video Split vs. Generic Grid

When choosing between Video Split and the equivalent Grid, consider the intention of the composition.

Prefer Video Split when:

The intended design is specifically a video split composition.

Consider the generic Grid when:

The requirement is primarily for a general-purpose two-column layout.

Both options ultimately provide the same responsive structure.

This distinction is useful when selecting the clearest and most appropriate Page Designer component for the intended design.

Video Split Is a Layout Component

Video Split creates the structure into which other components are inserted.

It does not create the visitor-facing content by itself.

The Layout Is Not Technically Unique

The generic 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop) Grid Layout can technically reproduce the same responsive structure.

Do not describe Video Split as providing a layout that cannot otherwise be achieved in Page Designer.

Use Common Sense With Inserted Components

Each desktop area has limited horizontal space.

Do not insert a component that requires more room than the split can reasonably provide.

Technical Compatibility Does Not Guarantee Good Design

A component being accepted inside the layout does not necessarily mean that the resulting presentation will work well.

Always evaluate the actual rendering.

Consider the Mobile Sequence

Desktop presents the two areas side by side.

Mobile stacks them vertically.

Make sure the resulting mobile content flow remains appropriate.

Avoid Problematic Grid Nesting

Do not use Video Split as the beginning of increasingly complex Grid-within-Grid structures.

As with the generic Grid layouts, excessive Grid nesting can cause poor responsive behavior and severely constrain components placed deeper within the structure.

1. Determine Whether a Split Layout Is Required

Confirm that the intended page composition requires two content areas displayed side by side on desktop and stacked on mobile.

The required responsive structure should be:

Desktop / Tablet: 1 row × 2 columns

Mobile: 2 rows × 1 column

2. Determine Whether Video Split or the Generic Grid Is More Appropriate

Consider the purpose of the composition.

If the intended use is specifically a video split, Video Split is the natural component to consider.

If the requirement is simply a generic two-column layout, remember that the:

2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)

Grid Layout can technically provide the same responsive structure.

3. Add the Video Split Component

Locate Video Split in the Page Designer component list.

Drag and drop it into the required location.

Once added, use its available areas to build the split composition.

4. Plan the Two Areas

Determine which component should occupy each side of the split.

On desktop, think of the structure as:

Area 1 | Area 2

Consider how the two components relate to each other and whether both have sufficient space.

5. Add the First Component

Add the required Page Designer component to the first available area.

Configure that component according to its own requirements.

Click Apply where required to save its configuration.

6. Add the Second Component

Add the required Page Designer component to the second available area.

Configure that component according to its own requirements.

Click Apply where required to save its configuration.

7. Review the Desktop Composition

Remember that desktop/tablet uses:

1 row × 2 columns

Confirm that:

• The two components work effectively side by side.
• Neither component appears unnecessarily squeezed.
• Both areas have sufficient space.
• The relationship between the two pieces of content is clear.

If one component requires substantially more horizontal room, reconsider whether Video Split is the appropriate structure.

8. Consider the Mobile Composition

Remember that mobile changes the layout to:

2 rows × 1 column

The two areas will therefore stack vertically.

Review whether the resulting content sequence remains logical once the side-by-side relationship disappears.

9. Avoid Unnecessary Nested Grids

Do not create increasingly complex Grid structures inside Video Split simply to subdivide the available areas further.

Nested Grid structures can reduce responsiveness and cause components placed deeper within the structure to display poorly.

If extensive subdivision is required, reconsider the overall page structure.

10. Review the Complete Structure

Before completing the page, confirm that:

• Video Split is appropriate for the intended composition.
• Both inserted components have sufficient space.
• The desktop side-by-side presentation makes sense.
• The mobile stacked presentation makes sense.
• No component is being forced into an unsuitable area.
• Unnecessary Grid nesting has been avoided.
• The equivalent generic Grid has been considered where the requirement is simply a general two-column layout.

11. Validate on Staging

Validate the completed page on the appropriate staging storefront.

On Desktop / Tablet

Confirm that:

• The layout displays as one row with two columns.
• Both components display correctly side by side.
• Neither component appears squeezed or broken.
• The overall split composition works as intended.

On Mobile

Confirm that:

• The layout changes to two rows with one column.
• The components stack correctly.
• The content sequence remains appropriate.
• Both components remain readable and usable.
• The responsive presentation does not introduce display problems.

The key principle is:

Video Split is a dedicated Page Designer layout intended primarily for video split compositions. It behaves exactly like the equivalent 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop) Grid, so use Video Split when its purpose matches the intended design while remembering that the generic Grid can technically create the same responsive structure.