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.

divi builder

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.

divi.png výskumný modul

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.

napríklad blog s vyhľadávacím formulárom divi.jpg

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

divi hľadanie konfigurácie content.png

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.

konfigurácia divi.png šírka

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.

hľadanie modulu divi contenu.png

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.

divi search design.png

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.

divi advanced option module search.png

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