Een zoekfunctie toevoegen in je WordPress website? Als je werkt met Elementor Pro kun je eenvoudig, waar je maar wilt op de website, een zoekformulier toevoegen. Bijvoorbeeld in de header, op je blogpagina of in je webshop. In dit artikel leg ik je uit hoe je een zoekfunctie toevoegt met Elementor.
1. Voeg de Search widget toe
De search widget vind je in het Elementor panel aan de linkerkant van je scherm. Zoek op ‘Search’ en je vindt direct de goede widget. Voeg deze toe aan een sectie of kolom.
2. Skin instellen zoekfunctie
Als je de zoekfunctie hebt geplaatst, kun je kiezen uit 3 skins: Classic, Minimal en Full Screen.
Classic
Bij de classic optie vind je een button rechts naast de zoekbalk (zie het voorbeeld hieronder)
Als je kiest voor de classic functie, kun je aangeven welk type button je wilt gebruiken (icoon of een tekst ‘zoeken’). Ook kun je het icoon aanpassen naar een vergrootglas of een pijl. Met ‘Size’ vergroot je het hele zoekformulier.
Minimal
Met de ‘Minimal’ skin heeft het zoekformulier geen button, maar alleen een zoekveld. Je drukt dan op een enter om een zoekopdracht uit te voeren.
De naam ‘minimal’ zegt het eigenlijk al; je kunt bij deze skin minder aanpassen. Zie hieronder:
Full screen
Bij Full Screen, krijg je alleen een icoon te zien. Als je hier op klikt opent het zoekformulier in full screen.
Als je kiest voor de full screen skin, kun je de Toggle links, in het midden of rechts uitlijnen. Ook kun je de grootte van de Toggle (het vergrootglas) aanpassen.
Zoekfunctie stijlen
In het tabblad ‘Stijl’ kun je de zoekfunctie naar wens opmaken. Afhankelijk van welke skin je hebt gekozen, zie je hier een aantal opties. Zo kun je de typografie aanpassen, achtergrondkleur instellen, of de borderkleur aanpassen. Ook kun je andere vormgeving gebruiken wanneer de bezoeker een zoekopdracht in voert (klik op ‘Focus’).
Heb je gekozen voor de classic skin? Dan kun je de styling van de button ook aanpassen. Bij de ‘Full screen’ skin kun je de kleur van de toggle (het vergrootglas icoontje) ook aanpassen.
Wil je een zoekfunctie alleen gebruiken voor bepaalde artikelen? of bijvoorbeeld alleen voor je webshop? Dan heb je een add-on of andere plugin nodig. De Search Widget in Elementor zoekt namelijk in je hele website naar relevante content.
