Much of a module’s appearance on a page is controlled through its Advanced options panel — spacing, width, background color, and background image. These settings give you flexibility and control, and you’ll tweak them depending on which modules sit next to each other.
To change them, expand the Advanced options toggle at the bottom of the module.
Spacing is the amount of additional top/bottom space outside/inside the module.
A module’s spacing usually changes depending on the modules around it — use existing, finished pages as a guide. See the “Rebar Module System” page for more on spacing.
This is a set of four dropdowns for selecting the spacing values.
Available spacing options:
| Option | Height (rem) | Height (px) |
|---|---|---|
0 | 0rem | 0px |
1 | 0.75rem | 12px |
2 | 1.5rem | 24px |
3 | 3rem | 48px |
4 | 4.5rem | 72px |
5 | 6rem | 96px |
6 | 7.5rem | 120px |
7 | 9rem | 144px |
8 | 10.5rem | 168px |
The Width option changes the size of the module relative to the site container. See the “Rebar Module System” page for more on width.
Available width options:
| Option | Width |
|---|---|
Auto | Same as site container |
Auto Extended | Same as site container with full-width background |
Slim | Narrower than site container |
Slim Extended | Narrower than site container with full-width background |
Wide | Wider than site container |
Wide Extended | Wider than site container with full-width background |
Full | Full-width |
Typically you’ll leave the width at its default, Auto. When you want a module narrower than the site container, choose Slim.
When a background color or image is assigned to a module, choose an Extended width (Auto Extended, Slim Extended, or Wide Extended) so the background spans the full width of the page.
If you place two modules together that both have a background color, set the Outer Top / Outer Bottom spacing between them to 0 so the colors meet cleanly.