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.
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.
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.
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
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.
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.
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.
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.
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
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
Bonjour,
Takk for denne artikkelen.
Det er et punkt du ikke har adressert (og dessverre er dette nettopp det som forårsaker meg et problem ...):
Når du velger å vise søkeknappen, er teksten på knappen som standard "Søk", og jeg vil gjerne vite hvordan kan jeg endre denne teksten for å tilpasse den? Uansett hvor mye jeg så overalt, fant jeg ikke noe felt eller rom der det er mulig å gjøre denne endringen ...
Takk på forhånd for din hjelp!
Hei, takk for artikkelen. Jeg har et spørsmål. Kan søkeskjemaet bare brukes til en del av en side? for eksempel for FAQ-delen, vil jeg sette opp et søkeskjema som er begrenset til de eneste spørsmålene i FAQ (+ 20 spørsmål) på denne måten brukeren ikke trenger å lese dem alle, men finner bare takket være søkeskjemaet de med nøkkelordene han bryr seg om. Takk på forhånd for ditt svar.
Takk for denne artikkelen, hyggelig å slette sidene fra søkemodulen, men kan du også ekskludere sidene når du søker med forstørrelsesglasset i overskriften ?? Takk skal du ha
Hei David,
Jeg har ennå ikke testet dette alternativet.