Pomoću modula za pretraživanje možete postaviti a obrazac pretražite bilo gdje na svojoj web stranici. Ovaj obrazac pretraživanje će omogućiti vašim posjetiteljima da pretražuju sav sadržaj vaše web stranice, uključujući sve stranice i postove na blogu. To vam daje funkcionalnost WordPress widgeta za pretraživanje uz fleksibilnost koju nudi Divi Builder. Ne samo da možete kontrolirati lokaciju obrasci pretraživati ​​na stranici, ali i prilagoditi njezin dizajn.

Kako dodati modul za pretraživanje na svoju stranicu

Prije nego što svojoj stranici možete dodati modul za pretraživanje, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

Pronađite modul za pretraživanje na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da također možete upisati riječ "pretraga", a zatim kliknuti tipku enter za pretraživanje i automatski dodati modul za pretraživanje! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer slučaja: Dodavanje modula prilagođenog pretraživanja na stranicu bloga pune širine

U ovom primjeru pokazat ću vam kako dodati modul za pretraživanje koji će biti primarni poziv na akciju na vrhu stranice bloga. To korisnicima omogućuje lako pretraživanje sadržaja vašeg bloga bez nereda.

Ova stranica ima zaglavlje pune širine na vrhu, a modul za pretraživanje izravno ispod. Ispod modula za pretraživanje nalazi se modul bloga koji koristi raspored mreže.

Koristeći Visual Builder, dodajte novi standardni odjeljak na stranicu bloga s retkom pune širine (1 stupac). Zatim umetnite modul za pretraživanje u red.

Ažurirajte postavke modula za pretraživanje na sljedeći način:

Opcije sadržaja

Rezervirani tekst: Pretražite naš blog ...
Sakrij gumb: YES

Mogućnosti dizajna

Boja pozadine polja za unos: # f8f8f8
Boja rezerviranog mjesta: # 888888
Veličina fonta za unos: 16 piksela
Boja unosa teksta: # 888888
Visina ulazne linije: 1em
Custom padding: 20px odozdo, 20px Donja

Spremite postavke

Sada se vratite da promijenite širinu retka koji sadrži vaš modul za pretraživanje. Na kartici Dizajn postavki linije dajte liniji prilagođenu širinu od 300 piksela. To će modul za pretraživanje zadržati kompaktnim i fokusiranim na stranicu.

To je sve!

Traži opcije sadržaja

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

Tekst rezerviranog mjesta

Upišite tekst koji želite koristiti kao rezervirano mjesto za polje za pretraživanje.

Gumb Sakrij

Ako omogućite ovu opciju, gumb za pretraživanje bit će skriven.

Izuzmi stranice

Ako omogućite ovu opciju, stranice će biti isključene iz rezultata pretraživanja.

Isključi stavke

Omogućivanje ove opcije isključit će poruke iz rezultata pretraživanja.

Izuzmi kategorije

Odaberite kategorije koje želite isključiti iz rezultata pretraživanja.

Administratorska oznaka

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Opcije pretraživanja dizajna

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete bilo što podesiti.

Boja pozadine polja za unos

Ovdje možete promijeniti boju pozadine trake za pretraživanje.

Boja rezerviranog mjesta

Prije nego što se koristi polje za pretraživanje, tekst rezerviranog mjesta postoji unutar polja. Ako ste prilagodili boju pozadine polja, također možete prilagoditi boju teksta rezerviranog mjesta kako biste bili sigurni da je čitljiva.

Boja teksta

Ovdje možete odabrati vrijednost svog teksta. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti uključen. Ako radite sa svijetlom pozadinom, tekst bi trebao biti taman.

Tekst orijentacija

Ovo kontrolira kako je vaš tekst poravnat u modulu.

Ulazna policija

Možete promijeniti font unosa teksta odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Unesite veličinu fonta

Ovdje možete prilagoditi veličinu svog ulaznog teksta. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja unosa teksta

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju svog ulaznog teksta, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak pisma

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u ulaznom tekstu, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina linije

Visina retka utječe na razmak između svakog retka vašeg ulaznog teksta. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje. unos s desne strane kursora. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja gumba i granice

To će promijeniti boju pozadine i obruba gumba za pretraživanje.

Font gumba

Font teksta gumba možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina gumba gumba

Ovdje možete prilagoditi veličinu teksta gumba. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta gumba

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta gumba, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak slova gumba

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu gumba, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina linije gumba

Visina crte utječe na razmak između svakog retka teksta gumba Ako želite povećati razmak između svake crte, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Maksimalna širina

Prema zadanim postavkama, maksimalna širina trake za pretraživanje postavljena je na 100%. To znači da će se traka za pretraživanje prikazivati ​​u svojoj prirodnoj širini, osim ako širina trake za pretraživanje ne prelazi širinu nadređenog stupca, u tom će slučaju traka za pretraživanje biti ograničena na 100% širine stupca. Ako želite dodatno ograničiti maksimalnu širinu trake za pretraživanje, to možete učiniti tako da ovdje unesete željenu vrijednost najveće širine. Na primjer, vrijednost od 50% ograničila bi širinu trake za pretraživanje na 50% širine roditeljskog stupca.

Prilagođena marža

Margina je prostor dodan s vanjske strane vašeg modula, između modula i sljedećeg elementa iznad, ispod ili slijeva i zdesna od njega. Možete dodati prilagođene vrijednosti margina na bilo koju od četiri strane modula. Da biste uklonili prilagođenu marginu, uklonite dodanu vrijednost iz polja za unos. Te se vrijednosti prema zadanim postavkama mjere u pikselima, ali u polja za unos možete unijeti prilagođene mjerne jedinice.

Custom padding

Ispunjavanje je prostor dodan unutar vašeg modula, između ruba modula i njegovih unutarnjih elemenata. Možete dodati prilagođene vrijednosti popunjavanja na bilo koju od četiri strane modula. Da biste uklonili prilagođenu marginu, uklonite dodanu vrijednost iz polja za unos. Te se vrijednosti prema zadanim postavkama mjere u pikselima, ali u polja za unos možete unijeti prilagođene mjerne jedinice.

Napredne mogućnosti istraživačkog modula

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

[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-download"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 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 =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin