Skip to main content
Columns allow you to divide a section into multiple vertical areas so you can place content side by side. They are essential for building structured layouts like:
  • Text + Image
  • Feature grids
  • Multi-column sections

​
How to Add Columns

  • Open the left sidebar
  • Go to Layout
  • Drag Columns into a section

​
Column Settings

Once selected, you’ll see column controls on the right panel.

​
Device-Based Layout

You can define different column layouts for each device:
  • Desktop → Choose how many columns (1–6)
  • Tablet → Adjust layout for medium screens
  • Mobile → Usually set to 1 column for better readability
👉 This ensures your design is responsive across all devices.

​
Adjusting Column Count and Sizes

You can easily control both the number of columns and how much space each one takes.
  • Select the Columns element
  • Open the Settings Panel on the right

​
Change Column Count

  • Choose a predefined layout (2, 3, 4, etc.)

​
Adjust Column Widths

You have two ways:
  • Visual Drag → Drag the divider between columns directly on the canvas
  • This lets you quickly change the width ratio (for example 70/30 or 50/50)

​
Gap (Spacing Between Columns)

  • Gap controls the space between columns
  • Measured in pixels (px)
Example:
  • Gap: 0 → Columns touch each other
  • Gap: 20 → Adds space between columns

​
How Columns Work

  • Each column acts like a container
  • You can drop elements inside each column
  • Columns sit inside sections
Structure example:
Section → Columns → Elements

​
Important Notes

  • Columns must be inside a section
  • Each column can hold multiple elements
  • You can change layouts per device for better responsiveness