Een teamoverzicht bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een teampagina: een gecentreerde kop, drie leiderschapskaarten met een LinkedIn-link onder de derde, en een raster van vier teamkaarten. Gebruik hem wanneer elke collega gemakkelijk te vinden moet zijn. Voor een korte teamsectie op je bedrijfspagina volg je in plaats daarvan Een Over ons-pagina maken.

De video bouwt de teampagina van een logistiek bedrijf.

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. Daarom gaan de sociale links erin vóór de kaart erboven.

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, en klik daarna op Opslaan.
  3. Klik op + op de sectie en kies Tekst op het tabblad Inhoud.
  4. Typ “Ons team” als Kop 2, voeg één regel introductie toe 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 leiderschapskaarten toevoegen

  1. Beweeg over de sectie en klik op 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 de eerste kolom en kies Kaart. Open More > Settings, zet de Header op de rol en de Titel op de naam, en klik daarna op Opslaan.
  4. Voeg op dezelfde manier een Kaart toe aan de tweede kolom.
  5. Klik op + in de derde kolom en kies Sociale links. Deze komt met twee voorbeeldrijen. Typ linkedin over “Facebook” in de eerste rij en typ de profiel-URL ernaast. Verwijder de tweede rij met de × ervan, zet Style op Circle en Size op 2x, en klik daarna op Opslaan.
  6. Klik op + in dezelfde kolom en kies Kaart; deze belandt boven de links. Zet Header en Titel op dezelfde manier en klik op Opslaan.
  7. Klik op + op de sectie en kies Tekst; deze belandt boven de rij. Typ “Leiderschap” als Kop 2 en klik op Opslaan.

Stap 3: het teamraster toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen, daarna een Rij. Klik op het rasterpictogram (Kolomindeling), kies de preset 1/4 + 1/4 + 1/4 + 1/4 en klik op Opslaan.
  2. Voeg een Kaart toe aan elke kolom. Open More > Settings, zet de rol als Header en de naam als Titel, en klik op Opslaan.
  3. Klik op + op de sectie en kies Tekst; deze belandt boven de rij. Typ “Het team” als Kop 2 en klik op Opslaan.

Stap 4: 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:

  • Foto’s en biografieën: 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. Vul het alt-attribuut in met de naam van de persoon.
  • Ronde foto’s: zet bij elke afbeelding Randradius in het paneel Stijl. De waarde is in pixels, tot 100.
  • Optillen bij hover: zet in het paneel Hoverstijl van de kaart Slagschaduw op 2.
  • Team dat zichzelf bijwerkt: maak een contenttype “Teamlid” en een Raster-view met een blokweergave. Voeg de view in op het tabblad Drupal-views, en redacteuren voegen mensen toe zonder de pagina aan te raken.

Wat je ziet

“Ons team” staat gecentreerd bovenaan. Op de grijze strook tonen drie leiderschapskaarten elk de rol in de header en de naam eronder, met een rond LinkedIn-pictogram onder de derde. “Het team” volgt met vier kaarten naast elkaar.

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 sociale link toont “No matching brand icon found”. Het merk is geen bekende pictogramnaam. Typ hem in kleine letters, zoals linkedin.
  • Het LinkedIn-pictogram staat boven de kaart. De kaart ging erin vóór de links, en nieuwe elementen belanden bovenaan hun kolom. Sleep de kaart met de sleepgreep op de besturingsbalk boven de links.
  • 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?