Folosind modulul de căutare, puteți plasa a formă caută oriunde pe site-ul tău. Acest formă căutarea va permite vizitatorilor să caute tot conținutul site-ului dvs., inclusiv toate paginile și postările de blog. Acest lucru vă oferă funcționalitatea widgetului de căutare WordPress cu flexibilitatea oferită de Divi Builder. Nu puteți controla numai locația formulare caută pe pagină, dar și personalizați designul acesteia.

Cum să adăugați un modul de căutare pe pagina dvs.

Înainte de a putea adăuga un modul de căutare la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.

După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs.

Găsiți modulul de căutare în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „căutare” și apoi să faceți clic pe Enter pentru a căuta și adăuga automat modulul de căutare! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: Adăugarea unui modul de căutare personalizată la o pagină de blog cu lățime completă

Pentru acest exemplu, vă voi arăta cum să adăugați un modul de căutare pentru a fi un apel principal la acțiune în partea de sus a unei pagini de blog. Acest lucru permite utilizatorilor să caute cu ușurință conținutul blogului dvs., fără niciun fel de dezordine.

Această pagină are un antet cu lățime completă în partea de sus, cu modulul de căutare direct dedesubt. Sub modulul de căutare este un modul de blog care folosește aspectul grilei.

Folosind Visual Builder, adăugați o nouă secțiune standard pe pagina blogului cu un rând cu lățime completă (1 coloană). Apoi introduceți modulul de căutare în rând.

Actualizați setările modulului de căutare după cum urmează:

Opțiuni de conținut

Text rezervat: Căutați pe blogul nostru ...
Ascundeți butonul: DA

Opțiuni de proiectare

Culoarea fundalului câmpului de intrare: # f8f8f8
Culoare substituent: # 888888
Dimensiunea fontului introdus: 16 px
Culoarea textului de intrare: # 888888
Înălțimea liniei de intrare: 1em
Padding personalizat: 20px Top, 20px Bottom

Salvați setările

Acum reveniți pentru a modifica lățimea rândului care conține modulul dvs. de căutare. În fila Proiectare a setărilor liniei, acordați liniei o lățime personalizată de 300 px. Acest lucru va păstra modulul de căutare compact și concentrat pe pagină.

Asta este!

Căutați opțiunile de conținut

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.

Text substituent

Tastați textul pe care doriți să-l utilizați ca marcator de loc pentru câmpul de căutare.

Ascundeți butonul

Dacă activați această opțiune, butonul Căutare va fi ascuns.

Excludeți paginile

Dacă activați această opțiune, paginile vor fi excluse din rezultatele căutării.

Excludeți articolele

Activarea acestei opțiuni va exclude mesajele din rezultatele căutării.

Excludeți categoriile

Alegeți categoriile pe care doriți să le excludeți din rezultatele căutării.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiunile de design pentru căutarea

În fila Proiectare, veți găsi toate opțiunile de stilare a modulelor, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a modifica orice.

Culoarea de fundal a câmpului de introducere

Aici puteți schimba culoarea de fundal a barei de căutare.

Culoarea potrivită

Înainte de a fi utilizat câmpul de căutare, textul substituent există în interiorul câmpului. Dacă ați ajustat culoarea de fundal a câmpului, puteți ajusta și culoarea textului substituent pentru a vă asigura că este lizibil.

Culoarea textului

Aici puteți alege valoarea textului dvs. Dacă lucrați la un fundal întunecat, textul dvs. ar trebui să fie activat. Dacă lucrați cu un fundal deschis, textul dvs. ar trebui să fie întunecat.

Orientarea textului

Aceasta controlează modul în care textul dvs. este aliniat în modul.

Poliția de intrare

Puteți modifica fontul textului introdus selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Introduceți dimensiunea fontului

Aici puteți regla dimensiunea textului introdus. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Introduceți culoarea textului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului introdus, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor

Distanța dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul de introducere, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei

Înălțimea liniei afectează spațiul dintre fiecare linie a textului introdus. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmp. intrare în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Butonul și culoarea frontală

Aceasta va schimba fundalul și culoarea chenarului butonului de căutare.

Button font

Puteți modifica fontul textului butonului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Dimensiunea fontului butonului

Aici puteți regla dimensiunea textului butonului. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului butonului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului butonului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor butonului

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul butonului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei butonului

Înălțimea liniei afectează spațiul dintre fiecare linie a textului butonului Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Lățimea maximă

În mod implicit, lățimea maximă a barei de căutare este setată la 100%. Aceasta înseamnă că bara de căutare va fi afișată la lățimea sa naturală, cu excepția cazului în care lățimea barei de căutare depășește lățimea coloanei părinte, caz în care bara de căutare va fi limitată la 100% din lățimea coloanei. Dacă doriți să restrângeți în continuare lățimea maximă a barei de căutare, puteți face acest lucru introducând aici lățimea maximă dorită. De exemplu, o valoare de 50% ar limita lățimea barei de căutare la 50% din lățimea coloanei părinte.

Marja personalizata

Marja este spațiul adăugat în exteriorul modulului dvs., între modul și următorul element de deasupra, dedesubt sau la stânga și la dreapta acestuia. Puteți adăuga valori de marjă personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Căptușeală personalizată

Completarea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Puteți adăuga valori de umplere personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Opțiuni avansate ale modulului de cercetare

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.

[vc_row center_row = "da"] [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-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_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_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

• site-uri web 5 pentru utilizare restaurant tematic Divi
• Cum să adăugați text pe un produs Divi WooCommerce
• Modificarea culorii meniului între paginile Divi
• Cum să personalizați grilele unui blog cu Divi
• Cum de a utiliza rolul editor Divi pe WordPress
• Cum se creează un glisor Divi pe ecran complet
• Modificarea culorii meniurilor între paginile Divi
• Caracteristici pe care probabil nu le cunoașteți despre Divi
• Cum se utilizează Divi Builder pe WordPress
• Cum se utilizează modulul de defilare video Divi
• Cum se utilizează modulul Divi Builder Flip
• Cum să adăugați un modul de mărturie pe Divi Builder
• Cum se utilizează modulul de text Divi
• Cum se creează un slider pe Divi
• Cum se editează un rol de utilizator Divi
• Cum se utilizează modulul Divi Social Media
• Cum se utilizează modulul magazin pe tema WordPress Divi
• Cum se utilizează modulul bara laterală Divi
• Cum se utilizează modulul de prețuri pentru divi
• Cum se utilizează modulul de titlu al publicațiilor Divi
• Cum se adaugă un modul video de Divi
• Cum să utilizați modulul de navigare pentru articole
• Cum se utilizează modulul de căutare Divi
• Cum se utilizează modulul portofel Divi
• Cum se utilizează modulul persoană pe Divi Builder
• Cum se utilizează modulul portofel cu filtrul Divi
• Modul de utilizare a modulului glisant cu lățime întreagă
• Cum se utilizează modulul de imagine Divi Builder
• Modul de utilizare a modulelor de navigație full-width din Divi Builder
• Cum se utilizează modulul galerie de imagini
• Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
• Cum să utilizați modulul de portofoliu Full Width Divi
• Cum se utilizează modulul antet de Divi pentru lățimea completă
• Cum se utilizează modulul Counter Modul Divi
• Cum se utilizează glisorul de articole pe Divi Builder
• Cum se utilizează modulul Divi Email Optin