Hoe maak je een footer?

Een footer is het onderdeel onderaan een webpagina die op alle pagina’s van een website te zien is met dezelfde inhoud. Deze wordt veelal gebruikt voor handige links, contactinformatie, algemene voorwaarden, privacy policy en social links. Dit template onderdeel wordt dus gebruikt om een footer te kunnen vormgeven die overal op je website gebruikt kan worden.

Zo ziet de footer van onze website (Affiliate Held) eruit:

Binnen het Affiliate Held Thema wordt de footer gezien als een template onderdeel.

Documentatie: Wat is een template onderdeel?

In dit document leggen we uit hoe je de footer van je website aan kunt passen. Er zijn twee methodes. 1) Het aanpassen van de bestaande footer (de voorgeprogrammeerde footer door Affiliate Held) of 2) Het maken van een compleet nieuwe footer.

1.1. Website editor openen

Navigeer binnen je WordPress omgeving naar Weergave > Editor

1.2. Open “patronen”

Wanneer je in de website editor bent navigeer je naar “Patronen”. Let op: de footer is een template onderdeel, maar is recent verplaatst onder het kopje “patronen”.

Er wordt weer een pagina geopend. Navigeer naar de “Template onderdelen” en kies “Footer”.

Wanneer je op “Footer” klikt dan zie je aan de rechterkant de footer staan die je kunt bewerken. Klik hierop (rood vierkant).

Wanneer je op de footer hebt geklikt zie je de footer hoe deze op je website wordt weergeven. Aan de linker kant zie je de details van de footer. Hier vind je ook de bewerk knop. Klik hier op en ga verder.

1.5. Elementen toevoegen

Als je op de bewerken knop hebt geklikt verschijnt de footer met de mogelijkheden om de footer aan te passen. Klik op de knop met “lijst weergave” (linksboven). Hierdoor verschijnen alle blokken en zie je hoe de footer is opgebouwd qua structuur.

Door vervolgens op blauwe knop “Toggle blok inserter” te klikken kun je blokken toevoegen.

Als je op de blauwe knop hebt geklikt verschijnt een scherm waar je verschillende blokken/patronen of andere media kan toevoegen. Uiteraard kan je hier gebruik maken van de speciale Affiliate Held Thema blokken, maar eventueel ook andere beschikbare blokken.

1.6. Elementen aanpassen

Wil je een bestaand element aanpassen? Klik dan op het element in de footer. In onderstaande voorbeeld is dit de tekst: “Affiliate Held, Affiliate Held AI en Affiliate Held Thema”. Je ziet dat deze 3 regels blauw omcirkeld zijn. Het element/blok wordt geselecteerd. In de lijst weergave (linker side bar) zie over welk element (in de footer) het gaat. In de rechter sidebar kun je de blokinstellingen aanpassen. Hieronder een screenshot met begeleidende rode vierkanten wat aanduidt waar je de instellingen kunt openen:

1.7. Laat je creativiteit gaan en sla instellingen op

Nu je weet hoe je de voorgeprogrammeerde footer aan kan passen is het tijd om je creativiteit te laten gaan. Voeg blokken toe, pas kleuren aan en vergeet zeker niet je footer instellingen op te slaan. Succes!

Liever vanaf het begin een eigen footer maken? Die uitleg vindt je (op korte termijn) hieronder.

Je weet nu dat een footer een “patroon”, ofwel template onderdeel, is. In deze methode ga ik je uitleggen hoe je deze aanmaakt.

2.1. Website editor openen

Navigeer binnen je WordPress omgeving naar Weergave > Editor

2.2. Open “patronen”

Wanneer je in de website editor bent navigeer je naar “Patronen”. Let op: de footer is een template onderdeel, maar is recent verplaatst onder het kopje “patronen”.

2.3. Patroon aanmaken

Eenmaal aangekomen op de “patronen” pagina, klik je op de + (rood omcirkeld). Hiermee maak je een nieuw patroon aan.

2.4. Maak een template onderdeel

Wanneer je geklikt hebt op “patroon aanmaken” ontstaat er een drop down met drie keuzes:

  • Patroon aanmaken
  • Maak template onderdeel
  • Patroon importeren uit JSON

Klik op: “maak template onderdeel”. Er verschijnt een popup. Geef het nieuwe template onderdeel een naam (ter eigen referentie), selecteer het template onderdeel footer en klik op de blauw knop: “Maken”.

Zoals je kunt zien wordt er nu een blanco footer aangemaakt met de naam: “Footer 2.0” (de naam die ik gekozen heb in de vorige stap).

Nu wordt het tijd om de footer in te richten en op te bouwen. Dit gaan we doen met blokken. In het Affiliate Held Thema (wat gebruik maakt van de Gutenberg Editor) is elk element van je content een blok, waardoor je content sneller kan bewerken. Voorbeelden hiervan zijn: “Kop”, “Afbeelding”, “Rooster”, maar dus ook een “Header” en een “Footer” blok.

Klik op de blauwe knop “Toggle blok inserter” om een blok toe te voegen.

Er verschijnt een lijstweergave met allemaal blokken. Onder de Affiliate Held Thema blokken kies je voor: “Footer”. Klik op “Footer”.

Er verschijnt een volgende optie waar je het aantal kolommen kunt instellen met de tekst: Selecteer hoeveel kolommen je wilt toevoegen of sla deze stap over om je eigen kolommen toe te voegen.

Als je op: “Overslaan” klikt, komen er standaard twee kolommen. De keuze ligt hierbij, bij jou.

Wanneer je een keuze voor het aantal kolommen hebt gemaakt kun je starten met het bouwen van je footer. Links in de “Lijstweergave” zie je hoe je footer is opgebouwd (in dit voorbeeld een footer blok + twee kolom blokken).

Door de blauwe knop: “Toggle blok inserter”, die je eerder gebruikt hebt, kun je nog meer blokken (anders gezegd: content) gaan toevoegen aan deze kolommen, of aan de footer zelf.

Aan de rechterkant vind je de blok instellingen waar je de instellingen van ieder blok (Footer blok, Kolom 1 en kolom 2) allemaal kunt aanpassen naar eigen wens.

Dit is hoe je een eigen footer kunt maken en stijlen. Veel succes!

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 *