Skip to main content

Scrollable Media

The Scrollable Media component lets you create a clean two-column layout:

  • One column contains your content
  • The other column contains images or videos
  • One column can scroll while the other stays visually structured

It works beautifully on both desktop and mobile devices.

🧱 Components Overview

There are two parts to use:

  1. Scrollable Media – The main container
  2. Scrollable Media Link Wrapper Content – Where you place your images or videos

1️⃣ Scrollable Media (Main Container)​

This is the main section you add to your page.

It controls:

  • The layout
  • The column order
  • The height of the content area

Settings Explained​

Left Column Position – Mobile​

Choose whether the left column appears first or second on mobile devices.

Options:

  • Left
  • Right

Left Column Position – Desktop​

Choose whether the left column appears first or second on desktop screens.

Options:

  • Left
  • Right

Content Height – Mobile​

Controls how tall the content area appears on mobile devices.

Content Height – Desktop​

Controls how tall the content area appears on desktop screens.

2️⃣ Scrollable Media Link Wrapper Content​

This is where you place your image or video.

You can make the media clickable by adding a link.

Setting​

Content URL​

Add a link here if you want users to go to another page when they click the media.

🚀 How to Use

Follow these simple steps:

Step 1​

Drag and drop Scrollable Media onto your page.

Screenshot: Drag and drop Scrollable Media component

Step 2​

Drag and drop Scrollable Media Link Wrapper Content inside it.

Screenshot: Drag and drop Scrollable Media Link Wrapper Content component

💡 Tip: Add all the wrapper blocks at once to make setup easier.

Screenshot: Recommend setup

Step 3​

Inside each wrapper, add your media:

  • Image or
  • Video

Screenshot: Drag and drop Media components

📱 Important: Add Two Versions of Each Image

For best results, upload:

  • One version for Desktop
  • One version for Mobile

This ensures the design looks great on all screen sizes.

Use These Class Names​

For images:

  • Desktop version → desktop-image
  • Mobile version → mobile-image

This ensures the correct version shows on each device.

Screenshot: Class name tips

Screenshot: Class name tips

📐 Recommended Image Size

For desktop images:

  • Use a 1:1 ratio (square images)
  • Example size: 1200 × 1200 px

This keeps the layout clean and consistent.

💡 Best Practices

  • Always upload both mobile and desktop versions.
  • Keep images high quality but optimized for web.
  • Preview your page before publishing.
  • Keep content clear and not overly long.
  • Make sure links go to the correct destination.
Last updated on