Een Over ons-pagina maken.

Learn DXPR BuilderBuild pagesVolg een tutorial

Hier bouw je een Over ons-pagina: een missieheader, je verhaal naast een foto, drie getallen die optellen, teamkaarten en een afsluitende oproep tot actie. Gebruik hem wanneer één pagina moet vertellen wie jullie zijn. Voor een pagina met elke collega volg je in plaats daarvan Een teamoverzicht bouwen.

De video bouwt de pagina voor een ontwerpstudio in Rotterdam.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een foto van je kantoor, team of product.
  • De pagina bestaat: ga naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page), typ “Over ons” als Titel en klik op Opslaan. De pagina opent met de builder erop.
  • 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 rijen van een sectie, of de elementen van een kolom, in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

Stap 1: een missieheader 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. Open het paneel Stijl, kies een donker kleurstaal voor Achtergrond en klik op Opslaan.
  3. Klik op + op de sectie en kies Jumbotron op het tabblad Inhoud.
  4. Typ je missie als Titel: “We bouwen websites die mensen graag gebruiken”.
  5. Typ een ondersteunende zin in het veld Lead: “Een studio met 24 mensen in Rotterdam, die sinds 2012 met merken in heel Europa werkt.”
  6. Zet Type op Primary voor witte tekst op je primaire kleur, en klik daarna op Opslaan.

Stap 2: het verhaal van je bedrijf vertellen

  1. Beweeg over de sectie en klik op Sectie hieronder toevoegen, de + eronder.
  2. Klik op + op de nieuwe sectie en kies Rij; deze komt met twee gelijke kolommen. Klik op het rasterpictogram (Kolomindeling) op de rij, kies de preset 2/3 + 1/3 en klik op Opslaan.
  3. Klik op + in de bredere kolom en kies Tekst. Typ “Ons verhaal” als Kop 2, daarna twee korte alinea’s: hoe je begon en hoe een project verloopt. Klik op Opslaan.
  4. Klik op + in de smallere kolom en kies Afbeelding.
  5. Klik op Afbeelding selecteren, doorzoek de mediabibliotheek met Filters toepassen, vink een foto van je kantoor of team aan en klik op Geselecteerde invoegen.
  6. Open het paneel SEO, vul het alt-attribuut in en klik op Opslaan.

Tip

Houd het verhaal kort en breek het op met een tussenkop. Bezoekers scannen voordat ze lezen.

Stap 3: kerngetallen met tellers 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. Klik op het rasterpictogram (Kolomindeling), kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.
  3. Voeg in elke kolom een Tekst-element toe met het label van het getal: “Opgeleverde projecten”, “Jaren actief”, “Terugkerende klanten”.
  4. Klik in elke kolom opnieuw op + en kies Nummerteller; deze belandt boven het label. Stel in:
    • Einde: het getal (140, 12, 98)
    • Achtervoegsel: “+” of “%” waar van toepassing
    • Duizendtalscheiding: Komma
    • Snelheid: 2500, de milliseconden die het tellen duurt
  5. Klik op elke teller op Opslaan.

De teller heeft geen eigen labelveld, daarom staat er een Tekst-element onder.

Stap 4: een teamsectie bouwen

  1. Voeg een vierde sectie toe met Sectie hieronder toevoegen.
  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 in elke kolom op + en kies Kaart. Open More > Settings, zet de Header op de naam van de persoon (“Sofia Andersen”) en de Titel op de rol (“Creatief directeur”), en klik daarna op Opslaan.
  4. Klik op + op de sectie zelf en kies Tekst; deze belandt boven de kaartenrij. Typ “Ontmoet het team” als Kop 2, centreer hem en klik op Opslaan.

Stap 5: een afsluitende sectie toevoegen

  1. Voeg een laatste sectie toe met Sectie hieronder toevoegen en open More > Settings. Kies onder HTML-klassen de optie Align text center, zodat de tekst en de knop samen centreren. Kies in het paneel Stijl je merkkleur als Achtergrond en wit als Tekstkleur, en klik daarna op Opslaan.
  2. Klik op + op de sectie en kies Knop. Zet Titel op “Neem contact op”, Link op /contact, Type op Light en Size op Large, en klik daarna op Opslaan.
  3. Klik opnieuw op + op de sectie en kies Tekst; deze belandt boven de knop. Typ “Wil je met ons werken?” als Kop 2, daarna “We nemen elk kwartaal een handvol nieuwe klanten aan.” Zet in het paneel Stijl de Tekstkleur op wit, en klik daarna 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.
  3. Scrol door de pagina om elke sectie te controleren.

Verder gaan

Niet getoond in de video, maar het waard om toe te voegen:

  • Een bio-Tekst en een portret-Afbeelding in elke kaart, en Sociale links eronder
  • 100% hoogte in de instellingen van de eerste sectie voor een header die het scherm vult

Wat je ziet

De voorvertoning toont vijf stroken. De donkere header draagt je missie en de intro in het wit. Je verhaal staat naast de foto. Op de grijze strook tellen de drie getallen op vanaf nul wanneer ze in beeld scrollen.

De teamkop staat gecentreerd boven drie kaarten, elk met een naam en een rol. De afsluitende strook centreert een witte kop boven een lichte knop Neem contact op. Kies Bewerken in het oogmenu om verder te werken.

Als je de pagina niet ziet zoals getoond

  • Er is geen knop Add Elements op de lege pagina. De assistent voor het maken van pagina’s staat uit, zodat de pagina alleen Kies een sjabloon biedt. Klik in plaats daarvan op het lege gebied om de elementenkiezer te openen.
  • Een nieuw element staat boven het element dat je eerder toevoegde. De builder voegt nieuwe elementen bovenaan hun sectie of kolom in. Sleep het op zijn plek aan de sleepgreep op de besturingsbalk.
  • Nummerteller of Kaart ontbreekt in de kiezer. Je gebruikersprofiel voor de builder verbergt het. Vraag een beheerder om het aan te vinken onder Elementen op DXPR Studio > DXPR Builder > Gebruikersprofielen (/admin/dxpr_studio/dxpr_builder/profile).
  • 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?