Hoe maak je een zijbalk (sidebar) met widgets?

Een zijbalk met widgets wordt in de “WordPress wereld” ook wel een “sidebar” genoemd. In dit artikel leggen we je uit hoe je deze kunt maken en hoe je deze instelt voor je berichten of pagina’s.

1. Op welke berichten of pagina’s wil je je zijbalk weergeven?

Voordat we beginnen is het belangrijk om te bepalen waar je je zijbalk wilt weergeven. Wil je een zijbalk voor al je berichten? Voor al je pagina’s? Of wil je de zijbalk slechts op één specifieke pagina weergeven? Het is allemaal mogelijk.

Let op: een zijbalk is een onderdeel van je template. Dit voeg je dus niet toe in de content van een bericht of pagina, maar in een template die ingeladen wordt voor je berichten en/of pagina’s.

Documentatie: Wat is een template?

1.1. Navigeren naar de Site Editor

Om een zijbalk aan te gaan maken, dien je allereerst te navigeren naar de Site Editor. Dit doe je via “Weergave > Editor”.

Vervolgens kies je voor de optie “templates” om alle templates van je website te bekijken.

1.2. Zijbalk weergeven voor alle berichten

Om een zijbalk te weergeven voor al je berichten is het belangrijk om de zijbalk te gaan inrichten in de template “enkel”. Dit is template die ervoor zorgt dat al jou berichten vormgegeven worden. Als je in deze template een zijbalk toevoegt, dan is deze dus voor ieder bericht zichtbaar.

1.3. Zijbalk weergeven voor alle pagina’s

Dit werkt hetzelfde als een zijbalk weergeven voor alle berichten, maar dan is het belangrijk om de zijbalk toe te voegen aan de template “pagina”.

1.4. Zijbalk weergeven voor specifieke berichten of pagina’s

Wil je een zijbalk weergeven voor specifieke berichten of pagina’s? Dan is het belangrijk om een zogenoemde “aangepaste” template te gebruiken. We hebben binnen het Affiliate Held Thema al standaard een aantal aangepaste templates toegevoegd. Hieronder vind je een overzicht van de aangepaste templates die al reeds een zijbalk bevatten.

  • Enkel – Zijbalk links
  • Enkel – Zijbalk rechts
  • Pagina – Zijbalk links
  • Pagina – Zijbalk rechts

Buiten het gebruik van deze standaard aangepaste templates binnen het Affiliate Held Thema, kun je ook je eigen aangepaste template aanmaken. Dat doe je door in het template overzicht rechts bovenaan op de knop blauwe knop “nieuwe toevoegen” te klikken en vervolgens de optie “aangepaste template” te klikken.

Let op: aangepaste templates kunnen enkel en alleen gekoppeld worden aan specifieke berichten en pagina’s. Een aangepaste template kun je niet instellen voor al je berichten of pagina’s. Daarvoor dien je de template “enkel” of “pagina” te gebruiken.

Als je vervolgens een aangepaste template hebt gekozen of aangemaakt, kun je deze koppelen aan specifieke berichten of pagina’s. Dit doe je door naar het betreffende bericht of pagina te gaan, de pagina-instellingen te openen en vervolgens te klikken op de optie “template”. Je kunt hier vervolgens kiezen uit al je aangepaste templates. Vergeet na je selectie niet de pagina op te slaan.

Je kunt een aangepast template zo vaak als je wilt toevoegen aan individuele berichten of pagina’s.

2. Hoe maak ik een zijbalk?

Nu je weet hoe je de zijbalk kunt weergeven in je berichten of pagina’s, is het tijd om de zijbalk daadwerkelijk te gaan maken. Hier zijn verschillende methods voor.

2.1. Blokpatroon gebruiken

Om gemakkelijk een zijbalk te maken, kun je gebruik maken van de kant-en-klare blokpatronen binnen het Affiliate Held Thema. Dit zijn complete sets aan blokken die je met één druk op de knop kunt toevoegen.

Documentatie: Wat is een blokpatroon?

Hoe je dit doet? Klik links bovenaan in de toolbar van de Site Editor op de blauwe “+” knop.

Kies vervolgens voor het tabje “patronen”. Kies vervolgens de categorie “dynamische content”. Vervolgens zie je verschillende kant-en-klare blokpatronen staan met een zijbalk. Kies vervolgens de gewenste zijbalk layout om deze toe te voegen aan je template.

Nadat je het blokpatroon hebt toegevoegd kun je nog het een en ander veranderen. Denk aan kleuren, breedtes, etc.

2.2. Zelf een zijbalk maken

Als je geen blokpatroon wilt gebruiken, kun je ook zelf een zijbalk maken. Een zijbalk bestaat vrijwel altijd uit een dubbel container blok (een container blok in een container blok), een rooster blok en ten slotte twee kolommen. Hoe dit eruit ziet, zie je hieronder in de afbeelding.

De buitenste container is bedoeld om een achtergrond(kleur) in te stellen. De binnenste container is bedoeld om je bericht of pagina content uit te lijnen (meestal in het midden), aangezien je content vrijwel nooit de volledige breedte van je website zal bevatten.

Vervolgens wordt er een rooster blok gebruikt om twee kolommen naast elkaar te maken. Afhankelijk van aan welke kant je de zijbalk wilt toevoegen, stel je de breedtes van de kolom blokken in. Vergeet niet dat de kolom blokken op kleinere apparaten het beste onder elkaar gezet kunnen worden voor de meest optimale weergave. Gebruik hiervoor de responsive opties bij het instellen van de breedtes van je kolommen (bijv. op mobiel beiden kolommen 100% maken).

3. Hoe voeg ik widgets toe aan mijn zijbalk?

Is het gelukt om een zijbalk toe te voegen aan je template(s)? Dan kunnen we de zijbalk gaan vullen met “widgets”. Ik zet widgets hier bewust tussen haakjes omdat widgets in principe een verouderde term is. In de Gutenberg editor worden eigenlijk alleen maar “blokken” gebruikt die kunnen functioneren als een widget. In principe gaan we simpelweg blokken toevoegen aan de zijbalk. Dit doe je door op het “plus” icoontje te klikken binnen de betreffende zijbalk kolom. Kies vervolgens de “widgets”/blokken uit die je wilt toevoegen aan de zijbalk.

Doordat we in de Gutenberg editor werken, heb je alle vrijheid om je zijbalk in te richten zoals jij dat wilt. Vergeet na het toevoegen van de gewenste blokken je template niet op te slaan en controleer op je website of je wijzigingen goed zijn doorgekomen.

Vragen of hulp nodig?

Heb je na het lezen van dit document vragen gekregen, kom je er niet uit of wil je gewoon contact met ons? Vul dan ons contactformulier in of stel een vraag in onze community.

    Dit bericht heeft nog geen reacties

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *