Widths and Layout

Content width controls how wide text and blocks sit on the page. Spacing and section defaults help pages feel consistent without tuning every block by hand.

Set site-wide widths

  1. Go to Appearance → Customize.
  2. Open Styles → Widths.
  3. Adjust the width controls and watch the preview.

Full control reference: Widths.

What the width settings affect

  • Content width — the default reading column for text-heavy sections and many blocks.
  • Wide width — full-bleed sections that still leave side margins on large screens.
  • Spacing scale — vertical rhythm between sections and inside components.

Narrower widths improve readability for long articles. Wider widths suit image galleries, product grids, and split layouts.

See widths in the block editor

Dirigible blocks respect the same width tokens in the editor and on the live site. When you set a block to Wide or Full width, it maps to the values you configured in the Customizer.

  1. Edit a page.
  2. Select a Section or Columns block.
  3. Use the toolbar width control and compare against the front-end preview.

True-to-Site Block Editor describes how editor preview stays aligned with published pages.

Pair widths with typography

Tight content width with large body text can feel cramped; very wide columns with small body text are hard to read.

Suggested workflow:

  1. Set Widths first.
  2. Tune Paragraphs and heading sizes in Palette and Typography.
  3. Check a long-form blog post and a marketing landing page — both should feel balanced.

Layout patterns that use widths

Pattern Approach
Hero with full-bleed photo Use a full-width Section or Hero block; keep headline copy in a narrower inner column when possible
Two-column feature row Columns block at content or wide width
Long article Default content width; avoid forcing full width on every paragraph
Card grid Wide or full width for the grid; card text stays compact inside each card

Header and footer alignment

Header and footer content usually align with the same width system as the page body. After changing widths, spot-check:

Flexible Headers and Mobile Menus covers transparent heroes and sticky bars that sit on top of full-width imagery.

Scroll animations and spacing

If sections use entrance animations, confirm spacing under Site Settings → Animations and Magic Classes and Scroll Animations. Extra vertical padding on animated sections prevents clipped motion.

Related guides