Columns

Place widgets side by side in a layout with one, two, three, or four columns.

widgets layout columns containers

Arrange widgets side by side in 1 to 4 columns. Drag form and content widgets into each column cell on the canvas.

In the builder: ElementsContainers1 column / 2 columns / 3 columns / 4 columns


Widget Settings

Columns are containers — they hold other widgets, not variables.

Layout

Palette item Columns
1 column Single full-width column
2 columns Two equal columns
3 columns Three columns
4 columns Four columns

After placing a column container, drag widgets into each column area on the canvas. Resize column widths in the column header when selected.

Visibility

Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.

UI field Description
Show Always or Conditionally
Active mode is Name of the View Mode that must be active for this widget to appear (when Show is Conditionally).
Formula result is positive Optional formula; evaluated on Calculate

Design

Style the container as a whole — padding, background, borders. Per-column content inherits widget-level Design settings.

Custom CSS — useful selectors:

Selector / class Targets
#cp-{ID} Column row container (.cp-row).
.cp-row Multi-column row.
Custom CSS Classes Classes added in Design.

← Back to Reference

Still have unanswered questions?

We are here to help. Reach out and our team will get back to you.

Contact support