Een marketinglandingspagina bouwen.

Learn DXPR BuilderBuild pagesVolg een tutorial

Hier bouw je een landingspagina voor één aanbod: een fotohero met een knop Vraag een demo aan, drie functies met pictogrammen, twee testimonials en een afsluitende oproep tot actie. Gebruik hem voor een campagne- of productpagina met één doel. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.

De video bouwt een pagina voor een analyseproduct genaamd Insight.

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 kolom 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 “Vraag een demo aan”, Link op /demo, 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 kop als Kop 2 en de ondertitel eronder. 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 functies toevoegen

  1. Beweeg over de hero en klik op Sectie hieronder toevoegen. Geef de nieuwe sectie de klasse Align text center.
  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 de eerste kolom en kies Tekst. Typ de functienaam als Kop 3, voeg één regel toe en klik op Opslaan.
  4. Klik op + in dezelfde kolom en kies Pictogram; dit belandt boven de tekst. Kies de set Font Awesome Free Solid, zoek naar bolt en klik op het pictogram. Zet Size op Very Large (3x), open Pictogramutilities, zet Style op Circle en klik op Opslaan.
  5. Herhaal voor de tweede kolom met chart-line en de derde met shield.

Stap 3: de testimonials 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; deze komt met twee gelijke kolommen.
  3. Klik op + in elke kolom en kies Blokcitaat. Typ het citaat, vul bij Bron de naam en rol van de persoon in, en klik op Opslaan.

Stap 4: de oproep tot actie 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 “Boek een rondleiding”, Link op /demo, 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 “Zie Insight op je eigen data” 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:

  • Leadformulier: voeg een webformulierblok toe op het tabblad Drupal-blokken in plaats van de laatste knop; zie Formulieren toevoegen aan pagina’s
  • 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
  • Hogere hero: geef de hero-sectie 100 pixels boven- en onderpadding in het Stijl-paneel
  • Beginnen met een sjabloon: klik op een lege pagina op Kies een sjabloon en kies een landingspagina-indeling; zie Paginasjablonen

Wat je ziet

De kop, ondertitel en knop Vraag een demo aan staan gecentreerd in het wit op de foto. Drie functies volgen, elk een omcirkeld pictogram boven een korte kop en regel. Twee citaten staan naast elkaar op een grijze strook, en een paarse strook sluit de pagina af met Boek een rondleiding.

Als je de pagina niet ziet zoals getoond

  • De pictogrammen hebben geen cirkel. Stijl staat in het paneel Pictogramutilities, niet in Algemeen. Open de instellingen van het pictogram, open Pictogramutilities en zet Stijl op Circle.
  • De herofoto vult de sectie niet. Achtergrondstijl staat nog op Theme defaults. Open het paneel Stijl van de sectie en zet hem op Cover.
  • Een pictogram staat onder de functietekst. Het pictogram ging er vóór de tekst in, en nieuwe elementen belanden bovenaan hun kolom. Sleep het pictogram met de sleepgreep op de besturingsbalk boven de tekst.
  • 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?