Pomocou vyhľadávacieho modulu môžete umiestniť a formulár hľadať kdekoľvek na svojom webe. Toto formulár vyhľadávanie umožní vašim návštevníkom prehľadávať všetok obsah vašich webových stránok vrátane všetkých stránok a blogových príspevkov. To vám dáva funkčnosť vyhľadávacieho widgetu WordPress s flexibilitou, ktorú Divi Builder ponúka. Môžete ovládať nielen umiestnenie formuláre vyhľadávanie na stránke, ale aj prispôsobenie jej dizajnu.
Ako pridať vyhľadávací modul na svoju stránku
Pred pridaním vyhľadávacieho modulu na svoju stránku musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.
Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.
Vyhľadajte vyhľadávací modul v zozname modulov a kliknutím naň ho pridajte na svoju stránku. Zoznam modulov je prehľadávateľný, čo znamená, že môžete tiež napísať slovo „hľadať“ a potom kliknúť na Enter, aby ste vyhľadali a automaticky pridať vyhľadávací modul! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .
Príklad prípadu použitia: Pridanie modulu vlastného vyhľadávania na stránku blogu na celú šírku
V tomto príklade vám ukážem, ako pridať vyhľadávací modul ako primárnu výzvu na akciu v hornej časti stránky blogu. To umožňuje používateľom ľahko prehľadávať obsah vášho blogu bez zbytočných neporiadkov.
Táto stránka má v hornej časti hlavičku celej šírky a priamo pod ňou je vyhľadávací modul. Pod modulom vyhľadávania je modul blogu, ktorý používa rozloženie mriežky.
Pomocou programu Visual Builder pridajte na stránku blogu novú štandardnú sekciu s riadkom s plnou šírkou (1 stĺpec). Potom vložte vyhľadávací modul do riadku.
Aktualizujte nastavenia vyhľadávacieho modulu takto:
Možnosti obsahu
Vyhradený text: Hľadať v našom blogu ...
Skryť tlačidlo: YES
Možnosti návrhu
Farba pozadia vstupného poľa: # f8f8f8
Farba zástupného symbolu: # 888888
Veľkosť vstupného písma: 16px
Farba vstupného textu: # 888888
Výška vstupného riadku: 1m
Vlastné čalúnenie: 20px Top, 20px bottom
Uložte nastavenia
Teraz sa vráťte a zmeňte šírku riadku obsahujúceho váš vyhľadávací modul. Na karte Dizajn v nastaveniach čiary dajte čiare vlastnú šírku 300 pixlov. Takto bude vyhľadávací modul kompaktný a zameraný na stránku.
A je to!
Vyhľadajte možnosti obsahu
Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.
Zástupný text
Zadajte text, ktorý chcete použiť ako zástupný symbol pre vyhľadávacie pole.
Skryť tlačidlo
Ak povolíte túto možnosť, tlačidlo Hľadať bude skryté.
Vylúčiť stránky
Ak povolíte túto možnosť, stránky budú vylúčené z výsledkov vyhľadávania.
vylúčiť položky
Povolenie tejto možnosti vylúči správy z výsledkov vyhľadávania.
Vylúčte kategórie
Vyberte kategórie, ktoré chcete vylúčiť z výsledkov vyhľadávania.
Správcovská značka
Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.
Možnosti návrhu vyhľadávania
Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete vyladiť čokoľvek.
Farba pozadia vstupného poľa
Tu môžete zmeniť farbu pozadia vyhľadávacieho panela.
Farba zástupného miesta
Pred použitím vyhľadávacieho poľa existuje vnútri poľa zástupný text. Ak ste upravili farbu pozadia poľa, môžete tiež upraviť farbu zástupného textu, aby bola čitateľná.
Farba textu
Tu môžete zvoliť hodnotu svojho textu. Ak pracujete na tmavom pozadí, váš text by mal byť zapnutý. Ak pracujete na svetlom pozadí, text by mal byť tmavý.
Textová orientácia
To riadi, ako je váš text zarovnaný v module.
Vstupná polícia
Písmo vstupného textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.
Veľkosť vstupného písma
Tu môžete upraviť veľkosť vstupného textu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Farba vstupného textu
V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu vstupného textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.
Rozpísanie písmen
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami vo vstupnom texte, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Výška linky
Výška riadku ovplyvňuje medzeru medzi každým riadkom zadávaného textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do poľa zadajte požadovanú veľkosť medzery. napravo od kurzora. Vstupné polia podporujú rôzne jednotky merania, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Tlačidlo a hraničná farba
Týmto sa zmení farba pozadia a orámovania tlačidla vyhľadávania.
Písmo tlačidla
Písmo textu vášho tlačidla môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.
Veľkosť písma tlačidla
Tu môžete upraviť veľkosť textu vášho tlačidla. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Farba textu tlačidla
V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu svojho tlačidla, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.
Rozostup písmen tlačidla
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte tlačidla, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Výška riadka tlačidla
Výška riadku ovplyvňuje medzeru medzi každým riadkom textu tlačidla. Ak chcete zväčšiť medzeru medzi každým riadkom, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.
Maximálna šírka
Štandardne je maximálna šírka vyhľadávacieho panela nastavená na 100%. To znamená, že vyhľadávací panel sa bude zobrazovať v jeho prirodzenej šírke, pokiaľ šírka vyhľadávacieho panela nepresahuje šírku nadradeného stĺpca. V takom prípade bude vyhľadávací panel obmedzený na 100% šírky stĺpca. Ak chcete ďalej obmedziť maximálnu šírku vyhľadávacieho panela, môžete to urobiť tak, že tu zadáte požadovanú hodnotu maximálnej šírky. Napríklad hodnota 50% by obmedzila šírku vyhľadávacieho panela na 50% šírky nadradeného stĺpca.
Vlastná marža
Okraj je priestor pridaný k vonkajšej strane modulu, medzi modul a nasledujúci prvok nad, pod alebo naľavo a napravo od neho. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty okrajov. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.
Vlastné čalúnenie
Výplň je priestor pridaný do vášho modulu medzi okrajom modulu a jeho vnútornými prvkami. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty výplne. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.
Rozšírené možnosti výskumného modulu
Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.
CSS ID
Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.
Triedu CSS
Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možností témy Divi alebo nastavení na stránke Divi Builder.
Vlastné CSS
Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.
viditeľnosť
Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšírené "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"] STIAHNUŤ TÉMU DIVI [/ vcex_button] [/ width_column] [»v] » 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" TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Ďalšie výukové programy spoločnosti Divi
- 5 webové stránky pre použitie v hoteli Divi tému
- Ako pridať text na produktoch Divi WooCommerce
- Ako zmeniť farbu ponuky medzi stránkami Divi
- Ako si prispôsobiť mriežky blogu s Divi
- Ako používať role Divi editor na WordPress
- Ako vytvoriť posuvník Divi na celej obrazovke
- Ako zmeniť farbu ponúk medzi stránkami Divi
- Funkcie, ktoré pravdepodobne neviete o Divi
- Ako používať Divi Builder na WordPress
- Ako používať modul posúvania videa Divi
- Ako používať modul Divi Builder Flip
- Ako pridať modul posudkov na Divi Builder
- Ako používať textový modul Divi
- Ako vytvoriť posúvač na Divi
- Ako upraviť rolu používateľa Divi
- Ako používať modul Divi Social Media
- Ako používať modul obchodu na tému WordPress Divi
- Ako používať modul bočného panela Divi
- Ako používať modul tabuľky cien Divi
- Ako používať titulný modul publikácií Divi
- Ako pridať video modul Divi
- Ako používať navigačný modul článku
- Ako používať vyhľadávací modul Divi
- Ako používať modul peňaľenky Divi
- Ako používať osobný modul na nástroji Divi Builder
- Ako používať modul peňaženky s filtrom Divi
- Ako používať posuvný modul s plnou šírkou
- Ako používať modul obrazu Divi Builder
- Ako používať navigačný modul v celej šírke nástroja Divi Builder
- Ako používať modul galérie obrázkov
- Ako používať modul kariet Divi Builder s plnou šírkou
- Ako používať portálový modul Divi s plnou šírkou
- Ako používať modul záhlavia Divi s plnou šírkou
- Ako používať počítací modul Divi
- Ako používať posúvač článkov v aplikácii Divi Builder
- Ako používať modul Divi Email Optin
Dobrý deň,
Ďakujeme za tento článok.
Existuje bod, ktorému ste sa nevenovali (a bohužiaľ, toto je presne bod, ktorý mi robí problém ...):
Pri výbere zobrazenia tlačidla vyhľadávania je predvolene text tlačidla „Hľadať“ a chcel by som vedieť, ako môžem tento text upraviť tak, aby som ho prispôsobil? Nech som vyzeral akokoľvek tvrdo, nenašiel som žiadne pole alebo priestor, kde je možné túto zmenu urobiť ...
Vopred ďakujeme za vašu pomoc!
Ahoj, ďakujem za článok. Mám otázku, je možné vyhľadávací formulár použiť iba pre časť stránky? napríklad pre sekciu FAQ by som chcel nastaviť vyhľadávací formulár obmedzený na jediné otázky FAQ (+ 20 otázok) tak, že používateľ nemusí čítať všetky, ale nájde len vďaka vyhľadávaciemu formuláru tie s kľúčovými slovami, na ktorých mu záleží. Ďakujem vopred za odpoveď.
Ďakujeme vám za tento článok, je pekné odstrániť stránky z vyhľadávacieho modulu, ale môžete tieto stránky vylúčiť aj pri vyhľadávaní pomocou lupy hlavičky ?? Ďakujem
Ahoj Davide,
Túto možnosť som ešte netestoval.