Eine Veranstaltungsseite erstellen.

DXPR Builder lernenReferenzKonfiguration und API

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.

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.

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

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.

Wie geht es weiter?