Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Zoekfunctie toevoegen WordPress met Elementor

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)

Voorbeeld Classic skin zoekfunctie

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.

Opties voor de classic functie

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.

Voorbeeld Minimal skin zoekfunctie

De naam ‘minimal’ zegt het eigenlijk al; je kunt bij deze skin minder aanpassen. Zie hieronder:

Opties voor de minimal skin

Full screen

Bij Full Screen, krijg je alleen een icoon te zien. Als je hier op klikt opent het zoekformulier in full screen.

Voorbeeld full screen zoekfunctie

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.

Voorbeeld Full Screen skin opties

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.

Tip! Pas ook de layout van de zoekresultaten aan!

Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.