---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/event-page'
title: 'Build an event page | 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: 'Date, location, speakers, registration'
tags:
  - 'Follow a tutorial'
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: 'Build an event page'
      description: 'Date, location, speakers, registration'
      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/tutorials/event-page'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/event-page'
      description: 'Date, location, speakers, registration'
      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) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build an event page.

Date, location, speakers, registration

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Map](/hc/documentation/learn-dxpr-builder/elements/map)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section)

Here you build a page for one event. It has a photo hero with the date and a **Register now** button, the details beside a map, speaker cards and a sign-up band. Use it for open days, talks and webinars. For a whole site on one scrolling page, follow [Create a one-page scrolling website](/hc/documentation/learn-dxpr-builder/tutorials/one-page-website) instead.

The video builds the page for a university open day.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a wide photo for the hero.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their section or column. Add the elements of a section in reverse order, or drag them into place afterwards.

## Step 1: add the hero

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. Hover it and open **More** > **Settings**.
2. Under **HTML classes** pick **Align text center**.
3. Open the **Style** panel. Under **Background image** click **Select Image**, tick a photo and click **Insert selected**. Set **Background style** to **Cover**.
4. Pick a dark navy **Background** and a white **Font color**, then click **Save**.
5. Click **+** on the section and pick **Button**. Set **Title** to "Register now", **Link** to the registration page, **Type** to **Light** and **Size** to **Large**, then click **Save**.
6. Click **+** again and pick **Text**; it lands above the button. Type the event name as **Heading 2**, then the date and a tagline. Set **Font color** to white in the **Style** panel and click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Step 2: add the details and the map

1. Hover the hero and click **Add Section Below**. Click **+** on the new section and pick **Row**; its two equal columns are the split you need.
2. Click **+** in the left column and pick **Text**. Type "Event details" as **Heading 2**, add one line each for date, venue and contact, and click **Save**.
3. Click **+** in the right column and pick **Map**. Type the venue **Address**, set **Map height** to 320 and click **Save**.

## Step 3: add the speakers

1. Add a third section with **Add Section Below**. Open its **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Row**. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in each column and pick **Card**. Open its **More** > **Settings**, set the **Header** to the session and the **Title** to the speaker's name and role, then click **Save**.

## Step 4: add the registration call to action

1. Add a fourth section and open its **More** > **Settings**. Pick **Align text center** under **HTML classes**, then the purple **Background** and white **Font color** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Button**. Set **Title** to "Sign up", **Link** to the registration page, **Type** to **Light** and **Size** to **Large**, then click **Save**.
3. Click **+** again and pick **Text**; it lands above the button. Type "Register today" as **Heading 2** and add one line. Set **Font color** to white and click **Save**.

## Step 5: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Speaker photos**: click **+** on a card and add a **Text** biography, then click **+** on the card again and add an **Image**; it lands above the text
- **Darker photo**: in the hero's **Background effects** panel set **Background effect** to **Gradient**. Pick the same dark colour at around 60% opacity as **Start color** and **End color**
- **Schedule**: add a **Text** element and insert a table with the **Table** button for time, session and speaker
- **Registration on the page**: see [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## What you see

The event name, date and **Register now** button sit centred and white on the photo. Below, the details fill the left half and a map of the venue the right. Three speaker cards stand on a grey band, and a purple band closes the page with **Sign up**.

## If you don't see the page as shown

- **The hero photo does not fill the section.** **Background style** is still on **Theme defaults**. Open the section's **Style** panel and set it to **Cover**.
- **The map shows the wrong place.** Google Maps searches for the address as typed. Add the postcode, city and country to **Address** and save again.
- **A card shows no settings dialog after you add it.** Cards open empty, without a dialog. Hover the card and open **More** > **Settings** to fill in **Header** and **Title**.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Map element](/hc/documentation/learn-dxpr-builder/elements/map) for the map settings
- [Card element](/hc/documentation/learn-dxpr-builder/elements/card) for card types and child elements
- [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) for more hero options