A divi magyarul [RÉSZLETES ÚTMUTATÓ]

Szerző: | Webdesign, Wordpress

A Divi egy prémium, azaz fizetős WordPress theme (sablon) amit az Elegantthemes.com fejleszt. 2014-ben ismertem meg a Divit, azóta minden saját, a netjet.hu projekthez tartozó weboldalaimat ezzel csinálom, és ha kivitelezést rendelsz a netjet.hu-n, az is a Divivel fog készülni. Ugyanez a trend világszinten is megvan, a Divi a legnépszerűbb prémium WP sablon. Ahhoz, hogy lenyűgöző weboldalakat tudj vele csinálni, álmodból felkeltve is fújnod kell az alapokat. Ebben segít ez a cikk:

Ebből a cikkből megismered a Divi sablon alapjait, megtanulod használni, beállítani, megtudod milyen modul mit és hogyan csinál. Ez a tartalomjegyzék segít eligazodni.

Megvásárlás, telepítés, API beállítás

Irány az Elegantthemes.com, keresd meg, hogy “Join to download”, két csomag van: vagy évente perkálsz 89 USD-d, vagy egyszeri 249 USD-vel egy életre letudod a fizetnivalót. Akármelyik csomagot kéred, ugyanazt kapod: A Divi theme és az Elegantthemes.com fizetős pluginjainak korlátlan használatát.

Bármennyi weboldalhoz használhatod.

Ez elképesztő nagy előny az olyan theme-ekhez képest, amik lehet, hogy csak 59 dolcsiba kerülnek, de meg kell venned minden egyes weboldalhoz.

divi_megrendeles

Kattints a Join To Download-ra a Divi megrendeléséhez

Ha az éves díjat nem fizeted időben, vagy tegyük fel, le akarod mondani az előfizetésed, (nem kell tulajdonképpen „befizetni” mert a kártyádról automatikusan levonja) akkor sem szűnik meg működni a DIVI, vagy bármelyik másik pluginjuk, theme-jük, csak épp nem kapod a frissítéseket. Ha rendezed a díjat, akkor újra megkapod a frissítéseket. Egyszerű rendszer.

Év közben rengeteg fejlesztés, újdonság van. Az elengant themes-nek a Divi-n kívül van még egy nagyon jó sablonja, neve EXTRA, ezzel portált tudsz építeni. Ugyanolyan mint a DIVI, csak jobban ki vagy hegyezve arra, hogy a cikkeidet magazin szerű elrendezésben tudd megmutatni.

Ha megvetted, letöltöd, és a WordPressed megjelenés, sablonok menüjében feltöltöd a ZIP-et, és bekapcsolod a sablont.

Fontos: Ahhoz, hogy kapd a frissítéseket, be kell illesztened az API kódodat.

Ehhez először lépj be a login menüpontban, és az account (fiókom) menüben kattints az Your API Key menüpontra másold ki az API kódot (Your Personal API Key)

divi_api_kulcs

Itt találod a Divihez az API kulcsodat

Ha ez megvan, vissza a wordpressed adminjába, Divi menüpont, majd Theme Setting és ott az Updates fület keresd, itt bepögyögöd az eleganthemes.com felhasználóneved, amit vásárláskor választottál, és beilleszted az előbb kontrolcézett API kódot, és nyilván elmented a módosításokat. Ez az API „visszajelez” az elegantthemes.com-nak, hogy „küldheti” a frissítésket. Ennyi az egész.

divi_api_updates

A Divi sablon beállítások “updates”-nél illeszted be a userneved és az APIdat.

Hogyan készítesz weboldalt a divi-vel?

Az ideális menet az lenne, hogy előbb megírod a szöveges tartalmat (sales szöveget, feliratkoztató oldal szövegét etc.) és csak ez után kezded el azt próbálgatni, hogy mit tudsz vele designolni, hogyan néz ki ilyen van olyan háttérrel, betűtípussal, gombszínnel az oldalad.

De ezt nem tudod úgysem ilyen tankönyvszerű szabályossággal megcsinálni, mert amikor a megveszed a divi-t, csak ez jár a fejedben: „Milyen állati jó designokat láttam az elegantthemes.com oldalán, én is ilyet akarok.”

Ezért szeretnéd azonnal kipróbálni mit tud a divi, és ez rendben is van így, de arra készülj fel, hogy nem elsőre lesz olyan az általad készített oldal, mint amilyet a katalógusban látsz. Az első dolog, hogy az alapokkal tisztában légy. Ha nem azon kell gondolkoznod, hogy mit hol állítasz be, nagyobb magabiztossággal csinálsz weboldalakat.

A DIVI szerkesztőjét oldalhoz (page) és blogbejegyzéshez (post) használhatod.

Hozz létre egy új oldalt (WP admin menüben: Oldalak –> Új hozzáadása) , hogy lássuk mit tud a divi.

Hogyan tűnik el az oldalsáv egy DIVI-vel készített oldalon?

Az első szembetűnő különbség egy DIVI-s és egy „hagyományos” weboldal között, hogy a divi-vel készült wordpress oldal nem a „fejléc – tartalom – oldalsáv” elrendezést követi. A Divi-s oldal teljes szélességű blokkokból áll össze, és nincs rajta oldalsáv a szokásos WP widgetekkel. (De ha mégis ilyet akarsz, ezt is el lehet érni vele, de most nem ez a lényeg).

A leggyakoribb kérdés, hogy „hogyan tüntetem el az oldalsávot?”

Több megoldás is van: Divi oldalsáv kikapcsolás #1

Ha bekapcsolod azt, hogy „Divi szerkesztő használata” akkor eltűnik az oldalsáv. Ez hozza elő a szakaszokat, sorokat, modulokat. Ha egyszer bekapcsoltad a divi szerkesztőt, ne kapcsold vissza hagyományos szerkesztőre, mert akkor a divi szerkesztővel felvitt tartalom eltűnik. Ezt inkább ne próbáld ki.

Viszont ha már korábban beírtál hagyományos szerkesztővel valamilyen szöveget, képet, és úgy kapcsolod be a divi szerkesztőt, akkor ez a tartalom megmarad. A divi beteszi egy normál szakaszba, egy szövegmodulba. A szövegmodul ugyanaz, mint a wp szövegszerkesztője.

Divi oldalsáv kikapcsolás #2

Ha nem akarod a divi szerkesztőt használni, akkor a jobb felső sarokban látod az oldalsáv beállításait: Lehet bal oldali, jobb oldali az oldalsáv, vagy ha a teljes szélesség opciót választod, akkor nem lesz oldalsáv. (De ebben az utóbbi esetben divi szerkesztőd sem lesz)

Lényeg: Gyakorlati szempontból csak annak van értelme, ha bekapcsolod a divi szerkesztőt.

divi_szerkeszto_oldalsav

Divi szerkesztő BE, oldalsáv KI

Mi van, ha nem kell se menü se lábléc?

Az oldal tetején van a menüsor az oldal alján van a lábléc. Ezt az alapértelmezést meg tudod változtatni úgy, hogy az oldal szerkesztésénél a bal oldali sávban, az „oldal sablon” legördülő opciók közül nem az „alapértelmezett” hanem a „Blank Page” sablont választod. Sales oldalakhoz, feliratkoztató oldalakhoz ajánlott a menüsor és lábléc nélküli sablon.

divi_sablonminta

Blank Page = Se menü, se lábléc

Hol állítod be a diviben, hogy mi legyen a logó?

A logó megjelenési opcióit a testreszabásban állítod be, de magát a logó képfájlt a beállításokban töltöd fel. Ez kissé ellentmondásos, de könnyű kezelni:

Logó feltöltése a diviben:

Wp admin – Divi – Sablon beállítások – Általános fül:

Logo és favicon feltöltése

A logód a menüsorodban lesz, a favicon pedig az a kis ikon, amit böngésződben a böngészőfül elején látsz. A logóhoz is, faviconhoz is használj négyzet alakú, 512 x 512 px-es képet, lehetőleg átlátszó png-t. A logónál legyen világos a grafikai elem, a faviconnál sötét. Fehérrel, feketével nem lehet melléfogni. Ezért a leegyszerűsítésért a grafikusok, webdesignerek gondolkodás nélkül felkoncolnának, de a netjet.hu célja az, hogy te, nyájas olvasó, minél hamarabb elkészülj a weboldaladdal, és minél gyorsabban elkezdjen neked vásárolókat szerezni. Mindent ennek a szempontnak rendelek alá.

divi_logo_beallitas

Itt álljtod be a logót és a favicont: Divi > Theme settings

Logo megjelenésének beállítása a divi-ben:

Irány a téma testreszabás menüpont. Itt élőben szerkeszted a megjelenési opciókat, valamit beállítasz, azonnal látod az eredményét.

Fejléc és navigáció – Fejléc formátum:

Itt állítod be, hogyan igazodjon a menüsorodhoz a logó: lehet alapértelmezett, lehet középre igazított, lehet középre igazított logo, lehet beúszó effekttel megjelenített, és lehet teljes képernyős a menü. Ugyanitt választhatod ki, hogy szeretnél-e függőleges navigációt.

A leggyakoribb opció az alapértelmezett, amikor a logód a bal oldalon van, és azt követi a menüsor. A középre igazított, és a középre igazított logo akkor mutat jól, ha kevés, 4-5 menüpontod van, és a menüpontok rövid (4-8 betűs) szavak. Próbálgasd, melyik lesz jó neked.

A lényeg, hogy a menüsor legyen szem előtt, de se méretben, se dizájnban nem vonja el a figyelmet a fő üzenetedről, a sales page-edről.

Logó méret beállítása a divi-ben

Ugyanitt, a fejléc és navigáció menüben állítod be a logó méretét, vagy akár el is rejtheted a logót.

A menüsorodnak 2 állapota van: gördítés előtt és után: Az elsődleges menüsor az, amit az oldal tetején látsz, mielőtt gördítenél. A másodlagos menüsor van az elsődleges felett, ennek nincs köze a logóhoz.

A fix navigáció az, ami az elsődleges menüsorból lesz, amikor elkezdesz görgetni, ez ott marad fixen az oldal tetején. Az elsődlegesben és a fixben megadhatod milyen magas legyen a logó. Úgy kell beállítani, hogy az elsődlegesben magasabb legyen, pl: 80 px., a másodlagosban meg pl: 50 px. Amikor elkezded görgetni az oldalt, a logó így szépen kisebb lesz, és “bemozdul” a helyére. Próbálgasd, jól néz ki!

divi_logo_megjelenes

Logo megjelenítésének beállítás a Divi sablonban

Miért nem számít a logó értékesítési szempontból?

[Kis marketing kiegészítés a logó témához]

Az utolsó dolog, ami ahhoz kell, hogy meggyőzz egy érdeklődőt, hogy nálad vásároljon az a céged logója. Teljesen mindegy mi a logód, az embereket nem fogja érdekelni. Lehet a logód, designos, metaforikus, kifejezheti a céged filozófiáját, kkv szinten nem lényeg: csak az ajánlatod az, ami a vevőt érdekli.

A logó léte marketinglélektani szempontból inkább miattad fontos. Ha most kezdesz egy projektet, most csinálod, csináltatod neki a weboldalt, akkor jó érzés lesz az oldal tetején látni a saját céged, márkád emblémáját. Ez a jó érzés visz tovább ahhoz, hogy végigvidd a projekted, hogy vevőket szerezz.

Divi testreszabás és divi beállítások. Mi a különbség?

A divi sablont két helyen is be lehet állítani. Tudni kell, mi hol van. Ha belépsz az wp adminba, a Divi menüpontban lesz a „sablon beállításai” (theme settings) és a téma testreszabása (theme costumizer)

Divi beálltások (settings)

Itt olyan általános beállítások vannak, amik alapvetően nem a megjelenésre (designra) vonatkoznak. Rengeteg opciód van, de ezek közül csak ez a néhány az, ami igazán fontos, a mindennapi használat során:

Általános fül – ezen belül is, csak ezek az igazán fontosak:

Itt állítod be a logódat és a favicont (a böngészőfülön látszó picike ikon)

Itt kapcsolhatod be a fix navigációs sávot. Ha be van kapcsolva, akkor a menüsorod az oldal tetején marad akkor is, ha görgetik az oldalt. Ezt érdemes bekapcsolni.

Google API kulcs – ha térképet akarsz megjeleníteni – lesz hozzá egy térkép modul – akkor mostmár nem lehet csak úgy betallózni a térkép helyet (pl: az üzleted, céged címe), hanem kell hozzá egy google API. Ha megvan, akkor ide kell beillesztened.

Facebook, twitter és egyéb social média ikonok megjelenítése, az a közösségi oldalaid címét is itt tudod beírni. Ha itt be van írva és be van kapcsolva, akkor a láblécben (footer) és a másodlagos menüsorban (az oldal tetején, az az elsődleges menüsor felett) megjelennek a kis ikonok, amik linkek lesznek, a közösségi oldalaidra mutatók.

divi_sablon_beallitasok

Divi Sablon Beállítások

Google Fonts alcsoportok – kapcsold be, az ékezetes betűk megjelenítése miatt kellhet.

Vissza a tetejére gomb – kapcsold be, minden oldal jobb sávjába tesz egy átlátszó, nem zavaró ikont, amire kattintva az oldal tetejére ugrik, illetve nem is ugrik, hanem finoman, de gyorsan gördül.

Finomgörgetés – Kapcsold be, szebben,folyamatosabban fog gördülni az oldal.

Egyéni CSS – a legtöbbször emiatt kell ezt az oldalt felkeresned. Ha az a design megoldás, amit kitaláltál, amit szeretnél, sehogy nem elérhető beállításokkal, akkor ide tudod pötyögni az egyéni css kódodat. Ugyanez elérhető a testreszabás menüben is, de itt kényelmesebb használni. CSS-t csak akkor írj hozzá, ha pontosan tudod mit csinálsz.

Ha valamit módosítottál, akkor nyomd meg a mentés gombot (itt nem azonnal lépnek életbe a módosítások, mint a testreszabásnál)

  • A navigation menüpontot hagyd, mert minden ami itt van, megoldható a megjelenés -> menük pontban.
  • A builder menüpont sem lényeg, az alapbeállítás az, hogy mindhárom opció be van kapcsolva (Statikus CSS-fájl generálása, Kimeneti Stílusok, Termék Bemutató). Ha ezeket bekapcsolod, akkor gyorsabb lesz az oldal betöltése. Ha a “Termékbemutató”-t bekapcsolod, tippeket fog adni a vizuális szerkesztő bekapcsolásakor.
  • Layout menü: hagyd meg az alapértelmezéseket.
  • Ads menü: Ez akkor kell, ha reklám bannereket akarsz megjeleníteni. De ki akarna ilyet? Fix reklámfelületet fix időre adni-venni a PPC hirdetések korában nem valami kurrens ötlet.
  • SEO menüpont: Ha technikai SEO-zod az oldalaidat, akkor úgyis a Yoast SEO pluginját használod. Ezzel itt nem kell foglalkozni.

Integration menüpont, ez fontos: engedélyezd a fejléc és body kódókat, mert ide kell tenni a követési kódokat. Pl.: Google Analytics, Active Campaign, etc.

Updates menüpont, ez is fontos: Ide illeszted be az elegantthemes.com felhasználónevedet és az API-dat, hogy mindig kapd az előfizetésedhez járó frissítéseket. Az ne jusson eszedbe, hogy nem fizeted ki a következő évet, mert “jó az így, ahogy van”. Frissíteni biztonsági szempontból is kötelező, meg azért is, mert folyamatosan érkeznek az új funkciók, amik egyre fejlettebbé, jobbá teszik a divit.

Divi testreszabás (costumizer)

Ha erre kattintasz (vagy elérheted front end nézetből is) akkor bejön a weboldalad kezdőlapja, és bal sávban sorakoznak az opciók. Ez egy élő szerkesztő, a legtöbbször azonnal, mentés nélkül is csinálja, amit beállítottál, és azonnal látod az eredményt is. Van, hogy ez jó, van, hogy idegesítő. Ez nem Divi specifikus dolog, ezt a wordpress csinálja (minden más theme-mel is)

sablon_testreszabas

Itt éred el a sablon testreszabása menüt

Itt is lenyűgözően sok opció van, de szerencsére itt sem kell minden használni. Azokat mutatom, fontossági sorrendben, amit a Divi több éves használata során a legfontosabbnak tapasztaltam.

Amivel itt nem kell foglalkozni:

  • Mobil stílusok
    A divi theme alapértelmezetten reszponzív, betűméreteken, térközökön kell olykor állítani, de azt az adott elem beállításainál érdemes.
  • Színsémák
    Ha megcsinálod rendesen az oldalad, úgyis egyedi színeket használt, ezzel itt ne időzz.
  • Menük és Widgetek
    A widgeteket és a menüpontokat a wp vezérlőpultról egyszerűbb kezelni.

Amik fontosak a divi testreszabás menüben:

Általános beállítások

A legtöbb alapbeállításhoz nem érdemes nyúlni, mert azok úgy vannak beállítva, hogy ha elkezded felvinni a tartalmadat, akkor szép, szellős elrendezésű átlátható weboldalt kapsz eredményül.

Pár dolog azért van, amit testre kell szabni:

Testreszabás Általános beállítások > Szerkezeti beállítások > Téma főszín. (theme accent color)

Legelőször ezt állítsd be, mert ez nagyon sok mindent meghatároz:

  • A linkek színét,
  • a widgetek címének színét,
  • az ikonok alapértelmezett színét
  • a lélécben az aktív link színét,
  • a másodlagos menüsor színét,
  • a legördülő menü vonalszínét,
  • az elsődleges menüben az aktív link színét.
divi_tema_foszin

A téma főszín (theme accent color) nagyon sok mindennek meghatározza a színét.

Válassz egy színt, és mentsd el! Általában azonnal hatályba lépnek a változtatások, de ezt itt el kell menteni. Ha megvan a mentés, utána gyere vissza a testreszabás menübe.

Honlap azonosítás

Ugyanitt, az általános beállításoknál, a honlap azonosítás menüpontban, tudod mengadni a weboldal címét és szlogenjét – de ez megvan a wp admin beállítások / általános menüpontban is.

A szerkezeti beállítások, a tipográfia és a háttér menü alapbeállításai tökéletesek úgy, ahogy vannak. Ha webdesigner vagy, csak akkor állítgasd ezeket. Egy oldal arculata nagyban a betűtípusokon, sor-, és térközökön múlik. Könnyű elrontani.

Fejléc navigáció testreszabása

Fejléc formátum: itt állítod be, hogyan nézzen ki a menüd, és hogy csak gördítésre jelenlen-e. A gördítésre megjelenő menüt az adott oldalnál is beállíthatod. A legjobb menüelrendezés az alapértelmezett.

Elsődleges, másodlagos és fix menüsor

A menüsorodnak 2 állapota van: gördítés előtt és után: Az elsődleges menüsor az, amit az oldal tetején látsz, mielőtt gördítenél. A másodlagos menüsor van az elsődleges felett, ennek nincs köze a logóhoz. A fix navigáció az, ami az elsődleges menüsorból lesz, amikor elkezdesz görgetni, ez ott marad fixen az oldal tetején.

divi_menusor

A testreszabásnál állítod be a menüsorok kinézetét

Fejléc elemek

Itt kapcsolod be a közösségi ikonok és a keresés ikon megjelenítését, itt pötyögöd be a telefonod és az emailcímed, ha azt szeretnéd, hogy ezek mindig látszódjanak a menüsorban.

Lábléc testreszabása

A láblécben úgy lesz tartalmad, hogy wordpress adminban, a megjelenés / widgetek menüben behúzol a lábléc területre egy-egy widgetet. Itt a menüben azt állítod be, hogy hány oszlop legyen a láblécben, és milyen legyen a háttere. Legyen 4 oszlopod, háttér legyen sötét színű (szürke: #222, vagy fekete: #000)

  • A láblécen belül a widgetek menüben meghatározod milyen színű legyen a betű a láblécben.
  • A lábléc elemeknél kapcsolod ki, és be a közösségi ikonokat.
  • Az alsó sáv menüpontban be tudod írni a szerzői jogaidra vonatkozó szöveget.

 

Gombok testreszabása

Ez egy fontos beállítás, mert minden gombod ilyen lesz az oldalon (a woocommerce gombok is), amit itt beállítasz. Ha szükséges, mégis felül tudod írni ezt egyes gombok esetében a szerkesztőben. Például: Van egy teljes képernyős címsorod, alatta két gomb: kosárba vagy több infót kérek. Nyilván a több infó gomb ne ugyanolyan legyen mint a kosár gomb. (Ha nincs kedved időzni vele, legalább egy ikonnal különböztesd meg őket.)

divi_gombok_beallitasa

Minden gombod úgy fog kinézni, ahogy itt beállítod.

Testreszabás ▸ Gombok ▸ Gombok stílusa

Itt mindent beállíthatsz, ami csak egy gombon lehet: betűméret, betűszín, háttér, keret, ikon.

Ha lekerekített szélű gombokat szeretnél, akkor a gomb szegély sugarat állítsd, 20 pixeles sugár már elég íves széleket ad. Úgy próbáld itt a beállításokat, hogy egy olyan oldalon hozod be a testreszabást, ahol van gomb. Olyan gombszínt válassz, ami sötét és világos háttéren is elég kontrasztos.

Testreszabás ▸ Gombok ▸ Gombok stílusa egérmutató alatt

Itt állítod be, hogy milyen legyen a gomb, ha ráviszik az egeret.

Tipp: Ha fehér gombszöveg színt szeretnél, néha előfordul, hogy hiába állítod be, hogy fehér legyen (#ffffff), mégis visszaáll az alapértelmezett kékre. Ilyenkor válassz egy a fehérhez nagyon hasonló színt, pl: #f7f7f7)

Ha megvannak a beállítások és testreszabások, akkor nézzük meg, hogyan épül fel egy oldal (vagy egy post)

Mi a szakasz (section) a sor (row) és a modul (module)?

A szakasz (section) a befoglaló elem. A szakaszban vannak a sorok (row), a sorok lehetnek egy, kettő, három, vagy négy oszloposak (column) A szakasz és a sor rendezi el a tartalmat, egymás alá, fölé, és mellé.

Egy szakaszban több sor is lehet. Egy oszlopban több modul is megfér egymás alatt. A tartalmat (szöveg, kép, videó, térkép, visszaszámláló stb) modulokból építed fel.

divi_szakasz_sor_modul

Szakasz, sor, modul a diviben

Hogyan épül fel egy szakasz, sor, modul szerkesztő felülete?

Három fül van: tartalom, tervezés és haladó. Ez a felület az évek során sokat változott, mindig egyszerűbbé, átláthatóbbá próbálták tenni a fejlesztők. Ez az egységes 3-as felosztás maradandó koncepciónak tűnik.

divi_szerkeszto_fulek

A divi szerkesztő felépítése

Tartalom

Mindig a tartalomnál állítod be a hátteret és magát a tartalmat (kép modulnál a képet, szövegnél a szöveget, videónál a videót stb stb). A háttér lehet egyszerű szín, színátmenet (gradient), kép és videó is.

Tervezés

A tervezés (design) fülön állítod be azt, hogy hogyan nézzen ki a tartalom: térközök, betűméret, képméret, videó lejátszó ikon szín stb stb. A design (tervezés) fülön természetesen mindig azokat az opciókat találod, amit az adott sor, szakasz, vagy modul tartalmának megjelenítésére vonatkozik.

Haladó

Itt egyéni CSS osztályt és azonosítót, valamint egyéni css-t adhatsz hozzá. Ezt csak akkor használd, ha tudod mit csinálsz.

Tipp: Minden szakasznál, sornál és modulnál van egy szövegmező: „admin címke”. Ezt töltsd ki szerkesztéskor, ez csak neked szól, hogy azonosítsa az adott elemet. És, hogy ránézésre tudd melyik elem micsoda. Ha felépítesz egy 20-30 szakaszos oldalt, jól jön, ha előre gondolsz erre, és nagyon bánod majd, ha nem.

Milyen divi szakaszok vannak?

A weboldalad létrehozását úgy kell kezdeni, hogy hozzáadsz egy új szakaszt.A szakasz lehet normál, teljes szélességű, vagy speciális.

Normál szakasz

A normál szakaszt szokás a legtöbbször használni. A normál szakaszhoz hozzáadsz egy sort, és azonnal eldöntheted, hogy hány oszlopos legyen. Ha ez megvan, jöhetnek bele a modulok. A normál szakasz színe a szerkesztőben kék.

divi_szakaszok

Divi szakaszok. Legtöbbször a normál szakaszt használjuk.

Teljes szélességű szakasz

A teljes szélességű szakaszba csak teljes szélességű modulokat lehet tenni, pl: teljes szélességű fejléc, vagy teljes szélességű slider. A teljes szélesség azt jelenti, hogy az elem a képernyő egyik szélétől a másikig tart, se jobb, se baloldali margó és térköz sincs. Ezt a designt normál szakasszal is elő lehet állítani úgy, hogy teljes szélességűre állítod, lenullázod a margin és a padding értékeket valamint az egyéni margó szélességet.

Tervezés közben jól jön, ha a modulokat ide-oda tudod húzogatni, és dühítő, ha nem kompatibilis a normál szakasz a teljes szélességűvel. A teljes szélességű szakasz színe a szerkesztőben lila.

Speciális szakasz

Ez akkor kell, ha nem a hagyományos 1-2-3-4 oszlopos elrendezést szeretnéd, hanem pl: egy nagy ½-es oszlop balra, mellé egy másik ½-es, de ez utóbbi alá ¼-es oszlopok.

Nagyon ritkán szokás ilyet használni, mert normál szakasszal is elő lehet állítani olyat, ami bár nem pont ugyanilyen, de a célnak megfelelő. A speciális szakasz moduljai áthúzhatóak egy normál szakaszba. De a speciális oszlopok nem húzhatóak át egy normál szakaszba.

Tervezés közben egy problémát jelenthet, ezért ajánlom inkább a normál szakaszt. A speciális szakasz színe a tervezőben piros, a speciális oszlopok színe narancssárga.

Milyen beállításai vannak egy divi sornak (row)

Amikor hozzáadsz egy sort, akkor azonnal felvillan az oszlopok választása képernyő. Ha egynél több oszlopot választasz, akkor az oszlopokhoz is ad opciókat a divi. A különböző oszlopkban lévő modulokat a normál szakaszon belül is, másik normál szakaszba is áthúzhatod (fogd és húzd módszerrel). A sorok oszlopbeosztásán bármikor változtathatsz.

Beállítások egy oszlopos sor esetén

A tartalom fül alatt a háttér beállításait találod, lehet külön háttere a sornak, és az abban lévő oszlopnak is. Ha „faltól falig” hátteret szeretnél, a sornál add meg a színt, képet, vagy színátmenetet.

A tervezés (ez a design szó fordítása) fülnél találod azt, hogy milyen térközök legyen a sorodban. A legtöbben ezt csúnyán elrontják, és vagy összecsúszik, vagy szétesik a tartalom. Ha szeretnél egy értelmes, jól kinéző weboldalt, amit az emberek megértenek és a megveszik róla a terméked, akkor ezt a két dolgot jegyezd meg itt:

Ha szellős elrendezést szeretnél, akkor hagyd meg az alapbeállításokat.

Ha rács elrendezésű (grid) designt szeretnél, ami faltól-falig tart, nincsenek térközök, akkor vedd nullára az összes margin és padding értéket, kapcsold be a teljes szélességet, Egyéni margó szélesség használatát kapcsold be, és vedd 0-ra az értéket.

divi_sor_beallitasok

Beállítások több oszlopos sor esetén:

Ha több oszlopod van, akkor a tartalom fül alatt az összes oszlopod hátterét külön-külün beállíthatod, és a tervezés fül alatt az oszlopaid belső margóját is egyenként állíthatod be.

divi_tobboszlopos_sor

Milyen divi modulok vannak?

A divi szerkesztőben 34 modul van, mindegyik azt szolgálja, hogy a tartalmadat, a sales szövegedet a legérdekesebb, legdizájnosabb, legolvasmányosabb formában be tudd mutatni az olvasódnak. A 34 modulból nem szokás mindet használni,

a leggyakrabban használt 7 modul:

Ezekkel tökéletesen fel lehet építeni egy cégbemutató oldalt, egy sales oldalt, vagy egy feliratkoztató oldalt, vagy épp egy blogbejegyzést. Sőt, ezekkel a modulokkal a legtöbb esetben össze lehet állítani a többi modult is.

Például: a Cselekvésre felhívás (call to action) modul nem más mint egy szövegmodul és alatta vagy mellette egy gomb modul. A divi 2.0 2014-ben jelent meg, azóta használom a saját weboldalaimhoz és az ügyfeleim weboldalaihoz, és ez a 7 modul mindig elegendő volt.

Ettől függetlenül, nem árt megismerned a többi modult is:

Itt egy gyors tartalomjegyzék a divi modulok leírásához, ha kattintasz valamelyikre, akkor a link a cikken belül navigál:

Ajánlás

Ezt a modult vásárlói idézetekhez lehet használni (testimonialnak is szokás mondani). A „szerző neve”: ezen a vevő nevét kell érteni, a tartalmi részhez írod magát az ajánlást. A vevő, ajánló fényképe alapértelmezetten kör alakú. Ez azért van, mert ha a kép szélessége, magassága, és a lekerekítés sugara is ugyanaz az érték, akkor kör alakú képet kapsz. Ha az „arckép” szegélyének sugarát 0-ra állítod szögletes lesz a kép.

Audió

Ezzel be tudsz ágyazni egy MP3 fájlt az oldaladba, úgy, hogy az előadó nevét is, az album képét is megadhatod. Értékesítési célú weboldalakon a lehető legritkábban használunk ilyet, a videó sokkal jobb és a egyszerűbb is a használata.

Ártáblázatok

Elvileg jól jön, ha egy termékednek van mondjuk 3-4 verziója, és a vevő egyben szeretné látni, hogy melyik opció mit tartalmaz. Kattints arra, hogy, hogy „ártáblázat hozzáadása”. Itt adod meg a termékhez tartozó vagy épp nem tartozó funkciók listáját. Minden új elemet egy új sorba kell írni és + jellel kezdeni, ha van, és – jellel, ha nincs. A gyakorlati alkalmazása ennek a modulnak elég nehézkes. Ugyanezt sima szövegmodulokkal is el lehet érni.

Áruház

Ez egy nagyon hasznos modul, ha Woocommerce webshopot használsz. A Woocommerce termékmegjelenítő oldalán mindig egy csomó felesleges dolgo van, amit nehézed CSS-sel eltűntetni, ugyanígy nem valami felhasználóbarát a Woocommerce valamelyik shortkódjával egy oldalba bevarázsolni a termékeket. Itt jön képbe a Divi áruház modulja.

divi_aruhaz_modul_beallitasai

Divi áruház modul szerkesztője

Kiválasztod, hogy a shopod mely termékeit listázza. A terméktípusok között (népszerű, legutóbbi, kiemelt, akciós stb) között találod a “termékkategória” opciót. A legtöbbször ezt szokás használni. Ha ezt választod, akkor azonnal megjelenik egy checkboxokból álló tömb, ahol a Woocommercbe korábban felvitt termékkategóriákat találod.

Kiválasztod, hogy hány termék, hány oszlopban, milyen sorrendben jelenjen meg, és máris kész az egyedi termékoldalad.

divi_aruhaz_megjelenes

Divi áruház modul megjelenése a weboldalon

Bejegyzés cím

Az oldal, vagy blogbejegyzés címét jeleníti meg. Azt a címet, amit a wp szerkesztőben a „címsor megadása” mezőbe írsz.

Bejegyzés elrendezés

Bejegyzés elrendezés modul azt csinálja, hogy egy adott cikked alatt mutatja az azonos kategóriában (vagy lehet más kategóriában is) lévő előző és következő postodat. Hasznos, ha növelni akarod az oldalon eltöltött időd, és így csökkenteni a visszafordulási arányt (a bounceback rate-et)

Bejegyzés görgető

A blogbejegyzéseidet jeleníti meg slider formában. A háttérkép az lesz, amit a bejegyzésben kiemelt képként állítasz be. A címsorból lesz a címsor, ez egyértelmű, és a kivonat mezőbe írt szöveg lesz a címsor alatti rövid összefoglaló.

divi_blog_slider

Bejegyzés görgető a netjet.hu főoldalán. Az 5 legújabb cikket mutatja.

Bejelentkezés

Egy wordpress bejelentkező űrlapot tesz ki. Ha van zárt tagsági oldalad, ez az opció kapóra jön, mert login formot a divi-vel tudsz a legkönnyebben designolni.

divi login modul

A leveltybooks.com zárt tagsági felületének login oldala a Divi bejelentkezés moduljával készült

Blog

Ha portált csinálsz divi-vel, ezt a modult fogod a leggyakrabban használni. A blog modullal lehet egy vagy sokkal több bejegyzés előnézetét megjeleníteni.

Meghatározhatod hogy hány bejegyzés jelenjen meg a modulban, és kiválasztod a kategóriáidat, ahonnan beolvassa a bejegyzéseket.

Egy blog cikk előnézetéhez tartozik a kiemelt kép, a szerző neve, a dátum, a bővebben gomb, a kategóriák, a hozzászólások. Beállíthatod, hogy ezeket mutassa vagy rejtse.

A tartalom opció alapértelmezetten a kivonatot jeleníti meg. A kivonat az a pár soros összefoglaló, amit a szerkesztőben a kivonat mezőbe írsz. Ezt érdemes választani, mert a teljes tartalom megjelenítése már egy 1500 szavas cikknél sem mutat jól és portál oldalon.

A tervezés fül legfontosabb eleme a blog modulnál, a szerkezet beállítása. Ha a teljes szélességet választod, akkor a sor teljes szélességébe illeszti az adott blogcikked előnézetét.

blog_modul_megjelenese

A netjet.hu egyik kategória aloldala a divi blog moduljával felépítve

A rács nézet jobban mutat: 3 oszlopba rendezi a postjaid előnézetét. A 3 oszlopot egy soron belüli oszlopba kell elképzelni. Tehát, ha egy sor 4 oszloppá lehet osztani, és oszlopba 3 cikk fér el egymás mellett, akkor 12 cikked fér ki egymás mellé. Ez már minden jel szerint túlzás, de tudnod kell, hogyan számolj, hogyan tervezz, ha valaha portállá alakítanád a blogodat. (Ennek az előnyeiről itt olvashatsz: Dobd ki a weboldalad és alakítsd át portállá! )

Cselekvésre felhívás gomb

A cselekvésre felhívás gomb azt csinálja, hogy ad egy címsort, egy szöveget (a tartalom részhez írod) és egy gombot. Ezt meg lehet csinálni szöveg és gomb modulokkal, de jól jön, hogy ez így egyben van. Sales oldalakon arra használd, hogy kiemelsz egy-egy fő érvet a terméked mellett, és egy “irány a rendelés” vagy egy “kosárba” gombot teszel alá. Egy sales oldalra tegyél 3-4 ilyen blokkot, arra ügyelj, hogy a háttérszín mindig ugyanaz legyen.

Elválasztó

Az elválasztó elem függőlegesen tesz térközt két elem közé. Használhatod akkor, ha nincs kedved vacakolni a paddingek és marginek állításával, de a legjobb benne az, hogy vízszintes vonalként is használhatod. Címsorok és más szövegblokkok alatt is jól mutat egy-egy vékonyabb, vastagabb vízszintes vonal, és a szöveg olvashatóságát is segíti. Ha könnyebb olvasni, többen megértik. Ha többen megértik, amit akarsz, többen vásárolnak.

Email optin

Azt csinálja, hogy csatlakozik a hírlevélküldődhöz és ide behívja a feliratkozási űrlapodat. Ez elvileg jó ötlet, de csak Aweber és Mailchimp fiókokat tud ide bekapcsolni. Az igazat megvallva a mailchimp és az aweber wordpress pluginja jobb, és többet tud, mint ez a modul.

Fülek

A fülek modul arra jó, hogy több tartalmat meg tudsz jeleníteni egy képernyőn egy-egy fül alatt. Ha egy terméked leírását akarod megjeleníteni, ez jól jöhet. Hasonló ahhoz, amit pl. az arukereso.hu-n látsz: Boltok és árak, termékleírás, vélemények stb.

Fülszöveg

Egy szövegblokk fölé vagy mellé tesz egy ikont vagy egy képet. A beépített ikonok nem rosszak, de nem mindent tudsz vele „kifejezni”. A tipikus használata ennek a modulnak az, hogy egymás mellett van 3-4 ilyen ikonokkal megfejelt blokk, felette címsor: „Szolgáltatásaink” alá egy-egy ikon pl: webszövegírás, websdesign, konzultáció stb. De ugyanezt meg tudod csinálni sima szöveg és kép modullal is.

Galéria

Képgalériát jelenít meg, úgy, hogy ha ráviszed az egeret átszíneződik a kép, látni fogsz egy nagyító ikont, ha rákattintasz, akkor lightboxban jeleníti meg a képet. Be tudod állítani hány kép legyen a galériában és hogyan jelenjen meg.

A leggyakoribb alkalmazása ennek a galéria grid (rácsos elrendezés) amikor nincs térköz a kis képek között. Ezt úgy éred el, hogy a tervezés fül alatt a szerkezetet rács-ra állítod. És a sor beállításainál nullára állítod a margókat és térközöket, illetve az egyéni margó szélesség használatánál is zérót állítasz be.

Gomb

Ez az egyik leggyakrabban használt modul. Egy gombot tesz az oldaladra, alapértelmezetten olyan kinézetűt,amit a téma testreszabásánál megadtál. A tartalom fül alatt adod meg a gombod feliratát és linkjét. A tervezés fül alatt felülírhatod a globális beállításokat, ha bekapcsolod a „gomb egyéni stílus” használatát. Legtöbbször csak egy ikoncsere szokott kelleni, pl: olvass tovább gombhoz lefelé mutató nyíl, kosár gombhoz kosár ikon.

divi_gomb_egyeni_stilus

Ha bekapcsolod a gomb egyéni stílust, akkor felülírhatod az alapbeállításokat

Harmonika és kapcsoló

Mindkettő arra jó, ha sok szöveges tartalmat akarsz megjeleníteni kevés helyen. Például a termékeid képe alatt címszavakban megadni a lényeget, és alatta kifejteni azt. A kapcsoló lehet nyitott vagy zárt, és egyszerre több elem is lehet nyitva. A harmónikánál ha egy elemet lenyitsz a többi bezár, egyszerre csak egy elem lehet nyitva.

divi_kapcsolo_modul

Divi kapcsoló modullal: Termék összehasonlító táblázat, 1 termék 3 féle csomagja, alattuk kosárba gomb.

Hozzászólások

Egy oldal vagy egy bejegyzés alatt megjeleníti a hozzászólásokat, ha az engedélyezve van az oldal szerkesztésénél, az „interakció” beállításainál.

Kapcsolati űrlap

Egy kapcsolatfelvevő űrlapot tesz az oldaladra, nagyon sok opciója van, ezért akár ajánlatkérő ürlapnak is használható.

Keresés

Egy keresőűrlapot tesz az oldaladba, ami ha akarod az oldalak között vagy a blog bejegyzéseid között találja meg (vagy egyszerre mindkettőben) amit az olvasód bepötyögött.

Kép

A kép modul is a gyakran használt modulok közé tartozik. A tartalom fül alatt az első dolog, hogy be kell tallózni a képet, és el kell döntented, hogy egy link legyen, vagy ha rákkatintanak, akkor mutassa a nagyobb képet, vagy egyik sem, hanem csak illusztráció legyen egy-egy szövegblokkod jobb megértéséhez.

  1. Ha a nagyobb kép jöjjön elő kattintáskor, akkor kapcsold be, hogy „megnyitás lightboxban” (a felvillanó ablakot nevezik lightboxnak – de igazából nem ablak, hanem egy div réteg)
  2. Ha azt akarod, hogy a kép link legyen, akkor a lightboxot kapcsold ki, és írd be a linket, majd válassz, hogy azonos vagy új böngészőablakban nyíljon.
  3. Ha se a lightboxot nem kapcsolod be, se linket nem adsz meg, akkor csak ott lesz a kép.

divi_kep_modul

A tervezés fül alatt állítod be a kép megjelenítési opcióit. A kép igazítása a legfontosabb: közép, bal, vagy jobb. A divi a kép méretét mindig az adott oszlop méretéhez igazítja a divi. Ha méretezni akarod a képet, akkor megadhatod, hogy a maximális szélessége adott pixel, vagy százalék legyen. Igen ám, de ekkor már nem veszi figyelembe az igazítást, és akármit állítasz be, balra igazítja a képet. Ezen lehet segíteni a margók beállításával, de ekkor a reszponzivitást kell még utólag beállítanod.

Érdemes a képet a megfelelő méretűvé szerkeszteni feltöltés előtt, hogy a divi-ben kelljen méretezned.

A haladó fül alá kerültek a megjelenítési animációk. Lehetnek beúszások, előtűnés, és az is, hogy ne legyen animáció. Az alapértelmezett a balról jobbra beúszás. Kissé lassúak ezek az animációk, jelenleg nincsenek opciók a beállításukra, ezért a leggyakrabban azt szokás választani, hogy ne legyen animáció.

A Divi Web Designers facebook csoportban Nick Roach, a Divi projekt vezetője közzétett egy videót, amiben mutatja, hogy milyen fejlesztésekkel készülnek a megjelenítési animációkat illetően. Sokkal jobb lesz.

uj_animacio_divi

Kód

Ritkán használjuk, mert kódot (php, java, html stb) a lehető legritkábban kell ma már az oldalba illeszteni. A google és egyéb követőkódok nem az oldalba illesztendők, a facebook pixelhez is van külön plugin, és minden valamirevaló hírlevélküldőnek van wordpress pluginja, vagy API-ja ami behívja az űrlapot. Nem szokás ma már hosszú kódokat másolni, illesztgetni. Ha mégis elkerülhetetlen akkor arra a shortcoder plugint ajánlom, aminek a rövidkódja a szövegmodulon keresztül illeszthető be.

Kör számláló, Számláló és Sáv számlálók

A divi számláló moduljai arra jók, hogy látványosan meg tudj mutatni számadatokat az olvasódnak.

  • A kör számláló egy karikába írja ki a számadatot, ha megadod a szám pl. 25 legyen, akkor amikor az olvasód idegördít a számok nullától 25-ig elkezdenek pörögni, miközben a kör kerete is átszíneződik, míg el nem éri a számot. Ezt lehet százalékjellel és anélkül is megjeleníteni. A kör számláló százalékos adat megmutatására a legalkamasabb.
  • A számláló modul, kör nélkül, csak a számokat pörgeti.
  • A sáv számláló azt csinálja, hogy egy vízszintes sávot a számnak megfelelő értékig tölt fel színnel.

Ha meg akarod mutatni az olvasódnak a céged, vagy épp személyes márkád értékét bizonyító számadatokat, akkor ez a legjobb módszer rá. Kombináld a kör-, sáv és sima számlálókat!

szamlalo_modul_megjenese

Számláló modullal megjelenített számadatok a netjet.hu/rolunk oldalon

Közösségi média követés

Kitesz egy ikont, ami a közösségi média oldaladra visz, a legtöbb hálózat benne van. A facebookot szokás a leggyakrabban használni. A beállításainál csak annyit kell tenned, hogy beilleszted a pl: a facebook oldalad linkjét.

Lapozó

Lapozó, azaz ismertebb nevén slider modul. A lapozó úgynevezett diákból áll. (A slider magyarul csúszka, fordítják lapozónak, diavetítőnek is.)

Egy dia tartalma a következő: Egy címsor, egy szöveges leírás, egy kép vagy videó és egy gomb.

Egy diának van egy háttere, ami lehet kép, vagy videó háttér is. Ha magában a diában már alkalmazol képet vagy videót, akkor a háttérbe már csak egy egyszerű színt vagy legfeljebb egy színátmenetet tegyél.

Egy ilyen slidert remekül használhatsz a termékeid vagy a szolgáltatásaid bemutatására: ízelítő a sliderben, bővebb infó a kattintás után. A legjobb érv (értsd: legjobb termék, szolgáltatás, bármi) mindig az első slide-ban legyen. Nem biztos, hogy az olvasó kivárja az 2-3 másodprecet, amíg vált a slidered, és az sem biztos, hogy lapozni fogja a slidert, hiszen a legtöbben a „fentről-le” irányú információfeldolgozáshoz vagyunk szokva.

Oldalsáv

Egy modulban meg tud jeleníteni widgeteket. Nem sok értelme van.

Portfólió és Szűrhető portfólió

A divinek van egy projektek menüpontja. Ide viszel fel pl.: referenciákat. Olyan, mintha egy blogbejegyzést írnál egy-egy projektedről, kivitelezett szolgáltatásról. Adhatsz neki címet, szerkesztheted a szöveget, kiemelt képet állíthatsz be. Ezeket a projekteket a fenti két modul illeszti be az oldalba. A helyzet az, hogy a referenciáid bemutatásának ennél egyszerűbb módja is van, és egy-egy referenciáról nehéz olyan sokat írni, hogy ilyen bejegyzés szerű postnak megállja a helyét.

Személy

A személy modul arra jó, ha fel akarod sorolni a céged munkatársait. Meg lehet csinálni ugyanezt egy sima szövegmodullal és kép modullal is, de kapóra jön, hogy itt minden egyben van. A személy nevén, beosztásán, bemutatkozását és fotóján kívül még a facebook, twitter, linkedin, google+ profil webcímét is megadhatod

Szöveg

Ez a leggyakrabban használt modul. Ugyanazt a vizuális szerkesztőt adja, amit a wordpressben megszokhattál. Sok szövegnél kissé nehézkes a használata, még teljes képernyős módban is. A szöveg kinézetét, betűtípust, színt, sor-, és betűközt és a teljes elem külső és belső margóját a tervezés fül alatt állíthatod be.

Térkép

Megjelenít egy google maps térképrészletet, és a térképen belül több helyszínt is meg tud jelölni. Ez lehet pl: vállalási terület, telephelyeid, irodáid címe. Egy hátránya van, de erről nem a divi tehet: Kell hozzá egy google API, hogy jól működjön. Ennek a beszerzése és beillesztése kissé nehézkes, nem ide kell beilleszteni, hanem a Divi menüpont theme settings-en belül a google api mezőbe.

Videó

Megjelenít egy videót. A youtube, vimeo linket csak beilleszted, vagy betallózod a saját mp4-edet.

Videó lapozó

Több videót jelenít meg, slider formában. Kampányban remek eszköz, amikor a pre-launch szakaszban mutatatod meg az új videóidat. A videó előképpel lehet navigálni a videó között. Ha több, összefüggő videód van, de szeretnéd, hogy az olvasó egy képernyőgördítésen belül lássa őket, akkor használd a divi videó lapozó modulját.

Visszaszámláló

Egy jövőbeli dátumot megadsz és visszaszámol addig. Kampányban kötelező elem, de kár, hogy utána nem csinál semmit, nem irányít át, vagy nem tünteti el a kosár gombot, ha lejárt az ajánlatod határideje. Egy dolog fontos itt: nézd meg, hogy a wp admin felületen a beállítások – általános menüpontban jól van-e beállítva az időzóna, mert eszerint számolja ez a modul az időt.

Divi könyvtár használata

A diviben az a jó, hogy minden szakasz, sor, modul elmenthető a könyvtárba és ha újra szükséged van egy példányra az adott elemből, akkor csak behívod oda, ahová kell.

Mikor használod a divi elemek mentését és behívását?

Ismétlődő tartalmak esetén

Ez jól jön akkor, ha teljes weboldaladon belül vannak ismétlődő elemek, pl: szakmai bemutatkozás, térkép a céged címével, kapcsolatfelvevő űrlap, feliratkoztató űrlap, megrendelés gomb stb.

Tartalmak megmentéséhez

Létrehozol egy új oldalt, sokat dolgoztál rajta, nem szeretnéd, hogy elvesszen, de ezt-azt szívesen módosítanál rajta. Nem gond, lemented a könyvtárba az eredetit, és máris bátran szerkesztegheted.

Kampányban

Ha a kampányod adott napon reggel 8-kor startol, előre megcsinálod az elemeket, elmented, de csak 7:59-kor hívod be a könyvtárból.

A munkád megmentéséhez

Ha designer vagy és átadsz egy ügyfélnek egy weboldalt, mindig mentsd le magadnak. Jól jön, ha ilyen emailt kapsz: „Jaj, valamit be akartam állítani, de elrontottam és eltűnt a designt, amit csináltál…”

Hogyan használod a divi elemek mentését és behívását?

Sor, szakasz és modul mentése

A szerkesztőben (szakasznál, sornál és modulnál is) van egy olyan opció, hogy „mentés és hozzáadás könyvtárhoz”, elnevezed az elemet, hogy tudd miről van szó (pl: feliratkoztató űrlap). Ha a mentés globális elemként-et választod azt jelenti, hogy egy helyen szerkeszted az elemet, és mindenhol, ahol csak használod az oldalon, ugyanazok a változtatások lépnek életbe. Jól jön pl.: ha szakmai bemutatkozásodat írod, ha hozzáadsz valamit, mindenhol hozzáírodik.

mentes_konyvtarba

Mentett sor, szakasz és modul betöltése

Menett szakasz betöltése a szakasz hozzáadásánál van „hozzáadás könyvtárból”. A szakaszok alatt, kis szürke linkek.

Mentett sor betöltése: a sor hozzáadására kattints előbb, előjön az oszlopválasztó, és felül a lila sávban van a „hozzáadás könyvtárból”. opció.

Mentett modul betöltése: a modul hozzáadására kattints előbb, előjönnek a modulok és felül a lila sávban van a „hozzáadás könyvtárból”. opció.

Értelemszerűen szakasznál szakaszt tudsz behozni a könyvtárból, sornál sort, modulnál modult. Tervezéskor előfordul, hogy valamit rossz helyen keresel, és nem érted miért nincs ott. Ekkor gondold át: hogyan mentettem el az elemet? Sorkét, szakaszként, modulként?

Egész oldal mentése és visszatöltése

A divi szerkesztő lila keretében, felül találod a „mentés könyvtárba” menüpontot. Mellette van a betöltés könytárból, ha egy korábban mentett oldal tartalmát szeretnéd behívni. Vigyázz! Ha ez be van kapcsolva: „Létező tartalom felülírása a betöltött elrendezéssel” akkor oda az addigi tartalmad, mert felülírja azt az újonnan betöltött. Ha nincs bekapcsolva a meglévő tartalom mögé teszi.

divi_teljes_oldal_mentese

Mi a következő lépés?

Nézd meg a videókat, amiben a gyakorlatban is mutatom a divi használatát (ehhez fel kell iratkozni). Minél többet gyakorlod, annál jobban fog menni.

 

Erdélyi Norbert

Erdélyi Norbert

online marketing szakértő

A netjet.hu cikkeinek és oktatóanyagainak szerzője Erdélyi Norbert. Szakterülete az üzleti weboldak megvalósítása és értékesítési kampányok kivitelezése. 2006-óta foglalkozik online marketinggel. Az írásai célja, hogy az online marketinget és a technikai megvalósítását érthetővé tegye számodra. Bővebben a szerzőről és a netjet.hu-ról.

netjet.hu facebook profiljaLájkolj a facebookon:
facebook.com/netjethu

Új: Pocsék weboldalból gyönyörűt, 20 perc alatt Divi-vel.

Egy borzadály weboldalt alakítunk át lépésről lépésre, eljutunk egy designos kezdőlapig

Új: Pocsék weboldalból gyönyörűt, 20 perc alatt Divi-vel.

Egy borzadály weboldalt alakítunk át lépésről lépésre, eljutunk egy designos kezdőlapig

Share This