Skip to content

Lay out content in columns

Here you build one page with the four column layouts you will use most: content with a sidebar, two equal halves, three thirds and four quarters. Each gets a heading above it. Use it to learn which preset fits which content. For every row setting, see Rows and columns.

The video builds a council's waste collection page.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their section. That is why each heading goes in after its row: it lands above it.

Choose a layout

Layout Best for Preset
Content with a sidebar articles with related links 2/3 + 1/3
Two equal halves comparisons, before and after the row's default
Three equal thirds feature highlights, services 1/3 + 1/3 + 1/3
Four equal quarters statistics, small cards 1/4 + 1/4 + 1/4 + 1/4

A new Row arrives with two equal columns. Every other layout comes from the row's grid icon (Column layout).

Step 1: content with a sidebar

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Click + on the section and pick Row. Click its grid icon (Column layout), pick the 2/3 + 1/3 preset and click Save.
  3. Click + in the wide column and pick Text from the Content tab. Type the article, set the first line to Heading 3 and click Save.
  4. Click + in the narrow column and pick Text. Type "Related" as Heading 4, add one line per related page and click Save.
  5. Click + on the section and pick Text; it lands above the row. Type "Content with a sidebar" as Heading 2 and click Save.

Step 2: two equal halves

  1. Hover the section and click Add Section Below. Open the new section's More > Settings, pick a light grey Background in the Style panel and click Save.
  2. Click + on the section and pick Row. Two equal columns is the default, so there is nothing to change.
  3. Add a Text element in each column: "Before" and "After" as Heading 4 with one line each.
  4. Add the heading "Two equal halves" the same way as in Step 1.

Step 3: three equal thirds

  1. Add a third section with Add Section Below and give it the Align text center class.
  2. Add a Row, click its grid icon (Column layout), pick the 1/3 + 1/3 + 1/3 preset and click Save.
  3. Add a Text element in each column: "Paper", "Glass" and "Organic" as Heading 4 with one line each.
  4. Add the heading "Three equal thirds".

Step 4: four equal quarters

  1. Add a fourth section with a light grey Background and the Align text center class.
  2. Add a Row, click its grid icon (Column layout), pick the 1/4 + 1/4 + 1/4 + 1/4 preset and click Save.
  3. Add a Text element in each column: the day as Heading 4 and what is collected.
  4. Add the heading "Four equal quarters".

Step 5: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

On smaller screens

Columns sit side by side from 768 pixels wide, so tablets show the same layout as desktops. On phones each column takes the full width, and the columns stack in their order. For another layout on tablets, click the row's grid icon (Column layout) and choose Add screen size.

Go further

Not shown in the video:

  • Narrow, wide, narrow: the 1/4 + 1/2 + 1/4 preset keeps long text readable with empty margins.
  • Mirror row: switch it on in the row's settings to swap the columns on tablets and desktops. Phones keep the original order, so the first column still comes first there.

What you see

Four bands follow each other, each with its heading on top. The article and its related links share the first, two halves sit on grey, and three centred thirds come next. Four centred quarters on grey close the page.

If you don't see the columns as shown

  • The row has the wrong number of columns. The preset applies only when you click Save in the layout dialog. Click the row's grid icon (Column layout) again, pick the preset and click Save.
  • A heading sits under its row. The heading went in before the row, and new elements land at the top of their section. Drag the heading above the row by the drag handle on its control bar.
  • The columns stack on a tablet. The tablet is narrower than 768 pixels, such as a small tablet in portrait. Add a layout for that width with Add screen size in the row's layout dialog.
  • Your changes are gone after a reload. You left the page before clicking Save on the builder toolbar. If Save shows an error, see Changes do not save.

What's next?

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