Ved å bruke søkemodulen kan du plassere en skjema søk hvor som helst på nettstedet ditt. Dette skjema Søk lar besøkende søke i alt innholdet på nettstedet ditt, inkludert alle sider og blogginnlegg. Dette gir deg funksjonaliteten til WordPress-søkewidgeten med fleksibiliteten som Divi Builder tilbyr. Du kan ikke bare kontrollere plasseringen av skjemaer søk på siden, men skreddersy også designet.

Slik legger du til en søkemodul på siden din

Før du kan legge til en søkemodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

divi byggmester

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.

divi.png forskningsmodul

Finn søkemodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "søk" og deretter klikke enter for å søke og automatisk legge til søkemodulen! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legge til en tilpasset søkemodul til en bloggside med full bredde

For dette eksemplet vil jeg vise deg hvordan du legger til en søkemodul som en primær oppfordring til handling øverst på en bloggside. Dette lar brukerne enkelt søke i blogginnholdet ditt uten rot.

Denne siden har topptekst i full bredde øverst med søkemodulen rett nedenfor. Under søkemodulen er en bloggmodul som bruker rutenettet.

eksempelblogg med søkeskjema divi.jpg

Bruk Visual Builder til å legge til en ny standarddel til bloggsiden med full bredde (1 kolonne) rad. Sett deretter inn søkemodulen i raden.

Oppdater søkemodulinnstillingene som følger:

Innholdsalternativer

Reservert tekst: Søk i bloggen vår ...
Skjul knappen: JA

Designalternativer

Inngangsfeltets bakgrunnsfarge: # f8f8f8
Plassholderfarge: # 888888
Inngang skriftstørrelse: 16 piksler
Inngangstekstfarge: # 888888
Inngangslinjens høyde: 1 em
Tilpasset polstring: 20px Topp, 20px Bunn

divi search configuration content.png

Lagre innstillinger

Nå kommer du tilbake for å endre bredden på raden som inneholder søkemodulen. Gi linjen en egendefinert bredde på 300 px i kategorien Design i linjeinnstillingene. Dette vil holde søkemodulen kompakt og fokusert på siden.

konfigurasjon divi.png bredde

Det er det!

Søk innholdsalternativer

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

modul søk divi contenu.png

Plassholdertekst

Skriv inn teksten du vil bruke som plassholder for søkefeltet.

Skjul knapp

Hvis du aktiverer dette alternativet, blir søkeknappen skjult.

Ekskluder Sider

Hvis du aktiverer dette alternativet, blir sidene ekskludert fra søkeresultatene.

Ekskluder elementer

Aktivering av dette alternativet vil ekskludere meldinger fra søkeresultatene.

Ekskluder kategorier

Velg kategoriene du vil ekskludere fra søkeresultatene.

Admin-etikett

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Søk designalternativer

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste med designinnstillinger som du kan bruke til å tilpasse hva som helst.

divi search design.png

Bakgrunnsfargen til inngangsfeltet

Her kan du endre bakgrunnsfargen på søkefeltet.

Stedholder Farge

Før søkefeltet brukes, eksisterer plassholderteksten inne i feltet. Hvis du har justert bakgrunnsfargen på feltet, kan du også justere fargen på plassholderteksten for å sikre at den er lesbar.

Tekstfarge

Her kan du velge verdien på teksten din. Hvis du jobber med en mørk bakgrunn, bør teksten være på. Hvis du jobber med en lys bakgrunn, bør teksten din være mørk.

Tekstorientering

Dette kontrollerer hvordan teksten din blir justert i modulen.

Innreisepolitiet

Du kan endre skrifttypen til den inngående teksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Skriv inn skriftstørrelse

Her kan du justere størrelsen på inngangsteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Skriv inn tekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på den innlagte teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Letteravstand

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i inntastingen, bruker du skyvekontrollen for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på linjen

Linjehøyde påvirker mellomrommet mellom hver linje i den innskrevne teksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i feltet. oppføringen til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Knapp og kantfarge

Dette vil endre bakgrunn og kantfarge på søkeknappen.

Knapp skrifttype

Du kan endre skrifttypen til knappeteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Knapp skriftstørrelse

Her kan du justere størrelsen på knappeteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Knapptekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på knappeteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av bokstavene på knappen

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i knappeteksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på linjen på knappen

Linjehøyde påvirker mellomrommet mellom hver linje i knappeteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Maksimal bredde

Som standard er maksimal bredde på søkefeltet satt til 100%. Dette betyr at søkefeltet vil vises i sin naturlige bredde med mindre bredden på søkefeltet overstiger bredden på den overordnede kolonnen. I så fall vil søkefeltet være begrenset til 100% av kolonnebredden. Hvis du vil begrense maksimal bredde på søkefeltet ytterligere, kan du gjøre det ved å angi ønsket maksimal breddeverdi her. For eksempel vil en verdi på 50% begrense bredden på søkefeltet til 50% av bredden i den overordnede kolonnen.

Tilpasset margin

Margen er plassen som legges til på utsiden av modulen din, mellom modulen og neste element over, under eller til venstre og høyre for den. Du kan legge til egendefinerte marginverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Tilpasset polstring

Påfyll er plassen som legges til inne i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til tilpassede polstringsverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Avanserte alternativer for forskningsmodulen

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

divi avansert opsjonsmodul search.png

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre divisjoner