---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/jumbotron'
title: 'Adding a Jumbotron | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:42:13+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Large hero banner'
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 Jumbotron'
      description: 'Large hero banner'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:42:13+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/jumbotron'
      articleSection: Marketing
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/jumbotron'
      description: 'Large hero banner'
      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 Jumbotron.

Large hero banner

 Learn DXPR BuilderBuild pagesAdd contentMarketing

   ## In this guide

 Related guides

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

You get a large hero banner with a title, a lead sentence and a branded background, ready to hold a button. Use it to open a page, announce an event or lead visitors to one action.

## Add a jumbotron

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Jumbotron**.
2. Type the **Title**.
3. Add a **Lead** sentence that sells the event.
4. Choose a **Type** for the background; Primary with white text stands out.
5. Click **Save** in the dialog.
6. Click **+** inside the jumbotron and add a **Button**, because a jumbotron is a container.

Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

Title, lead and button sit in one branded banner across the column. The button is a normal Button element inside the jumbotron, so you edit and style it on its own.

## Set up your jumbotron

Open **More > Settings** on the element. Options:

- **Title:** the main heading displayed in the jumbotron.
- **Lead:** larger introductory text below the title.
- **Type:** background style: Light, Primary, Secondary, Success, Info, Warning, Danger, Dark, or Default.
- **Padding:** internal spacing around the content: Large, Medium, or Small.

The jumbotron is a container. Drag or add other elements inside it: buttons, images or more text.

## If you don't see it

- **Jumbotron is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it 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 banner shows a "+" and nothing else.** No element was added inside yet. Click the **+** in the jumbotron and pick a Button or Text.
- **White text on a light background.** **Type** is Light while the theme text is light. Pick Primary or Dark.

## What's next?

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