What is the Side by Side Layout?
The side-by-side layout lets you display two elements next to each other in a two-column format. It's perfect for pairing a visual (like a video or image) with supporting text, or placing two data elements together for easy comparison.
You can add any combination of content to each column — text, images, charts, videos, and more.
How to Add a Side-by-Side Layout
In the editor, click the + Add a content block button.
From the content block menu, choose Side by side.
The layout will be inserted with a text area on the left and an empty element placeholder on the right.
By default, text appears on the left side. If you'd like to swap the positions, simply drag and drop an element to the other side.
Adding Content to Each Column
Once the layout is added, click inside either column to start adding content. You'll see quick-add buttons for Text, Image, Video, and More (which includes charts and other elements).
Here are some examples of what you can add to each column:
Image — Browse stock images, upload your own, or generate one with AI.
Video — Add a stock video, paste a YouTube/Vimeo/Loom link, or upload your own file.
Chart — Choose from vertical bar, horizontal bar, line, donut, pie, and more chart types.
Text — Add a heading, paragraph, bullet list, or any other text element.
You can change the order of the elements by drag and dropping them to the desired place.
Customizing the Layout Block
Once you have added the desired elements you can now customize their look. Click anywhere on the layout block (outside of the individual columns) to access the layout-level settings toolbar. From here you can adjust:
Align — Set horizontal alignment (Left, Center, Right) and vertical alignment (Top, Middle, Bottom) for the content within the columns.
Background color — Change the background color of the entire layout block.
Border color — Set the color of the border around the block.
Border — Control the border width in pixels.
Radius — Round the corners of the layout block.
Width / Height — Adjust the dimensions of the block.
Animation — Animate the block or individual elements inside it, and control animation speed and opacity.
Anchor — Set an anchor link to this block for internal navigation.
For animation settings, click Animation in the toolbar. You can toggle animation on or off, choose to animate the Block as a whole or animate individual Elements, and access advanced settings for fine-tuning speed and opacity.
