Přejít k hlavnímu obsahu

Příručka Divi: Jak používat modul Vyhledávání

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

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

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

Před přidáním vyhledávacího modulu na svou stránku musíte nejprve skočit do Divi Builderu. Jakmile je motiv Divi nainstalován 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.

divi stavitel

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.

divi.png výzkumný modul

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.

například blog s vyhledávacím formulářem divi.jpg

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

divi vyhledávání konfigurace content.png

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.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

konfigurace divi.png šířka

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ě.

vyhledávání modulu divi contenu.png

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.

divi search design.png

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ý.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

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.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

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.

divi advanced option module search.png

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.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 4

  1. Dobrý den,

    Děkujeme vám za tento článek.
    Existuje bod, kterému jste se nezabývali (a bohužel to je přesně ten bod, který mi dělá problém ...):

    Když se rozhodnete zobrazit tlačítko Hledat, je ve výchozím nastavení text tlačítka „Hledat“ a chtěl bych vědět, jak mohu tento text upravit tak, aby byl přizpůsoben? Bez ohledu na to, jak tvrdě jsem vypadal, nenašel jsem žádné pole ani prostor, kde by bylo možné tuto změnu provést ...

    Předem děkujeme za vaši pomoc !

  2. Ahoj, děkuji za článek. Mám dotaz, lze vyhledávací formulář použít pouze pro část stránky? například pro sekci FAQ bych chtěl nastavit vyhledávací formulář omezený na jediné otázky FAQ (+ 20 otázek) tak, aby uživatel nemusel číst všechny, ale najde pouze díky vyhledávacímu formuláři ty s klíčovými slovy, na kterých mu záleží. Děkuji předem za odpověď.

  3. Děkujeme za tento článek, je hezké odstranit stránky z vyhledávacího modulu, ale můžete také vyloučit stránky, když provádíte vyhledávání pomocí lupy záhlaví ?? Děkuji

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek