Hoe maak ik tabbladen die verschillende secties tonen?

Hoe werkt het?

Elke tab hoort bij een sectie op dezelfde pagina. De koppeling maak je met een ID: een korte naam die je zowel bij de sectie als bij de tab invult, bijvoorbeeld websites. Op de website laat leflite alleen de sectie van de actieve tab zien. De eerste tab staat open als de pagina laadt.

Stap 1: Maak de secties en geef elk een ID

1. Maak voor elke tab een eigen sectie, onder elkaar. Zie een sectie toevoegen.
2. Selecteer de eerste sectie. Klik in de werkbalk op het icoon van het bovenliggende blok tot de sectie geselecteerd is.
3. Open rechts het paneel Sectie instellingen en vul bij Container aangepaste ID een korte naam in, bijvoorbeeld websites. Gebruik alleen kleine letters, cijfers en streepjes, zonder spaties.
4. Doe hetzelfde voor de andere secties, met een andere naam: webshops, koppelingen.

Stap 2: Voeg het blok Sectie tabs toe

Maak boven de secties een nieuwe sectie voor de tabjes. Klik in de kolom op de + (Blok toevoegen), typ ‘tabs’ en kies Sectie tabs. Het bewerkvenster gaat open.

Stap 3: Vul per tab de velden in

Klik onder Tabjes op Nieuwe rij voor elke tab. Per tab vul je in:

• Tab afbeelding (optioneel): een foto of illustratie boven de titel.
• Tab titel: de naam van de tab, bijvoorbeeld ‘Websites’.
• Tab introductie (optioneel): één korte zin onder de titel.
• Gekoppelde sectie ID: de ID van de sectie die bij deze tab hoort, precies zoals je hem bij de sectie invulde.
• Lees meer knop tekst: de tekst op het knopje in de tab. Laat je hem leeg, dan staat er ‘Lees meer’.
• Lees meer knop verbergen: zet aan als je geen knopje in de tab wilt.

Stap 4: Tabjes per rij en knopkleur

Bij Tabjes per rij kies je 6, 4, 3 of 2. Kies je niets, dan passen er 6 op een rij. Heb je drie tabs, kies dan 3, zodat ze de hele breedte vullen. Bij Kleur kies je de kleur van het knopje in de tabs.

Klik op Klaar en daarna op Opslaan. Bekijk de pagina op de website: in de editor zie je alle secties gewoon onder elkaar.

Wat ziet de bezoeker?

De bezoeker ziet de rij tabs met daaronder de sectie van de actieve tab. De actieve tab is gemarkeerd. Klikt hij op een andere tab, dan verschijnt die sectie. Op een telefoon scrolt de pagina daarbij naar de sectie.

Direct naar een tab linken

Klikt een bezoeker op een tab, dan komt de ID achter het webadres te staan, bijvoorbeeld /diensten/#webshops. Gebruik je zo’n adres in een link of knop, dan opent de pagina meteen met die tab. Handig voor een knop op een andere pagina. Meer over zulke links lees je in linken naar een plek verderop op de pagina.

Tabs of accordion?

Tabs zijn handig voor een paar grote blokken inhoud, zoals een sectie per dienst. Voor veel korte stukjes tekst, zoals vragen en antwoorden, is een accordion beter. Zie uitklapbare blokken met de accordion.

Lukt het niet?

• Je ziet al je secties tegelijk. De ID bij de tab is niet precies gelijk aan de ID van de sectie. Controleer beide.
• Een tab ontbreekt. De Gekoppelde sectie ID van die tab is leeg.
• In de editor zie je alle secties. Dat klopt: het tonen en verbergen gebeurt alleen op de website.
• De tabs staan te dicht op elkaar of te ver uit elkaar. Pas Tabjes per rij aan op het aantal tabs.
• Kom je er niet uit? Neem contact met ons op.

Alle blokken vind je in alle blokken op een rij.

Veelgestelde vragen