Divi uľahčuje pridávanie obrázkov kdekoľvek na váš blog. Všetky obrázky podporujú progresívne načítavanie a dodávajú sa so 4 rôznymi štýlmi animácií, vďaka ktorým je navigácia na vašom webe zábavná a pútavá. Obrazové moduly je možné umiestniť do ľubovoľného stĺpca, ktorý vytvoríte, a ich veľkosť sa prispôsobí.

obrazový modul divi.png

Ako pridať obrazový modul z Divi

Predtým, ako budete môcť na svoju stránku pridať obrázkový modul, 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 aktivácii nástroja Visual Builder môžete kliknutím na sivé tlačidlo (+) pridať na 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 modul image.png

Vyhľadajte modul obrázkov v zozname modulov a kliknutím naň ho pridajte na svoju stránku. Zoznam režimov je prehľadateľný, čo znamená, že môžete tiež napísať slovo „obrázok“ a potom kliknúť na kláves Enter, aby ste automaticky našli a pridali obrázok! 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 prekrývajúcich sa obrázkov na ilustráciu služieb na stránke služieb

Existuje nespočet spôsobov, ako využiť obrazový modul. V tomto príklade vám ukážem, ako pridať obrázky na stránku služieb pre web malého podniku. Sem pridám obrázky. Každý červený kruh predstavuje obrázok.

pridajte obrázok modulu divi builder.jpg

Keďže pridanie obrázka na stránku je pomerne jednoduchý a priamočiary proces, pridám vlastný štýl, aby som umiestnil obrázky tak, aby sa prekrývali, čím sa vytvorí skladaný efekt.

Začnime.

Pomocou vizuálneho nástroja na pridanie štandardnej sekcie s rozložením 1/4 1/4 1/2. Potom pridajte textový modul do pravého stĺpca 1/2 svojho riadku. Zadajte hlavičku a popis služby.

Potom pridajte do ľavého stĺpca 1/4 modul obrázka.

pridať obrázok divi builder.png

Aktualizujte nastavenia modulu Image takto:

Možnosti obsahu

URL obrázku: [zadajte URL alebo stiahnite obrázok s rozmermi 500 × 625]

Možnosti návrhu

Vlastná marža: vľavo -60px

Možnosti avancées

Animácia: zľava doprava

animácia divi image.png

Uložte nastavenia

Pridajte ďalší modul obrázka do druhého stĺpca 1/4 (alebo stredného stĺpca) a aktualizujte nastavenia obrázka takto:

Možnosti obsahu

URL obrázku: [zadajte URL alebo stiahnite obrázok s rozmermi 500 × 625]

Možnosti návrhu

Vlastná marža: horná časť 100px, -60px vľavo

Možnosti avancées

Animácia: Zprava doľava

prekrývajúci sa obraz divi.png

Uložte nastavenia

Toto sa stará o prvý oddiel. Teraz pre ďalšiu sekciu služieb môžeme duplikovať sekciu, ktorú sme práve vytvorili pre prvú sekciu služieb. Po zdvojení oddielu zmeňte štruktúru stĺpca na rozloženie stĺpca 1/2 1/4 1/4 (opak predchádzajúceho).

vyberte sekciu divi.jpg

Potom potiahnite textový modul s hlavičkou a popisom služby do stĺpca 1/2 úplne vľavo. Nezabudnite posunúť dva obrazové moduly tak, aby vyplnili každý stĺpec 1/4 (teraz vpravo).

Pretože obrazové moduly sú duplikáty, musíme nahrať nové obrázky pre konkrétnu sekciu služieb. Moduly tiež majú vždy vlastné nastavenie okrajov, ako prvé dva vytvorené moduly obrázkov. Zmeňme to.

Počnúc modulom Obrázok v pravom stĺpci 1 / 4 aktualizujte nasledujúce nastavenia obrázka:

Možnosti obsahu

URL obrázku: [zadajte URL alebo stiahnite obrázok s rozmermi 500 × 625]

Možnosti návrhu

Vlastná marža: -60px doľava (iba)

Karta Spresnenie

Animácia: Zprava doľava

Nakoniec aktualizujte nastavenia obrázka pre modul obrázka so stredovým stĺpcom 1/4 takto:

Možnosti obsahu

URL obrázku: [zadajte URL alebo stiahnite obrázok s rozmermi 500 × 625]

Možnosti návrhu

Vlastná marža: 100px Up, -60px Right

Karta Spresnenie

Animácia: zľava doprava

Uložte nastavenia

Teraz si pozrite stránku!

príklad servisnej stránky divi.jpg

Možnosti obsahu obrázkového modulu

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.

sekcia image divi area contents.png

URL obrázka

Sem umiestnite platnú adresu obrázka alebo vyberte / nahrajte obrázok prostredníctvom mediálnej knižnice WordPress. Obrázky sa vždy zobrazia v ich stĺpcoch zarovnané doľava a pokrývajú celú šírku stĺpca. Váš obrázok však nikdy nebude väčší ako pôvodná veľkosť. Výška obrázka je určená pomerom strán pôvodného obrázka.

Otvoriť v prehliadači

Tu môžete zvoliť, či sa váš obrázok otvorí v prehliadači alebo nie, keď na neho kliknete. Ak je táto možnosť povolená, váš obrázok sa po kliknutí v modálnom okne „priblíži“ na svoju maximálnu veľkosť. Je to skvelá vlastnosť pre peňaženky.

Adresa URL odkazu

Do tohto poľa vložte platnú webovú adresu URL, aby sa z vášho obrázka stal odkaz. Ak toto pole nevyplníte, váš obrázok sa nechá ako statický prvok.

Otvorenie adresy URL

Tu si môžete zvoliť, či sa váš odkaz otvorí v novom okne.

Štítok správcu

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

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 čokoľvek meniť.

voľba dizajnu modulu image divi.png

Prekrytie obrázka

Ak je táto možnosť povolená, pri prechode kurzora nad obrázok sa zobrazí farba a ikona prekrytia.

Prekrytie farebnou ikonou

Tu môžete nastaviť vlastnú farbu ikony prekrytia

Farba prekrytia krytu

Tu môžete definovať vlastnú farbu prekrytia.

Ikona preletu

Tu môžete definovať vlastnú ikonu prekrytia.

Odstráňte priestor pod obrázkom

Táto možnosť ovplyvňuje obrázky, iba ak sú posledným modulom v stĺpci. Ak je táto možnosť povolená, vzdialenosť medzi dolnou časťou obrázka a ďalšou časťou sa odstráni, čo umožní obrázku zarámovať hornú časť nasledujúcej časti stránky.

Zarovnanie obrázka

Tu si vyberiete smer, ktorým sa bude váš obrázok v stĺpci vznášať. Obrázok môžete pohybovať vľavo, vpravo alebo v strede.

Obrázok v mobile vždy vycentrujte

Malé obrázky sú často na oku príjemnejšie pre mobilné zariadenia, keď sú sústredené. Keď stĺpce zlyhajú, obrázky zarovnané doľava alebo doprava v menších stĺpcoch budú pri zlyhaní stĺpcov osirelé a dosiahnu 100% šírku. Povolenie tohto stĺpca s vynútenými obrázkami na zarovnanie do stredu stĺpca v mobilných zariadeniach bez ovplyvnenia zarovnania obrázkov na počítačoch.

Použite okraj

Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.

Farba hranice

Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.

Šírka hranice

V predvolenom nastavení sú hranice široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporované vlastné merné jednotky, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napríklad em, vh, vw atď.

Štýl hraníc

Okraje podporujú osem rôznych štýlov: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, prekrytie a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.

Maximálna šírka obrázka

Predvolene je maximálna šírka obrázka nastavená na 100%. To znamená, že obrázok sa bude zobrazovať v jeho prirodzenej šírke, pokiaľ šírka obrázka nepresahuje šírku nadradeného stĺpca. V takom prípade bude obrázok obmedzený na 100% šírky stĺpca. Ak chcete ďalej obmedziť maximálnu šírku obrázka, môžete to urobiť tak, že tu zadáte požadovanú hodnotu maximálnej šírky. Napríklad hodnota 50% by obmedzila šírku obrázka na 50% šírky nadradeného stĺpca.

Vynúť celú šírku

V predvolenom nastavení sa obrázky zobrazujú v pôvodnej šírke. Povolením tejto možnosti sa však môžete rozhodnúť vynútiť, aby obrázok preklenul celú šírku 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.

Rozšírené možnosti obrazové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.

sekcia rozšírený modul image.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.

animácie

V tejto rozbaľovacej ponuke môžete určiť animáciu lenivého načítania obrázka. Môžete si zvoliť, či sa má váš obrázok zobrazovať sprava, zľava, zdola alebo zhora.

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.

Alternatívny textový obrázok

Alternatívny text poskytuje všetky potrebné informácie, ak sa obrázok nenačíta, nezobrazuje správne alebo v inej situácii, keď ho užívateľ nevidí. Umožňuje tiež načítanie a rozpoznávanie obrázkov vyhľadávacími nástrojmi.

[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi