Skip to content

Run a section edge to edge

You can let a section's content run from edge to edge, or keep it boxed in the centre while the background fills the window. One toggle on the section decides: Full width. The example builds a grey section with three columns, then switches Full width on so the columns stretch. For colour and photo fills, see Backgrounds.

Build a boxed section

  1. Click + in the content area and pick Section from the Layout tab.
  2. Hover the section, open More and choose Settings.
  3. Open the Style panel and pick a light grey Background.
  4. Click Save. The grey already spans the window.
  5. Click + on the section and pick Row.
  6. Click the grid icon on the row, pick the tile with three equal columns and click Save.
  7. In each column, click +, pick Text from the Content tab, type a Heading 4 and one line, and click Save.

The three columns now sit in a centred box on the grey band.

Switch on Full width

  1. Open More on the section and choose Settings.
  2. In the General panel, switch on Full width.
  3. Click Save.
  4. Click Save on the DXPR Builder toolbar.
  5. Open the view menu, the eye icon on the toolbar, and choose Preview.

What you see

The grey band looks the same as before. Only the content box changed: the first column now starts at the left edge of the section and the last one ends at the right edge.

Every section has two parts: an outer element that carries the background, and an inner box that holds the rows. Full width only changes the inner box. Off, it is centred with a maximum width; on, it stretches to the section's edges.

Settings

The section's General panel holds three layout toggles, all off by default:

Setting What it does
Full width Rows fill the section edge to edge instead of a centred box
100% height The section is at least as tall as the browser window
Vertical centering Rows sit in the vertical middle of the section

Rows have no width setting of their own; the section decides.

Two patterns

  • Edge-to-edge background, boxed text: the common hero. Leave Full width off and set the background in the Style or Background effects panel.
  • Edge-to-edge content: a strip of cards or pictures. Switch Full width on and give the columns some Padding if text sits too close to the window edge.

If you don't see the change

  • Nothing changes when you switch on Full width. On a narrow screen, such as a phone, the boxed version already fills the width. Widen the browser window and look again.
  • The background stops short of the window edges. Your theme places the page content in a boxed region, and the section can only fill that region. Choose a full-width page layout or region in your theme.
  • Text touches the window edge. That is what Full width does. Add Padding in the Style panel of the columns, or leave Full width off.

What's next?

Something wrong or missing on this page? Report it or edit the page.