Een scrollende one-page-website bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een hele website op één pagina: een hero over de volle hoogte waarvan de knoppen springen naar de secties Over ons, Diensten en Contact eronder. Elke sectie draagt een HTML-id, het doelwit van zijn knop. Gebruik hem voor een klein bedrijf, een campagne of een portfolio. Voor een pagina rond één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen.

De video bouwt de site van een ontwerpstudio genaamd Studio Nord.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een brede foto voor de hero en een teamfoto.
  • 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, dus de heroknoppen gaan erin van de laatste naar de eerste.

Stap 1: de hero bouwen

  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. Zet HTML-id op hero en kies onder HTML-klassen de optie Align text center.
  3. Zet 100% hoogte aan zodat de sectie het scherm vult, en Verticaal centreren zodat de inhoud in het midden staat.
  4. Open het paneel Stijl. Klik onder Achtergrondafbeelding op Afbeelding selecteren, vink een foto aan en klik op Geselecteerde invoegen. Zet Achtergrondstijl op Cover, kies de donkerblauwe Achtergrond en witte Tekstkleur, en klik daarna op Opslaan.
  5. Klik op + op de sectie en kies Knop. Zet Titel op “Contact”, Link op #contact en Type op Light, en klik daarna op Opslaan. Voeg op dezelfde manier nog twee knoppen toe: “Diensten” met #services, daarna “Over ons” met #about. Elke belandt boven de vorige.
  6. Klik opnieuw op + en kies Tekst; deze belandt boven de knoppen. Typ “Studio Nord” als Kop 2 en voeg de ondertitel 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 sectie Over ons toevoegen

  1. Beweeg over de hero en klik op Sectie hieronder toevoegen. Open More > Settings, zet HTML-id op about en klik op Opslaan.
  2. Klik op + op de sectie en kies Rij; deze komt met twee gelijke kolommen.
  3. 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.
  4. Klik op + in de rechterkolom en kies Tekst. Typ “Over ons” als Kop 2, voeg je verhaal toe en klik op Opslaan.

Stap 3: de sectie Diensten toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen en open More > Settings. Zet HTML-id op services, kies Align text center onder HTML-klassen en een lichtgrijze Achtergrond in het paneel Stijl. Klik op Opslaan.
  2. Voeg een Rij toe, 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 “Branding” 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 pen-nib en klik op het pictogram. Zet Size op Very Large (3x), open Pictogramutilities, zet Style op Circle en klik op Opslaan.
  5. Herhaal voor “Websites” met laptop-code en “Analytics” met chart-pie.

Stap 4: de sectie Contact toevoegen

  1. Voeg een vierde sectie toe en open More > Settings. Zet HTML-id op contact, kies Align text center onder HTML-klassen en klik op Opslaan.
  2. Klik op + op de sectie en kies Sociale links. Typ linkedin als het merk van de eerste rij en plak de profiel-URL, daarna instagram en zijn URL in de tweede. Zet Style op Circle en Size op 2x, en klik daarna op Opslaan.
  3. Klik opnieuw op + en kies Knop; deze belandt boven de links. Zet Titel op “Mail ons”, Link op mailto:hello@studionord.example en houd Type op Primary, en klik daarna op Opslaan.
  4. Klik opnieuw op + en kies Tekst; deze belandt boven de knop. Typ “Neem contact op” als Kop 2 en je e-mailadres en telefoonnummer eronder, en klik daarna op Opslaan.

Stap 5: opslaan en vooraf bekijken

  1. Klik op Opslaan op de werkbalk van de builder.
  2. Open het weergavemenu (het oogpictogram), kies Voorvertoning en klik op een heroknop, zoals Contact.

Verder gaan

Niet getoond in de video:

  • Vast menu: maak een menu bij Structuur > Menu’s > Menu toevoegen met één link per sectie, zoals /studio-nord#about, of <front>#about op de voorpagina. Zet het in de headerregio bij Structuur > Blokindeling. Zet in DXPR Theme Sticky Header aan bij Uiterlijk > Instellingen > DXPR Theme.
  • Voorpagina: maak de pagina je voorpagina bij Configuratie > Systeem > Standaard site-instellingen.
  • Contactformulier: voeg een formulier in op het tabblad Drupal-blokken in plaats van de introductietekst; zie Formulieren toevoegen aan pagina’s.

Wat je ziet

De foto vult het scherm met “Studio Nord”, de ondertitel en drie lichte knoppen. Een klik op een knop scrolt de pagina soepel naar zijn sectie. Over ons toont de teamfoto naast het verhaal, Diensten drie omcirkelde pictogrammen op grijs, en Contact de kop “Neem contact op” en knop Mail ons boven twee ronde sociale pictogrammen.

Als je de pagina niet ziet zoals getoond

  • Een knop springt niet naar zijn sectie. De Link komt niet overeen met de HTML-id van de sectie. De link is # plus exact dezelfde ID, zoals #about voor de ID about.
  • Een sectie belandt onder je vaste header. De builder kent de hoogte van de header niet. Zet onder Geavanceerde instellingen bij DXPR Studio > DXPR Builder > Algemene instellingen (/admin/dxpr_studio/dxpr_builder/settings) Scroll offset selector op de CSS-selector van je header.
  • Een sociale link toont “No matching brand icon found”. Het merk is geen bekende pictogramnaam. Typ hem in kleine letters, zoals linkedin of instagram.
  • 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?