Much of a module's appearance on a page can be controlled through the "Advanced options" panel. Module spacing, width, background color, and background image can be modified in this panel.
These are important settings that give you flexibility and control, and these settings will need to be tweaked depending on what modules you are stacking next to each other.
To change these settings, click the Advanced options toggle at the bottom of the module.
Click here to access a visual reference of a text module with the "Advanced options panel expanded.
Spacing refers to the amount of additional top/bottom space outside/inside the module.
A module's spacing setting will change depending on the other modules around it. Use pages that have already been created as a guideline. See the "Rebar Module System" help document for more information on spacing.
This is a set of four dropdowns for selecting the spacing values.
Below is a list of 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 |
Changing the "width" in the Advanced options changes the size of the module relative to the site container.
See the "Rebar Module System" help document for more information on width.
Below is a list of 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 will leave the width setting set to its default option, "Auto." Sometimes, you will want a module to be narrower than the site container. Select the "Slim" option to accomplish this.
When a background color/image has been assigned to a module, select "Width: Auto Extended, Slim Extended, or Wide Extended" in the width options to ensure the background color spans the entire width of the page.
If you are placing two modules together that both have a background color, make sure that "Outer Top/Outer Bottom" spacing is set to "0".
Click here to access a visual reference of a module with a background color with the correct settings applied.