Képgyűjtemény megosztása a Divi-n mindig nagyszerű módja a felhasználók vizuális bevonásának a tartalmával. A Divi Galéria modulja lehetővé teszi galériák létrehozását és rendszerezését a webhely bárhol. A Divi Builder galériamodulja rács és csúszka formátumban érhető el, és támogatja a nagy galéria lapozást.

galéria példa divi.png

Hogyan adjunk hozzá galéria modult az oldalhoz

Mielőtt galéria modult adna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve van a webhelyére, észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is Használja a Visual Builder alkalmazást amikor az előtérben böngészi a webhelyet, ha csatlakozik a WordPress irányítópultjához.

divi builder

Miután belépett a Visual Builder programba, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új modulok csak sorok belsejében adhatók hozzá. Ha új oldalt indít, ne felejtse el először hozzáadni egy sort az oldalához. Remek oktatóanyagok vannak a lignes és szakaszok írta Divi.

képgaléria divi.png

Keresse meg a galéria modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "galéria" szót is, majd az Enter gombra kattintva automatikusan megtalálja és hozzáadja a galéria modult! A modul hozzáadása után a modul opcióinak listája fogadja. Ezek az opciók három fő csoportra vannak felosztva: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: Teljes szélességű képgaléria hozzáadása a fénykép bemutatásához.

Egy galéria hozzáadása a fényképezési oldalához nagyszerű módja annak elősegítése munkáját, és növelje hitelességét az ügyfelek előtt. Ebben a példában megmutatom, hogyan használhatja a galéria modult az oldal teljes szélességén átívelő rácselrendezésű képgaléria hozzáadására. A képek között nincs térköz, ami praktikus és esztétikus megjelenést ad.

képgaléria létrehozása divi.jpg

És ne felejtsük el, hogy minden kép felugró ablakot nyit a galéria képeinek nagyobb változatai között.

lightbox divi gallery.gif

A Visual Builder használatával adjon hozzá egy új részt a fejléc szakasz alá teljes szélességű vagy teljes szélességű (1 oszlopos) sorral. Ezután adja hozzá a Galéria modult a sorhoz.

Frissítse a Galéria modul beállításait az alábbiak szerint:

Tartalom opciók

Galéria képek: Kattintson a frissített galériára, és válassza ki azokat a képeket, amelyeket fel szeretne venni a galériába. Képek száma: 12 Megjeleníti a címet és a feliratot: NINCS Lapozás: NEM

Tervezési lehetőségek

Elrendezés: Rács Miniatűr tájolása: Fekvő Nagyítás ikon Szín: #ffffff Az egérmutató színe: egérmutató: rgba (0,0,0,0.48) Az egérmutató ikonválasztó: alap

divi wordpress tutorial content section.png

A beállítások mentése

Most már csak annyi van hátra, hogy megszabaduljon a képek körüli összes helytől. Menjen vissza, és válassza ki a sorbeállításokat. A Tervezés lapon frissítse a következőket:

Tegye ezt a sort teljes szélességűvé: IGEN
Használja az ereszcsatorna egyedi szélességét: IGEN
Ereszcsatorna szélessége: 1

Fontos megjegyezni, hogy az ereszcsatorna szélességének "1" számértéke valóban nulla (szélessége egyáltalán nincs).

a goutière.png rés konfigurációja

A beállítások mentése

Ez az!

A Galéria modul tartalmi beállításai

A Tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Minden, ami irányít mi jelenik meg a modulban, mindig megtalálható ezen a lapon.

divi modul galery content.png

Képek a galériából

Kattintson a Frissítés gombra nap a galéria elindítja a WordPress multimédia könyvtárat, ahol kiválaszthatja a galériában megjeleníteni kívánt képeket.

Képek száma

Állítsa be az oldalanként megjelenítendő képek számát. Ha az egyes oldalakon megengedettnél több kép szerepel a galériában, a lapozás a képek alatt jelenik meg.

Cím és felirat megjelenítése:

Ha képcímet vagy feliratot adtak hozzá, akkor azok a kép alatt jelennek meg a galériában. Ha le szeretné tiltani ezeket a szöveges elemeket, akkor ezt az opcióval teheti meg.

A lapozás megtekintése

Ha az egyes oldalakon megengedettnél több kép szerepel a galériában, a lapozás a képek alatt jelenik meg. Ha el akarja távolítani a lapozást, kikapcsolhatja ezt a beállítást.

Rendszergazda címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Galéria modulok tervezési lehetőségei

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modulnak hosszú a tervezési beállítások listája, amelyek segítségével bármit megváltoztathat.

galéria modul zóna design.png

Diszpozíció

Alapértelmezés szerint a galériák képrácsként jelennek meg. Választhatja azt is, hogy galériáját képcsúszkaként jelenítse meg.

Thumbnail orientáció

Kiválaszthatja, hogy a galéria képei álló vagy fekvő formátumban legyenek. Ha megváltoztatja az üzemmódot, szükség lehet rá regenerálja a miniatűröket .

Zoom színes ikon

Amikor a Galéria panelen egy elem fölé viszi az egérmutatót, megjelenik egy átfedés ikon. Az ebben az ikonban használt színt a beállítás színválasztójával állíthatja be.

Mutasson az overlay színére

Amikor a Galéria panelen egy elem fölé viszi az egérmutatót, a kép tetején, valamint a portfólió címének szövege és ikonja alatt megjelenik egy fedőszín. Alapértelmezés szerint félig átlátszó fehér színt használnak. Ha más színt szeretne használni, akkor a színválasztó segítségével állíthatja be a színt ebben a beállításban

A repülésválasztó ikon (lebeg)

Itt kiválaszthat egy egyéni ikont, amelyet megjelenít, amikor a látogató a modulban lévő galériaelemek fölé viszi az egeret.

Szöveg színe

Itt kiválaszthatja, hogy szövege világos vagy sötét legyen. Ha sötét háttér előtt dolgozik, akkor a szövege világos legyen. Ha a háttere világos, akkor a szövegének sötétnek kell lennie.

Cím betűtípus

A cím szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

A cím betűmérete

Itt állíthatja be a cím szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A cím szövegszíne

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a cím szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Címcímek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a cím szövegében az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A címsor magassága

A vonalvastagság befolyásolja a cím szövegének minden sora közötti teret. Ha növelni szeretné az egyes sorok közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a beviteli mezőbe a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Jelmagyarázat betűtípusa

A felirat szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts fejleszt. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Jelmagyarázat betűmérete

Itt állíthatja be a felirat szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A szöveg szövege

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a felirat szövegének színét, ezzel a lehetőséggel válassza ki a kívánt színt a színválasztóból.

betűtávolság legendák két.png

A legenda betűinek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a felirat szövegében az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A legenda vonalának magassága

A vonalvastagság befolyásolja a feliratok minden sora közötti teret a kurzortól jobbra. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Használja a határt

Ennek az opciónak az engedélyezésével szegély kerül a modul köré. Ez a határ testreszabható a következő feltételes paraméterekkel.

A határ színe

Ez az opció befolyásolja a szegély színét. Válasszon ki egy egyéni színt a színválasztóból, hogy alkalmazza a határára.

A határ szélessége

Alapértelmezés szerint a szegélyek 1 pixel szélesek. Növelheti ezt az értéket a tartomány csúszkájának húzásával vagy egy egyéni érték megadásával a csúszka jobb oldalán található beviteli mezőben. Támogatott egyedi mértékegységek, ami azt jelenti, hogy megváltoztathatja az alapértelmezett egységet "px" értékről valami másra, például em, vh, vw stb.

Border Stílus

A szegélyek nyolc különböző stílust támogatnak: szilárd, pontozott, pöttyös, dupla, barázda, csúcs, átfedés és kezdet. Válassza ki a kívánt stílust a legördülő menüből, hogy alkalmazza azt a szegélyén.

Speciális galériamodul-beállítások

A Haladó lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS és HTML attribútumokat. Itt alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

a divi.png galéria modul előzetes lehetősége

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS osztályokat. Egy CSS osztály felhasználható egyedi CSS stílus készítéséhez. Több osztályt is felvehet, szóközzel elválasztva. Ezeket az osztályokat fel lehet használni a Divi gyermek témában, vagy az egyéni CSS stíluslapban, amelyet hozzáad az oldalához vagy a webhelyéhez a Divi téma beállításai vagy a Divi Builder oldal beállításai segítségével.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS ​​bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /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”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Egyéb Divi oktatóanyagok