---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/divider'
title: 'Adding a Divider | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:29:20+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Horizontal separator'
tags:
  - 'Data and motion'
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 Divider'
      description: 'Horizontal separator'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:29:20+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/elements/divider'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/divider'
      description: 'Horizontal separator'
      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) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Divider.

Horizontal separator

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a clean horizontal line that splits your page into clear sections. Use it between text, images or other elements when a page needs a visual break.

## Add a divider

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Divider**. It lands at the top of the column, without a dialog. Drag it by the handle in its control bar to move it.
2. The line is thin, so hover the line itself to show its control bar. Click **More**, choose **Settings** and pick a **Color**.
3. Under **Thickness**, choose **Custom thickness**.
4. Drag the **Thickness** slider to set the line weight. Here we use 6 px.
5. Under **Length**, choose **Custom width**.
6. Drag the **Width** slider to set the line length. Here we use 300 px.
7. Set **Align** to **Center**.
8. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

A horizontal line runs across the column in the colour, thickness and length you chose. In the video, it is 6 px thick, 300 px long and centred. Visitors see it once you save the page and it is published.

## Set up your divider

Hover the element and open **More > Settings** in its control bar. Options:

- **Color:** the colour of the line. Leave it empty to use the theme colour.
- **Thickness:** Theme default or Custom thickness. Custom adds a **Thickness** slider from 0 to 20 px.
- **Length:** Theme default or Custom width. Keep **Length** on Theme default for a full-width line. Custom adds a **Width** slider from 0 to 500 px.
- **Align:** Left, Center or Right. It shows only with Custom width.

## If you don't see it

- **Divider is not in the Content tab.** Your user profile hides it. Ask an administrator to tick **Separator** under **Elements** in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The divider sits above your content.** New elements land at the top of the column. Hover the line and drag it by its handle, or open **More > Move Down**.
- **The line is invisible.** The **Color** matches the page background. Hover the element and open **More > Settings**, then pick a contrasting colour.
- **The line does not span the full width.** **Length** is set to Custom width. Hover the element and open **More > Settings**, then set **Length** back to Theme default.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing around your divider.