Build layouts
The TheOne element layout is a nested tree: Rows → Cols → Items.
| Level | What it is |
|---|---|
| Row | Outer row, contains one or more columns |
| Col | Responsive column inside a row |
| Item | Content element (text, image, heading, button, …) |
Rows and columns
- Click Add Row to create a new outer row.
- In the Add Row dialog, choose the number of columns (1–4). Each column gets a default width that you can adjust per viewport (mobile, tablet, desktop) afterwards.
- Use Sync all breakpoints to copy the column layout from one viewport to all others.
Inserting content
Click Add Element inside a column and choose the content type:
| Type | Label in the editor |
|---|---|
| Heading | Headline |
| Body text | Text Editor |
| Image | Image |
| Link | Link |
Nesting
A column can contain an inner row:
- Click Add Inner Row.
- Choose 1 or 2 columns for the inner row.
- Maximum nesting depth: 2 levels. Inner rows have a maximum of 2 columns.
Styling nodes
Every Row, Col, and Item has a full styling panel. Click a node and switch to the relevant tab:
| Tab | Options |
|---|---|
| Sizes | Width per viewport, min-height (desktop/tablet/mobile), max-height, max-width |
| Spaces | Padding and margin (4 sides each, responsive) |
| Colors | Text colour, background colour, border colour, border width, radius |
| Alignments | Flex alignment horizontal and vertical, responsive |
| Mask | CSS clip-path: circle, ellipse, diamond, hexagon, wave, blob, or custom SVG |
| Attributes | Custom classes (Bootstrap/Tailwind), inline CSS, arbitrary HTML attributes |
Slider mode
Enable Show as slider in the element header. Each outer row becomes a slide, rendered by DmfSplideSlider. Configure it in the Slider Settings tab:
| Setting | Description |
|---|---|
| Auto slide | Slides advance automatically |
| Animation delay | Duration of the slide transition in milliseconds |
| Delay | Display time per slide in milliseconds |
| Loop | Scroll through slides endlessly |
| Rewind | Jump back to the first slide at the end |
| Visible slides per device | Number of simultaneously visible slides per viewport |
The Navigation tab controls arrows, navigation dots, drag support, and slides per click.
Requirement
Slider mode requires an active DmfSplideSlider plugin.