--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/sections' title: 'Adding a Section | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:35:18+00:00' updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Divide a page into bands, each with its own background, spacing and height' tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Adding a Section' description: 'Divide a page into bands, each with its own background, spacing and height' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:35:18+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/sections' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/sections' description: 'Divide a page into bands, each with its own background, spacing and height' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Layout](/hc/documentation/learn-dxpr-builder/layout/overview) # Adding a Section. Divide a page into bands, each with its own background, spacing and height Learn DXPR BuilderBuild pagesAdd contentLayout ## In this guide Related guides - [Rows and Columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) 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](/hc/documentation/learn-dxpr-builder/layout/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](/hc/documentation/learn-dxpr-builder/design/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](/hc/documentation/learn-dxpr-builder/element-settings/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](/hc/documentation/learn-dxpr-builder/tutorials/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](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): split a section into columns. - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds): parallax, gradient and video effects for sections. - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): when to let rows run edge to edge.