Adding Responsive Columns

The Responsive Columns tool in the Editor’s Dynamic Text Area allows you to organize content side-by-side on larger screens, while automatically stacking that content for mobile devices. Here's how to use it:

How to Insert Responsive Columns

1. Place your cursor where you want the columns to appear.

2. From the toolbar, go to Insert > Responsive Columns.

3. Choose how many columns you want (up to four). For example, select three.

Once inserted, the columns will appear outlined with light gray divider lines in the text area. These outlines are for editing only and won’t appear on the live site.

Adding and Managing Content

Click into any column to start adding content. You can use all your usual tools—text formatting, images, videos, buttons, etc.—and content will stay contained within the column’s width.

When you're working inside a column, the toolbar updates with tools specific to column layout.

Column Settings Overview

Here’s what you can control:

• Lock Column Widths
  Keeps columns evenly spaced by default. Toggle off by clicking the icon to manually resize column widths by dragging the dividers. Click it again to turn it back on if you change your mind.
  
  

• Column Count
  Change the number of columns at any time (e.g., switch from 3 to 2 without starting over).
  
  

• Mobile Direction
  Controls how columns stack on mobile:

  • Column (default): Left-to-right becomes top-to-bottom.

  • Column Reverse: Rightmost column appears first in the stack.

  • Row: Prevents stacking; keeps columns side-by-side on mobile.

  • Row Reverse: Same as Row, but reverses the column order.
    
    

• Vertical Alignment
  Aligns content vertically when columns have different heights. Choose from:

  • Top

  • Middle

  • Bottom
    
    

• Column Padding
  Adjusts the space between columns. Options include:

  • None

  • Small

  • Medium (default)

  • Large

  • Extra Large
    
    

• Outer Padding
  Sets the space around the entire group of columns—not between them, but outside the whole set.

Best Practices

• Preview on multiple screen sizes. Even though responsive columns adjust automatically, layout issues can sometimes pop up depending on your content.

• Use responsive columns to highlight key content side-by-side—like feature descriptions, staff bios, or product comparisons.

• Ask for help if needed. If something doesn’t look quite right, our support team is happy to assist.

Responsive columns are a powerful layout tool to make the most of your available space—without sacrificing mobile usability. Just be sure to save and preview your work regularly!