Een evenementpagina bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een pagina voor één evenement. Deze heeft een fotohero met de datum en een knop Registreer nu, de details naast een kaart, sprekerskaarten en een aanmeldstrook. Gebruik hem voor opendagen, lezingen en webinars. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.

De video bouwt de pagina voor een universitaire opendag.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een brede foto voor de hero.
  • De pagina is open in de builder. Ga voor een nieuwe naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page) en klik op Opslaan.
  • Nieuwe elementen belanden bovenaan hun sectie of kolom. Voeg de elementen van een sectie in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

Stap 1: de hero toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out. Beweeg erover en open More > Settings.
  2. Kies onder HTML-klassen de optie Align text center.
  3. Open het paneel Stijl. Klik onder Achtergrondafbeelding op Afbeelding selecteren, vink een foto aan en klik op Geselecteerde invoegen. Zet Achtergrondstijl op Cover.
  4. Kies een donkerblauwe Achtergrond en een witte Tekstkleur en klik daarna op Opslaan.
  5. Klik op + op de sectie en kies Knop. Zet Titel op “Registreer nu”, Link naar de registratiepagina, Type op Light en Size op Large, en klik daarna op Opslaan.
  6. Klik opnieuw op + en kies Tekst; deze belandt boven de knop. Typ de evenementnaam als Kop 2, daarna de datum en een ondertitel. Zet Tekstkleur op wit in het paneel Stijl en klik op Opslaan. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie SEO-vriendelijke pagina’s bouwen.

Stap 2: de details en de kaart toevoegen

  1. Beweeg over de hero en klik op Sectie hieronder toevoegen. Klik op + op de nieuwe sectie en kies Rij; de twee gelijke kolommen zijn de splitsing die je nodig hebt.
  2. Klik op + in de linkerkolom en kies Tekst. Typ “Evenementdetails” als Kop 2, voeg voor datum, locatie en contact elk één regel toe, en klik op Opslaan.
  3. Klik op + in de rechterkolom en kies Kaart. Typ het Adres van de locatie, zet Kaarthoogte op 320 en klik op Opslaan.

Stap 3: de sprekers toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen. Open More > Settings, kies een lichtgrijze Achtergrond in het paneel Stijl en klik op Opslaan.
  2. Klik op + op de sectie en kies Rij. Klik op het rasterpictogram (Kolomindeling), kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.
  3. Klik op + in elke kolom en kies Kaart. Open More > Settings, zet de Header op de sessie en de Titel op de naam en rol van de spreker, en klik daarna op Opslaan.

Stap 4: de registratieoproep toevoegen

  1. Voeg een vierde sectie toe en open More > Settings. Kies Align text center onder HTML-klassen, daarna de paarse Achtergrond en witte Tekstkleur in het paneel Stijl. Klik op Opslaan.
  2. Klik op + op de sectie en kies Knop. Zet Titel op “Aanmelden”, Link naar de registratiepagina, Type op Light en Size op Large, en klik daarna op Opslaan.
  3. Klik opnieuw op + en kies Tekst; deze belandt boven de knop. Typ “Registreer je vandaag” als Kop 2 en voeg één regel toe. Zet Tekstkleur op wit en klik op Opslaan.

Stap 5: opslaan en vooraf bekijken

  1. Klik op Opslaan op de werkbalk van de builder.
  2. Open het weergavemenu (het oogpictogram) en kies Voorvertoning.

Verder gaan

Niet getoond in de video:

  • Sprekersfoto’s: klik op + op een kaart en voeg een Tekst-biografie toe, klik daarna opnieuw op + op de kaart en voeg een Afbeelding toe; deze belandt boven de tekst
  • Donkerdere foto: zet in het paneel Achtergrondeffecten van de hero Achtergrondeffect op Gradient. Kies dezelfde donkere kleur met een dekking van ongeveer 60% als Beginkleur en Eindkleur
  • Programma: voeg een Tekst-element toe en voeg een tabel in met de knop Tabel voor tijd, sessie en spreker
  • Registratie op de pagina: zie Formulieren toevoegen aan pagina’s

Wat je ziet

De evenementnaam, datum en knop Registreer nu staan gecentreerd en wit op de foto. Eronder vullen de details de linkerhelft en een kaart van de locatie de rechter. Drie sprekerskaarten staan op een grijze strook, en een paarse strook sluit de pagina af met Aanmelden.

Als je de pagina niet ziet zoals getoond

  • De herofoto vult de sectie niet. Achtergrondstijl staat nog op Theme defaults. Open het paneel Stijl van de sectie en zet hem op Cover.
  • De kaart toont de verkeerde plek. Google Maps zoekt op het adres zoals getypt. Voeg de postcode, stad en het land toe bij Adres en sla opnieuw op.
  • Een kaart toont geen instellingendialoog nadat je hem toevoegt. Kaarten openen leeg, zonder dialoog. Beweeg over de kaart en open More > Settings om Header en Titel in te vullen.
  • Je wijzigingen zijn weg na een herladen. Je verliet de pagina voordat je op Opslaan op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie Wijzigingen worden niet opgeslagen.

Wat nu?