Two Column Layout

What It Does

Creates a side-by-side two-column layout where each column can contain different types of content including text, images, videos, counters, or process cards.

When to Use It

• Pairing an image with descriptive text
• Creating before/after or comparison layouts
• Displaying a video alongside related content
• Building feature highlights with visual elements
• Creating sections with text on one side and media on the other

How to Add This Module

1. In the page builder, find "Two Column Layout" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Content Tab

Left Column Content

Setting	What It Does	Options
Content Type	Choose what goes in the left column	Empty, Body Stack (Text), Image, Video, Counter, Process Cards
Enable Sticky	Makes the column stick while scrolling (Body Stack only)	On/Off
Full Height	Makes the column fill the full container height (Body Stack only)	On/Off

When "Body Stack (Text Content)" is selected:

Setting	What It Does	Options
Show/Hide Elements	Control which text elements appear	Icon Heading, Heading, Body, Toggles, Button
Icon Heading	Small label above main heading	Text, level, icon
Main Heading	Primary heading text	Text, level, uppercase, color
Body Content	Rich text content	Formatted text, color, size
Button	Call-to-action button	Text, link, style, size

When "Image" is selected:

Setting	What It Does	Options
Image	Upload or select an image	Image picker
Alt Text	Description for accessibility	Any text
Object Fit	How image fills its container	Cover, Contain, Fill

When "Video" is selected:

Setting	What It Does	Options
Video URL	Link to the video	YouTube, Vimeo, or hosted URL
Poster Image	Thumbnail shown before playing	Image picker

Right Column Content

Same options as Left Column Content (see above).

Style Tab

Layout Settings

Setting	What It Does	Options
Column Layout	Width ratio between columns	50/50 (Equal), 60/40, 40/60, 66/33, 33/66, 70/30, 30/70, 75/25, 25/75
Column Gap	Space between the two columns	None, Extra Small, Small, Medium, Large, Extra Large, 2X Large
Stack to Single Column	When columns stack vertically on smaller screens	Extra Small (479px), Small (640px), Medium (768px), Large (1024px), Never
Content Width	Maximum width of the overall section	Default, Full Width, Extra Large, Large, Medium, Small
Vertical Alignment	How columns align vertically	Top, Center, Bottom, Stretch to Equal Height
Column Order	Desktop column arrangement	Left Column First, Right Column First
Mobile Stack Order	Order when stacked on mobile	Left Column First, Right Column First

Section Padding

Setting	What It Does	Options
Individual Padding Control	Control each side separately	On/Off
Vertical Padding	Top and bottom spacing	None through 2X Large
Horizontal Padding	Left and right spacing	None, Default, Extra Small through 2X Large
Customize Mobile Styling	Set different padding for mobile	On/Off

Section Styling

Setting	What It Does	Options
Background Style	Section background color	White, Black, Gray, Gray Gradient
Background Image	Optional background image	Image picker

Example Setups

Example 1: Image Left, Text Right

1. Drag "Two Column Layout" to your page
2. Set Left Column Content Type to "Image"
3. Upload your image and add alt text
4. Set Right Column Content Type to "Body Stack (Text Content)"
5. Add your heading and description
6. In Style tab, set Column Layout to "40/60" to give text more room
7. Set Vertical Alignment to "Center"

Example 2: Video with Description

1. Drag "Two Column Layout" to your page
2. Set Left Column Content Type to "Body Stack (Text Content)"
3. Add a heading like "Watch Our Story"
4. Add body text introducing the video
5. Set Right Column Content Type to "Video"
6. Paste your video URL
7. Set Column Layout to "50/50"
8. Set Background Style to "Black" for a cinematic look

Example 3: Mobile-First Content Order

1. Drag "Two Column Layout" to your page
2. Add text content to the Right Column
3. Add an image to the Left Column
4. In Style tab, set Mobile Stack Order to "Right Column First"
5. This ensures the text appears before the image on mobile devices
6. Set Stack to Single Column to "Medium (768px)"

Tips

• Use "Center" vertical alignment when pairing text with images for a balanced look
• The "Stretch to Equal Height" alignment makes both columns the same height, useful for card-style layouts
• For landing pages, consider using "60/40" or "70/30" to give text content more prominence
• Enable "Sticky" on a text column to keep it visible while users scroll through a tall image or video
• Always set meaningful alt text for images to improve accessibility
• Use the Mobile Stack Order to control which content appears first on phones
• The Background Image option is great for hero-style sections with content overlaid