De Divi Zoekmodule

Met behulp van de zoekmodule kunt u overal op uw site een zoekformulier plaatsen. Met dit zoekformulier kunnen uw bezoekers alle inhoud van uw website doorzoeken, inclusief alle pagina’s en blogberichten. Dit geeft u de functionaliteit van de WordPress-zoekwidget samen met de flexibiliteit van de Divi Builder. U kunt niet alleen de locatie van de zoekformulieren op de pagina beheren, u kunt ook het ontwerp aanpassen.

Hoe u een zoekmodule aan uw pagina kunt toevoegen

Voordat u een zoekmodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

Zoek de zoekmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook het woord ‘zoeken’ kunt typen en vervolgens op enter kunt klikken om de zoekmodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: een aangepaste zoekmodule toevoegen aan een blogpagina met volledige breedte

Voor dit voorbeeld ga ik je laten zien hoe je een zoekmodule als hoofdoproep aan de bovenkant van een blogpagina kunt toevoegen. Hiermee kunnen gebruikers eenvoudig de inhoud van uw blog doorzoeken zonder rommel.

Deze pagina heeft een volledige koptekst bovenaan met de zoekmodule er direct onder. Onder de zoekmodule bevindt zich een blogmodule die de rasterlay-out gebruikt.

Voeg met Visual Builder een nieuwe standaardsectie toe aan de blogpagina met een rij met volledige breedte (1 kolom). Plaats vervolgens de zoekmodule in de rij.

Werk de zoekmodule-instellingen als volgt bij:

Inhoud opties

Tekst voor tijdelijke aanduiding: doorzoek onze blog …
Knop Verbergen: JA

Ontwerpopties

Achtergrondkleur invoerveld: # f8f8f8
Plaatsaanduidingskleur: # 888888
Lettertypegrootte invoer: 16px
Kleur invoertekst: # 888888
Hoogte invoerregel: 1em
Aangepaste vulling: 20 px bovenaan, 20 px onderaan

Instellingen opslaan

Ga nu terug om de breedte van de rij met uw zoekmodule te bewerken. Geef op het tabblad Ontwerpen van de rijinstellingen de rij een aangepaste breedte van 300 px. Hierdoor blijft de zoekmodule compact en gecentreerd op de pagina.

Dat is het!

Zoek inhoudsopties

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

Placeholder tekst

Typ de tekst die u wilt gebruiken als tijdelijke aanduiding voor het zoekveld.

Knop verbergen

Als u dit inschakelt, wordt de knop Zoeken verborgen.

Pagina’s uitsluiten

Als u dit inschakelt, worden pagina’s uitgesloten van zoekresultaten.

Berichten uitsluiten

Als u dit inschakelt, worden berichten uitgesloten van zoekresultaten.

Categorieën uitsluiten

Kies welke categorieën u wilt uitsluiten van de zoekresultaten.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Zoek ontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

Achtergrondkleur invoerveld

Hier kunt u de achtergrondkleur van de zoekbalk wijzigen.

Placeholder Color

Voordat het zoekveld wordt gebruikt, bestaat er binnen het veld plaatsaanduidingstekst. Als u de achtergrondkleur van het veld hebt aangepast, wilt u misschien ook de tekstkleur van de tijdelijke aanduiding aanpassen om ervoor te zorgen dat deze leesbaar is.

Tekst kleur

Hier kunt u de waarde van uw tekst kiezen. Als u met een donkere achtergrond werkt, moet uw tekst licht zijn. Als u met een lichte achtergrond werkt, moet uw tekst donker zijn.

Tekstrichting

Dit bepaalt hoe uw tekst wordt uitgelijnd binnen de module.

Voer lettertype in

U kunt het lettertype van uw invoertekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Voer lettergrootte in

Hier kunt u de grootte van uw invoertekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekstkleur invoeren

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw invoertekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Afstand tussen ingevoerde letters

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw invoertekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte invoerlijn

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw invoertekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Knop- en randkleur

Dit wijzigt de achtergrond- en randkleur van de zoekknop.

Knop lettertype

U kunt het lettertype van uw knoptekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Knop Lettergrootte

Hier kunt u de grootte van uw knoptekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekstkleur knop

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw knoptekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Knop Letterafstand

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Knoplijnhoogte

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw knoptekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Maximale wijdte

Standaard is de maximale breedte van de zoekbalk ingesteld op 100%. Dit betekent dat de zoekbalk op zijn natuurlijke breedte wordt weergegeven, tenzij de breedte van de zoekbalk de breedte van de bovenliggende kolom overschrijdt. In dat geval is de zoekbalk beperkt tot 100% van de breedte van de kolom. Als u de maximale breedte van de zoekbalk verder wilt beperken, kunt u dit doen door hier de gewenste maximale breedtewaarde in te voeren. Een waarde van 50% zou bijvoorbeeld de breedte van de zoekbalk beperken tot 50% van de breedte van de bovenliggende kolom.

Aangepaste marge

Marge is de ruimte die buiten uw module wordt toegevoegd, tussen de module en het volgende element boven, onder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan een van de vier zijden van de module. Verwijder de toegevoegde waarde uit het invoerveld om de aangepaste marge te verwijderen. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Aangepaste opvulling

Opvulling is de toegevoegde ruimte in uw module, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan een van de vier zijden van de module. Verwijder de toegevoegde waarde uit het invoerveld om de aangepaste marge te verwijderen. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Zoek geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.