Set site widths and gutters

  • widths
  • layout
  • gutters
  • customizer
  • site-editing

Updated

To change how wide your pages are on a Dirigible site, go to Appearance → Customize → Styles → Widths. These settings control how wide your pages, text column, and wide blocks can get, plus the margin (gutter) at the sides of the screen. Set them early so every page and the header line up.

How do I change the page width?

  1. Go to Appearance → Customize → Styles → Widths.
  2. Set Gutters, the space between your content and the edge of the screen.
  3. Set Max Site Width, the widest the site will ever get.
  4. Set Content Width, the width of the main text column.
  5. Set Hero Content, the width of the text inside hero sections.
  6. Set Alignwide Max and Alignwide Min for blocks set to wide width.
  7. Click Publish.

Very wide text columns make long paragraphs hard to read. Keep Content Width comfortable for body text.

Blocks inside a Dirigible Columns block always fill their column, so the toolbar doesn't offer them Wide or Full. To make the whole row wider, choose Wide or Full on the Columns block's toolbar.

How do I make the header and footer full width?

  1. Go to Appearance → Customize → Settings → General.
  2. Set Site Width to Full (header and footer stretch edge to edge) or Wide (they stay within the wide column).
  3. Click Publish.

If the header looks too narrow or too stretched, adjust Site Width together with Max Site Width and Content Width.

Check an inner page and a page with a hero after changing widths.