Een productpagina bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een pagina voor één product. Een foto staat naast de naam, prijs en knop Koop nu, gevolgd door drie functies, een lijst met specificaties en een verkoopoproep. Gebruik hem voor alles wat je verkoopt. Om meerdere abonnementen te vergelijken, voeg je er een prijstabel aan toe.

De video bouwt de pagina van een hardwareproduct genaamd Insight Hub.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een foto van het product.
  • 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 kolom. Daarom wordt de rechterkolom vanaf de knop omhoog opgebouwd.

Stap 1: het product toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out.
  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 de productfoto 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 Knop. Zet Titel op “Koop nu”, Link naar je winkel, Type op Primary en Size op Large, en klik daarna op Opslaan.
  5. Klik opnieuw op + in de rechterkolom en kies Tekst; deze belandt boven de knop. Typ de prijs als Kop 2 en klik op Opslaan.
  6. Klik nog een keer op + en kies Tekst; deze belandt bovenaan. Typ de productnaam als Kop 2, voeg één regel beschrijving 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 functies 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 de functienaam 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 plug en klik op het pictogram. Zet Size op Very Large (3x), open Pictogramutilities, zet Style op Circle en klik op Opslaan.
  5. Herhaal voor de tweede kolom met cloud en de derde met battery-full.

Stap 3: de specificaties 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 Tekst. Typ “Specificaties” als Kop 2, daarna één specificatie per regel, en klik op Opslaan.

Stap 4: de oproep tot actie 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 “Praat met sales”, 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 “Insight Hub vanaf 249 euro” 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:

  • Specificatietabel: voeg een tabel in met de knop Tabel op de tekstwerkbalk in plaats van één regel per specificatie.
  • Galerij: vervang de enkele foto door een Afbeeldingcarrousel met productfoto’s.
  • Abonnementen: link de prijs aan een prijstabel.

Wat je ziet

De productfoto vult de linkerhelft, met de naam, prijs en knop Koop nu rechts. Drie gecentreerde functies volgen, elk een omcirkeld pictogram boven naam en regel. De specificaties staan op een grijze strook, en een paarse strook sluit de pagina af met Praat met sales.

Als je de pagina niet ziet zoals getoond

  • De naam, prijs en knop staan in de verkeerde volgorde. Ze gingen er van boven naar beneden in, en nieuwe elementen belanden bovenaan hun kolom. Sleep ze op hun plek aan de sleepgreep op de besturingsbalk.
  • 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.
  • De kop blijft donker op paars. 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?