Logo Magzmaker

Extra informatie op de pagina

Grote hoeveelheden content overzichtelijk presenteren zonder dat de pagina onnodig lang of druk oogt. Dit kan kan met een verborgen inhoudsblok dat zichtbaar wordt wanneer de gebruiker erop klikt, bijvoorbeeld een uitvouw blok. 

Box with chocolat

Tekst met uitvouw

Blok toevoegen en bewerken  

Tekst met uitvouw

Met een uitvouw-functionaliteit kunnen gebruikers informatie in- en uitklappen. Dit biedt een elegante manier om grote hoeveelheden content overzichtelijk te presenteren zonder dat de pagina onnodig lang of druk oogt.

Een uitvouw blok bestaat doorgaans uit een kopregel (de titel of vraag) en een verborgen inhoudsblok dat zichtbaar wordt wanneer de gebruiker erop klikt. Dit is vooral handig voor bijvoorbeeld veelgestelde vragen (FAQ’s), productdetails, of stapsgewijze uitleg.

  • Start met toevoegen van een sectie
    Klik hier voor meer informatie over sectie toevoegen
  • Klik binnen een sectie op + Add block en kies het content-blok Tekstblok met uitvouw.
  • Onder de tab Inhoud zie je een editscherm voor de zichtbare tekst en daaronder een editscherm voor de verborgen tekst
Tekst met uitvouw

Opmaak

De tekst kun je opmaken met een kop, stijlen, linkjes en afbeeldingen, net zo als in een gewoon tekstblok (klik hier voor meer informatie over tekst bewerken)

Onder de tab instellingen is een extra veld Achtergrondkleur voor wanneer je de achtergrond van de uitvouw een andere kleur wilt geven, Om de content in de uitvouw wat extra ruimte te geven wanneer je een achtergrondkleur instelt kun je extra passing toevoegen onder het kopje Padding uitvouw.

Icooninstellingen

Om aan te geven dat je een stukje tekst kunt uitvouwen om meer onderliggende informatie te zien kun je gebruik maken van een icoon van een pijltje. Om uit te klappen bijvoorbeeld   en   om de uitvouw weer dicht te vouwen.

In de icoon instellingen kun je instellen welke pijljtes je wilt, de kleur, het formaat en de positie.

  • Icoon grootte: vul een waarde in (px, rem)
  • Icon kleur: kies een kleur of plak het kleurnummer in het veld
  • Icon uitlijnen: Je kunt kiezen voor links, rechts of gecentreerd (alleen in combinatie met Icoon positie "Onder")
  • Icon positie:
    -     Inline (op dezelfde regel) - Hiermee stel je in of het icon van de pijl aan de linker- of rechterkant van de tekst wordt getoond
    -     Onder (Bottom) - Hiermee stel je in de het icon van de pijl onder de tekst wordt gepositioneerd. Deze optie kan gecentreerd, maar ook links of recht onder de tekst.
  • Het soort icoon stel je in bij Icoon rol omlaag / Icoon rol omhoog: Begin met typen van de naam van het icon, bijv arrow, angle, en kies het gewenste icon. Klik hier voor een lijst van de beschikbare iconen
Tekst met uitvouw icon instellingen

Voorbeelden

Dit is vraag 1

In de uitvouw het antwoord op vraag 1 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

De tweede vraag

In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

Dit is vraag 3

Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor.

Je kunt een blok Tekst met uitvouw tussen de tekst zetten zodat de tekst op de pagina compact blijft maar je toch meer achterliggende informatie kunt bieden.

Extra informatie over dit onderwerp lees je hier

In de uitvouw de extra informatie

Box with chocolat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

Lees meer