Een zoekveld toevoegen aan het secundaire Divi-menu

Zonder een zoekveld zal uw sitenavigatie eronder lijden. U heeft misschien de meest robuuste browse-ervaring op internet, maar als uw gebruikers niet precies kunnen zoeken naar wat ze zoeken, loopt u het risico (en zult u waarschijnlijk) klanten verliezen. Deze zelfstudie helpt u bij het toevoegen van een zoekvak aan het secundaire Divi-menu, zodat uw gebruikers hoe dan ook altijd een paar klikken verwijderd zijn van alles wat ze nodig hebben.

Overzicht van het Divi-zoekvak

Bureau

Mobile

Download en/of wijzig de globale header

Voor dit artikel gaan we de gratis kop-/voettekst gebruiken die bij ons lay-outpakket voor de bezorging van boodschappen wordt geleverd. U kunt eenvoudig de .Zip *: Frans archiveren en extraheren van de benodigde .json bestand op uw computer.

Ga daarna naar uw WordPress-dashboard en navigeer naar Divi - Themagenerator. Vanaf daar moet je klikken op de pictogram pijlen omhoog en omlaag om de overdraagbaarheidsopties te openen.

Klik in de nieuwe modal op de import tabblad en zoek de .json bestand dat u hebt gedownload. Als je klaar bent, selecteer je Generatormodellen importeren uit Divi-thema om het downloaden te starten.

Op dit punt bent u klaar om de Algemene koptekst deel van de Website-sjabloon Standaard. Importeren van .json bestand zou de freebie automatisch moeten hebben toegepast als de algemene sitekoptekst.

Een zoekveld toevoegen aan de secundaire menubalk

Als u Divi Visual Builder gebruikt, zou u iets vergelijkbaars moeten zien als de Global Header.

Het eerste dat we willen doen, is ruimte maken voor het zoekvak. We willen ervoor zorgen dat het zoekveld voor iedereen gemakkelijk toegankelijk is. bezoekers, dus we voegen het toe aan het secundaire menu (boven de Home / Contact lijn).

Om te beginnen voegen we het zoekvak toe met de Divi-zoekmodule in de derde kolom van de eerste rij.

Tijdelijke aanduiding-tekst is belangrijk voor zoekvelden, dus als uw module is geïnstalleerd, gaat u naar Parameters en stel je Gereserveerd gebied tekst naar iets dat de gebruiker eraan herinnert waar hij naar moet zoeken. we zetten Zoek artikelen! als een tijdelijke aanduiding, zodat de gebruiker weet dat dit is waar ze naar kunnen zoeken, aangezien we het lay-outpakket voor de bezorging van boodschappen gebruiken.

Het zoekvak in de derde kolom is niet goed. Dus we willen de Onderzoeksmodule instellingen en ga naar de Ontwerp tong. Vind het Transformator opties, ga dan naar vertalen tabblad (de tweede). U kunt dan de zoekmodule op zijn plaats slepen en Divi zal alle CSS en spaties ervoor verwerken.

We gebruiken ook% voor deze waarde, zodat deze relatief blijft, ongeacht de viewport op de desktop. Met behulp van pixels kan sommige verschillende resoluties vervormen.

Divi Transformer vertalen de opties moeten ook aangepast worden voor de mobiel. Als je dat niet doet, is het hetzelfde. Ga dus zeker naar de reactiviteit instellingen en stel de locatie van de zoekmodule in de secundaire menu-opties in. We hebben zojuist de verticale plaatsing van de mobiel aangepast, omdat deze in de derde kolom van de rij automatisch wordt weergegeven onder aan de rij-items.

De Divi-zoekmodule stylen

Hoewel je niet veel stijlopties hebt voor een zoekvak, heb je er wel een paar. Namelijk de kleur van de tekst en van het veld zelf, zowel wanneer het inactief is als wanneer een gebruiker erop heeft geklikt. (En natuurlijk de afstand en maatvoering en andere standaard Divi-ontwerpopties.)

Om de kleuropties te vinden, ga naar de Champ menu in de Ontwerp tong. Une fois développé, vous avez la possibilité de modifier la couleur du texte de l'espace réservé, la couleur d'arrière-plan du champ et la couleur du texte du champ (texte saisi par l'utilisateur, c'est-à- zeggen). Tevens de concentreren variaties zijn wanneer de gebruiker specifiek interactie heeft met het zoekvak.

Wanneer dit naar uw wens is gestileerd, klikt u op de knop Opslaan.

Zichtbaarheidsinstellingen controleren

Sommige van onze gratis lay-out- en headerpakketten worden geleverd met verschillende weergave-opties voor desktop en mobiele apparaten. Als u gedimde / grijze mods in de visuele generator ziet, geeft dit aan dat de mod op sommige apparaten is uitgeschakeld.

Voor de kop van de boodschappenbezorging zijn de laatste twee kolommen uitgeschakeld op mobiel. We willen in de Lijn instellingen en klik op de instellingen van de kolommen die u op mobiel wilt weergeven. In dit geval is het de derde.

Ga dan naar de vooruitgang tong en navigeer naar zichtbaarheid optie. Zorg er hier voor dat alle opties onder Deactiveren over niet aangevinkt voor de kolom met uw zoekveld. Klik op de knop Opslaan (groen vinkje), en de modules zouden in kleur moeten verschijnen en niet langer verkleurd zijn.

Zodra je ervoor hebt gezorgd dat alles zichtbaar is, ben je klaar om dit ding online te zetten!

Bewaar je werk

Zorg ervoor dat u op de klikt groene knop opslaan rechtsonder in het scherm.

U bent nu klaar om de visuele generator te sluiten met behulp van de X in de rechterbovenhoek. Op het volgende scherm moet u ervoor zorgen dat de Divi Theme Builder al uw opties heeft opgeslagen. Als hij zegt Wijzigingen opslaan, Klik op de knop. Als hij zegt Alle wijzigingen opgeslagen, dan staat je zoekveld al live in je Divi secundaire menu.

Definitieve resultaten

U hoeft alleen nog maar uw werk op uw site te bewonderen!

Bureau

Mobile

Conclusie met het Divi-zoekveld

Zoekvakken zijn een fundamenteel onderdeel van een goede gebruikerservaring voor uw site. Als u uw best mogelijke service wilt verlenen bezoekers, ervoor zorgen dat uw inhoud doorzoekbaar is, moet een van uw topprioriteiten zijn. Ik hoop dat u deze snelle en gemakkelijke methode kunt gebruiken en deze binnenkort op uw Divi-site kunt toepassen!