---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/veranstaltungsseite'
title: 'Eine Veranstaltungsseite erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:36:26+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Seite für eine Veranstaltung. Sie hat einen Foto-Hero mit dem Datum und einem Button Jetzt registrieren, die Details neben einer Karte, Speaker-Cards und ein Anmeldeband. Nutzen Sie sie für Tage der offenen Tür, Vorträge und Webinare. Für eine ganze Website auf einer scrollenden Seite folgen Sie stattdessen Eine einseitige Scroll-Website erstellen.
  Das Video baut die Seite für den Tag der offenen Tür einer Universität.
tags:
  - 'Configuration and API'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eine Veranstaltungsseite erstellen'
      description: |-
        Hier bauen Sie eine Seite für eine Veranstaltung. Sie hat einen Foto-Hero mit dem Datum und einem Button Jetzt registrieren, die Details neben einer Karte, Speaker-Cards und ein Anmeldeband. Nutzen Sie sie für Tage der offenen Tür, Vorträge und Webinare. Für eine ganze Website auf einer scrollenden Seite folgen Sie stattdessen Eine einseitige Scroll-Website erstellen.
        Das Video baut die Seite für den Tag der offenen Tür einer Universität.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:36:26+0000'
      dateModified: '2026-10-24T20:03:43+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/de/hc/dokumentation/dxpr-builder-lernen/tutorials/veranstaltungsseite'
      articleSection: 'Konfiguration und API'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/veranstaltungsseite'
      description: |-
        Hier bauen Sie eine Seite für eine Veranstaltung. Sie hat einen Foto-Hero mit dem Datum und einem Button Jetzt registrieren, die Details neben einer Karte, Speaker-Cards und ein Anmeldeband. Nutzen Sie sie für Tage der offenen Tür, Vorträge und Webinare. Für eine ganze Website auf einer scrollenden Seite folgen Sie stattdessen Eine einseitige Scroll-Website erstellen.
        Das Video baut die Seite für den Tag der offenen Tür einer Universität.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Referenz](/de/hc/documentation/learn-dxpr-builder/reference) /[Konfiguration und API](/de/hc/documentation/learn-dxpr-builder/reference/config-and-api) # Eine Veranstaltungsseite erstellen.

 DXPR Builder lernenReferenzKonfiguration und API

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Karte hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/karte)
- [Eine Card hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/card)
- [Einen Hero-Abschnitt gestalten](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt)

Hier bauen Sie eine Seite für eine Veranstaltung. Sie hat einen Foto-Hero mit dem Datum und einem Button **Jetzt registrieren**, die Details neben einer Karte, Speaker-Cards und ein Anmeldeband. Nutzen Sie sie für Tage der offenen Tür, Vorträge und Webinare. Für eine ganze Website auf einer scrollenden Seite folgen Sie stattdessen [Eine einseitige Scroll-Website erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/one-page-website).

Das Video baut die Seite für den Tag der offenen Tür einer Universität.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält ein breites Foto für den Hero.
- Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) und klicken Sie auf **Save**.
- Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte. Fügen Sie die Elemente eines Abschnitts in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

## Schritt 1: Den Hero hinzufügen

1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**. Fahren Sie darüber und öffnen Sie **More** > **Settings**.
2. Wählen Sie unter **HTML classes** **Align text center**.
3. Öffnen Sie das Panel **Style**. Klicken Sie unter **Background image** auf **Select Image**, haken Sie ein Foto an und klicken Sie auf **Insert selected**. Setzen Sie **Background style** auf **Cover**.
4. Wählen Sie ein dunkles Navyblau als **Background** und Weiß als **Font color** und klicken Sie dann auf **Save**.
5. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Jetzt registrieren“, **Link** auf die Registrierungsseite, **Type** auf **Light** und **Size** auf **Large**, und klicken Sie dann auf **Save**.
6. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie den Veranstaltungsnamen als **Heading 2** ein, dann das Datum und einen Slogan. Setzen Sie **Font color** im Panel **Style** auf Weiß und klicken Sie auf **Save**. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe [SEO-freundliche Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Schritt 2: Details und Karte hinzufügen

1. Fahren Sie über den Hero und klicken Sie auf **Add Section Below**. Klicken Sie auf **+** auf dem neuen Abschnitt und wählen Sie **Row**; ihre zwei gleichen Spalten sind die Aufteilung, die Sie brauchen.
2. Klicken Sie in der linken Spalte auf **+** und wählen Sie **Text**. Geben Sie „Veranstaltungsdetails“ als **Heading 2** ein, fügen Sie je eine Zeile für Datum, Ort und Kontakt hinzu und klicken Sie auf **Save**.
3. Klicken Sie in der rechten Spalte auf **+** und wählen Sie **Map**. Geben Sie die **Address** des Orts ein, setzen Sie **Map height** auf 320 und klicken Sie auf **Save**.

## Schritt 3: Speaker hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu. Öffnen Sie sein **More** > **Settings**, wählen Sie ein hellgraues **Background** im Panel **Style** und klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**. Klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie in jeder Spalte auf **+** und wählen Sie **Card**. Öffnen Sie ihr **More** > **Settings**, setzen Sie den **Header** auf die Session und den **Title** auf Name und Funktion der vortragenden Person, und klicken Sie dann auf **Save**.

## Schritt 4: Die Registrierungsaufforderung hinzufügen

1. Fügen Sie einen vierten Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Wählen Sie **Align text center** unter **HTML classes**, dann das violette **Background** und Weiß als **Font color** im Panel **Style**. Klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Anmelden“, **Link** auf die Registrierungsseite, **Type** auf **Light** und **Size** auf **Large**, und klicken Sie dann auf **Save**.
3. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie „Melden Sie sich heute an“ als **Heading 2** ein und fügen Sie eine Zeile hinzu. Setzen Sie **Font color** auf Weiß und klicken Sie auf **Save**.

## Schritt 5: Speichern und Vorschau

1. Klicken Sie in der Builder-Symbolleiste auf **Save**.
2. Öffnen Sie das Ansichtsmenü (das **Augen-Icon**) und wählen Sie **Preview**.

## Weiter gehen

Nicht im Video gezeigt:

- **Speaker-Fotos**: Klicken Sie auf **+** auf einer Card und fügen Sie eine Biografie als **Text** hinzu, klicken Sie dann erneut auf **+** auf der Card und fügen Sie ein **Image** hinzu; es landet über dem Text
- **Dunkleres Foto**: Setzen Sie im Panel **Background effects** des Heros **Background effect** auf **Gradient**. Wählen Sie dieselbe dunkle Farbe mit etwa 60 % Deckkraft als **Start color** und **End color**
- **Programm**: Fügen Sie ein **Text**-Element hinzu und fügen Sie mit dem Button **Table** eine Tabelle für Zeit, Session und vortragende Person ein
- **Registrierung auf der Seite**: siehe [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## Was Sie sehen

Veranstaltungsname, Datum und der Button **Jetzt registrieren** sitzen zentriert und weiß auf dem Foto. Darunter füllen die Details die linke Hälfte und eine Karte des Orts die rechte. Drei Speaker-Cards stehen auf einem grauen Band, und ein violettes Band schließt die Seite mit **Anmelden**.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Das Hero-Foto füllt den Abschnitt nicht.** **Background style** steht noch auf **Theme defaults**. Öffnen Sie das Panel **Style** des Abschnitts und setzen Sie es auf **Cover**.
- **Die Karte zeigt den falschen Ort.** Google Maps sucht nach der Adresse, wie sie eingegeben ist. Fügen Sie Postleitzahl, Stadt und Land zu **Address** hinzu und speichern Sie erneut.
- **Eine Card zeigt nach dem Hinzufügen keinen Einstellungsdialog.** Cards öffnen sich leer, ohne Dialog. Fahren Sie über die Card und öffnen Sie **More** > **Settings**, um **Header** und **Title** auszufüllen.
- **Ihre Änderungen sind nach einem Neuladen weg.** Sie haben die Seite verlassen, bevor Sie auf **Save** in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe [Änderungen werden nicht gespeichert](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl).

## Wie geht es weiter?

- [Map-Element](/de/hc/documentation/learn-dxpr-builder/elements/map) für die Karteneinstellungen
- [Card-Element](/de/hc/documentation/learn-dxpr-builder/elements/card) für Card-Typen und Kindelemente
- [Hero-Abschnitt](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) für weitere Hero-Optionen