Columns

Columns are a fundamental part of the builder’s layout system. They allow end-users to organize content in flexible, responsive grids, making it easy to design structured layouts for emails, web pages, or popups. Columns divide the available space in a block into separate sections, where different content elements like text, images, or buttons can be placed.

How Columns Work

The builder operates on a 12-column grid system. This means that the width of the entire row is divided into 12 equal parts, and you can allocate any number of these parts to a column. The sum of all column widths within a block must always equal 12, ensuring the content fits perfectly into the layout.

Example Layouts

Here are some examples of how columns can be used in the builder:

• Single Column Layout: Takes up the full width (12/12 columns).
• Two Column Layout: You can divide the row into two equal parts, each column taking up 6 parts of the grid (6/12 + 6/12).
• Three Column Layout: Three columns can be defined with equal or unequal widths, as long as the total is 12 (e.g., 4/12 + 4/12 + 4/12 or 3/12 + 3/12 + 6/12).

Flexibility in Design

Columns provide immense flexibility in how content is displayed. You can:

• Organize content into distinct sections side-by-side (like text next to an image).
• Create complex layouts with varying column sizes to suit your design needs.
• Ensure responsiveness by stacking columns on smaller screens, such as mobile devices, where the content is automatically adjusted to fit the screen width.

Managing Columns in the Builder

In the builder, end-users can easily manage columns. They can:

• Add or remove columns to structure their layout.
• Resize columns by adjusting the width of each section using the drag handles.
• Reorder content within columns by dragging and dropping elements between them.

Predefined Columns

The predefined columns feature allows developers to add default blocks with specific column configurations to the builder. Learn More

Disable Columns

This feature allows developers to configure the builder to remove the ability to create or edit multi-column blocks. Learn More