Ved hjælp af søgemodulet kan du placere en formular søg hvor som helst på dit websted. Det her formular Søgning giver dine besøgende mulighed for at søge i alt dit webstedsindhold, inklusive alle sider og blogindlæg. Dette giver dig funktionaliteten af WordPress-søgewidgetten med den fleksibilitet, som Divi Builder tilbyder. Du kan ikke kun kontrollere placeringen af formularer søge på siden, men også tilpasse dens design.
Sådan føjes et søgemodul til din side
Før du kan tilføje et søgemodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først.
Find søgemodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler kan søges, hvilket betyder at du også kan skrive ordet "søg" og derefter klikke på enter for at søge og automatisk tilføje søgemodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Brug eksempel: Tilføje et tilpasset søgemodul til en blog med fuld bredde
I dette eksempel viser jeg dig, hvordan du tilføjer et søgemodul til at være en primær opfordring til handling øverst på en blogside. Dette giver brugerne mulighed for let at søge på dit blogindhold uden rod.
Denne side har en overskrift i fuld bredde øverst med søgemodulet lige nedenfor. Under søgemodulet findes et blogmodul, der bruger gitterlayoutet.
Brug Visual Builder til at tilføje en ny standardsektion til blogsiden med en fuldbredde (1 kolonne) række. Indsæt derefter søgemodulet i rækken.
Opdater søgemodulindstillingerne som følger:
Indholdsindstillinger
Reserveret tekst: Søg i vores blog ...
Skjul knappen: JA
Design muligheder
Indtastningsfeltets baggrundsfarve: # f8f8f8
Pladsholderfarve: # 888888
Input skriftstørrelse: 16 pixel
Indtastningstekstfarve: # 888888
Indgangslinjens højde: 1 em
Tilpasset polstring: 20px Top, 20px Bund
Gem indstillinger
Kom nu tilbage for at ændre bredden på rækken, der indeholder dit søgemodul. Giv linjen en brugerdefineret bredde på 300 pixel på fanen Design i linjeindstillingerne. Dette holder søgemodulet kompakt og fokuseret på siden.
Det er alt!
Søg indholdsindstillinger
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Pladsholdertekst
Skriv teksten, du vil bruge som pladsholder i søgefeltet.
Skjul knap
Hvis du aktiverer denne indstilling, bliver søgeknappen skjult.
Ekskluder sider
Hvis du aktiverer denne indstilling, vil siderne blive ekskluderet fra søgeresultaterne.
Ekskluder elementer
Aktivering af denne indstilling ekskluderer meddelelser fra søgeresultater.
Ekskluder kategorier
Vælg de kategorier, du vil ekskludere fra søgeresultaterne.
Admin Label
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Søg designindstillinger
På fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at tilpasse alt.
Baggrundsfarve på inputfeltet
Her kan du ændre baggrundsfarven på søgelinjen.
Pladsholder farve
Før søgefeltet bruges, findes pladsholderteksten inde i feltet. Hvis du har justeret feltets baggrundsfarve, kan du også justere farven på pladsholderteksten for at sikre, at den er læsbar.
Tekstfarve
Her kan du vælge værdien af din tekst. Hvis du arbejder på en mørk baggrund, skal din tekst være tændt. Hvis du arbejder med en lys baggrund, skal din tekst være mørk.
Tekstorientering
Dette styrer, hvordan din tekst justeres i modulet.
Indgangspoliti
Du kan ændre skrifttypen på din inputtekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Indtast skriftstørrelse
Her kan du justere størrelsen på din inputtekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Indtast tekstfarve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din inputtekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Letterafstand
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din indtastningstekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på linjen
Linjehøjde påvirker mellemrummet mellem hver linje i din inputtekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i feltet. indtastning til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Knap og kantfarve
Dette ændrer baggrunds- og kantfarven på søgeknappen.
Knappen skrifttype
Du kan ændre skrifttypen på din knaptekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Knap skriftstørrelse
Her kan du justere størrelsen på din knaptekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Knappen tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din knaptekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Spacing af bogstaverne på knappen
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din knaptekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på linjen på knappen
Linjehøjde påvirker mellemrummet mellem hver linje i din knaptekst Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Maksimal bredde
Som standard er den maksimale bredde på søgefeltet indstillet til 100%. Dette betyder, at søgefeltet vises i sin naturlige bredde, medmindre bredden på søgefeltet overstiger bredden på den overordnede kolonne, i hvilket tilfælde søgefeltet begrænses til 100% af kolonnebredden. Hvis du yderligere vil begrænse den maksimale bredde på søgefeltet, kan du gøre det ved at indtaste den ønskede maksimale breddeværdi her. For eksempel vil en værdi på 50% begrænse søgefeltets bredde til 50% af bredden af den overordnede kolonne.
Tilpasset margen
Margenen er det rum, der er tilføjet på ydersiden af dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje tilpassede margenværdier til en af de fire sider af modulet. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.
Tilpasset polstring
Infill er det rum, der tilføjes inde i dit modul, mellem kanten af modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af modulets fire sider. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.
Avancerede muligheder for forskningsmodulet
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne 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 = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD 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 = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Hej,
Tak for denne artikel.
Der er et punkt, som du ikke har taget fat på (og desværre er det netop det punkt, der giver mig problemer ...):
Når du vælger at vise søgeknappen, er teksten på knappen som standard "Søg", og jeg vil gerne vide, hvordan kan jeg ændre denne tekst for at personalisere den? Uanset hvor meget jeg så overalt, fandt jeg ikke noget felt eller rum, hvor det er muligt at foretage denne ændring ...
På forhånd tak for din hjælp!
Hej tak for artiklen. Jeg har et spørgsmål. Kan søgeformularen kun bruges til et afsnit på en side? for eksempel til FAQ-sektionen vil jeg oprette en søgeformular begrænset til de eneste spørgsmål i FAQ (+ 20 spørgsmål) på denne måde brugeren ikke behøver at læse dem alle, men finder kun takket være søgeformularen dem med de nøgleord, som han holder af. På forhånd tak for dit svar.
Tak for denne artikel, dejligt at fjerne siderne fra søgemodulet, men kan du også ekskludere siderne, når du foretager en søgning med forstørrelsesglasset i overskriften ?? tak skal du have
Hej David,
Jeg har endnu ikke testet denne mulighed.