Een prijstabel toevoegen.

Learn DXPR BuilderBuild pagesVolg een tutorial

Hier bouw je een prijstabel: drie abonnementen naast elkaar, elk een paneel met een prijs, een functielijst en een knop over de volle breedte, en het middelste abonnement uitgelicht. Gebruik hem op een prijspagina of in een productpagina. Voor de volledige productpagina eromheen volg je Een productpagina bouwen.

De video bouwt drie abonnementen voor een rapportagetool.

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 container, dus in elk paneel gaat de knop erin vóór de prijs.

Stap 1: de sectie en de kolommen 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. Open het paneel Stijl, kies een lichtgrijze Achtergrond en klik op Opslaan.
  3. Klik op + op de sectie en kies Rij; deze komt met twee gelijke kolommen.
  4. Klik op het rasterpictogram (Kolomindeling) van de rij, kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.

Stap 2: het eerste abonnement bouwen

  1. Klik op + in de eerste kolom en kies Paneel op het tabblad Inhoud.
  2. Beweeg over het paneel en open More > Settings. Zet de Titel op “Starter”, houd het Type op DXPR en klik op Opslaan.
  3. Klik op + op het paneel en kies Knop. Zet Titel op “Kies abonnement”, Link op /signup en Type op Primary. Zet Blokknop aan zodat hij de kolom vult, en klik daarna op Opslaan.
  4. Klik opnieuw op + op het paneel en kies Tekst; deze belandt boven de knop. Typ de prijs als Kop 2, voeg de functies één per regel toe en klik op Opslaan.

Stap 3: de andere abonnementen bouwen

  1. Herhaal stap 2 in de tweede kolom voor “Professional”. Kies in het paneel Stijl van het paneel de paarse Achtergrond, en zet het Type van de knop op Success, zodat het abonnement opvalt.
  2. Herhaal stap 2 in de derde kolom voor “Enterprise”, met “Prijs op maat” als prijs.

Tip

De middelste kolom trekt het oog. Zet daar het abonnement dat je het liefst verkoopt.

Stap 4: de kop toevoegen

  1. Klik op + op de sectie en kies Tekst; deze belandt boven de rij.
  2. Typ “Kies je abonnement” als Kop 2, voeg één regel toe zoals “Eenvoudige maandelijkse prijzen. Altijd opzegbaar.” 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:

  • Vier abonnementen: kies in plaats daarvan de preset 1/4 + 1/4 + 1/4 + 1/4 en bouw een vierde kolom.
  • Badge Populairst: voeg een Tekst-element toe bovenaan het uitgelichte paneel met “Populairst” in vet.
  • Jaarlijks en maandelijks: voeg een Tekst-regel toe boven de rij zoals “Maandelijks | Jaarlijks (20% korting)”. De regel is statisch; een live wissel heeft het element HTML met een eigen script nodig.
  • Vinkjes bij functies: plak een vinkje vóór elke functieregel, of voeg een element Pictogram toe boven de lijst.

Wat je ziet

“Kies je abonnement” staat gecentreerd boven drie abonnementen op een grijze strook. Elk paneel toont zijn naam in de titelbalk, de prijs, drie functies en een knop Kies abonnement over de volle breedte. Het middelste abonnement valt op in paars met een groene knop.

Als je de abonnementen niet ziet zoals getoond

  • Een paneel opent zonder instellingendialoog. Panelen openen leeg, zonder dialoog. Beweeg over het paneel en open More > Settings om de Titel in te stellen.
  • Een paneeltype zoals Primary toont geen kleur. Je thema stijlt dat paneeltype niet. Houd Type op DXPR en kies een Achtergrond in het paneel Stijl van het paneel, zoals in stap 3.
  • De knoppen zijn slechts zo breed als hun tekst. Blokknop staat uit. Open de instellingen van elke knop en zet hem aan.
  • 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?