Een klantverhaal schrijven.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier beschrijf je één klantproject in drie delen: de uitdaging, de oplossing en de resultaten. Je eindigt met zeven stroken: een fotohero, een overzicht met het belangrijkste getal, de uitdaging, de oplossing naast een foto, drie tellers, een citaat en een oproep tot actie. Om veel projecten op één pagina te tonen, volg je in plaats daarvan Een portfoliogalerij maken.

De video beschrijft het werk van een bureau voor Northwind Retail.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een brede foto voor de hero en een foto van wat je opleverde.
  • 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. De kleur toont terwijl de foto laadt.
  5. Klik op + op de sectie en kies Knop. Zet Titel op “Bezoek de site”, Link naar de URL van de klant, 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 klantnaam als Kop 2 en een samenvatting van één regel 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: het overzicht toevoegen

  1. Beweeg over de hero en klik op Sectie hieronder toevoegen. Voeg een Rij toe aan de nieuwe sectie, klik op het rasterpictogram (Kolomindeling), kies de preset 2/3 + 1/3 en klik op Opslaan.
  2. Klik op + in de brede kolom en kies Tekst. Typ “Overzicht” als Kop 2, voeg de samenvatting toe en klik op Opslaan.
  3. Klik op + in de smalle kolom en kies Tekst. Typ het label van de metriek, “Meer online bestellingen”, en klik op Opslaan.
  4. Klik opnieuw op + in de smalle kolom en kies Nummerteller; deze belandt boven het label. Zet Einde op 32, Achtervoegsel op %, Duizendtalscheiding op Komma, zet Snelheid op 2500, en klik daarna op Opslaan.

De teller heeft geen eigen labelveld; het Tekst-element eronder doet dat werk.

Stap 3: de uitdaging 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 Tekst. Typ “De uitdaging” als Kop 2, beschrijf het probleem en klik op Opslaan.

Stap 4: de oplossing toevoegen

  1. Voeg een vierde sectie toe, daarna een Rij; deze komt met twee gelijke kolommen.
  2. Klik op + in de linkerkolom en kies Tekst. Typ “De oplossing” als Kop 2, beschrijf wat je bouwde en klik op Opslaan.
  3. Klik op + in de rechterkolom en kies Afbeelding. Klik op Afbeelding selecteren, vink een foto van het opgeleverde werk aan en klik op Geselecteerde invoegen. Typ het alt-attribuut in het paneel SEO en klik op Opslaan.

Stap 5: de resultaten toevoegen

  1. Voeg een vijfde sectie toe en open More > Settings. Kies Align text center onder HTML-klassen, daarna de donkerblauwe Achtergrond en witte Tekstkleur in het paneel Stijl. 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. Voeg in elke kolom eerst een Tekst-label toe, daarna een Nummerteller erboven, zoals in stap 2: Einde 32 met Achtervoegsel %, Einde 2 met Achtervoegsel s, en Einde 15000.

Stap 6: het citaat toevoegen

  1. Voeg een zesde sectie toe.
  2. Klik op + op de sectie en kies Blokcitaat. Typ de woorden van de klant, vul bij Bron naam en rol in, en klik op Opslaan.

Stap 7: de oproep tot actie toevoegen

  1. Voeg een zevende 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 “Neem contact met ons op”, Link op /contact, 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 “Klaar om te beginnen?” als Kop 2 en voeg één regel toe. Zet Tekstkleur op wit en klik op Opslaan.

Stap 8: opslaan en vooraf bekijken

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

Wat je ziet

De klantnaam en de knop Bezoek de site staan gecentreerd op de foto. Het overzicht toont 32% naast de samenvatting; bezoekers zien het optellen wanneer het in beeld scrolt. De uitdaging staat op een grijze strook, en de oplossing staat naast de foto.

Op de donkerblauwe strook tellen de drie resultaten op wanneer ze in beeld scrollen: 32%, 2s en 15.000. Het klantcitaat en een paarse strook Neem contact met ons op sluiten de pagina af.

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 laatste teller leest 15000 zonder komma. Duizendtalscheiding staat nog op Geen. Open de instellingen van de teller en kies Komma.
  • Een label staat boven zijn teller. De teller ging erin vóór zijn label, en nieuwe elementen belanden bovenaan hun kolom. Sleep het label met de sleepgreep op de besturingsbalk onder de teller.
  • 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?