Een dienstenpagina bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een pagina met je aanbod. Deze heeft een header, drie diensten met pictogrammen, één dienst in detail naast een foto, klantlogo’s en een oproep tot actie. Gebruik hem wanneer je meerdere diensten verkoopt. Voor een pagina over één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen.

De video bouwt de dienstenpagina van een digitaal bureau.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een foto voor de dienst in detail en vier klantlogo’s.
  • De pagina is open in de builder. Ga voor een nieuwe naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page) en klik op Opslaan.
  • Verberg op DXPR CMS de paginatitel van het thema op deze pagina: open in het bewerkingsformulier DXPR-thema-instellingen en vink Paginatitel aan onder DXPR Regio’s verbergen. De Titel van de Jumbotron is dan de enige kop 1 van de pagina, zoals SEO-vriendelijke pagina’s bouwen uitlegt.
  • 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 header toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out. Beweeg erover, open More > Settings, kies de donkerblauwe Achtergrond in het paneel Stijl en klik op Opslaan.
  2. Klik op + op de sectie en kies Jumbotron op het tabblad Inhoud.
  3. Zet de Titel op “Onze diensten”, de Lead op één regel over je aanbod en het Type op Primary, en klik daarna op Opslaan.

Stap 2: het dienstenoverzicht toevoegen

  1. Beweeg over de sectie 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 “Design” 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 palette en klik op het pictogram. Zet Size op Very Large (3x), open Pictogramutilities, zet Style op Circle en klik op Opslaan.
  5. Herhaal voor “Development” met code en “Marketing” met bullhorn.

Stap 3: één dienst in detail toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen, daarna een Rij; deze komt met twee gelijke kolommen.
  2. Klik op + in de linkerkolom en kies Afbeelding. Klik op Afbeelding selecteren, vink een foto aan en klik op Geselecteerde invoegen. Typ het alt-attribuut in het paneel SEO en klik op Opslaan.
  3. Klik op + in de rechterkolom en kies Knop. Zet Titel op “Vraag een offerte aan”, Link op /contact en Type op Primary, en klik daarna op Opslaan.
  4. Klik opnieuw op + in de rechterkolom en kies Tekst; deze belandt boven de knop. Typ “Design” als Kop 2, voeg de beschrijving toe en wat erbij zit, en klik op Opslaan.

Stap 4: de klantlogo’s toevoegen

  1. Voeg een vierde sectie toe en open More > Settings. Kies Align text center onder HTML-klassen en een lichtgrijze Achtergrond in het paneel Stijl. Klik op Opslaan.
  2. Klik op + op de sectie en kies Marquee. Verwijder de drie voorbeeldafbeeldingen met de × op elk. Klik op Afbeelding selecteren, zoek je logo’s, vink er vier aan en klik op Geselecteerde invoegen. Zet Grijswaarden aan en klik op Opslaan.
  3. Klik opnieuw op + op de sectie en kies Tekst; deze belandt boven de marquee. Typ “Vertrouwd door toonaangevende merken” als Kop 2 en klik op Opslaan.

Stap 5: de oproep tot actie toevoegen

  1. Voeg een vijfde 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 “Plan een adviesgesprek”, 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 6: 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:

  • Eén detailsectie per dienst: herhaal stap 3 voor Development en Marketing. Zet Rij spiegelen aan in de instellingen van elke tweede rij, zodat de foto’s op tablets en desktops van kant wisselen.
  • Ankerlinks: geef elke detailsectie een HTML-id (design, development, marketing). Voeg een Knop toe onder elke overzichtstekst met Link #design enzovoort.
  • Testimonials: voeg een Blokcitaat per klant toe boven de logo’s.

Wat je ziet

Een donkerblauwe strook opent de pagina, met “Onze diensten” in grote witte letters boven een samenvatting van één regel. Drie gecentreerde diensten volgen, elk een omcirkeld pictogram boven naam en regel. Design krijgt een eigen strook met een foto, een beschrijving en Vraag een offerte aan. Grijze klantlogo’s scrollen voorbij op een lichte strook, en een paarse strook sluit de pagina af.

Als je de pagina niet ziet zoals getoond

  • De marquee toont nog de voorbeeldlogo’s. De drie voorbeeldafbeeldingen blijven tot je ze verwijdert. Open de instellingen van de marquee, klik op de × op elke voorbeeldafbeelding en sla op.
  • De logo’s hebben kleur. Grijswaarden staat uit. Open de instellingen van de marquee, zet het aan en klik op Opslaan.
  • 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.
  • 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?