Section layout and spacing
Most Treble sections end with the same group of settings. They decide how wide the section is, whether it sits in a rounded panel, how much space it has above and below, which colors it uses, and on which devices it shows. Learn them once here; the other articles only list each section's own settings.
Change a section's layout
- Select the section in the theme editor and scroll to the Section group at the bottom of its settings.
- Pick a Layout (1): Section default, Narrow, Standard, Wide, Full width or Boxed. The widths themselves are set once in Theme settings > Layout.
- Turn on Round the section corners (2) to show the section as a rounded panel. Each corner has its own radius.
- Set Top padding and Bottom padding (3), with separate values for mobile.
- Choose a Color scheme for the section (above the Section group), and use Hide on desktop / Hide on mobile at the very end to show it on one device only.
Settings reference
Section (shared)
| Color scheme | Colors of the section, from Theme settings > Colors. |
|---|---|
| Layout | Section default, Narrow, Standard, Wide, Full width or Boxed. Widths are shared by every section and set in Theme settings > Layout. Boxed sits the section in a card with the Boxed corner radius. |
| Round the section corners | Shows the section as a rounded panel. Side spacing comes from Theme settings > Layout > Rounded section side spacing. |
| Top left / Top right / Bottom right / Bottom left radius | Each corner of a rounded section. |
| Top padding / Bottom padding | Space inside the section, on desktop. Theme settings > Layout > Section spacing scale multiplies it for every section. |
| Mobile top padding / Mobile bottom padding | The same on phones. |
| Show section divider | A thin rule above the section. |
| Hide on desktop / Hide on mobile | Shows the section on one kind of device only. Phones and tablets below 750px count as mobile. |
How it works
- A rounded section with Rounded section side spacing at 0 overlaps the sections around it, so its corners show them. Above 0, it gets space on both sides instead.
- Two neighbouring sections with the same color scheme read as one block; dividers (Theme settings > Shape > Show section dividers, or Show section divider here) separate them.
- Hidden sections still exist in the template, so you can keep a desktop and a mobile version of the same content.