Priority support
Help Center > Hello biz theme > Pas je hello biz header aan

Pas je hello biz header aan

Laatste update: augustus 24, 2025

Deze post is vertaald met behulp van automatische vertaling, waardoor er kleine onnauwkeurigheden of verschillen in formulering ten opzichte van het origineel kunnen zijn. Sorry voor eventuele foutjes of onduidelijkheden, neem gerust contact met ons op als wij iets voor je mogen verhelderen.

Wat is de hello biz header?

Headers verschijnen bovenaan de pagina’s van je site. Ze bevatten meestal het logo van je site, navigatielinks voor snelle toegang tot belangrijke pagina’s en een CTA-knop.

Bekijk alle beschikbare opties voor de Header.

Je header aanpassen

Om je Header aan te passen:

  1. Ga naar WP admin.
  2. Klik in het paneel op Hello Biz.

  3. In de Site-onderdelen sectie onder Header klik op Bewerken.
    De Elementor Editor opent met de Header zichtbaar.
    De Header-opties verschijnen in het paneel.

Pas de header-opties aan

De Header heeft vijf secties:

  • Layout: Selecteer een basis layout voor je header.
  • Site-identiteit: Gebruik een logo of bedrijfsnaam om de site te identificeren.
  • Navigatie: Maak snelkoppelingen naar de pagina’s van de site.
  • Contact Knop: Voeg optioneel een knop toe waarmee bezoekers gemakkelijk contact met je kunnen opnemen.
  • Call to Action: Geef bezoekers een snelle manier om met je te interacteren.
  1. Geef je header in de sectie Layout een basisstructuur door een basisontwerp te selecteren.
  2. In de Site-identiteit sectie in het Merk veld, moet het dropdown-menu in de standaardpositie van Site Logo staan.

    Het selecteren van een logo is onderdeel van het aanpassen van je site.
    Je kunt je logo wijzigen door op Site Logo Wijzigen te klikken in het paneel. Voor details, zie Afbeeldingen en iconen toevoegen.

    Als je liever de sitenaam in de Header gebruikt, gebruik dan het dropdown-menu om Site Naam te kiezen.
  3. De navigatie sectie beheert de snelkoppelingen naar de andere pagina “’s van de site. Voor nu laten we dat op de standaardinstellingen staan”. Zie hieronder voor alle navigatie-opties.
    De Contact knop geeft gebruikers de mogelijkheid om contact met ons op te nemen of naar onze pub te navigeren. We geven gebruikers een gemakkelijke manier om ons te vinden via Waze.

  4. Open het Contact Knop veld en zet de schakelaar op Ja.

  5. Selecteer Waze uit het Platform dropdown-menu.
    De Call to Action sectie beheert de knop in de Header. Aangezien dit een Header voor een sportbar is, plaatsen we hier een link naar het reserveringsformulier.

  6. Open de Call to Action sectie.

  7. Voer in het Primaire CTA tekstvak Nu Reserveren in.

  8. Voer in het Link veld de URL van het reserveringsformulier in.
    Laten we nu de stijl van de Call to Action knop aanpassen zodat deze verandert wanneer gebruikers er met de muis overheen gaan.

  9. Klik op het tabblad Stijl.
  10. Open de Call to Action sectie.
  11. Klik op Hover.
    Door op Hover te klikken bewerk je de stijl die verschijnt wanneer gebruikers met de muis over de knop gaan.

  12. Klik op het wereldbol-icoon naast Tekstkleur en selecteer Accent.

  13. Klik op het wereldbol-icoon naast Kleur en selecteer Primair.
    Wanneer gebruikers met de muis over de knop gaan, wisselen de achtergrond- en tekstkleuren om.

Instellingen voor de header

Je kunt je widgets aanpassen met content, stijl en andere geavanceerde parameters, wat je veel flexibiliteit biedt bij het aanpassen aan je behoeften. Klik op de tabbladen hieronder om alle beschikbare instellingen voor deze widget te zien.

Content tabblad

Voeg Header-items toe, verwijder en bewerk ze en bedien ze.

Kies een van de basis layouts. Je kunt deze layout stylen met de andere secties van de Inhoud en Stijl tabs.

Merk: Gebruik het dropdown-menu om te kiezen:

  • Site Logo: toon je logo in de header.
  • Site Naam: Toon je bedrijfsnaam in de Header. Je kunt het dropdown-menu gebruiken om de HTML-tag van de sitenaam te wijzigen. We raden aan de standaard tag te gebruiken.
  • Site logo wijzigen: Als je een logo gebruikt, klik dan om een ander logo te selecteren. Voor details, zie Afbeeldingen en iconen toevoegen.

Dit helpt Toegankelijkheidsapps het menu te identificeren. Je kunt de menunaam wijzigen maar we raden aan de standaard te gebruiken.

De Header gebruikt het WordPress-menu om snelkoppelingen te maken. Als je meer dan één WordPress-menu hebt, gebruik dan het dropdown-menu om te selecteren welk menu je wilt gebruiken. Voor details, zie Een navigatiemenu maken

Regelt de navigatie wanneer de site wordt benaderd vanaf een mobiel apparaat.

Menu: Standaard wordt het menu weergegeven door een hamburger-icoon. Om dit te wijzigen:

  • Klik op het upload-icoon om je eigen svg-bestand te uploaden en te gebruiken.
  • Klik op het hamburger-icoon om de iconenbibliotheek te openen en kies daar een icoon.

Breekpunt: Gebruik het dropdown-menu om te kiezen:

  • Mobiel: Laat de Header zijn mobiele instellingen gebruiken wanneer deze wordt geopend vanaf een apparaat smaller dan 767 pixels.
  • Tablet: Laat de Header zijn mobiele instellingen gebruiken wanneer deze wordt geopend vanaf een apparaat smaller dan 1024 pixels.
  • Geen: Gebruik de mobiele Header-instellingen niet.

Submenu indicator icoon: Menu’s bevatten soms submenu’s. Bijvoorbeeld, het menu voor Contact kan submenu-items bevatten zoals: Reserveringen, feesten en vacatures. Standaard worden deze submenu’s aangegeven met een pijl omlaag, maar dit kan worden gewijzigd:

  • Klik op geen icoon om deze indicator te verwijderen.
  • Klik op het pijl-omlaag icoon om de iconenbibliotheek te openen en kies daar een icoon.

Schakel Aan als je een Contact-pictogram(men) aan je Header wilt toevoegen.

Je kunt verschillende apps of acties activeren vanaf je header. Deze acties/apps worden een Platform genoemd:

  • E-mail: Laat bezoekers je een e-mail sturen. Als je dit gebruikt, moet je toevoegen:
    • Icoon: Kies een afbeelding om het versturen van een e-mail weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer E-mail uit het dropdown-menu.
    • E-mail: Het e-mailadres waar de e-mail naartoe wordt gestuurd.
    • Onderwerp: Maak een standaard onderwerpregel voor de e-mail.
    • Bericht: Maak een standaard onderwerpregel voor de e-mail.
  • Telefoon: Laat bezoekers gemakkelijk je bedrijf bellen. Als je dit gebruikt, moet je toevoegen:
    • Icoon: Kies een afbeelding om het maken van een telefoongesprek weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer Telefoon uit het dropdown-menu.
    • Nummer: Het telefoonnummer dat ze bellen.
  • SMS: Laat bezoekers je berichten sturen.
    • Icoon: Kies een afbeelding om het versturen van een SMS weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer SMS uit het dropdown-menu.
    • Nummer: Het telefoonnummer waarnaar ze sms’en.
  • WhatsApp: Laat bezoekers je WhatsApp-berichten sturen
    • Icoon: Kies een afbeelding om het versturen van een WhatsApp-bericht weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer WhatsApp uit het dropdown-menu.
    • Nummer: Het telefoonnummer waarnaar ze berichten sturen.
  • Messenger: Laat bezoekers je Facebook-berichten sturen.
    • Icoon: Kies een afbeelding om het versturen van een bericht weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer Messenger uit het dropdown-menu.
    • Gebruikersnaam: Je bedrijfs-Facebook-gebruikersnaam. Hier worden de berichten naartoe gestuurd.
  • Viber: Laat bezoekers je Viber-berichten sturen of je bellen via Viber.
    • Icoon: Kies een afbeelding om het versturen van een Viber-bericht of het maken van een Viber-gesprek weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer Viber uit het dropdown-menu.
    • Nummer: Het Viber-nummer waarnaar ze berichten sturen of bellen.
    • Actie: Gebruik het dropdown-menu om te kiezen of bezoekers via Viber gaan Chatten of Bellen.
  • Kaart: Open Google Maps om bezoekers naar je locatie te leiden.
    • Icoon: Kies een afbeelding om het starten van Google Maps weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer Maps uit het dropdown-menu.
    • Link: Link naar de Google Maps app. Voor details zie Google Maps integratie.
  • Waze: Open de Waze-app om bezoekers naar je locatie te leiden.
    • Icoon: Kies een afbeelding om het starten van Waze weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer Waze uit het dropdown-menu.
    • Link: Link naar de Waze-app.
  • URL: Icoon met een link naar een webpagina.
    • Icoon: Kies een afbeelding om een link weer te geven.
    • Label: Geef een naam aan de actie/app. Dit helpt toegankelijkheidsprogramma’s begrijpen wat het icoon voorstelt.
    • Platform: Selecteer URL uit het dropdown-menu.
    • Link: De URL van de pagina waarnaar bezoekers worden gestuurd.

Standaard verschijnt er geen icoon op de knop. Je kunt dit wijzigen:

  • Klik op het upload-icoon om je eigen svg-bestand te uploaden en te gebruiken.
  • Klik op het punt-icoon om de iconenbibliotheek te openen en kies daar een icoon.

Zet de schakelaar op Tonen om een tweede CTA-knop toe te voegen.

Voer de tekst in die je op de knop wilt laten verschijnen.

Voer de URL in die je wilt dat bezoekers openen wanneer ze op de knop klikken.

Standaard verschijnt er geen icoon op de knop. Je kunt dit wijzigen:

  • Klik op het upload-icoon om je eigen svg-bestand te uploaden en te gebruiken.
  • Klik op het punt-icoon om de iconenbibliotheek te openen en kies daar een icoon.

Zet de schakelaar op Tonen om een tweede CTA-knop toe te voegen.

Style tabblad

Bepaal het uiterlijk van de Header.

Regel de logobreedte als je een logo gebruikt of lijn de sitenaam uit als je de sitenaam gebruikt.

  • Normaal: Bepaal hoe het logo of de sitenaam er standaard uitziet.
  • Hover: Bepaal hoe het logo of de sitenaam eruitziet wanneer er met de muis overheen wordt gegaan.

Bij het gebruik van een logo, bepaal:

  1. CSS-filters: Een reeks schuifregelaars waarmee je het volgende kunt regelen:
    1. Vervaging: Past een soft-focus effect toe door elementen te vervagen op basis van pixelradius.
    2. Helderheid: Past de helderheid van een element aan door de lichtintensiteit te wijzigen.
    3. Contrast: Verbetert of vermindert het contrast van afbeeldingen en elementen voor een beter visueel onderscheid.
    4. Verzadiging: Past kleuren van afbeeldingen of elementen aan door hun kleurintensiteit te verhogen of te verlagen.
    5. Kleurtoon: Het CSS-kleurtoonfilter past kleuren aan door hun tint rond het spectrum te draaien.
  2. Rand: Gebruik de schakelaar om te bepalen of het logo een lijn eromheen krijgt. Als je een rand toevoegt, moet je de randbreedte en -kleur instellen.
  3. Vorm: Stel een vorm in voor het logo:
    1. Rond: Knoppen verschijnen met gladde hoeken.
    2. Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
    3. Scherp: Rechthoekige knoppen.
    4. Aangepast: Pas de radius aan met de vier tellers om elke individuele hoek aan te passen. Lees meer over deze meetmethoden.
  4. Box-schaduw: Klik op het potlood-icoon om schaduw aan de toggle toe te voegen. Lees meer over schaduwen.

Bij gebruik van je sitenaam, stel in:

  1. Typografie: Bij gebruik van de sitenaam, stel het lettertype en de grootte in. Voor details, zie Typografie.
  2. Tekstschaduw: Tekstschaduw: Voeg diepte toe aan je tekst met schaduwen. Voor details, zie Wat is Schaduw, Tekstschaduw en Box-schaduw?
  3. Tekstkleur: Bij gebruik van de sitenaam, stel de letterkleur in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Stel het lettertype en de grootte van het menu in. Voor details, zie Typografie.

  • Normaal: Bepaal hoe het navigatiemenu er standaard uitziet.
  • Hover: Bepaal hoe het navigatiemenu eruitziet bij mouse-over.
  • Actief: Bepaal hoe het navigatiemenu eruitziet wanneer het geselecteerd is.

Stel de kleur van het navigatiemenu in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Gebruik de schuifregelaar om de afstand tussen de individuele items in het menu in te stellen.

Layout: Als er een submenu is, gebruik het dropdown-menu om te bepalen hoe de submenu-items verschijnen:

  • Horizontaal, van boven naar beneden.
  • Verticaal, van links naar rechts.

Vorm: Als er een submenu is, bepaal de vorm van het submenu:

  • Rond: Knoppen verschijnen met zachte hoeken.
  • Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
  • Scherp: Rechthoekige knoppen.

Je kunt zien hoe je site eruit ziet op verschillende apparaten door op de Mobiel-, Tablet- en Desktop-pictogrammen in de bovenste editorbalk te klikken.

Tekstuitlijning: Wanneer de site wordt bezocht vanaf een mobiel apparaat, bepaal of de menu-items aan het begin van de header of in het midden van de header verschijnen.

Scheidingslijn: zet op Ja als je een scheidingslijn wilt toevoegen tussen de menu-items wanneer de site wordt bezocht vanaf een mobiel apparaat. Als je een scheidingslijn toevoegt, kun je ook kiezen:

Kleur: De kleur van de scheidingslijn. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Dikte: De dikte van de scheidingslijnen.

Grootte schakelknoppictogram: Op mobiel wordt het menu vervangen door een schakelknoppictogram. Bezoekers tikken op de schakelknop om het menu te openen. Gebruik de schuifregelaar om de grootte van het pictogram aan te passen.

Normaal/actief:

  • Normaal: Bepaal hoe de schakelaar die het menu weergeeft er standaard uitziet.
  • Hover: Bepaal hoe de schakelaar die het menu weergeeft eruitziet bij mouse-over.

Schakelaar icoonkleur: Bepaal de kleur van de schakelaar die het menu weergeeft. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Type: Gebruik het dropdown-menu om te bepalen of het Contact wordt weergegeven als een Icoon of een Label.

  • Normaal: Bepaal hoe de knop of link er standaard uitziet.
  • Hover: Bepaal hoe de knop of link eruitziet bij mouse-over.

Bepaal de look and feel van het pictogram:

  • Kleur: Stel de kleur van het icoon in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Grootte: Stel de grootte van het pictogram in.
  • Afstand: Bepaal de hoeveelheid ruimte tussen de contactknop en de CTA.
  • Responsieve Weergave: Stel in hoe het menu eruitziet op mobiel:
    1. Navigatiebalk: De contactknop verschijnt naast het hamburgermenu.
    2. Dropdown: De contactknop verschijnt in het hamburgermenu.

Stel het uiterlijk van het label van de contactknop in:

  • Kleur: Stel de kleur van het label in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Afstand: Stel de hoeveelheid ruimte in tussen het label en de CTA-knop.
  • Responsieve Weergave: Stel in hoe het menu eruitziet op mobiel:
    1. Navigatiebalk: Het label van de contactknop verschijnt naast het hamburgermenu.
    2. Dropdown: Het label van de contactknop verschijnt in het hamburgermenu.

Gebruik het dropdown-menu om Uitrekken te selecteren als je wilt dat de CTA-knop zich uitstrekt over de volledige breedte van de Header wanneer deze wordt bekeken vanaf een mobiel apparaat.

Type: Gebruik het dropdown-menu om te bepalen of de CTA verschijnt als een knop of als een link.

Stel het lettertype en de grootte van de knop of link in. Voor details, zie Typografie.

  • Normaal: Bepaal hoe de knop of link er standaard uitziet.
  • Hover: Bepaal hoe de knop of link eruitziet bij mouse-over.

Stel de kleur van de knop- of linktekst in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

(Alleen knop)

Gebruik de schakelaar om te wisselen tussen:

  • Effen achtergrond (Klassiek)
  • Gemengde achtergrond (Verloop).

Voor details, zie Maak een Achtergrond.

De kleur van de achtergrond. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

(Alleen knop)

Zet op Ja om een rand toe te voegen aan de CTA-knop. Als je een rand toevoegt, moet je bepalen:

Klik op het potloodpictogram om schaduw toe te voegen aan de schakelaar. Lees meer over schaduwen.

Voeg ruimte toe tussen de randen van de knop en de tekst. Voor details, zie Opvulling en marges.

Gebruik het dropdown-menu om Uitrekken te selecteren als je wilt dat de CTA-knop zich uitstrekt over de volledige breedte van de Header wanneer deze wordt bekeken vanaf een mobiel apparaat.

Achtergrondtype: Stel een achtergrond in voor de Header. Gebruik de pictogrammen om te schakelen tussen een effen achtergrond (Klassiek) of een verlopende achtergrond (Gradiënt). Voor details, zie Maak een achtergrond.

Kleur: De kleur van de achtergrond. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Zet op Ja om een rand toe te voegen rond de Header. Als je een rand toevoegt, moet je bepalen:

Klik op het potloodpictogram om schaduw toe te voegen aan de Header. Lees meer over schaduwen.

Voeg ruimte toe tussen de rand van de Header en de inhoud. Voor details, zie Opvulling en marges.

Geavanceerd tabblad

Beheer de plaatsing van je widget, voeg links toe, voeg aangepaste code toe en meer.

De meeste opties die beschikbaar zijn in het Geavanceerd tabblad zijn te vinden in Geavanceerde tabbladinstellingen.

Gedrag is een aanvullende functie. Hiermee kun je selecteren:

Zweven: Schakel naar Ja om de Header over andere inhoud op de pagina te laten zweven.

Als je Zweven op Ja zet, heb je deze opties:

  • Offset: De afstand tussen de bovenkant van de Header en de bovenkant van het scherm.
  • Breedte: Stel de breedte van het zwevende gebied in.
  • Vorm: Stel het zwevende gebied in op:
    • Rond: Zachte hoeken.
    • Afgerond: Gelijkmatig gebogen randen.
    • Scherp: rechthoekig.

Plakkerig: De plakkerige eigenschap houdt de Header zichtbaar, zelfs wanneer de bezoeker door de inhoud scrolt. Opties zijn:

  • Bij omhoog scrollen: Header wordt sticky zodra bezoeker terug omhoog begint te scrollen.
  • Altijd: Header is altijd sticky.
  • Nooit: Header is niet sticky.

Lees meer over de instellingen van het Geavanceerd tabblad.

Op deze pagina

Deel dit artikel

Hosted with