Divi usnadňuje přidávání obrázků kamkoli váš blog. Všechny obrázky podporují progresivní načítání a jsou dodávány se 4 různými styly animace, díky kterým je navigace na vašem webu zábavná a poutavá. Obrazové moduly lze umístit do libovolného sloupce, který vytvoříte, a jejich velikost se přizpůsobí.
Jak přidat modul obrazu z aplikace Divi
Než budete moci na svou stránku přidat obrázkový 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 aktivujete Visual Builder, můžete kliknutím na šedé (+) tlačítko přidat na stránku nový modul. 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 modul obrázku v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modů je prohledávatelný, což znamená, že můžete také napsat slovo „image“ a poté kliknout na Enter pro automatické vyhledání a přidání image mod! 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í překrývajících se obrázků k ilustraci služeb na stránce služeb
Existuje nespočet způsobů použití obrazového modulu. V tomto příkladu vám ukážu, jak přidat obrázky na stránku služeb pro web malé firmy. Zde přidám obrázky. Každý červený kruh představuje obrázek.
Vzhledem k tomu, že přidání obrázku na stránku je poměrně jednoduchý a přímočarý proces, přidám nějaký vlastní styl, který umístí obrázky tak, aby se překrývaly a vytvořily skládaný efekt.
Začněme.
Pomocí vizuálního nástroje přidejte standardní sekci s rozložením 1/4 1/4 1/2. Poté přidejte textový modul do pravého sloupce 1/2 řádku. Zadejte záhlaví a popis služby.
Poté do levého sloupce 1/4 přidejte modul obrázku.
Aktualizujte nastavení modulu Image následujícím způsobem:
Možnosti obsahu
URL obrázku: [zadejte URL nebo stáhněte obrázek s rozměry 500 × 625]
Možnosti návrhu
Vlastní marže: vlevo -60px
Pokročilé možnosti
Animace: zleva doprava
Uložte nastavení
Přidejte další modul obrázku do druhého sloupce 1/4 (nebo prostředního sloupce) a aktualizujte nastavení obrázku následujícím způsobem:
Možnosti obsahu
URL obrázku: [zadejte URL nebo stáhněte obrázek s rozměry 500 × 625]
Možnosti návrhu
Vlastní marže: Horní 100px, -60px vlevo
Pokročilé možnosti
Animace: Zprava doleva
Uložte nastavení
Toto se postará o první sekci. Nyní pro další servisní sekci můžeme duplikovat sekci, kterou jsme právě vytvořili pro první servisní sekci. Jakmile je sekce duplikována, změňte strukturu sloupce na rozložení sloupce 1/2 1/4 1/4 (opak předchozího).
Poté přetáhněte textový modul se záhlavím a popisem služby do sloupce 1/2 zcela vlevo. Nezapomeňte posunout dva obrazové moduly tak, aby vyplňovaly každý sloupec 1/4 (nyní vpravo).
Protože obrazové moduly jsou duplikáty, musíme nahrát nové obrázky pro tuto konkrétní sekci služeb. Moduly mají také vždy vlastní nastavení okrajů jako první dva vytvořené obrazové moduly. Pojďme to změnit.
Počínaje modulem Image v pravém sloupci 1 / 4 aktualizujte následující nastavení obrazu:
Možnosti obsahu
URL obrázku: [zadejte URL nebo stáhněte obrázek s rozměry 500 × 625]
Možnosti návrhu
Vlastní marže: -60px vlevo (pouze)
Karta Upřesnit
Animace: Zprava doleva
Nakonec aktualizujte nastavení obrazu pro modul obrazu středu sloupce 1/4 pomocí následujícího:
Možnosti obsahu
URL obrázku: [zadejte URL nebo stáhněte obrázek s rozměry 500 × 625]
Možnosti návrhu
Vlastní marže: 100px Up, -60px Right
Karta Upřesnit
Animace: zleva doprava
Uložte nastavení
Nyní se podívejte na stránku!
Možnosti obsahu obrazového modulu
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ě.
URL obrázku
Sem vložte platnou adresu URL obrázku nebo vyberte / nahrajte obrázek prostřednictvím mediální knihovny WordPress. Obrázky se ve sloupcích vždy zobrazí zarovnané vlevo a pokrývají celou šířku sloupce. Váš obrázek však nikdy nebude větší než jeho původní velikost. Výška obrázku je určena poměrem stran původního obrázku.
Otevřete prohlížeč
Zde si můžete vybrat, zda se váš obrázek otevře v prohlížeči, když na něj kliknete. Pokud je tato možnost povolena, váš obrázek se po kliknutí v modálním okně „zvětší“ na maximální velikost. Je to skvělá funkce pro peněženky.
Link URL
Do tohoto pole vložte platnou webovou adresu URL, aby se váš obrázek stal odkazem. Ponecháte-li toto pole prázdné, váš obrázek zůstane jako statický prvek.
Otevření adresy URL
Zde si můžete vybrat, zda se váš odkaz otevře v novém okně.
Š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 obrazu
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.
Překryvný obrázek
Pokud je tato možnost povolena, zobrazí se barva a ikona překrytí, když návštěvník umístí kurzor na obrázek.
Barevná ikona překrytí
Zde můžete nastavit vlastní barvu ikony překrytí
Krycí barva krytu
Zde můžete definovat vlastní barvu překrytí.
Ikona přeletu
Zde můžete definovat vlastní ikonu překryvu.
Odstraňte místo pod obrázkem
Tato možnost ovlivní obrázky pouze v případě, že jsou posledním modulem ve sloupci. Pokud je tato možnost povolena, vzdálenost mezi spodní částí obrázku a další částí je odstraněna, což umožňuje obrázku zarámovat horní část další části stránky.
Zarovnání obrazu
Zde si vyberete směr, ve kterém se váš obrázek vznáší ve sloupci. Obrázek můžete plovoucí vlevo, vpravo nebo ponechat na střed.
Na mobilu vždy vycentrujte obrázek
Malé obrázky jsou na mobilních zařízeních často příjemnější, když jsou vycentrovány. Vzhledem k tomu, že sloupce selžou, obrázky zarovnané vlevo nebo vpravo v menších sloupcích se stanou osiřelými, když sloupy selžou a dosáhnou 100% šířky. Povolení tohoto sloupce s vynucenými obrázky k zarovnání do středu sloupce v mobilních zařízeních, aniž by to ovlivnilo zarovnání obrázků na počítačích.
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 okraje
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.
Maximální šířka obrázku
Ve výchozím nastavení je maximální šířka obrázku nastavena na 100%. To znamená, že obrázek se zobrazí v jeho přirozené šířce, pokud šířka obrázku nepřesáhne šířku nadřazeného sloupce, v takovém případě bude obraz omezen na 100% šířky sloupce. Pokud chcete dále omezit maximální šířku obrázku, můžete tak učinit zadáním požadované hodnoty maximální šířky zde. Například hodnota 50% by omezila šířku obrázku na 50% šířky nadřazeného sloupce.
Vynucení celé šířky
Ve výchozím nastavení se obrázky zobrazují v jejich nativní šířce. Povolením této možnosti se však můžete rozhodnout vynutit, aby obraz překlenul celou šířku 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.
Rozšířené možnosti obrazové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.
Animace
Pomocí této rozevírací nabídky můžete určit línou animaci načítání obrázku. Můžete si vybrat, zda se váš obrázek bude zobrazovat zprava, zleva, zdola nebo shora.
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.
Alternativní text obrázku
Alternativní text poskytuje všechny potřebné informace, pokud se obrázek nenačítá, nezobrazuje správně nebo v jakékoli jiné situaci, kdy uživatel obrázek nevidí. Umožňuje také číst a rozpoznávat obrázek pomocí vyhledávačů.
[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