Adding a Section

A section is one band of your page, such as a hero at the top or a grey band of features below it. You give each section its own background, text colour, spacing and height, then fill it with rows or content. Read this page to add and set up sections; to split one into columns, see Rows and columns.

Add a section

The example builds a navy hero section for a clinic. A light grey section with three columns follows below it.

1. Click Add Elements on an empty page and pick Section from the Layout tab. Below an existing section, click Add Section Below, the round plus under it.
2. Hover the section, open More and choose Settings.
3. Set up the whole section: here Align text center under HTML classes, a navy Background and a white Font color. Click Save.
4. Click + on the section to add content straight into it, or add a Row to split it into columns.
5. Click Save on the toolbar to store the page.

Background and Font color are in the dialog's Style panel. New elements land at the top of the section, so add the lowest one first: in the video, the button goes in before the heading.

What you see

The navy band fills the window from edge to edge. Its heading and button stay in a centred box, the section's inner container. The grey section starts right below, with its three feature columns in the same centred box.

Each new section already carries the class Vertical padding size 5 (py-5) in HTML classes. That class gives it the space above and below its content.

Set up your section

The settings dialog has five panels: General, Background effects, Animation, Style and Hover style. Only sections have Background effects.

Setting	Panel	What it does	Default
Full width	General	Rows run edge to edge instead of inside the centred container	Off
100% height	General	The section is at least as tall as the browser window	Off
Vertical centering	General	Content sits in the vertical middle of a section taller than it	Off
HTML ID	General	An anchor name, so a link to #name jumps to this section	Empty
HTML classes	General	Utility classes, such as Align text center or a padding size	Vertical padding size 5 (py-5)
Background effect	Background effects	Simple image, Fixed image, Parallax image, Gradient or YouTube video	Simple image
Background, Font color	Style	The colour behind the section and the colour of its text	None: the theme decides

The background always spans the whole section, whatever Full width says. The image effects move the Background image you pick in the Style panel; Backgrounds shows each effect.

For more or less space, swap Vertical padding size 5 (py-5) for a smaller size or No vertical padding (py-0). For exact pixels, use the box model in the Style panel, as Spacing explains.

Section recipes

Section	Settings that make it
Hero	100% height and Vertical centering on, a Parallax image effect, a heading and a button
Features	A light Background, a heading, then a row of three columns
Call to action	A strong Background, Align text center, one short line and a button
Testimonials	A light Background and a row of three columns, each with a Block quote

Design a hero section builds the first one step by step.

If you don't see it

• The empty page has no Add Elements button. The page creation assistant is switched off, so the empty page only offers Choose a template. Click the empty area to open the element picker, or switch on Enable page creation assistant at /admin/dxpr_studio/dxpr_builder/ai_settings.
• There is no Add Section Below button. Only sections placed straight on the page have it, not a section inside a column or a tab. Click + on the column instead.
• Vertical centering changes nothing. The section is only as tall as its content, so there is no space to centre in. Switch on 100% height as well.
• Full width seems to do nothing. The background already spans the whole section; Full width only moves the rows out to its edges. With short text in one column, the change is hard to spot.
• A section appeared that you did not add. You picked a Row or a content element on an empty page, and every element needs a section around it. DXPR Builder added one for you; open its settings like any other.

What's next?

• Rows and columns: split a section into columns.
• Backgrounds: parallax, gradient and video effects for sections.
• Full-width layouts: when to let rows run edge to edge.

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