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í.
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.
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.
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.
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.
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
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
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).
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!
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.
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ť.
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.
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
- 5 webové stránky pre použitie v hoteli Divi tému
- Ako pridať text na produktoch Divi WooCommerce
- Ako zmeniť farbu ponuky medzi stránkami Divi
- Ako si prispôsobiť mriežky blogu s Divi
- Ako používať role Divi editor na WordPress
- Ako vytvoriť posuvník Divi na celej obrazovke
- Ako zmeniť farbu ponúk medzi stránkami Divi
- Funkcie, ktoré pravdepodobne neviete o Divi
- Ako používať Divi Builder na WordPress
- Ako používať modul posúvania videa Divi
- Ako používať modul Divi Builder Flip
- Ako pridať modul posudkov na Divi Builder
- Ako používať textový modul Divi
- Ako vytvoriť posúvač na Divi
- Ako upraviť rolu používateľa Divi
- Ako používať modul Divi Social Media
- Ako používať modul obchodu na tému WordPress Divi
- Ako používať modul bočného panela Divi
- Ako používať modul tabuľky cien Divi
- Ako používať titulný modul publikácií Divi
- Ako pridať video modul Divi
- Ako používať navigačný modul článku
- Ako používať vyhľadávací modul Divi
- Ako používať modul peňaľenky Divi
- Ako používať osobný modul na nástroji Divi Builder
- Ako používať modul peňaženky s filtrom Divi
- Ako používať posuvný modul s plnou šírkou
- Ako používať modul obrazu Divi Builder
- Ako používať navigačný modul v celej šírke nástroja Divi Builder
- Ako používať modul galérie obrázkov
- Ako používať modul kariet Divi Builder s plnou šírkou
- Ako používať portálový modul Divi s plnou šírkou
- Ako používať modul záhlavia Divi s plnou šírkou
- Ako používať počítací modul Divi
- Ako používať posúvač článkov v aplikácii Divi Builder
- Ako používať modul Divi Email Optin