Sdílení sbírky obrázků na Divi je vždy skvělý způsob, jak vizuálně zaujmout uživatele vaším obsahem. Modul Divi's Gallery vám umožňuje vytvářet a organizovat galerie kdekoli na vašem počítači Webové stránky. Modul galerie na Divi Builder je k dispozici ve formátu mřížky a posuvníku a podporuje velké galerie se stránkováním.

Jak přidat modul galerie na vaši stránku

Než budete moci na svou stránku přidat modul galerie, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalovaný na vašem Webové stránky, 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. Máme skvělé návody k používání prvků lignes a sekce podle Divi.

Vyhledejte modul galerie 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 „galerie“ a poté kliknout na Enter pro automatické vyhledání a přidání modulu galerie! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad použití: Přidání galerie obrázků v plné šířce k předvedení fotografie.

Přidání galerie na stránku s fotografiemi je skvělý způsob, jak propagovat svou práci a zvýšit důvěryhodnost u klientů. V tomto příkladu vám ukážu, jak můžete pomocí modulu galerie přidat galerii obrázků s rozložením mřížky, které se rozprostírá po celé šířce stránky. Obrazy mezi sebou nemají žádný prostor, což jim dává praktickou a estetickou prezentaci.

A nezapomeňme, že každý obrázek otevírá vyskakovací okno pro procházení větších verzí obrázků v galerii.

Pomocí Visual Builderu přidejte do sekce záhlaví novou sekci s řádkem s plnou šířkou nebo s plnou šířkou (1 sloupec). Poté přidejte do řádku modul Galerie.

Aktualizujte nastavení modulu Galerie následujícím způsobem:

Možnosti obsahu

Obrázky galerie: Klikněte na aktualizovanou galerii a vyberte obrázky, které chcete do galerie zahrnout. Počet obrázků: 12 Zobrazit název a titulek: NE Zobrazit stránkování: NE

Možnosti návrhu

Rozvržení: Mřížka Orientace miniatur: Na šířku Ikona zvětšení Barva: #ffffff Barva vznášení vznášení: rgba (0,0,0,0.48) Výběr ikony přechodu: výchozí

Uložte nastavení

Nyní zbývá jen zbavit se veškerého prostoru kolem obrázků. Vraťte se zpět a vyberte nastavení řádků. Na kartě Návrh aktualizujte následující:

Vytvořte tuto řádek v plné šířce: ANO
Použijte vlastní šířku okapu: ANO
Šířka okapu: 1

Je důležité si uvědomit, že číselná hodnota „1“ pro šířku okapu je skutečně nulová (vůbec žádná šířka).

Uložte nastavení

A je to!

Možnosti obsahu modulu Galerie

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

Obrázky galerie

Klikněte na tlačítko Aktualizovat den galerie spusťte multimediální knihovnu WordPress, kde si můžete vybrat obrázky, které chcete zobrazit v galerii.

Počet obrázků

Nastavte počet obrázků, které se mají zobrazit na stránku. Pokud je ve vaší galerii zahrnuto více obrázků, než je povoleno na každé stránce, pod obrázky se zobrazí stránkování.

Zobrazit název a titulek:

Pokud byl přidán název nebo titulek obrázku, zobrazí se pod obrázkem v galerii. Pokud chcete tyto textové prvky deaktivovat, můžete tak učinit pomocí této možnosti.

Zobrazení stránkování

Pokud je ve vaší galerii zahrnuto více obrázků, než je povoleno na každé stránce, pod obrázky se zobrazí stránkování. Pokud chcete stránkování odebrat, můžete toto nastavení vypnout.

Štítek správce

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 modulu Galerie

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 cokoli změnit.

Dispozice

Ve výchozím nastavení se galerie zobrazují jako mřížka obrázků. Můžete se také rozhodnout zobrazit svou galerii jako posuvník obrázků.

Orientace miniatur

Můžete si vybrat, zda chcete mít obrázky z galerie ve formátu na výšku nebo na šířku. Pokud změníte režim, možná budete muset regenerovat své miniatury .

Barevná ikona přiblížení

Když podržíte ukazatel myši nad položkou v galerickém podu, zobrazí se ikona překrytí. Barvu použitou z této ikony můžete upravit pomocí nástroje pro výběr barev v tomto nastavení.

Umístěte barvu překrytí kurzoru

Když podržíte ukazatel myši nad položkou v podstavci Galerie, v horní části obrázku a pod textem a ikonou názvu portfolia se zobrazí barva překrytí. Ve výchozím nastavení se používá poloprůhledná bílá barva. Pokud chcete použít jinou barvu, můžete upravit barvu pomocí nástroje pro výběr barev v tomto nastavení

Ikona výběru přeletu (Hover)

Zde si můžete vybrat vlastní ikonu, která se zobrazí, když návštěvník umístí kurzor na položky galerie v modulu.

Barva textu

Zde můžete zvolit, zda má být text světlý nebo tmavý. Pokud pracujete na tmavém pozadí, měl by být váš text světlý. Pokud je pozadí světlé, měl by být text tmavý.

Font písma

Písmo textu nadpisu 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á písmena a podtržení.

Velikost písma nadpisu

Zde můžete upravit velikost textu nadpisu. Tažení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 textu titulku

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 textu nadpisu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup hlavních 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 v textu nadpisu, 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 názvu

Výška řádku ovlivňuje mezeru mezi každým řádkem textu nadpisu. Chcete-li 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.

Legenda písmo

Písmo textu titulků 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 titulků

Zde můžete upravit velikost textu titulků. 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 legendy

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 textu titulků, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery mezi písmeny legendy

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 titulku, 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 legendy

Výška řádku ovlivňuje mezeru mezi každým řádkem textu titulků. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole umístěného 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.

Použijte okraj

Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.

Barva hranice

Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.

Šířka hranice

Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporovány jsou vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, ​​jako em, vh, vw atd.

Styl ohraničení

Okraje podporují osm různých stylů: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, překrytí a začátek. Vyberte požadovaný styl z rozevírací nabídky a použijte jej na svůj okraj.

Rozšířené možnosti modulu galerie

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=”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”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES 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