Divi bemutató: A képmodul használata a Divi Builder-en

még Blair Jersyer | Divi

A Divi megkönnyíti a képek bárhol hozzáadását a blogod. Minden kép támogatja a progresszív betöltést, és 4 különböző animációs stílust tartalmaz, amelyek szórakoztatóvá és vonzóvá teszik a navigációt a webhelyen. A képmodulok elhelyezhetők bármely Ön által létrehozott oszlopban, és méretüket a rendszer a méretükhöz igazítja.

képmodul divi.png

Hogyan vehet fel képmodult a Divi-ból?

Mielőtt képmodult 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 aktiválta a Visual Builder programot, a szürke (+) gombra kattintva új modult adhat 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.

divi modul image.png

Keresse meg a képmodult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modok listája kereshető, ami azt jelenti, hogy beírhatja a "image" szót is, majd az Enter gombra kattintva automatikusan megtalálja és hozzáadja a kép modot! 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: Átfedő képek hozzáadása a szolgáltatások illusztrálásához a szolgáltatások oldalon

A képmodul használatának számtalan módja van. Ebben a példában megmutatom, hogyan lehet képeket hozzáadni egy kisvállalkozás webhelyének szolgáltatási oldalához. Itt adom hozzá a képeket. Minden piros kör egy képet ábrázol.

adj hozzá egy modul képet divi builder.jpg

Mivel a kép hozzáadása egy oldalhoz meglehetősen egyszerű és egyértelmű folyamat, néhány egyéni stílust fogok hozzáadni a képek elhelyezéséhez, hogy átfedjék egymást, így halmozott hatást keltenek.

Kezdjük.

Használja a vizuális készítőt egy szabványos szakasz hozzáadásához 1/4 1/4 1/2 elrendezéssel. Ezután adjon hozzá egy szövegmodult a sor jobb oldali oszlopához. Írja be a szolgáltatás fejlécét és leírását.

Ezután adjon hozzá egy képmodult a bal szélső 1/4 oszlophoz.

add kép divi builder.png

Frissítse az Image modul beállításait az alábbiak szerint:

Tartalom opciók

Kép URL: [írja be az URL-t vagy töltse le a képet, amelynek méretei 500 × 625]

Tervezési lehetőségek

Egyéni margó: bal -60px

Options avancées

Animáció: Balról jobbra

animáció divi image.png

A beállítások mentése

Vegyen fel egy másik képmodult a második 1/4 oszlopba (vagy a középső oszlopba), és frissítse a képbeállításokat az alábbiak szerint:

Tartalom opciók

Kép URL: [írja be az URL-t vagy töltse le a képet, amelynek méretei 500 × 625]

Tervezési lehetőségek

Egyéni margó: felső 100px, -60px balra

Options avancées

Animáció: Jobbról balra

átfedő kép divi.png

A beállítások mentése

Ez gondoskodik az első szakaszról. Most a következő szolgáltatási szakaszhoz másolhatjuk azt a részt, amelyet az első szolgáltatás szakaszhoz hoztunk létre. A szakasz duplikálása után állítsa az oszlop szerkezetét 1/2 1/4 1/4 oszlop elrendezésre (az előzővel ellentétben).

válasszon egy divi.jpg szakaszt

Ezután húzza a szövegmodult a fejléccel és a szolgáltatás leírásával a bal szélső 1/2 oszlopba. Ügyeljen arra, hogy csúsztassa a két képmodult minden 1/4 oszlop kitöltéséhez (most a jobb oldalon).

Mivel a képmodulok duplikátumok, feltöltenünk kell az új képeket az adott szolgáltatási szakaszhoz. Ezenkívül a modulok mindig rendelkeznek egyedi margók beállításokkal, például az első két képmodul létrehozásával. Változtassunk ezen.

A jobb oldali 1 / 4 oszlopban található Image modullal kezdve frissítse a következő képbeállításokat:

Tartalom opciók

Kép URL: [írja be az URL-t vagy töltse le a képet, amelynek méretei 500 × 625]

Tervezési lehetőségek

Egyéni margó: -60px bal (csak)

Speciális lap

Animáció: Jobbról balra

Végül frissítse az 1/4 középső oszlop képmodul képbeállításait a következőkkel:

Tartalom opciók

Kép URL: [írja be az URL-t vagy töltse le a képet, amelynek méretei 500 × 625]

Tervezési lehetőségek

Egyéni margó: 100px fel, -60px jobbra

Speciális lap

Animáció: Balról jobbra

A beállítások mentése

Most nézd meg az oldalt!

a szolgáltatás oldal divi.jpg példája

Képmodul tartalmának 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.

szakasz kép divi area content.png

Kép URL-je

Helyezzen ide egy érvényes kép URL-t, vagy válasszon / töltsön fel egy képet a WordPress médiatár segítségével. A képek mindig balra jelennek meg oszlopaikban, és lefedik az oszlop teljes szélességét. A kép azonban soha nem lesz nagyobb, mint az eredeti mérete. A kép magasságát az eredeti kép méretaránya határozza meg.

Nyissa meg a nézőt

Itt kiválaszthatja, hogy a kép megnyílik-e a megtekintőben, amikor rákattint. Ha ez az opció engedélyezve van, akkor a kép a maximális méretre "nagyít", amikor egy modális ablakban kattint. Remek funkció a pénztárcák számára.

Link URL

Helyezzen egy érvényes web-URL-t ebbe a mezőbe, hogy a képből link legyen. Ha ezt a mezőt üresen hagyja, a kép csak statikus elemként marad.

Nyitó URL

Itt választhatja ki, hogy a link új ablakban nyílik-e meg.

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.

Képmodul-tervezési lehetőségek

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.

opció tervezési modul kép divi.png

Képfedvény

Ha ez az opció engedélyezve van, akkor egy szín és egy átfedés ikon jelenik meg, amikor a látogató lebeg a kép fölött.

Színes ikon fedvény

Itt beállíthatja az átfedés ikonjának egyéni színét

Fedőfedeles szín

Itt meghatározhatja az átfedés egyedi színét.

Repülési ikon

Itt meghatározhat egy egyedi ikont az átfedéshez.

Távolítsa el a helyet a kép alatt

Ez az opció csak akkor érinti a képeket, ha azok az oszlop utolsó moduljai. Ha ez az opció engedélyezve van, a kép alja és a következő szakasz közötti távolság eltűnik, így a kép az oldal következő szakaszának tetejét keretezheti.

Kép igazítása

Itt választhatja ki a kép lebegésének irányát az oszlopban. Lebegtetheti a képet balra, jobbra, vagy középen tarthatja.

A képet mindig középre helyezze a mobilra

Gyakran a kicsi képek kellemesebbé teszik a szemet a mobileszközökön, ha középre vannak állítva. Az oszlopok sikertelensége esetén a kisebb oszlopokban balra vagy jobbra igazított képek árván maradnak, amikor az oszlopok meghibásodnak és elérik a 100% -os szélességet. Ennek az erőltetett képekkel ellátott oszlopnak az oszlop közepéhez történő igazítása a mobilon anélkül, hogy befolyásolná a kép igazítását az asztali számítógépeken.

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.

Határtípus

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.

A kép maximális szélessége

Alapértelmezés szerint a maximális képszélesség 100%. Ez azt jelenti, hogy a kép természetes szélességében jelenik meg, hacsak a kép szélessége nem haladja meg a szülőoszlop szélességét, ebben az esetben a kép az oszlopszélesség 100% -ára korlátozódik. Ha tovább szeretné korlátozni a kép maximális szélességét, akkor ezt megteheti úgy, hogy ide írja be a kívánt maximális szélesség értéket. Például egy 50% -os érték korlátozná a kép szélességét a szülőoszlop szélességének 50% -ára.

Teljes szélességi erő

Alapértelmezés szerint a képek natív szélességükön jelennek meg. Ennek a lehetőségnek az engedélyezésével választhatja a kép kényszerítését a szülőoszlop teljes szélességére.

Egyéni margó

A margó a modul külső részén, a modul és a következő elem felett, alatt, illetve annak bal és jobb oldalán hozzáadott hely. Hozzáadhat egyedi margóértékeket a modul négy oldalához. Az egyéni margó eltávolításához távolítsa el a hozzáadott értéket a beviteli mezőből. Alapértelmezés szerint ezek az értékek pixelben vannak megadva, de a beviteli mezőkbe egyéni mértékegységeket adhat meg.

Speciális képmodul-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.

szakasz speciális modul kép.png

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énkség

Ebben a legördülő menüben adhatja meg a kép lusta betöltő animációját. Választhatja, hogy a kép jobb, bal, alul vagy felül jelenik meg.

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.

Alternatív képszöveg

Az alt szöveg minden szükséges információt megad, ha a kép nem töltődik be, nem megfelelően jelenik meg, vagy bármilyen más helyzetben, amikor a felhasználó nem látja a képet. Ez lehetővé teszi a kép elolvasását és a keresőmotorok általi felismerését is.

[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

Üzenet elküldése

Az e-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Ez az oldal Akismet-et használ a nemkívánatos csökkentés érdekében. További információ a megjegyzések adatainak használatáról.