Een kennisbank bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je de voorpagina van een helpcentrum: een donkerblauwe header, drie categoriekaarten elk met een pictogram, twee lijsten met populaire artikelen en een supportoproep. Gebruik hem wanneer je hulp over veel artikelen is verspreid. Voor een korte lijst met vragen en antwoorden volg je in plaats daarvan Een veelgestelde-vragenpagina bouwen.

De video bouwt het helpcentrum van een softwareproduct.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • 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 header toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out.
  2. Beweeg over de sectie en open More > Settings. Kies onder HTML-klassen de optie Align text center. Kies in het paneel Stijl de donkerblauwe Achtergrond en witte Tekstkleur, en klik daarna op Opslaan.
  3. Klik op + op de sectie en kies Tekst. Typ “Helpcentrum” als Kop 2 en voeg “Waar kunnen we je vandaag mee helpen?” toe. 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 categorieën 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 Kaart. Open More > Settings, zet de Header op de categorienaam en de Titel op het aantal artikelen, en klik daarna op Opslaan.
  4. Klik op + in dezelfde kolom en kies Pictogram; dit belandt boven de kaart. Kies de set Font Awesome Free Solid, zoek naar rocket en klik op het pictogram. Zet Size op Extra Large (2x) en klik op Opslaan.
  5. Herhaal voor de tweede kolom met credit-card en de derde met screwdriver-wrench.
  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 Tekst. Typ drie artikeltitels, één per regel, en klik op Opslaan.
  4. Klik op + op de sectie en kies Tekst; deze belandt boven de rij. Typ “Populaire artikelen” als Kop 2 en klik op Opslaan.

Stap 4: de supportoproep 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 “Neem contact op met support”, Link op /support, 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 “Kun je niet vinden wat je nodig hebt?” 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:

  • Zoekvak: schakel de core-module Zoeken in bij Uitbreiden. Klik op + in de headersectie, open het tabblad Drupal-blokken en kies Block: Forms: Search form. Bezoekers belanden op /search/node.
  • Klikbare kaarten: voeg eerst een element Link toe aan de kolom en zet de Link op de categoriepagina. Voeg daarna de Kaart erin toe.
  • Artikellinks: selecteer elke titel in de lijsten en link hem met de linkknop op de werkbalk.
  • Meer categorieën: voeg een tweede Rij toe met dezelfde preset. Veelvoorkomende zijn De editor gebruiken, Sjablonen en ontwerp, en API en ontwikkeling.

Wat je ziet

De donkerblauwe header begroet bezoekers met “Helpcentrum” in het wit. Drie gecentreerde categorieën volgen, elk een pictogram boven een kaart met naam en aantal artikelen. Een grijze strook toont zes populaire artikelen in twee kolommen, en een paarse strook biedt Neem contact op met support.

Als je de pagina niet ziet zoals getoond

  • 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.
  • Een pictogram staat onder zijn kaart. Het pictogram ging erin vóór de kaart, en nieuwe elementen belanden bovenaan hun kolom. Sleep het pictogram met de sleepgreep op de besturingsbalk boven de kaart.
  • De kop blijft donker op donkerblauw. Het Tekst-element heeft geen eigen Tekstkleur. Open het paneel Stijl en zet Tekstkleur op wit.
  • 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?