Rows, columns, widths, content, and responsive controls
Every Builder type uses rows and columns. What you insert inside a column depends on the type: content elements, form fields, or locator widgets.
12-column width system
Each row and each column's inner item area is divided into 12 logical units. A width is the number of tracks the selected column, field, content element, or widget occupies:
| Width | Result |
|---|---|
12 | Full row |
8 + 4 | Two-thirds and one-third |
6 + 6 | Equal halves |
4 + 4 + 4 | Three equal columns |
3 + 3 + 3 + 3 | Four equal columns |
2 × 6 | Six equal columns |
The row preset chooser provides Full, ½ + ½, ⅓ ×3, 4 cols, 6 cols, ⅓ + ⅔, and ⅔ + ⅓. Applying a preset rebuilds the row's columns and moves existing items into the first new column, so redistribute them afterward.
Five equal fields and Auto width
Five does not divide evenly into 12, so do not approximate five fields with mixed spans. Select the parent column, open Column settings → Layout, change Items inside this column to Equal widths, and set Desktop columns to Auto. Auto counts the current non-overlay items and creates one equal track for each of them; five fields therefore receive exactly 20% each.
Equal-width mode belongs to the parent column because it coordinates all sibling items. The individual items retain their saved 12-column widths, but those widths are ignored until the column is changed back to Custom widths.
For complete recipes and breakpoint behavior, see Create equal-width and Auto field rows.
Desktop and mobile widths
In Custom widths mode, columns, content elements, fields, and widgets have Width (of 12) and Mobile width (of 12). To show two fields side by side on desktop and stacked on phones, use:
Field A: width 6, mobile width 12
Field B: width 6, mobile width 12
Custom mobile widths and mobile style overrides start at the configured Tablet preview width, 768px by default. Equal-width mode additionally has separate Desktop, Tablet, and Mobile column-count controls; its Mobile count starts at the configured Mobile preview width, 390px by default.
Moving structure
Drag rows to reorder complete sections. Drag columns within or between rows. Drag items between columns. Row actions can duplicate or delete a complete row; column and item actions delete only that node.
Content elements available in content-design types
Content designs offer exactly five element types:
- Store field: renders a selected dynamic field/token;
- Text: static text that can contain inserted dynamic values such as
{distance}; - Heading: heading-style text with the same merge-value support;
- Button: label plus URL and optional icon;
- Icon: standalone icon.
A Category tile uses category tokens rather than store tokens. Form designs insert fields. Layout designs insert registered locator widgets.
Preview records
Store Card, Map infobox, and Map marker previews can select a real Store preview record. Category tile preview uses category records. Change the preview record to check long names, missing images, different custom-field values, and different opening schedules.
The preview is representative, not the public locator runtime. Verify distance, open-now state, search filtering, links, and pagination on an embedded Layout.
Overlay positioning
Enable Overlay position on an item to place it over another item in the same column. Set Top/Right/Bottom/Left and Stack order. This is how an Open now badge can sit over a hero image. The column must contain the underlying element and overlay element together.
Container and advanced controls
The outer container has desktop/mobile width and height controls. Every node can receive space-separated CSS classes under Advanced. Class names are sanitized to letters, numbers, hyphens, and underscores; add site CSS separately.