Priority support
Help Center > Themes > Hello biz theme > Contact widget

Contact widget

Laatste update: augustus 31, 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.

Widget toevoegen

Om een widget te openen en te gebruiken:

  1. Klik op + in de Elementor Editor.
    Alle beschikbare widgets worden weergegeven.

  2. Klik op de widget of sleep deze naar het canvas. Voor meer informatie, zie Elementen aan een pagina toevoegen.

Wat is de contact widget?

Over het algemeen moeten websites een eenvoudige manier bieden waarop potentiële klanten contact met je kunnen opnemen. De Contact widget is een snelle manier om je contactgegevens aan een webpagina toe te voegen.

Bekijk alle beschikbare opties voor de Contact widget.

Veelvoorkomend gebruiksscenario

Blake bouwt een website voor een sportbar. Ze gebruiken de Contact widget om een Contact pagina te maken, zodat klanten de bar kunnen bellen of schrijven voor reserveringen.

Voorbeeld

Aanvullende gebruiksscenario's

  • Contactgegevens toevoegen aan de header en/of footer van een site.

Een contact widget toevoegen: stap voor stap

In het onderstaande voorbeeld maken we een Contact pagina.

Een contact widget toevoegen

Om een Contact widget toe te voegen:

  1. Sleep de Contact widget naar het canvas.
  2. Kies in de sectie Layout van het paneel een van de drie voorinstellingen voor de contactinformatie.
  3. Open de sectie Tekst.
  4. Voer in het veld Koptekst in: Contact.
  5. Voer in het veld Beschrijving in: Schrijf of bel voor reserveringen of andere vragen.
  6. Open de sectie Contactgegevens.
    Standaard zijn er vier secties in de Contact widget. Er zijn drie soorten secties:
    1. Contact Links: Ontworpen om e-mailadressen, telefoonnummers en andere contactgegevens weer te geven.
    2. Tekst: Ontworpen om vrije tekst weer te geven.
    3. Social Icons: Ontworpen om links naar verschillende sociale media sites weer te geven.
  7. Groep 1 bevat Contact Links, hier voegen we manieren toe waarop klanten de bar kunnen e-mailen of bellen.
  8. Voer in het tekstvak Subtitel in: Bel ons.
  9. Klik in de sectie Links op het veld Bellen.
  10. Voer in het veld Nummer je telefoonnummer in.
  11. Klik op het veld E-mail en voer je E-mail en een Onderwerp regel in. We laten het veld Bericht leeg.
    Met Contactgegevens kun je verschillende manieren toevoegen om contact met je op te nemen. Laten we een WhatsApp-nummer toevoegen
  12. Klik op Item toevoegen.
  13. Klik op het veld Pictogram en selecteer Pictogrambibliotheek.
    Dit opent de Pictogrambibliotheek.
  14. Selecteer het WhatsApp-pictogram uit de bibliotheek en klik op Invoegen.
  15. Selecteer WhatsApp uit de Platform-keuzelijst.
  16. Voer een WhatsApp-nummer in het veld Nummer in.
  17. In ons geval willen we geen openingstijden tonen. Zet Groep 2 op Verbergen.
  18. Laten we een manier toevoegen waarop bezoekers de bar kunnen vinden. Selecteer in Sectie 3 Waze uit de keuzelijst Platform.
  19. Voeg in het veld Link een Waze-link toe. Raadpleeg de Waze-documentatie voor details over het maken van een Waze-link.
  20. Sectie 4 bevat links naar sociale media. De bar heeft alleen een Instagram-account, dus klik eerst op de verwijderpictogrammen naast de X- en TikTok-pictogrammen.
  21. Klik op het veld Instagram en voer in het veld Link een link naar een Instagram-account in.
  22. In de sectie Kaart kun je een link naar Google Maps toevoegen. Voor details, zie Google Maps integratie.

Instellingen voor de contact widget

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

Inhoud tab

Items en besturingselementen toevoegen, verwijderen en bewerken.

Kies een van de drie basis layouts voor je Contact widget.

Een korte titel voor je Contact widget.

Gebruik de keuzelijst om een HTML-tag voor je koptekst te kiezen. Keuzes zijn onder andere H1 tot H6, Div, Span of Paragraaf. We raden aan de standaardinstelling te gebruiken.

Een of twee zinnen die de inhoud van de Contact widget beschrijven. Als je bijvoorbeeld wilt dat bezoekers contact met je opnemen voor reserveringen, is dit de plek om dat te vermelden.

Gebruik de keuzelijst om een HTML-tag voor je koptekst te kiezen. Keuzes zijn onder andere H1 tot H6, Div, Span of Paragraaf. We raden aan de standaardinstelling te gebruiken.

Standaard heeft de Contact widget 4 secties – Groepen 1-4. Groep 1 moet zichtbaar zijn, maar de andere groepen hebben een schakelaar waarmee je ze kunt verbergen.

Gebruik het dropdown menu om een van de drie types te kiezen voor elke groep:

  • Contact Links: Ontworpen om informatie weer te geven zoals:
    • E-mail
    • Telefoonnummers
    • WhatsApp-nummers
    • Facebook Messenger links
    • Viber links
    • Google Maps links
    • Waze positie
    • URL
  • Tekst: Voeg vrije tekst toe aan de groep.
  • Social Icons: Voegt pictogrammen en links toe naar je sociale media sites. Als je bijvoorbeeld een Instagram-account hebt, kun je een Instagram-pictogram toevoegen met een link naar je account.

Voeg een titel toe aan een groep.

Links verschijnen in groepen Contactgegevens en Social Icons.

  • Klik op een link om informatie in de link te bewerken. Klik bijvoorbeeld op de link Bellen om een telefoonnummer toe te voegen. Je kunt ook het label van de link en het type link wijzigen.
  • Klik op het verwijderpictogram om een link te verwijderen.
  • Klik op het kopieer-pictogram om een link te dupliceren.

Gebruik het tekstvak om een paar zinnen aan de sectie toe te voegen. Je kunt dit bijvoorbeeld gebruiken om openingstijden aan de groep toe te voegen.

Gebruikt om je locatie op Google Maps te markeren. Voor details, zie Google Maps Integratie.

Stijl tab

Bepaal het uiterlijk van menu-items en besturingselementen.

De inhoud van deze sectie is afhankelijk van welke Voorinstelling je hebt geselecteerd.

Bepaal of de Groepen in je Contact widget zijn ingesteld op de randen van de widget – Begin of Einde – of het Midden van de widget.

Voor sommige voorinstellingen kun je ook de Inhoudspositie instellen, die het tekstblok regelt, op de beginrand of het midden van de widget.

De informatie in de Contact widget kan worden verdeeld in maximaal 4 kolommen en een vast aantal rijen, afhankelijk van de gekozen voorinstelling.

Gebruik het dropdown menu Kolommen om het aantal kolommen te bepalen.

Gebruik de tellers Tussenruimtes om een afstand tussen de kolommen en rijen van de widget in te stellen.

Bepaal in voorinstellingen met een kaart of de kaart zich aan het begin of einde van de widget bevindt.

Bepaal de grootte, kleur en lettertype van de koptekst.

Bepaal de grootte, kleur en lettertype van de beschrijvingstekst.

Gebruik de schuifregelaar om de ruimte tussen de tekstregels te vergroten of te verkleinen.

Stel de kleur en het lettertype van de subtiteltekst in.

Dit is van toepassing op Groepen die de instelling Contact Links gebruiken.

  • Tussenruimte: Gebruik de schuifregelaar om in te stellen hoeveel ruimte er tussen de verschillende contactvelden is.
  • Typografie: Stel het lettertype en de grootte van het contactveld in. Voor details, zie Typografie
  • Normaal: Klik om de standaard pictogram- en tekstkleur in te stellen.
  • Hover: Stel de pictogram- en tekstkleur in wanneer bezoekers met de muis over het contactveld gaan.
  • Pictogramgrootte: Gebruik de schuifregelaar om de grootte van het pictogram dat het contacttype symboliseert in te stellen.
  • Tekstkleur: Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Pictogramgrootte: Gebruik de schuifregelaar om een grootte in te stellen voor de pictogrammen die het contacttype symboliseren.
  • Pictogram tussenruimte: Gebruik de schuifregelaar om de afstand in te stellen tussen de pictogrammen die het contacttype symboliseren en de contacttype tekst.

Dit is van toepassing op Groepen die de instelling Tekst gebruiken.

Stel de kleur en het lettertype van de tekst in.

Dit is van toepassing op Groepen die de instelling Social Icons gebruiken.

  • Normaal: Klik om de standaard pictogramkleur, -grootte en -tussenruimte in te stellen.
  • Hover: Klik om de pictogramkleur, -grootte en -tussenruimte in te stellen wanneer bezoekers met de muis over de pictogrammen gaan.
  • Pictogramkleur: Stel de kleur in van de pictogrammen die de sociale media vertegenwoordigen. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Pictogramgrootte: Gebruik de schuifregelaar om de grootte van de pictogrammen die de sociale media vertegenwoordigen in te stellen.
  • Pictogram tussenruimte: Gebruik de schuifregelaar om in te stellen hoeveel ruimte er tussen de sociale media pictogrammen is.

Bepaal het gebied dat op de kaart wordt weergegeven.

Zet op Ja om de kaart de breedte van zijn sectie te laten bedekken.

Gebruik de schuifregelaars om de kaartgrootte in te stellen.

Voeg een rand toe rond de kaart. Als je een rand toevoegt, moet je een randtype selecteren. Lees meer over randtypes.

Je moet ook een randvorm selecteren:

  • Rond: Knoppen verschijnen met gladde hoeken.
  • Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
  • Ovaal: Zeer afgeronde hoeken.
  • Scherp: Rechthoekige knoppen.
  • Aangepast: Pas de radius aan met de vier tellers om elke individuele hoek aan te passen. Lees meer over deze meetmethoden.

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

Voeg een achtergrond toe aan de Contact widget. Voor details, zie Een achtergrond maken.

Voeg een gedeeltelijk transparante achtergrond toe. Voor details, zie Een achtergrond maken.

Gebruik de schuifregelaar om de hoeveelheid ruimte tussen het koptekstgebied en de groepen te bepalen.

Gebruik de schuifregelaar om in te stellen hoeveel ruimte er is tussen de kaart en de overige elementen.

Zet op Ja om een rand rond de Contact widget toe te voegen. Lees meer over randtypes.

Als je een rand toevoegt, moet je een randbreedte en -kleur kiezen.

Kies hoe de hoeken van de Contact widget eruitzien:

  • Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
  • Scherp: Rechthoekige knoppen.
  • Aangepast: Pas de radius aan met de vier tellers om elke individuele hoek aan te passen. Lees meer over deze meetmethoden.

Klik op het potloodpictogram om een box schaduw aan de Contact widget toe te voegen. Lees meer over schaduwen.

Voeg padding toe of verwijder het in de Contact widget. Leer hoe je ruimte kunt maken met padding en marges

Zet op Ja als je wilt dat de Contact widget de volledige hoogte van het scherm inneemt.

Geavanceerd tab

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

Lees meer over de Geavanceerde tab instellingen.

Op deze pagina

Deel dit artikel

Hosted with