Een indeling met meerdere kolommen bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je één pagina met de vier kolomindelingen die je het meest gebruikt: inhoud met een zijbalk, twee gelijke helften, drie derden en vier kwarten. Elk krijgt een kop erboven. Gebruik hem om te leren welke preset bij welke inhoud past. Voor elke rij-instelling, zie Rijen en kolommen.

De video bouwt de afvalinzamelingspagina van een gemeente.

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. Daarom gaat elke kop erin na zijn rij: die belandt erboven.

Kies een indeling

Indeling Beste voor Preset
Inhoud met een zijbalk artikelen met gerelateerde links 2/3 + 1/3
Twee gelijke helften vergelijkingen, voor en na de standaard van de rij
Drie gelijke derden uitgelichte functies, diensten 1/3 + 1/3 + 1/3
Vier gelijke kwarten statistieken, kleine kaarten 1/4 + 1/4 + 1/4 + 1/4

Een nieuwe Rij komt met twee gelijke kolommen. Elke andere indeling komt uit het rasterpictogram van de rij (Kolomindeling).

Stap 1: inhoud met een zijbalk

  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. Klik op het rasterpictogram (Kolomindeling), kies de preset 2/3 + 1/3 en klik op Opslaan.
  3. Klik op + in de brede kolom en kies Tekst op het tabblad Inhoud. Typ het artikel, zet de eerste regel op Kop 3 en klik op Opslaan.
  4. Klik op + in de smalle kolom en kies Tekst. Typ “Gerelateerd” als Kop 4, voeg één regel per gerelateerde pagina toe en klik op Opslaan.
  5. Klik op + op de sectie en kies Tekst; deze belandt boven de rij. Typ “Inhoud met een zijbalk” als Kop 2 en klik op Opslaan.

Stap 2: twee gelijke helften

  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. Twee gelijke kolommen is de standaard, dus er is niets te wijzigen.
  3. Voeg een Tekst-element toe in elke kolom: “Voor” en “Na” als Kop 4 met elk één regel.
  4. Voeg de kop “Twee gelijke helften” toe zoals in stap 1.

Stap 3: drie gelijke derden

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen en geef hem de klasse Align text center.
  2. Voeg een Rij toe, klik op het rasterpictogram (Kolomindeling), kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.
  3. Voeg een Tekst-element toe in elke kolom: “Papier”, “Glas” en “GFT” als Kop 4 met elk één regel.
  4. Voeg de kop “Drie gelijke derden” toe.

Stap 4: vier gelijke kwarten

  1. Voeg een vierde sectie toe met een lichtgrijze Achtergrond en de klasse Align text center.
  2. Voeg een Rij toe, klik op het rasterpictogram (Kolomindeling), kies de preset 1/4 + 1/4 + 1/4 + 1/4 en klik op Opslaan.
  3. Voeg een Tekst-element toe in elke kolom: de dag als Kop 4 en wat wordt opgehaald.
  4. Voeg de kop “Vier gelijke kwarten” toe.

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.

Op kleinere schermen

Kolommen staan naast elkaar vanaf 768 pixels breed, dus tablets tonen dezelfde indeling als desktops. Op telefoons neemt elke kolom de volle breedte, en de kolommen stapelen in hun volgorde. Voor een andere indeling op tablets klik je op het rasterpictogram van de rij (Kolomindeling) en kies je Schermgrootte toevoegen.

Verder gaan

Niet getoond in de video:

  • Smal, breed, smal: de preset 1/4 + 1/2 + 1/4 houdt lange tekst leesbaar met lege marges.
  • Rij spiegelen: zet het aan in de instellingen van de rij om de kolommen te wisselen op tablets en desktops. Telefoons behouden de oorspronkelijke volgorde, dus de eerste kolom komt daar nog steeds eerst.

Wat je ziet

Vier stroken volgen elkaar, elk met zijn kop bovenaan. Het artikel en de gerelateerde links delen de eerste, twee helften staan op grijs, en drie gecentreerde derden komen daarna. Vier gecentreerde kwarten op grijs sluiten de pagina af.

Als je de kolommen niet ziet zoals getoond

  • De rij heeft het verkeerde aantal kolommen. De preset geldt pas wanneer je op Opslaan klikt in de indelingendialoog. Klik opnieuw op het rasterpictogram (Kolomindeling) van de rij, kies de preset en klik op Opslaan.
  • Een kop staat onder zijn rij. De kop ging erin vóór de rij, en nieuwe elementen belanden bovenaan hun sectie. Sleep de kop met de sleepgreep op de besturingsbalk boven de rij.
  • De kolommen stapelen op een tablet. De tablet is smaller dan 768 pixels, zoals een kleine tablet in portret. Voeg een indeling voor die breedte toe met Schermgrootte toevoegen in de indelingendialoog van de rij.
  • 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?