Overslaan en naar de inhoud gaan

Global header en footer

De Global header en footer vormen het gemeenschappelijke stijlelement van websites, e-loketten en andere webtoepassingen van de Vlaamse overheid. Ze verhogen de herkenbaarheid en betrouwbaarheid van uw digitale applicatie. Daarnaast bieden we via de header en footer een aantal interessante generieke functionaliteiten aan.

Global header

De Global header is een witte balk bovenaan uw website, e-loket of andere digitale toepassing.

Global Header - alle opties

Zoals u in de illustratie kunt zien bevat de Global header steeds een verwijzing naar Vlaanderen.be, de officiële website van de Vlaamse overheid, en daarnaast een verwijzing naar de naam van uw eigen site.

U kunt de Global header uitbreiden met de volgende onderdelen:

  • Leeuwenlogo
    Als uw website geen leeuwenlogo bevat, kunt u er voor opteren om in de Global header een leeuwenlogo toe te voegen.
  • Contactmenu
    Dit contactmenu kan uw eigen contactopties bevatten, zoals e-mail, telefoonnummer, adres of uw accounts op sociale media. Wie een samenwerking heeft met 1700 kan aan het contactmenu de contactopties voor 1700 toevoegen: Bel 1700, Stuur een mail of Chat.
  • Kruimelpad met hoofdnavigatiemenu
    Aan de Global header kan ook de hoofdnavigatie van uw website toegevoegd worden. Wij kunnen deze navigatie-items voor u toevoegen via ons administratiepaneel. Dan zijn deze items statisch en moet u ons bij elke wijziging contacteren. U kunt ook zelf dynamische navigatie-items maken door uw cms via een eenvoudige integratie in de Global header te injecteren. 

Naast de standaard global header zijn er ook nog twee varianten voor specifieke doeleinden:

  • Global header voor corporate websites
    De Global header kent een variant met geel als steunkleur voor corporate websites of websites voor een internationaal publiek.
  • Global header voor websites van het Webuniversum
    De website Vlaanderen.be en Overheid.vlaanderen.be kregen een nog andere versie van de Global header en footer, de zogenaamde "Webuniverum Global header en footer". Deze variant heeft de gele corporate kleur, en bevat daarnaast ook een zoekfunctie die gekoppeld is aan de zoekmachine van Vlaanderen.be en Overheid.vlaanderen.be en een scroll progress indicator die aangeeft hoever u al in een pagina scrolde.
    We behouden deze variant voor aan websites die deel uitmaken van het webuniversum en dus aansluiten bij of deel uitmaken van Vlaanderen.be of Overheid.vlaanderen.be 

Global footer

De Global footer is een witte balk helemaal onderaan uw website.

Global footer - alle opties

De Global footer bestaat uit: 

  • De naam van uw website, gevolgd door ‘is een officiële website van de Vlaamse overheid'
  • Het leeuwenlogo gecombineerd met de slagzin 'Vlaanderen Verbeelding werkt'
  • 'Uitgegeven door', gevolgd door de naam van de uitgevende entiteit

U kunt de Global footer uitbreiden met de volgende onderdelen

  • Footerlinks
    De Global footer biedt ook ruimte voor enkele footerlinks zoals een disclaimer, een toegankelijkheidsverklaring of een pagina over uw entiteit. 

  • Taalswitch
    De Global header en footer ondersteunen vier talen: Nederlands, Frans, Engels en Duits. 
    Bestaat uw website uit een of meer taalversies dan verschijnt in de Global footer een taalswitch en passen de Global header en footer zich aan de taalversie van uw website aan.

De Global header en footer met alle geactiveerde onderdelen kunt live aan het werk zien:

Aanvragen?

Om een global header en footer toe te voegen aan uw website, loket of webtoepassing, stuurt u een mail naar support@kb.vlaanderen.be.

We bieden drie manieren aan om de Global header en footer toe te passen. 

  1. Integratie via de embed code
  2. Integratie via 'Server side include'
  3. Integratie via de Drupal module 'Widget Block'

 

Widget verschijnt niet zoals gewenst

Probleem

Verschijnt de Widget niet zoals gewenst? Zij niet alle opties zichtbaar of is schort er iets aan de opmaak? Mogelijks bevat uw HTML-element geen language attribuut.

Oplossing

Voeg het lang-attribuut toe aan het HTML-element van uw website.

<html lang="nl">  <!-- voor Nederlands -->
<html lang="fr">  <!-- voor Frans-->
<html lang="en">  <!-- voor Engels-->
<html lang="de">  <!-- voor Duits-->

 

Kunnen jQuery-versie van uw site conflicteren met de jQuery-versie van de widgets?

Zowel de Global header en footer als de Hulpwidget maken gebruiken van jQuery voor onderliggende DOM-manipulaties. Echter, de WidgetApi voorziet dat de verschillende nodige bibliotheken geïsoleerd worden uitgevoerd. Voor jQuery gebruiken wij 'noConflict' waardoor verschillende versies van jQuery naast elkaar gebuikt kunnen worden.

Kan ik de margin en breakpoints van de Global header en footer aanpassen?

Ja. Om de breedte en de positie van de margins aan te passen, of om eigen breakpoints toe te passen op de Global header en footer, volg de volgende stappen:

  1. Laat ons even weten via support@kb.vlaanderen.be dat u uw eigen margins of breakpoints wilt gebruiken.
    Wij zetten dan de standaardinstelling af in ons administratiepaneel.
  2. Pas de margin en/of breakpoints aan via één of beide van deze CSS-bestanden:

 

Waarom vertoont de global header 'springgedrag' op mijn website?

Dit gedrag komt soms voor bij het gebruik van de 'embed code'. Deze code voorziet bij het laden van uw website nog geen plaats voor de Global header de pas later ingeladen wordt. Deze duwt bij het laden de site naar beneden waardoor het lijkt dat uw site naar beneden springt.

Dit kan verholpen worden door gebruik te maken van de 'Server side include'-integratiemethode.