Ga naar inhoud

Sitebrede elementen (header, footer, nieuwsbrief, cookiebanner)

Doel & URL('s)

Deze pagina beschrijft de elementen die op (vrijwel) elke pagina van de GB-hoofdsite aanwezig zijn: topbar, header met hoofdmenu, off-canvas menu (mobiel), sticky navigatie, zoek-overlay, nieuwsbriefblok, footer en cookiebanner. Ze gelden voor alle GB-URL's (paden zonder sub-site-prefix), met uitzondering van de "kale" templates zonder site-chrome (uitgave-flipbook /uitgaven/{slug}/, /pasen/ en /rssfeed/).

De actieve sub-site wordt bepaald door het URL-pad: begint het pad met /de-waarheidsvriend/, /theologia-reformata/ of /cornelis-graafland-centrum/ dan die sub-site, anders GB. Query-parameter ?t=GB|WV|TR|CGC forceert een sub-site en zet tegelijk noindex. Op GB-pagina's krijgt <body> altijd de class theme-gb; die class stuurt alle GB-kleurvarianten.

Opbouw

Van boven naar beneden op elke GB-pagina:

1. Topbar (c-topbar) — alleen desktop (≥ 992 px)

  • Links — sub-site-switcher: actieve sub-site met icoon; klik opent een dropdown met alle 4 sub-sites (Gereformeerde Bond, De Waarheidsvriend, Theologia Reformata, Cornelis Graafland Centrum). GB-link = home; de overige linken naar de sub-site-homepages (/de-waarheidsvriend/, /theologia-reformata/, /cornelis-graafland-centrum/).

  • Rechts — accountmenu:

    • Niet ingelogd: link "Inloggen" (persoons-icoon) → /inloggen/.

    • Ingelogd: "Ingelogd als:" + naam (voornaam/achternaam, anders login) met hover-submenu, items conditioneel op rol:

      Item URL Zichtbaar voor
      Waarheidsvriend digitaal /uitgaven rol wv-subscriber
      Mijn account /account wv-subscriber of pastor
      Predikant gegevens /predikant-gegevens rol pastor
      Wachtwoord wijzigen /wachtwoord-wijzigen alle ingelogden
      Uitloggen wp_logout_url → /inloggen alle ingelogden

  • Rechts — CTA-knoppen uit optie GB_topbar_links: "Doneer nu" → /gift-geven/ (outline) en "Word lid" → /doe-met-ons-mee/ (gevulde primary-knop; de laatste link in de repeater is altijd de gevulde variant).

2. Header (c-v2-header header-personal header--gb) — tweelaags

  • Laag 1 (header-top):
    • Mobiel (< 768 px): logo links; rechts zoekknop + hamburger.
    • Desktop (≥ 768 px), drie kolommen: links LinkedIn-icoon (hard gelinkt naar https://www.linkedin.com/company/gereformeerde-bond/), midden GB-logo (inline SVG, linkt naar /), rechts zoekknop (vergrootglas-icoon), account-icoon en hamburger (< 992 px).
    • Account-icoon: niet ingelogd → link /inloggen/ (alleen ≥ 992 px); ingelogd → hover-dropdown "Ingelogd als: {naam}" met items Waarheidsvriend digitaal / Mijn account / Wachtwoord wijzigen / Uitloggen (zie Bekende afwijkingen: drie links zijn placeholders).
  • Laag 2 (navbar, alleen ≥ 992 px): horizontaal hoofdmenu uit WP-menu "Gereformeerde Bond" (locatie GB_primary_navigation, 2 niveaus). Actief item krijgt witte tekst op een pill met GB-gradient; dropdowns openen op hover (wit paneel met schaduw en pijltje). Menustructuur (productie):
    1. Waarheidsvriend digitaal → /uitgaven/
    2. Over de Gereformeerde Bond → /over-de-gb/ (8 subitems: Visie Missie & Doel, Geschiedenis, Bestuur & Organisatie, Predikanten, Proponenten, GB-afdelingen, Zusterbonden, Beroepingswerk)
    3. Over wat we doen → /over-wat-we-doen/ (11 subitems: De Waarheidsvriend, Middelen & Activiteiten, Boeken & Publicaties, Studenten, Fondsen, Leerstoelfonds, Steunfonds, Studiefonds, Preken, THGB, Onderwijs)
    4. Over wat we vinden → /over-wat-we-vinden/
    5. Doe met ons mee! → /doe-met-ons-mee/ (subitem Gift geven → /gift-geven/)
    6. Contact → /contact/

3. Sticky navigatie

Bij scrollen voorbij 300 px verschijnt bovenaan een gefixeerde kloon van de menubalk (met logo van 65 px en eigen hamburger), getoond via body-class down. Verdwijnt weer boven de 300 px-grens.

4. Canvas-menu (off-canvas, mobiel/tablet < 992 px)

Paneel van 300 px breed dat rechts inschuift na klik op de hamburger; sluiten via kruisje of Escape. Inhoud van boven naar beneden:

  1. GB-logo + sluitknop.
  2. Sub-site-switcher (uitklapbaar, alle 4 sub-sites).
  3. Hoofdmenu-boom van GB_primary_navigation (2 niveaus, uitklap-chevrons met slide-animatie).
  4. CTA-items "Word lid" en "Doneer nu" (zie Bekende afwijkingen).
  5. Ingelogd: "Mijn account"-sectie (submenu; alleen Uitloggen werkt).
  6. Onderaan: LinkedIn-icoon.

5. Zoek-overlay

Fullscreen overlay met kop "Waar bent u naar op zoek?" en zoekformulier; opent via de zoekknop in de header. Details in Zoeken.

  • Getoond wanneer optie GB_display_newsletter_form aan staat (productie: aan) óf de bezoeker ingelogd is.
  • Titel: "Meld u aan voor onze nieuwsbrief" (optie GB_newsletter_title); tekst: "en krijg een update met de laatste artikelen" (GB_newsletter_text).
  • Formulier: Gravity Forms ID 22 (hardcoded in Partials/Newsletter.php; de optie GB_form_id = 22 wordt niet gelezen). Velden: Naam (voornaam + achternaam zichtbaar, verplicht) en E-mailadres (verplicht).
  • Na verzenden: bevestigingstekst "Vergeet niet om uw inschrijving voor onze nieuwsbrief te bevestigen! Uw ontvangt dan binnenkort de eerste nieuwsbrief."
  • Backend-koppelingen (niet zichtbaar, wel gedragsbepalend): Mailchimp-feed op het formulier én — alleen bij inzending vanuit GB-context — de Listmonk-koppeling via gform_after_submission (lijst 3, status enabled, preconfirm; HTTP 409 "al ingeschreven" wordt genegeerd). Zie Nieuwsbrief voor de subsite-nuance.
  1. Top (4 kolommen): GB-beeldmerk (inline SVG) + knop "Word lid" → /doe-met-ons-mee/ (optie GB_footer_button); linkkolom (titel + repeater GB_footer_links); contactkolom (GB_contact_info: adres, postcode, plaats, telefoon als tel:-link, e-mail als mailto:-link, IBAN); sub-site-linkblok (alle 4 sub-sites met icoon).
  2. Midden: ANBI-logo (link naar https://anbi.nl/) + social-blok met titel uit GB_social_media en maximaal één social-icoon (zie Bekende afwijkingen).
  3. Onder: "Copyright © {huidig jaar}" + secundaire links uit GB_footer_links_secondary.

8. Cookiebanner

Plugin "Beautiful and responsive cookie consent" (4.9.2), op elke pagina onderaan (zwart paneel, witte knoppen):

  • Melding: "Deze website gebruikt functionele en analytische cookies voor website optimalisatie en statistieken."
  • Knoppen: "Cookies accepteren", "Cookies weigeren", link "Cookie Settings" (banner heropenbaar).
  • Cookietypes: "Technical" (aangevinkt en niet uitschakelbaar) en "Marketing" (standaard uit).

Databronnen

Element Bron
Sub-sites en actieve sub-site config/theme.php → subsites; detectie op URL-pad + ?t=
Hoofdmenu WP-menu "Gereformeerde Bond" op locatie GB_primary_navigation (26 items)
Topbar-CTA's ACF-optie GB_topbar_links (repeater link)
Nieuwsbriefblok Opties GB_display_newsletter_form, GB_newsletter_title, GB_newsletter_text; GF-formulier 22 (hardcoded)
Footer Opties GB_footer_button, GB_footer_links, GB_contact_info, GB_social_media, GB_footer_links_secondary
Accountmenu Ingelogde gebruiker + rollen wv-subscriber / pastor

Gedrag & rollen

  • Anoniem: topbar/header tonen "Inloggen"-link; nieuwsbriefblok zichtbaar (optie staat aan); geen accountmenu.
  • Ingelogd (elke rol): accountmenu in topbar en header-dropdown; items conditioneel op rol (tabel hierboven). Nieuwsbriefblok altijd zichtbaar.
  • Breakpoints: < 768 px compacte header (logo + zoek + hamburger); 768–991 px header-top met hamburger, geen menubalk, geen topbar; ≥ 992 px topbar + menubalk zichtbaar, hamburger weg.
  • Uitloggen stuurt door naar /inloggen.
  • Admin bar: verborgen voor rollen wv-subscriber en pastor (tenzij tevens admin-rol).

Acceptatiecriteria

Topbar en header

  • Als anonieme bezoeker op een willekeurige GB-pagina op desktop (≥ 992 px), dan is de topbar zichtbaar met sub-site-switcher, "Inloggen"-link en de knoppen "Doneer nu" (→ /gift-geven/) en "Word lid" (→ /doe-met-ons-mee/).
  • Als bezoeker op een viewport < 992 px, dan is de topbar niet zichtbaar en is de hamburgerknop zichtbaar.
  • Als bezoeker klik ik op de sub-site-switcher, dan opent een dropdown met alle 4 sub-sites; klik op "De Waarheidsvriend" navigeert naar /de-waarheidsvriend/.
  • Als bezoeker op desktop, dan toont de menubalk de 6 hoofdmenu-items met de juiste dropdowns (8 items onder "Over de Gereformeerde Bond", 11 onder "Over wat we doen"); alle links komen overeen met de menutabel hierboven.
  • Als bezoeker op een pagina die in het menu staat, dan is het actieve menu-item visueel gemarkeerd (pill met GB-gradient, witte tekst).
  • Als bezoeker klik ik op het GB-logo, dan navigeer ik naar /.
  • Als bezoeker scroll ik meer dan 300 px, dan verschijnt de sticky navigatiebalk bovenaan; scroll ik terug boven de grens, dan verdwijnt hij.
  • Als anonieme bezoeker klik ik op het account-icoon in de header (≥ 992 px), dan kom ik op /inloggen/.
  • Als ingelogde wv-subscriber toont de topbar-dropdown: Waarheidsvriend digitaal, Mijn account, Wachtwoord wijzigen, Uitloggen (geen "Predikant gegevens").
  • Als ingelogde pastor (zonder abonnee-rol) toont de topbar-dropdown: Mijn account, Predikant gegevens, Wachtwoord wijzigen, Uitloggen (geen "Waarheidsvriend digitaal").
  • Als ingelogde gebruiker zonder rol wv-subscriber/pastor toont de topbar-dropdown alleen: Wachtwoord wijzigen en Uitloggen.
  • Als ingelogde gebruiker klik ik op "Uitloggen", dan word ik uitgelogd en beland ik op /inloggen.

Canvas-menu

  • Als bezoeker op mobiel (< 992 px) klik ik op de hamburger, dan schuift het off-canvas menu van rechts in beeld met sub-site-switcher, het volledige GB-hoofdmenu (2 niveaus) en het LinkedIn-icoon.
  • Als bezoeker klik ik op een chevron bij een menu-item met kinderen, dan klapt het submenu open/dicht met animatie.
  • Als bezoeker sluit ik het canvas-menu via het kruisje of de Escape-toets, dan schuift het paneel weg.

Nieuwsbriefblok

  • Als anonieme bezoeker op een GB-pagina, dan staat boven de footer het nieuwsbriefblok met titel "Meld u aan voor onze nieuwsbrief" en een formulier met velden Naam en E-mailadres.
  • Als bezoeker verzend ik het nieuwsbriefformulier zonder e-mailadres, dan verschijnt een validatiefout en wordt niets verzonden.
  • Als bezoeker verzend ik het nieuwsbriefformulier geldig ingevuld, dan verschijnt de bevestigingstekst "Vergeet niet om uw inschrijving voor onze nieuwsbrief te bevestigen! …".
  • Als bezoeker verzend ik het formulier geldig vanaf een GB-pagina, dan wordt de inschrijving doorgezet naar Mailchimp-lijst 06ec423fd4 én Listmonk-lijst 3; een reeds bestaand e-mailadres geeft geen foutmelding aan de bezoeker (zie Nieuwsbrief).
  • Als bezoeker op een GB-pagina, dan bevat de footer: GB-logo, knop "Word lid" → /doe-met-ons-mee/, de linkkolom uit de thema-opties, het contactblok (adres, telefoon als tel:-link, e-mail als mailto:-link, IBAN), het sub-site-blok met 4 links, het ANBI-logo (→ https://anbi.nl/) en de copyrightregel met het actuele jaartal.
  • Als bezoeker klik ik op een sub-site-link in de footer, dan navigeer ik naar de betreffende sub-site-homepage.

Cookiebanner

  • Als bezoeker zonder eerdere cookiekeuze op een GB-pagina, dan verschijnt onderaan de cookiebanner met de meldtekst en de knoppen "Cookies accepteren" en "Cookies weigeren" en de link "Cookie Settings".
  • Als bezoeker accepteer of weiger ik cookies, dan verdwijnt de banner en verschijnt hij bij een volgende paginaweergave niet opnieuw.
  • Als bezoeker open ik "Cookie Settings", dan kan ik de keuze herzien; het type "Technical" is aangevinkt en niet uitschakelbaar.

Sub-site-context

  • Als bezoeker op een GB-URL (pad zonder sub-site-prefix), dan heeft <body> de class theme-gb en gebruikt de site de GB-kleuren en het GB-menu.
  • Als bezoeker op een URL met ?t=WV, dan rendert de pagina in WV-context én bevat de response een noindex-robots-header/meta.

Bekende afwijkingen

NIET nabouwen in Next.js — wel vermelden in het testrapport

  1. Placeholder-links in de header-accountdropdown: de items "Waarheidsvriend digitaal", "Mijn account" en "Wachtwoord wijzigen" in de v2-header-dropdown hebben href="#". De werkende links staan alleen in de (desktop-only) topbar. In de rebuild moeten deze links overal werken.
  2. Placeholder-CTA's in het canvas-menu: "Word lid" en "Doneer nu" hebben href="#"; in de accountsectie van het canvas-menu werkt alleen "Uitloggen". In de rebuild: koppelen aan /doe-met-ons-mee/ resp. /gift-geven/ en de echte accountlinks.
  3. Footer-social toont maximaal één netwerk (elseif-keten Facebook → Twitter → Instagram); het "Instagram"-veld rendert bovendien een LinkedIn-icoon. In de rebuild: alle gevulde netwerken tonen met het juiste icoon.
  4. Google Analytics 4 is niet aan de cookie-consent gekoppeld: de gtag-snippet (mu-plugin, ID G-42MMSGNGJN) laadt op productie onvoorwaardelijk, terwijl de bannertekst analytische cookies aan consent koppelt. Voor de rebuild is een consent-ontwerp nodig; de huidige werking niet 1-op-1 overnemen.
  5. Nieuwsbrief-formulier-ID is hardcoded (22); de optie GB_form_id wordt genegeerd. In de rebuild het formulier configureerbaar maken of de afhankelijkheid expliciet vastleggen.
  6. De navigatie declareert fonts "Roboto"/"Poppins" die nergens geladen worden; live rendert de systeem-sans-serif. Voor pixelvergelijking is de systeemfont de referentie.