Pomocí vyhledávacího modulu můžete umístit a formulář hledat kdekoli na svém webu. Tento formulář vyhledávání umožní vašim návštěvníkům prohledávat veškerý obsah vašich webových stránek, včetně všech stránek a blogových příspěvků. To vám dává funkčnost vyhledávacího widgetu WordPress s flexibilitou, kterou Divi Builder nabízí. Můžete nejen ovládat umístění formuláře vyhledávat na stránce, ale také přizpůsobit její design.

Jak přidat vyhledávací modul na vaši stránku

Než budete moci na svou stránku přidat vyhledávací modul, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalované na vašem webu, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.

Vyhledejte vyhledávací modul v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také napsat slovo „hledat“ a poté kliknout na Enter pro vyhledávání a automaticky přidat vyhledávací modul! Po přidání modulu vás uvítá seznam možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad případu použití: Přidání modulu vlastního vyhledávání na stránku blogu s plnou šířkou

V tomto příkladu vám ukážu, jak přidat vyhledávací modul jako primární výzvu k akci v horní části stránky blogu. To umožňuje uživatelům snadno prohledávat obsah vašeho blogu bez jakéhokoli nepořádku.

Tato stránka má v horní části záhlaví celé šířky a modul pro vyhledávání přímo dole. Pod modulem pro vyhledávání je modul blogu, který používá rozložení mřížky.

Pomocí nástroje Visual Builder přidejte na stránku blogu novou standardní sekci s řádkem s plnou šířkou (1 sloupec). Poté vložte vyhledávací modul do řádku.

Aktualizujte nastavení vyhledávacího modulu následujícím způsobem:

Možnosti obsahu

Vyhrazený text: Prohledat náš blog ...
Skrýt tlačítko: ANO

Možnosti návrhu

Barva pozadí vstupního pole: # f8f8f8
Zástupná barva: # 888888
Velikost vstupního písma: 16px
Barva vstupního textu: # 888888
Výška vstupního řádku: 1em
Vlastní výplň: 20px Top, 20px Bottom

Uložte nastavení

Nyní se vraťte a změňte šířku řádku obsahujícího váš vyhledávací modul. Na kartě Návrh v nastavení čáry přidejte čáře vlastní šířku 300 pixelů. Díky tomu bude vyhledávací modul kompaktní a zaměřený na stránku.

A je to!

Vyhledejte možnosti obsahu

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

Zástupný text

Zadejte text, který chcete použít jako zástupný symbol pro vyhledávací pole.

Skrýt tlačítko

Pokud tuto možnost povolíte, tlačítko Hledat bude skryté.

Vyloučit stránky

Pokud tuto možnost povolíte, budou stránky z výsledků vyhledávání vyloučeny.

Vyloučit položky

Povolením této možnosti vyloučíte zprávy z výsledků vyhledávání.

Vyloučit kategorie

Vyberte kategorie, které chcete vyloučit z výsledků vyhledávání.

Správce štítku

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti návrhu hledání

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete vyladit cokoli.

Barva pozadí vstupního pole

Zde můžete změnit barvu pozadí vyhledávacího panelu.

Zástupná barva

Před použitím vyhledávacího pole existuje zástupný text uvnitř pole. Pokud jste upravili barvu pozadí pole, můžete také upravit barvu zástupného textu, abyste se ujistili, že je čitelný.

Barva textu

Zde si můžete vybrat hodnotu svého textu. Pokud pracujete na tmavém pozadí, měl by být váš text zapnutý. Pokud pracujete na světlém pozadí, měl by být váš text tmavý.

Textová orientace

To řídí, jak je váš text v modulu zarovnán.

Vstupní policie

Písmo vstupního textu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Zadejte velikost písma

Zde můžete upravit velikost vstupního textu. Posunutím posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva zadaného textu

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu vstupního textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozpětí písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem ve vstupním textu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku

Výška řádku ovlivňuje mezeru mezi každým řádkem zadávaného textu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte do pole požadovanou velikost mezery. vstup napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Tlačítko a barva ohraničení

Tím se změní barva pozadí a ohraničení tlačítka pro vyhledávání.

Písmo tlačítka

Písmo textu tlačítka můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma tlačítka

Zde můžete upravit velikost textu tlačítka. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat hodnotu požadované velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu tlačítka

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Chcete-li změnit barvu textu tlačítka, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup písmen na tlačítku

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu tlačítka, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku tlačítka

Výška řádku ovlivňuje mezeru mezi každým řádkem textu tlačítka Pokud chcete zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Maximální šířka

Ve výchozím nastavení je maximální šířka vyhledávací lišty nastavena na 100%. To znamená, že vyhledávací lišta se zobrazí v její přirozené šířce, pokud šířka vyhledávací lišty nepřekročí šířku nadřazeného sloupce, v takovém případě bude vyhledávací lišta omezena na 100% šířky sloupce. Chcete-li dále omezit maximální šířku vyhledávací lišty, můžete tak učinit zadáním požadované hodnoty maximální šířky zde. Například hodnota 50% by omezila šířku vyhledávací lišty na 50% šířky nadřazeného sloupce.

Vlastní marže

Okraj je prostor přidaný na vnější stranu modulu, mezi modul a další prvek nahoře, dole nebo nalevo a napravo od něj. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty okrajů. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Vlastní polstrování

Výplň je prostor přidaný uvnitř vašeho modulu mezi okraj modulu a jeho vnitřní prvky. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty výplně. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Pokročilé možnosti výzkumného modulu

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšířené "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"] STÁHNOUT TÉMA 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]

Ostatní výukové programy Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin