Let op! Deze uitleg is gebaseerd op één van onze nieuwere professional designs.
We gaan het volgende aanpassen.
Stap 1 - Mijn pagina opzoeken.
- Ga naar de achterkant van jouw webshop (Het CMS)
- Ga vervolgens naar "paginabeheer" en dan links naar "tekstpagina's"
- Zoek hier vervolgens de juiste tekstpagina op
- Klik op (Wijzigen)
Stap 2 - De html aanpassen
- Scrol naar beneden tot dat je de pagina inhoud tegen komt
- Klik hier op "Code"
- Verwijder alles wat daar in staan
- Plak het onderstaande daar dan vervolgens in
<h2>Veelgestelde vragen</h2>
<div id="accordion">
<div class="group">
<h3>Titel</h3>
<div>
<p>Tekst</p>
</div>
</div>
</div>- Je ziet nu jouw stukje code staan
- Het stukje dat in het midden staat mag je aanpassen
- Titel is de titel en tekst is de tekst
<div id="accordion">
<div class="group">
<h3>Titel</h3>
<div>
<p>Tekst</p>
</div>
</div>
</div>- Dit is 1 groepering van de uitklapper.
- Als je dit opslaat zit het er als volgt uit op de webshop.
Stap 3 - Meerdere uitklappers toevoegen
- Open nogmaals jouw stukje code. Dit ziet er als volgt uit
- Om een groepering bij te voegen dupliceer je het stukje van
<div class="group">
<h3>Titel</h3>
<div>
<p>Tekst</p>
</div>
</div>- Deze plak je onder de andere groepering, dit ziet er dan als volgt uit.
<h2>Veelgestelde vragen</h2>
<div id="accordion">
<div class="group">
<h3>Titel</h3>
<div>
<p>Tekst</p>
</div>
</div>
<div class="group">
<h3>Titel</h3>
<div>
<p>Tekst</p>
</div>
</div>
</div>Om het nog wat duidelijker te maken, heb ik hier nog een voorbeeld
Alles wat hier weer omheen zit, is de groepering van jouw uitklappers. Op deze manier houdt hij deze bijelkaar.
- Vervolgens kun je nogmaals klikken op code
- Nu zie je de uitkomst.
- Je zou nu eventueel jouw code kunnen stijlen doormiddel van deze manier.
- Klik vervolgens onderaan de pagina op opslaan
Nu kun je het resultaat bekijken, dit ziet er dan als volgt uit.
