Extra informatie op de pagina

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

Tekst met uitvouw

Tekstje met meer info in uitvouw

Tekst met Popup

Tekstje met meer info in een popup

Overlay

Open een overlay met uitgebreide info via een tekst, afbeelding of button
(Alleen met Professional Publisher licentie)

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 in de 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 padding 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 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

Voorbeelden Tekst met uitvouw

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

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

Tekst met popup

Met een popup kun je achterliggende informatie bieden die niet gelijk zichtbaar is op de pagina. Zo blijft de pagina overzichtelijk zonder dat de pagina onnodig lang of druk oogt.

De functionaliteit werkt grotendeels hetzelfde als het block "Tekst met uitvouw"; een deel dat bestaat uit een Titel of een kort stukje tekst en een ander deel dat zichtbaar wordt wanneer de gebruiker op de tekst klikt.

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 popup.
Onder de tab Inhoud zie je een editscherm voor de zichtbare tekst en daaronder een editscherm voor de verborgen tekst in de popup

Opmaak

Zowel de tekst in het zichtbare blok als in de popup 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 kun je bij Popup breedte aangeven hoe breed de popup moet worden (25%, 50% of 75%)
Om de content in de popup wat extra ruimte te geven tot de rand van de popup kun je extra padding toevoegen onder het kopje Padding popup (standaard ingesteld op 20px).

Voor de achtergrondkleur klap je de instellingen ACHTERGROND open.
Achtergrondkleur - geeft achtergrond aan het zichtbare deel (stel dan ook wat padding in)
Achtergrond kleur popup - met deze instelling bepaal je eventueel een andere de kleur voor de popup. Standaard staat de kleur op wit #fffff, kies een andere kleur naar wens of laat het veld leeg om de popup achtergrond transparant te houden. Dit kan soms leuk zijn met een grote tekst of met een afbeelding met een transparante achtergrond.

Icooninstellingen

Om aan te geven dat je een stukje tekst kunt openen om meer informatie te zien kun je gebruik maken van een icoon, bijvoorbeeld +.
In de icoon instellingen kun je instellen welke icoon je wilt (standaard staat het icoon plus-circle ingesteld).

Icoon grootte: vul een waarde in (px, rem) - standaard staat 1.0 rem ingesteld
Icon kleur: kies een kleur of plak het kleurnummer in het veld
Icon positie:
- Links naast de tekst
- Rechts naast de tekst (als standaard ingesteld)
- Boven de tekst
- Onder de tekst
Icon: stel het soort icoon (standaard staat plus circle ingesteld): Begin met typen van de naam van het icon, bijv plus, arrow, angle waardoor je een aantal suggesties ziet, en kies het gewenste icon. Klik hier voor een lijst van de beschikbare iconen

Voorbeelden Tekst met popup

Overlay

Alleen met Professional Publisher licentie
Een overlay is een pagina die (deels) over de bestaande pagina heen valt. De overlay schuift bijvoorbeeld vanuit de zijkant of onderkant over de pagina heen.

1. Een overlay pagina maken

Ga naar het pagina overzicht van de editie waarin de overlay pagina moet komen.
Boven in zie je een button "Nieuwe overlay pagina maken" .

Voor de content die in de overlay getoond wordt maak je apart een pagina op.

Nieuwe overlaypagina maken - Het aanmaken van een overlaypagina doe je vanuit het pagina overzicht. Ga naar het pagina overzicht en kies bovenin "Nieuwe overlay pagina maken" om content voor een nieuwe overlay te maken.
Pagina opmaken - De opmaak kun je op precies dezelfde manier doen als voor gewone pagina's. Je kunt alle soorten contentblokken en secties invoegen.
Achtergrond van de overlay - LET OP: de achtergrond is standaard transparant (je ziet het als witte ondergrond). Transparantie kun je soms gebruiken om iets vrijstaand weer te geven. Wil je een witte achtergrond van de overlay, maak dan de achtergrondkleur wit (of een andere kleur) via de pagina instellingen van de overlaypagina (pagina instellingen open je via de paarse balk bovenin de overlay pagina of via de paarse button achter de overlaypagina in het overlay overzicht) .

Editie overzicht - nieuwe overlay pagina maken

2. Een bestaande overlay pagina bewerken

In het paginaoverzicht zie je rechtsboven Pagina's | Overlay pagina's.
Onder 'Overlay pagina's' vind je de gemaakt overlay pagina's terug en kun je de pagina's editen.

3. Het hulp blok "Opmaak overlay" toevoegen

Het opmaak overlay blok is alleen een hulpblok, je ziet het blok niet in de gepubliceerde of in de voorbeeld versie. Met dit hulpblok stel je de kenmerken in van de overlay, bijvoorbeeld hoe groot de overlay moet worden en van welke kant de ovelay over de pagina schuift en welke overlay pagina getoond moet worden.

Zorg dat je eerst een overlay pagina hebt gemaakt zoals beschreven bij punt 1 - Nu kun je de overlay toevoegen op een pagina. Het maakt niet uit waar je het blok plaatst. Je kunt het blok helemaal bovenaan de pagina plaatsen of juist bij het contentblok (tekst, afbeelding of button) van waaruit je de overlay wilt openen.
Ga naar de pagina waarop je de overlay wilt openen.
Klik binnen een sectie op + Add block en kies het content-blok Overlay opmaak
Het blok verschijnt als grijs blok op de pagina
Een"opmaak overlay" blok is alleen bedoeld om instellingen te doen.

Afbeelding

Wat kun je instellen:

4. Instellingen

Tab inhoud

Overlay breedte / Overlay hoogte - geef een percentage op voor de hoogte en de breedte van de overlay
Overlay gedrag - de manier waarop de overlay over de bestaande pagina schuift (vanuit de linkerkant, rechterkant, onderkant of bovenkant)
Welke overlay pagina wil je tonen - Onderaan zie je een dropdown waarin de beschikbare overlaypagina's getoond worden die je eerder hebt gemaakt. Kies de gewenste pagina. Als je de pagina hebt gekozen wordt de naam ervan getoond in het blok.

Afbeelding

Tab Instellingen

Achtergrondkleur van de sluitknop - Onder Tab instellingen stel je de kleur in van het icoon waarmee je de overlay kunt sluiten

Tab Geavanceerd

Border of afgeronde hoeken - Onder Tab geavanceerd kun je een border of afgeronde hoeken om de overlay maken. Je kunt ook alleen een border zetten aan de kant waar je de overlay moet sluiten, zodat daar meer de nadruk op komt te liggen.

5. Overlay pagina koppelen aan contentblok

Heb je zowel de overlay pagina gemaakt + het overlay opmaak blok dan kun je ze koppelen aan een contentblok op de pagina.
Je kunt een overlay koppene aan verschillende contentblokken: een tekstblok, afbeeldingblok of een button. In deze blokken zie je het kopje OVERLAY, klap dit onderdeel open en kies de gewenste overlay uit de dropdown.

Kopiëren en template maken

Hoe het werkt met het maken van een template, een kopie van een pagina waarop een overlay staat en een kopie van een hele editie waarin overlay staan lees je in de voorbeelden hieronder.

Overlay block :
Kopiëren of template maken

In this block you set the size of the overlay and with which animation the overlay opens. From the dropdown you choose the page you want to show in the overlay. In this dropdown only the overlay pages that belong to the current edition are shown. You can then link the overlay to a button, text or image block. In that block, choose the desired overlay that you have created here.

Pagina kopiëren of template maken
Bij het kopiëren van een pagina, het maken van een template blijven alle opmaakblokken met de instellingen behouden alleen worden alle koppelingen met overlay pagina's verbroken en kun je nieuwe koppelingen maken.

Overlay block :
Editie kopiëren

In this block you set the size of the overlay and with which animation the overlay opens. From the dropdown you choose the page you want to show in the overlay. In this dropdown only the overlay pages that belong to the current edition are shown. You can then link the overlay to a button, text or image block. In that block, choose the desired overlay that you have created here.

Een hele editie kopiëren
Bij het kopiëren van een hele editie worden alle pagina's en alle overlay pagina's mee gekopieerd, alle koppelingen worden verbroken.
Je kunt de gekopieerde overlaypagina's hernoemen en de content aanpassen en daarna weer koppelen aan de contentblokken op de pagina.