Zdieľanie zbierky obrázkov v aplikácii Divi je vždy skvelý spôsob, ako vizuálne zaujať používateľov vašim obsahom. Modul Divi's Gallery vám umožňuje vytvárať a organizovať galérie kdekoľvek na vašom webe. Modul galérie v aplikácii Divi Builder je k dispozícii vo formáte mriežky a posúvača a podporuje veľké galérie s stránkovaním.

Ako pridať modul galérie na svoju stránku

Pred pridaním modulu galérie na svoju stránku 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 zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju 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. Máme skvelé návody na používanie prvkov lignes a sekcie od Divi.

Vyhľadajte modul galérie v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné prehľadávať, čo znamená, že môžete tiež napísať slovo „galéria“ a potom kliknúť na kláves Enter, aby ste automaticky našli a pridali modul galérie! 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 použitia: Pridanie galérie obrázkov na celú šírku na prezentáciu fotografie.

Pridanie galérie na stránku s fotografiami je skvelý spôsob podporovať svoju prácu a zvýšiť svoju dôveryhodnosť u klientov. V tomto príklade vám ukážem, ako môžete použiť modul galérie na pridanie galérie obrázkov s rozložením mriežky, ktorá pokrýva celú šírku stránky. Obrázky medzi sebou nemajú medzeru, čo im dáva praktickú a estetickú prezentáciu.

A nezabúdajme, že každý obrázok otvorí vyskakovacie okno na prechádzanie väčších verzií obrázkov v galérii.

Pomocou programu Visual Builder pridajte do sekcie hlavičky novú sekciu s riadkom na celú šírku alebo na celú šírku (1 stĺpec). Potom do riadku pridajte modul Galéria.

Aktualizujte nastavenia modulu Galéria takto:

Možnosti obsahu

Obrázky galérie: Kliknite na aktualizovanú galériu a vyberte obrázky, ktoré chcete zahrnúť do galérie. Počet obrázkov: 12 Zobraziť názov a titulok: NIE Zobraziť stránkovanie: NIE

Možnosti návrhu

Rozloženie: Mriežka Orientácia miniatúry: Na šírku Ikona zväčšenia Farba: #ffffff Farba vznášania sa vznášaním: rgba (0,0,0,0.48) Výber ikony umiestnenia kurzora: predvolené

Uložte nastavenia

Teraz už zostáva len zbaviť sa všetkého priestoru okolo obrázkov. Vráťte sa späť a vyberte nastavenia riadkov. Na karte Návrh aktualizujte nasledujúce položky:

Zmenšiť tento riadok na celú šírku: ÁNO
Použite vlastnú šírku odkvapov: ÁNO
Šírka odkvapov: 1

Je dôležité mať na pamäti, že číselná hodnota "1" pre šírku odkvapu je skutočne nulová (vôbec žiadna).

Uložte nastavenia

A je to!

Možnosti obsahu modulu Galéria

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.

Obrázky galérie

Kliknite na tlačidlo Aktualizovať deň galérie spustíte multimediálnu knižnicu WordPress, kde si môžete vybrať obrázky, ktoré chcete zobraziť v galérii.

Počet obrázkov

Nastavte počet obrázkov, ktoré sa majú zobraziť na stránku. Ak je vo vašej galérii zahrnutých viac obrázkov, ako je povolené na každej stránke, pod obrázkami sa zobrazí stránkovanie.

Zobraziť názov a nadpis:

Ak bol pridaný názov alebo titulok obrázka, zobrazia sa pod obrázkom v galérii. Ak chcete tieto textové prvky zakázať, môžete to urobiť pomocou tejto možnosti.

Zobraziť stránkovanie

Ak je vo vašej galérii zahrnutých viac obrázkov, ako je povolené na každej stránke, pod obrázkami sa zobrazí stránkovanie. Ak chcete stránkovanie odstrániť, môžete toto nastavenie vypnúť.

Š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 galérie

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

dispozície

Galérie sa predvolene zobrazujú ako mriežka obrázkov. Môžete sa tiež rozhodnúť zobraziť svoju galériu ako posúvač obrázkov.

Orientácia miniatúr

Môžete si zvoliť, či chcete mať obrázky z galérie na výšku alebo na šírku. Ak zmeníte režim, bude pravdepodobne potrebné regenerujte svoje miniatúry .

Farebná ikona priblíženia

Keď umiestnite kurzor myši na položku v priečinku Galéria, zobrazí sa ikona prekrytia. Farbu použitú z tejto ikony môžete upraviť pomocou výberu farieb v tomto nastavení.

Farba prekrytia kurzora

Keď umiestnite kurzor myši na položku v priečinku Galéria, v hornej časti obrázka a pod textom a ikonou názvu portfólia sa zobrazí farba prekrytia. Štandardne sa používa polopriehľadná biela farba. Ak chcete použiť inú farbu, môžete farbu upraviť pomocou výberu farieb v tomto nastavení

Ikona výberu preletu (umiestnením kurzora myši)

Tu si môžete zvoliť vlastnú ikonu, ktorá sa má zobraziť, keď sa návštevník vznáša nad položkami galérie v module.

Farba textu

Tu môžete zvoliť, či má byť text svetlý alebo tmavý. Ak pracujete na tmavom pozadí, text by mal byť svetlý. Ak je vaše pozadie svetlé, text by mal byť tmavý.

Písmo názvu

Písmo textu nadpisu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma nadpisu

Tu môžete upraviť veľkosť textu nadpisu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu titulu

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu svojho nadpisu, zvoľte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozmiestnenie hlavných písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte nadpisu, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška riadku názvu

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu nadpisu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Legenda písmo

Písmo textu titulkov môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma legendy

Tu môžete upraviť veľkosť textu titulkov. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu legendy

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu titulkov, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Medzery medzi písmenami legendy

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte titulku, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška riadku legendy

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu titulkov. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo zadajte požadovanú veľkosť medzery do vstupného poľa, ktoré sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

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ú okraje š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 ohraničenia

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.

Rozšírené možnosti modulu galérie

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.

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.

[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