Bespaar ruimte met een uitvouwend zoekvenster

Een zoekvenster in je website is belangrijk. Iemand die in het menu niet meteen vindt wat zij zoekt kan via het zoekvenster toch de gewenste informatie vinden. Altijd doen dus, een zoekvenster op je website. Maar het neemt wel veel ruimte in en vaak is het nogal lelijk, zo’n witte rechthoek rechts bovenin op je homepage. Een uitvouwend zoekvenster is dan een elegante oplossing.

Deze week ben ik de website van Alva Design aan het restylen en de komende weken zal ik wat handige features met je delen die ik in het nieuwe design heb toegepast. Een van die features is het uitvouwende zoekvenster.

uitvouwend zoekvenster

Klik je op het vergrootglas-symbooltje in het menu dan zie je dit:

uitvouwend zoekvenster

Het zoekvenster vouwt uit en je kunt intypen waarnaar je zoekt.

In deze korte video zie je het in werking:

Video van Sridhar Katakam, Genesis and WordPress Tutorials

Hoe maak je zo’n uitvouwend zoekvenster?

Als je website gebruik maakt van het Genesis framework (ik gebruik dit voor alle websites die ik maak), vind je een goede tutorial op de website van Sridhar Katakam, Genesis and WordPress Tutorials. Je moet lid worden om deze tutorial te kunnen lezen. Een tipje van de sluier: Je moet een stukje Javascript, een stukje PHP en een stukje CSS aan de code van je website toevoegen.

uitvouwend zoekvenster

Je kunt de tekst “Zoeken op deze website…” en het woordje “Ga” in de zoekbutton in de PHP-code vervangen door een zelfgekozen andere tekst.

Wil je dit zelf doen? Word dan voor $47 één maand lid van Sridhar Katakam, Genesis and WordPress Tutorials.

Is dit abracadabra voor je? Dan help ik je graag.

Deel dit:

Kan ik je helpen bij jouw project?

Mail of bel me voor een vrijblijvend advies en prijsindicatie.