accordeon

Werken met ‘shortcodes’ – Toggle

Huh?

Een titel die wellicht meer vragen oproept dan uitleg geeft over het onderwerp van dit artikel… Wees gerust: uitleg volgt, én u zult er misschien zelfs blij van worden, want uw webpagina’s kunnen er mooier uit gaan zien en extra functionaliteit krijgen.

Shortcode?

Shortcodes zijn stukjes ‘code’ die u in uw pagina’s kunt plaatsen en die bij weergave van de pagina op de plek van de shortcode iets invoegen. Een voorbeeld kan zijn een formulier, knop, foto-galerij of een speciale weergave uw tekst.

Het handigst is om het gewoon te laten zien met een voorbeeld. Ik heb daarvoor de zogenaamde content-toggle gekozen, omdat een klant daar een vraag over had. Klik op het vakje hieronder:

Wat is een content-toggle? (Klik...)

Wat is een content-toggle? (Klik…)

Waar u nu naar kijkt is een toggle. Een tekstgedeelte dat verborgen is en zichtbaar wordt als de bezoeker op de titel klikt. Toggle is een niet-alledaags woord; soms wordt ‘Accordeon’ gebruikt, dat m.i. beter weergeeft waar het om gaat.

Een toggle werkt uiteraard ook op tablets en smartphones.

Zelf een accordeon of toggle ‘maken’

Met behulp van onderstaand van foto’s voorzien stappenplan kunt u eenvoudig een toggle plaatsen. (Alle foto’s zijn aanklikbaar en vergroten dan uit.) In het voorbeeld gebruiken we de shortcodes van WooThemes, waarvan het thema Canvas door veel WebZenz klanten gebruikt wordt.

In de tekstbewerker zit u een knop “W Shortcodes” staan.

De shortcode-knop in uw tekstverwerker

De shortcode-knop in uw tekstverwerker

Klik op deze knop. Alle mogelijke shortcodes tonen zich. Een aantal zal in volgende blogs aan de orde komen. Kies nu voor “Content Toggle”.

Klik en kies 'Content Toggle'

Klik en kies ‘Content Toggle’

Er opent zich een pop-up schermpje. Ik vul zelf altijd alleen maar de bovenste drie opties in. De termen “Close me” en “Open me” vervang ik voor Nederlandse termen, in het vak “Content” plaats ik wat abacadabra, want we gaan de tekst dadelijk mooi maken in de tekstverwerker. Klik op “Insert” (oranje knop rechtsboven)…
(De opties ónder de drie genoemde bespreek ik niet in dit blog, die zijn voor fijnproevers. U mag er gerust mee experimenteren!)

Vul het pop-up scherm met basis-info

Vul het pop-up scherm met basis-info

De shortcode wordt op uw pagina ingevoerd, dat ziet er als volgt uit. U ziet dat het ‘even wennen’ is.

Zo ziet het er in de tekstverwerker uit...

Zo ziet het er in de tekstverwerker uit…

Als u de pagina publiceert en bekijkt wat het resultaat voor een bezoeker is, ziet u dit:

Zo ziet de pagina er voor de bezoeker uit

Zo ziet de pagina er voor de bezoeker uit

Als u op “Open me” klikt, opent zich de toggle:

En zo als de toggle geopend is

En zo als de toggle geopend is

Aha, zo werkt dat dus! OK, dan gaan we nu de toggle mooi maken. Dat kan gewoon in uw tekstverwerker, net als u uw andere pagina’s opmaakt. Zie het voorbeeld hieronder.

Het enige dat u niet mag aanpassen is de inhoud die binnen de [vierkante haken] staat, want dan werkt de shortcode niet meer. Uitgezonderd is tekst, die u kunt herkennen aan het feit dat het tussen aanhalingstekens staat. Voorbeelden zijn “Open me” en “Close me”. De aanhalingstekens moeten blijven staan, van de tekst mag u maken wat u wilt. Er mag zelfs niets staan, dan laat u de ruimte tussen de aanhalingstekens leeg.

Let op: ná alle opgemaakte tekst MOET het einde van de toggle aangegeven staan, in de afbeelding hieronder blauw geselecteerd.

De inhoud van de toggle naar wens opmaken

De inhoud van de toggle naar wens opmaken

De pagina bijwerken en opnieuw het resultaat bekijken, geeft dit bij de standaard pagina weergave:

De opgemaakte toggle dicht...

De opgemaakte toggle dicht…

En dit bij een geopende toggle:

... en geopend!

… en geopend!

Mooi hè?

Speelt u gerust met de mogelijkheden. U kunt meerdere toggles onder elkaar plaatsen en ook shortcode (bijv. om een knop of formulier in te voegen) binnen een toggle plaatsen. Zo kunt u heel veel tekst en uitleg kwijt op een pagina.

U zult zien dat u er steeds handiger in gaat worden, waardoor u meer plezier krijgt in het werken aan uw website, wat een betere en hoger scorende website geeft!

, , , , ,

Nog geen reacties.

Geef een reactie

 

Pin It on Pinterest

Share This