---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/panel'
title: 'Adding a Panel | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Bordered content panel'
tags:
  - Marketing
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 Panel'
      description: 'Bordered content panel'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+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/panel'
      articleSection: Marketing
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/panel'
      description: 'Bordered content panel'
      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) /[Marketing](/hc/documentation/learn-dxpr-builder/elements/marketing) # Adding a Panel.

Bordered content panel

 Learn DXPR BuilderBuild pagesAdd contentMarketing

   ## In this guide

 Related guides

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

You get a framed box with a coloured title bar that keeps related content together, such as opening hours or a notice. Use it when one block of a page needs its own heading and frame.

## Add a panel

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 **Panel**. It lands at the top of the column, without a dialog.
2. Hover the panel, click **More** in its control bar and choose **Settings**. Type a **Title**.
3. Choose a **Type** for the colour: DXPR, Default, Primary, Success, Info, Warning or Danger. Here we pick **Primary**.
4. Click **Save** in the dialog.
5. Click the **+** inside the panel body and add a **Button** from the **Content** tab. A Text element works too, for example for opening hours. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

Your title sits in a coloured title bar, and the button sits in the panel body below it. The button is its own element, so you edit and style it on its own. In the video, a Primary panel titled Citizen Services Opening Hours holds a booking button. Visitors see it once you save the page and it is published.

## Set up your panel

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

- **Title:** the text in the title bar. Leave it empty for a panel without a title bar.
- **Type:** the colour of the border and title bar, taken from your theme: Default, Primary, Success, Info, Warning or Danger. DXPR, the default, is a dark box with light text instead.

The panel is a container. Add or drag text, images, icons or buttons into its body.

## If you don't see it

- **Panel is not in the Content tab.** Your user profile hides it. Ask an administrator to tick **Panel (Bootstrap 3)** 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.
- **No settings dialog opens when you add the panel.** A panel goes in without a dialog. Hover the element and open **More > Settings** to set its title and type.
- **The panel shows a title bar and nothing below it.** No element was added inside yet. Click the **+** in the panel body and add a Text or Button.
- **The title bar is missing.** The **Title** field is empty. Hover the element and open **More > Settings**, then type a title.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your panel.