Hoe voeg je een zoekfunctie toe in Elementor?

Auteur foto

Geschreven door Arjan Wendt (van trendt)

In dit artikel

Een zoekfunctie is een onmisbare functionaliteit op elke website. Met Elementor Pro voeg je deze eenvoudig toe aan jouw website, waar dan ook! In dit artikel lees je hoe je dat doet.

Zoekwidget toevoegen

Gebruik in de editor het linkermenu om de zoekwidget op te zoeken en sleep deze naar de plek waar je het zoekformulier wilt hebben.

Kies een variant

Elementor biedt je de keuze uit drie verschillende soorten zoekformulieren:

  • classic
  • minimal
  • full screen

Classic

De klassieke zoekfunctie bestaat uit een balk met een knop ernaast, zoals in het voorbeeld hieronder:

Je kunt bij deze variant ook kiezen of je een icoontje wilt gebruiken als knop, of een tekst. Bijvoorbeeld ‘zoek’ of ‘ga’, of wat je maar wilt. Kies je voor een icoontje, dan kun je ook nog weer kiezen of je een vergrootglas of een pijl als icoon gebruikt. Tot slot kun je met de optie size kiezen hoe groot de zoekbalk moet worden.

Minimal

De variant ‘minimal’ is niet geheel verrassend de meest simpele weergave van de zoekbalk. Naast de achtergrondkleur en typografie kun je alleen de placeholder (de aanduiding in de balk) en de grootte aanpassen.

Full screen

De variant ‘full screen’ lijkt nog minimalistischer dan ‘minimal’, maar schijn bedriegt! In eerste instantie zie je alleen een icoontje als je voor deze variant kiest. Het is echter de bedoeling dat je op het icoontje klikt, zodat een zoekveld over de hele grootte van je scherm verschijnt.

Bij de full screen variant kun je kiezen of je het icoontje links, rechts of in het midden van de kolom wilt plaatsen. Met de optie size kun je de grootte van het icoontje aanpassen.

Waar voeg je de zoekfunctie toe?

De meest logische plek is in de header. De meeste websites hebben de zoekfunctie namelijk in de header, dus daar zal de gebruiker deze als eerste zoeken. Daarnaast kun je op meerdere plekken een zoekbalk toevoegen. Bijvoorbeeld in een sidebar, bovenaan een overzichtspagina, of in de footer. Afhankelijk van waar je de zoekfunctie plaatst, kun je kiezen voor verschillende varianten.

Welke zoekresultaten worden weergegeven?

De zoekfunctie van Elementor geeft standaard alle resultaten weer die te maken hebben met de ingegeven zoekterm. Op een zoekresultatenpagina kun je wel kiezen of er bijvoorbeeld alleen berichten of pagina’s worden weergegeven. Wil je echter verder specificeren, bijvoorbeeld als je een webshop hebt, dan zul je gebruik moeten maken van een aanvullende plugin (een add-on).

Design van de zoekbalk aanpassen

Natuurlijk wil je dat het uiterlijk van de zoekbalk overeenkomt met de rest van je website. Daarom kun je na het instellen van de zoekbalk aan de slag met de styling. Welke opties je hebt om dit te doen, hangt af van de variant die je hebt gekozen.

Bekijk de mogelijkheden in deze video van Elementor:

deel dit bericht.