Med hjälp av sökmodulen kan du placera en formen sök var som helst på din webbplats. Detta formen Sökning gör att dina besökare kan söka i allt innehåll på din webbplats, inklusive alla sidor och blogginlägg. Detta ger dig funktionaliteten hos WordPress-sökwidgeten med den flexibilitet som Divi Builder erbjuder. Du kan inte bara kontrollera platsen för former sök på sidan, men anpassa också dess design.

Så lägger du till en sökmodul på din sida

Innan du kan lägga till en sökmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.

Leta upp sökmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "sök" och sedan klicka på Enter för att söka och automatiskt lägga till sökmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Lägga till en anpassad sökmodul till en bloggsida med full bredd

I det här exemplet visar jag dig hur du lägger till en sökmodul som en primär uppmaning till handling högst upp på en bloggsida. Detta gör det möjligt för användare att enkelt söka i ditt blogginnehåll utan röran.

Denna sida har en rubrik i full bredd högst upp med sökmodulen direkt nedan. Under sökmodulen finns en bloggmodul som använder rutnätet.

Med Visual Builder lägger du till ett nytt standardavsnitt på bloggsidan med en rad med full bredd (1 kolumn). Sätt sedan in sökmodulen i raden.

Uppdatera sökmodulens inställningar enligt följande:

Innehållsalternativ

Reserverad text: Sök i vår blogg ...
Dölj knappen: JA

Designalternativ

Inmatningsfältets bakgrundsfärg: # f8f8f8
Platshållarfärg: # 888888
Ingångsteckenstorlek: 16 pixlar
Inmatningstextfärg: # 888888
Ingångsradens höjd: 1 em
Anpassad stoppning: 20px topp, 20px botten

Spara inställningar

Kom nu tillbaka för att ändra bredden på raden som innehåller din sökmodul. På fliken Design i radinställningarna ger du raden en anpassad bredd på 300 pixlar. Detta kommer att hålla sökmodulen kompakt och fokuserad på sidan.

Det är allt!

Sök innehållsalternativ

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

Platshållare

Skriv texten som du vill använda som platshållare i sökfältet.

Dölj knappen

Om du aktiverar det här alternativet kommer sökknappen att döljas.

Utesluta sidor

Om du aktiverar det här alternativet kommer sidorna att uteslutas från sökresultaten.

Uteslut objekt

Om du aktiverar detta alternativ utesluts meddelanden från sökresultaten.

Uteslut kategorier

Välj de kategorier du vill utesluta från sökresultaten.

Admin-etikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Sök designalternativ

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att justera vad som helst.

Bakgrundsfärg på ingångsfältet

Här kan du ändra bakgrundsfärgen på sökfältet.

Platshållare färg

Innan sökfältet används finns platshållartexten i fältet. Om du har justerat fältets bakgrundsfärg kan du också justera färgen på platshållartexten så att den är läsbar.

Textfärg

Här kan du välja värdet på din text. Om du arbetar med en mörk bakgrund bör din text vara på. Om du arbetar med en ljus bakgrund bör din text vara mörk.

Textorientering

Det här styr hur din text justeras i modulen.

Inträde polis

Du kan ändra typsnittet för din inmatade text genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Mata in teckenstorlek

Här kan du justera storleken på din inmatade text. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Mata in textfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din inmatade text väljer du önskad färg från färgväljaren med det här alternativet.

Brevavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din inmatade text, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd på linjen

Linjehöjd påverkar utrymmet mellan varje rad i din inmatade text. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i fältet. till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Knapp och kantfärg

Detta ändrar sökknappens bakgrund och kantfärg.

Knapp typsnitt

Du kan ändra teckensnittet för din knapptext genom att välja önskat teckensnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Knappens teckenstorlek

Här kan du justera storleken på din knapptext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Knapptextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din knapptext väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av bokstäverna

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din knapptext använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd på knappens linje

Linjehöjd påverkar utrymmet mellan varje rad i din knapptext Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Maximal bredd

Som standard är sökfältets maximala bredd inställd på 100%. Detta innebär att sökfältet visas med sin naturliga bredd såvida inte sökfältets bredd överstiger bredden på den överordnade kolumnen, i vilket fall sökfältet begränsas till 100% av kolumnbredden. Om du vill ytterligare begränsa den maximala bredden på sökfältet kan du göra det genom att ange önskat maximalt breddvärde här. Till exempel skulle ett värde på 50% begränsa sökfältets bredd till 50% av bredden på den överordnade kolumnen.

Anpassad marginal

Marginalen är utrymmet som läggs till på utsidan av din modul, mellan modulen och nästa element ovanför, under eller till vänster och höger om den. Du kan lägga till anpassade marginalvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Anpassad stoppning

Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Avancerade alternativ för forskningsmodulen

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

[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 = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials

liknande föremål

4 Kommentarer

Gabrielle den 6 mars 2021 kl 4 h 42 min

Hej!

Tack för den här artikeln.
Det finns en punkt som du inte har tagit upp (och tyvärr är det just den punkten som orsakar mig problem ...):

När du väljer att visa sökknappen är texten på knappen som standard "Sök" och jag skulle vilja veta hur kan jag ändra den här texten för att anpassa den? Oavsett hur mycket jag såg överallt, jag hittade inget fält eller utrymme där det är möjligt att göra denna förändring ...

Tack på förhand för din hjälp !
svar
Stefania den 7 juni 2020 vid 18 timmar och 06 min

Hej, tack för artikeln. Jag har en fråga, kan sökformuläret endast användas för ett avsnitt på en sida? till exempel för FAQ-avsnittet skulle jag vilja ställa in ett sökformulär som är begränsat till de enda frågorna i FAQ (+ 20 frågor) på det här sättet behöver användaren inte läsa dem alla men finner tack vare endast sökformuläret de med de nyckelord som han bryr sig om. Tack på förhand för ditt svar.
svar
David den 23 september 2019 klockan 20:36

Tack för den här artikeln, trevligt att ta bort sidorna från sökmodulen, men kan du också utesluta sidorna när du gör en sökning med förstoringsglaset i rubriken ?? Tack
svar
- thierry Bertrand den 26 september 2019 klockan 13:32
  
  Hej David,
  
  Jag har ännu inte testat det här alternativet.
  svar

Svar Stefania Ångra la réponse

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Divi tutorial: Så här använder du Search-modulen