Widths and Layout

Updated

Width settings control how wide text and blocks can grow on the page. Set them once so pages stay consistent without adjusting every block.

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 standard reading column for text.
  • Alignwide Min and Alignwide Max: how wide Wide blocks can get, so they stretch past the text column without going edge to edge.
  • Max Site Width: the widest the whole page can get on very large screens.
  • Gutters: side spacing so text and blocks don't touch the edge of the screen.
  • Hero Content: how wide the headline and copy can get inside Hero blocks.

Narrower columns are easier to read in long articles. Wider settings suit image galleries, product grids, and split layouts.

See widths in the block editor

Dirigible blocks use the same widths in the editor and on the live site. When you set a block to Wide or Full width, it uses the values from the Customizer.

  1. Edit a page.
  2. Select a Section or Columns block.
  3. Change the width in the block toolbar and compare it with the live page.

True-to-Site Block Editor explains how the editor matches published pages.

Balance widths and text size

A narrow column with large body text can feel cramped. A very wide column with small text is hard to read.

A good order:

  1. Set Widths first.
  2. Adjust Paragraphs and heading sizes (see Palette and Typography).
  3. Check a long blog post and a landing page. Both should feel balanced.

Layout patterns

Pattern Approach
Hero with an edge-to-edge photo Full-width Section or Hero block; Hero Content keeps the headline readable
Two-column feature row Columns block at content or wide width
Long article Default content width; don't force every paragraph to full width
Card grid Wide or full width for the grid; text stays compact inside each card

Header and footer width

Site Width under Settings → General decides whether the header and footer run edge to edge (Full) or line up with your wide blocks (Wide). After changing widths, check:

Flexible Headers and Mobile Menus covers transparent and sticky headers over full-width images.

Scroll animations

If sections use entrance or scroll animations, turn them on under Settings → Animations. See Magic Classes and Scroll Animations for the classes to add.

Related guides