A Divi a legnépszerűbb prémium WordPress theme (sablon) amit az Elegantthemes.com fejleszt. Ebből a cikkből megismered a Divi sablon alapjait, megtanulod használni, beállítani, megtudod milyen divi modul mit és hogyan csinál.

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.

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.  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 API Keys)

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 kulcs beillesztése a Divi Theme Options-ban

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

Magyarul van-e a Divi?

Igen, de a fordítás rossz.  Mivel a Divi folyamatosan frissül, új menüpontok, új modulok, új elemek lesznek benne, ezért a fordítóknak nehéz lépést tartani azzal, hogy mindig le legyen fordítva az adott nyelvre.

A Divi fejlesztői kitaláltak egy megoldást, de a végeredmény borzalmas lett.  A szövegrészeket a Google Translate fordítja le, és ezt rakták bele a Divi-be.  Ezért a „General” menüpontból „Tábornok” lett, holott a general jelentése „általános”, és nem generális. A „your title goes here”, ami annyit tesz, hogy „ide írd a címet”, így alakul át: „Az Ön címe itt megy”.

A Divi fórumokon, facebook Divi csoportokban világszerte, minden nyelven,  felháborítóan rossznak tartják ezt a megoldást, de a fejlesztők érdemben még egyetlen felvetésre sem reagáltak.

Ha egy kicsit is tudsz angolul, akkor érdemesebb angolul használni a Divit.  Ki lehet kapcsolni a fordítást úgy, hogy maga a WordPress magyarul maradjon:

Divi > Sablon beállítások > Fordítások tiltása > Engedélyezés.

Hogyan kezdj hozzá a weboldaltervezéshez 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.

Oldal vagy blog létrehozása és szerkesztése a Divi-vel

Akár új bejegyzést vagy új oldalt hozol létre, a wordpress blokkos, azaz Gutenberg szerkesztőjében az fogad, hogy bekapcsolod a Divi Buildert vagy használod az alapértelmezett szerkesztőt.

Divi Builder használat megkezdése

Ha az alapértelmezett szerkesztőt használod:

Az alapértelmezett szerkesztő használatának Divi sablonnal gyakorlatilag nincs értelme: Megkapod a Gutenberg blokkjait, amivel fel tudsz építeni egy tartalmat. De mivel a Divi az alapértelmezett sablonod, ezért nem kapod meg azokat az opciókat, amiket a wordpress beépített alap sablonja ad. Tehát nem lesz cover vagy fullwidth template-d, mint a Twenty Twenty sablonban, hanem így azt kapod, ahogyan a wordpress régen kinézett: tartalom + oldalsáv elrendezés. Ebből nem lehet normálisan kinéző blog postot, sem oldalt csinálni.

Ha mégis valamilyen oknál fogva az alapértelmezett szerkesztőt kell választanod Divi sablon használata mellett, akkor így tűnik el az oldalsáv:

Jobb oldalon > Document > Divi page settings > Page Layout > Fullwidth

Be kell kapcsolni a Divi szerkesztő használatát (Use Divi Builder)

Ha a Gutenberg szerkesztőben bekapcsolod azt, hogy „Divi szerkesztő használata” akkor azonnal kivisz a vizuális szerkesztőbe, és előben a front enden tudsz hozzáadni tartalmakat.  Ekkor automatikusan eltűnik az oldalsáv, és bekapcsol az oldalépítő: ez az opció hozza elő a szakaszokat, sorokat, modulokat. Ezt kell csinálni.

Fontos tudni, hogy 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.

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 Blank Page Sablonminta választása

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 Beállítás

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!

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 marketing-lé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 customizer)

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.

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 (customizer)

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)

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.

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

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

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.

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.

A tervezés (design) beállításai nagyjából egységesek minden modul, szakasz és sor esetében:

Méretezés (sizing)

Itt tudod beállítani az elem szélességét és magaságát, legyen az modul, sor, vagy épp szakasz.

Kiterjedés (spacing)

Itt tudod beállítai a belső margókat vagy más szóval kitöltést (padding) és a margókat.

Szegély (borders)

Minden elemnek lehet szegélye a Diviben, beállíthatod, hogy fent, lent, balról, jobbról vagy minden oldalról legyen szegély. A szegély lehet egybefüggő (solid) pontozott, szaggatott, dupla, és természetesen a szegély vastagságát és színét is beállítathatod:

Box árnyék (box shadow)

Minden elemnek lehet árnyéka is, 7 féle árnyék opcióból lehet választani, és minden egyes árnyékhoz beállítható szín, homályosság, vízszintes és függőleges pozició.

Szűrő (filters)

Minden elemnek (sor, szakasz, modul) lehetnek külön szűrői, ezek a kinézetet módosítják.

A fentebb már említett fordítási értelmetlenségek sajnos ennál az opciónél jönnek ki leginkább, ha nem ismered az angol eredeti jelentést, akkor gyakorlatilag értelme nincs az ebben az opció panelben lévő szavaknak.

• Hue – Színezet
• Saturation – Telítettség
• Brightness – Fényesség
• Contrast (rossz magyar fordítás: vezérlők)
• Invert
• Sepia
• Opacity
• Blur, azaz homályosság (rossz magyar fordítás: fülszöveg)

Ezekkel a filterekkel azért óvatosan kell bánni, minden elképzelhető opciót rátehetsz, sok-sok csúszka van, könnyű elrontani vele az arculatot.

Átalakítás (transform)

Ezzel az opcióval egy-egy elemet bárhová tehetsz, bárhogyan forgathatsz, torzíthatsz. Ezzel is óvatosan kell bánni, nemcsak a design lehet elrontani vele, ha túlzásba visszük, de még a reszponzivitást is odavágja.Ezek az opciók vannak:

• Méretezés
• Áthelyezés
• Forgatás
• Döntés
• Transform origin

Van egy kis felület, amin húzogathatod az elemet, ha tetszik a végeredmény, kattints a zöld pipára. Ha mégsem tetszik – és ez minden opcióra igaz – akkor, ha ráviszed az egeret az opció nevére, meg fog jelenni egy kör-nyíl, ez visszaállítja az eredeti állapotot.

Animáció

Korábban ezt az opciót csak a kép modulra adta a Divi, de már minden egyes elem megjelnítési animációja beállítható.

Hover opciók minden design beállításhoz

Ha egy adott elemet (szakasz, sor, modul) szerkesztesz, minden egyes kinézeti opcióhoz (háttérhez is) meg lehet adni, hogyan nézzen ki akkor amikor ráviszed az egeret.  Az opció nevére húzod az egeret (pl: Transform) megjelenik egy kis fekete kurzor nyíl, arra kattintasz, és a megjelenő fülek közül a „hover”-t választod. Amit itt beállítasz, úgy fog kinézni az elem akkor, ha a látogatód ráviszi az egeret.

Divi hover beállítások

Reszponzív opciók minden design beállításhoz

Ha egy adott elemet (szakasz, sor, modul) szerkesztesz, minden egyes kinézeti opcióhoz (háttérhez is) meg lehet adni, hogyan nézzen ki mobilon vagy tableten.  Az opció nevére húzod az egeret (pl: Transform) megjelenik egy kis mobiltelefon ikon, arra kattintasz, és a megjelenő fülek közül a mobile-t vagy tabletet  választod. Amit itt beállítasz, úgy fog kinézni az elem akkor, ha a látogatód mobilon vagy tableten nézi.

Divi reszponzivitás beállítások

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. A haladó fül alatt találod még a láthatóságot, ami azt jelenti, hogy egy-egy elemet (szakasz, sor, vagy modul) elrejthetsz mobilon, tableten vagy asztali gépen.

A vízszintes és függőleges túlcsordulást és a Z-index ugyanaz, mint CSS-ban a vertical, horizontal olverflow és a z-index. Ezek ilyen advanced opciók, ha nem vagy járatos benne, akkor hagyd alapértelmezetten. Ha szoktál custom CSS-ezni, akkor itt lehet örülni, hogy ezeket nem kell bepötyögni, mert csúzskával lehet állítani-

A Transitions opciói a hover animációk késleltetését, idejét, és speed curve-jét állítják be, szintén haladó opció, kezdőként jobb, ha nem nyúlsz hozzá.

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. 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-5-6 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.

Dividers – a szakaszok alja

A szakaszok (normál és teljes szélességű, azaz kék és lila) felső és alsó szegélyére lehet alkalmazni különféle megjelenítési módokat. A szakasz alja vagy teteje lehet hullámos, cakkozott, háromszögbe csúcsosodó és még számtalan geometriai mintájú.

Szakasz – Szerkesztés – Tervezés – Dividers

Először az elválasztó stílusát válaszd ki a legördülő listából. Amit kiválasztasz azonnal megjelenik.

Divider color – itt adod meg az elválasztó színét.
Divider height – itt állítod be az elválasztó magasságát
Divider horizontal repeat – itt az elválasztó mintájának vízszintes ismétlődését adod meg. Ez a beállítás módosítja a legjobban az elválasztó megjelenését.

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ő oszlopokban 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.

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 A méretezés (sizing) opciónál az egyéni margószélességet (custom gutter width) állítsd 1-re. A width és a max width értékeket állíts be 100%-ra. (A max width eredetileg pixelben van megadva, azt töröld ki és írd be, hogy 100, és írd be a % jelet is)

Divi teljes szélességű sor beállítása

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.

Több oszlopos sor esetén, a sor tartalom beállításainál is tudod változtatni a sorban lévő oszlopok elrendezését, és kicsit lentebb, fog és húzd módszerrel az oszlopok sorrendjén is változtathatsz.

Divi oszlopok sorrendje

Milyen divi modulok vannak?

A divi szerkesztőben 54 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 sok-sok modulból nem szokás mindet használni,

a leggyakrabban használt 7 modul:

• szöveg modul,
• a kép modul,
• videó modul,
• a gomb modul,
• az elválasztó modul,
• a visszaszámláló, és számláló modulok
• és a kapcsoló 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:

Divi modulok

1. Ajánlás
2. Audió
3. Ártáblázatok
4. Áruház
5. Bejegyzés cím
6. Bejegyzés elrendezés
7. Bejegyzés görgető
8. Bejelentkezés
9. Blog
10. Cselekvésre felhívás gomb
11. Elválasztó
12. Email optin
13. Fülek
14. Fülszöveg
15. Galéria
16. Gomb
17. Harmonika
18. Hozzászólások
19. Kapcsolati űrlap
20. Kapcsoló
21. Keresés
22. Kép
23. Kód
24. Kör számláló
25. Közösségi média követés
26. Menü modul
27. Lapozó
28. Oldalsáv
29. Portfólió
30. Személy
31. Számláló
32. Szöveg
33. Szűrhető portfólió
34. Sáv számlálók
35. Térkép
36. Videó
37. Videó lapozó
38. Visszaszámláló
39. Woocommerce modulok (ebből 16 van)

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

Webshop kezdőlap a Divi áruház moduljával

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

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.

[KÉP: NETJETSHOP LOGIN]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.

A rács nézet jól 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.

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

Ez a modul arra jó, hogy betegyen egy feliratkoztató űrlapot az oldaladba.  Ha ezt használod, akkor nem kell se pluginnal se eposzi hosszú html kóddal vacakolni. Úgy működik, hogy egy API kóddal csatlakozik a hírlevélküldődhöz, onnan behívja az űrlapjaidat, és egy legördülő listából kiválasztod melyik űrlapod szeretnéd látni.

A hírlevélküldő szoftveredben kell létrehozni az űrlapot. De az űrlap kinézetét már ebben a modulban szerkeszted meg.  Nem csak a név és az e-mail mezőt hozza át API-val a hírlevélküldődből, hanem az összes mezőt, amit létrehoztál. Ez azért jó, mert a kötelező GDPR pipa mező is megoldható vele, de összetett ajánlatkérő űrlapot is betehetsz ezzel a modullal.

Jelenleg ezekhez a hírlevélküldőkhöz van beépített integráció. (Magyar hírlevélküldőkhöz nincs API)

1. ActiveCampaign
2. Mailchimp
3. Aweber
4. ConvertKit
5. Mailerlite
6. Mailster
7. Infusionsoft
8. Ontraport
9. iContact
10. HubSpot
11. Emma
12. MadMimi
13. GetResponse
14. Feedblitz
15. ConstantContact
16. Sendinblue
17. SalesForce
18. CampaignMonitor
19. MailPoet

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.

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.

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ákattintanak, 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.

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.

Animációk

Nem csak a képek megjelenésére, hanem minden elem, sor és szakasz megjelenésére beállíthatóak különféle animációk. Az adott elem szerkesztésénél a „tervezés” menüpontból éred el az „animációkat”.

Divi animációk: minden elemre alkalmazható, de a képeknél használjuk legtöbbször

Animation Style,
azt jelenti hogyan jelenjen meg az elem. A leírások és az ikonok meglehetősen egyértelművé teszik milyen effektre lehet számítani:

• none, azaz nincs animáció (kezdőként ez a legjobb választás)
• előtűnés,
• dia, azaz inkább beúszás
• bounce, azaz beugrás,
• zoom, azaz közelítés,
• átfordulás,
• fold, azaz kinyitás,
• roll, azaz begördülés

Animation repeat:
Itt az egyszeri megjelenést, azaz a „once” opciót érdemes választani. Az örökké ismétlődő animáció user experience (UX) szempontjából elvetendő.

Animation direction:
Az animáció iránya, azaz merről jöjjön be az elem, jobbról, balról vagy középről.

Animation delay:
Az effektus késleltetése: azt jelenti, hogy ne azonnal az elem betöltésekor jelenjen meg az animáció, hanem az itt beállított milliszekundummal később. 1 másodperc 1000 ms-nak felel meg.

Animation intensity:
Ez az opció változtat legtöbbet az adott animáció megjelenésén: Ha nem harsány, hanem visszafogott, de látványos animációkat szeretnél látni az oldaladon, akkor itt az értéket 5-7% közé állítsd be.

Animation starting opacity
Az animáció kezdésekor az elem átlátszósága: 0% az alapbeállítás, azt jelenti az elem nem átlátszó. Ezt érdemes meghagyni így.

Animation speed curve

Ez az animáció megjelenítésének finomságát, rugalmasságát állítja. Itt csak hagyd meg az alap beállítást, az ease-in-out-ot.

• ease-in-out – lassan kezdődik az animáció
• ease – lassan kezdődik, begyorsul, lassan ér véget az animáció
• ease-in – lassan kezdődik az animáció
• ease-out – lassan végződik az animáció
• linear – azt jelenti ugyanolyan sebességgel az elejétől a végéig

Az animációk előnye:
Növelheti a konverziód, mert a legfontosabb elemeket (kosár gomb, árakció, legjobb érvek etc.) ki tudod vele emelni, hogy görgetés közben biztosan felfigyeljen rá az olvasó.

Az animációk hátránya:
Nagyon átgondoltam meg kell tervezni, hogy harmonikus legyen. Mivel minden elemre, képre, szövegre, gombra, űrlapra, sorra, szakaszra etc. minden animáció alkalmazható, könnyű túltolni ezt az eszközt. Ha most ismerkedsz a Divi-vel, vagy egyáltalán a weboldalkészítéssel, akkor nehéz elsőre jól beállítani az animációkat.

Kód modul

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!

Divi körszámláló modul

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.

Menü modul

Ez a modul azt csinálja, hogy bárhová az oldaladon tehetsz egy menüsort. A menüsorokat a wordpress dashboardban kell létrehozni (Megjelenés > Menük), és amit ott létrehoztál, azokat tudja megjeleníteni ez a modul.  Beállíthatod a menü háttérszínét, a legördülő menü, a linkek színét normál, hover, és active állapotban is. Korábban a menü csak teljes szélességű szakaszban volt elérhető, szerencsére most már a normál szakaszban is ott van.

Woocommerce Modulok

Ezeket akkor fogod látni a modulok között, ha telepítetted a Woocommerce-t, a wordpress legnépszerűbb webáruház pluginját. A woocommerce moduloknak az a lényege, hogy minden egyes elemet, ami egy alapértelmezett woocommerce termékoldalon szerepel, azokat be tudod tenni bármilyen oldalba. A legjobban akkor tudod ennek hasznát venni, ha van egy sales oldalad, aminek a végén ott van a termék, amit kosárba kell tenni: a woocommerce modulokkal nem kell képként beraknod a termékképet, nem kell bepötyögni a kosárba tevő URL-t, nem kell másolás beillesztéssel odarakni a termékértékeléseket stb stb.

Nézz meg egy woocommerce termékoldalt, hogy lásd melyik modul mit csinál, ez itt egy alapértelmezett woocommerce product page:

Alapértelmezett Woocommerce Product Page

De egy ilyen termékoldalt bármelyik oldaladon fel tudsz építeni a woocommerce modulokkal, úgy, hogy nem köt meg a woocommerce alapértelmezett elrendezése, hanem mindegyik elemet oda teszel, ahová akarsz, és úgy szabod testre a kinézetét, ahogy csak szeretnéd. Ez itt egy példa termék oldal, az elegantthemes.com demo elrendezései közül:

Divi Woo modulokkal felépített Woocommerce Product Page

Amikor egy Woo modult adsz hozzá egy oldalhoz, mindig ki tudod választani, hogy melyik termék adatait szeretnéd megjeleníteni.  Nézzük melyik modul mit csinál:

1. Woo Add to Cart – ez teszi ki az általáad kiválasztott termék kosár gombját
2. Woo Additional info – Az egyéb termékinfót jeleníti meg
3. Woo Cart Notice – A kosárba tevés utáni üzenetet jelenítni meg
4. Woo Description – A termékleírás: választhatsz, hogy a teljes-, vagy a rövid leírást mutassa
5. Woo Gallery – Ez a modul teszi ki a termékgaléria képeket
6. Woo Images – Ez a modul a termékképet jeleníti meg
7. Woo Meta – Ez a modul jelenítni meg a cikkszámot, termékkategóriát
8. Woo Price – Ez a termék ára
9. Woo Rating – a csillagos értékelést mutatja, ami a kiválasztott termékre vonatkozik
10. Woo Related Product – a kapcsolódó termékeket jelzi ki (ezt az adott terméknél lehet beállíatni, a termékleírás alatt: „Kapcsolódó termékek”, azaz linked products, azon belül cross-sell.)
11. Woo Reviews – a termékértékeléseket jelenítni meg
12. Woo Stock – a készletet jelenítni meg
13. Woo Tabs – a „füleket” jeleníti meg (leírás, vélemények, egyéb infó)
14. Woo Title – A termék nevét jelzi ki
15. Woo Upsell – egy upsell ajánlatot mutat, amint a fő terméket a kosárba tették. Hogy mi legyen az upsell ajánlat, azt az adott terméknél lehet beállíatni, a termékleírás alatt: „Kapcsolódó termékek”, azaz linked products, azon belül: upsell
16. Woo Breadcrumbs – a termék-navigációt jeleníti meg

Mi az a Divi Theme Builder?

A wordpressed admin felületén menj oda, hogy Divi és azon belül theme builder (magyarul sablonépítő), látni fogod, hogy a Divi nem csak az oldalakat, postokat tudja felépíteni, hanem a wordpressed olyan részeit is, amit egyébként másképp nem is tudnál szerkeszteni anélkül, hogy létrehoznál egy child theme-t és nekiállnál kódolni.

Divi Theme Builder

A Divi theme builderrel, a jól ismert blokkos szerkesztővel tudsz egy-egy sablont létrehozni, többek között:

• A 404-es oldaladhoz
• A kategória oldaladhoz
• A keresési eredmények oldaladhoz
• A globális fejlécedhez
• A globális láblécedhez
• A szerzői (author) oldaladhoz
• A címkék (tags) oldaladhoz
• A WooCommerce oldaladhoz:
• Shop – az üzlet oldal
• Cart – kosár oldal
• Checkout – pénztár oldal
• My Account – fiókom oldal

És ezen kívül a theme minden egyes oldalához létre tudsz hozni egy sablont, de legfontosabb és legjobb dolog az a theme builderben, hogy a saját arculatothoz tudod illeszteni azokat az oldalakat is, amelyeket a wordpress vagy a woocommerce egyébként nem is engedne szerkeszteni.

Meg kell jegyezni, hogy a theme builder használata tapasztalatot igényel, ha most kezdesz ismerkedni a Divi-vel, vagy általában a wordpress-szel, akkor itt jobb meghagyni az alapbeállításokat.

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.

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.

Színek kezelése

Minden elemnek meg tudod adni a színét. A Divi megvizsgálja milyen színek vannak az oldaladon és aszerint ajánl színeket és ezekből harmonikus színpalettát is kever. A „saved” szövegre kattintva jönnek elő az általad elmentett színek, amit a tervezés során használtál.

A „recent” szövegre kattintva jönnek elő azok a színek, amiket a Divi automatikusan „kiszed” az oldalon lévő elemek színeiből.

Mindkét színpaletta alatt látsz 3 vízszintes pontot, erre kattintva láthatod azokat az ajánlott színeket, amiket a Divi a mentett vagy az oldalban lévő színekhez harmonikusan generál.

Vizuális szerkesztő

A Diviben a vizuális szerkesztő a legjobb, a frontenden, azaz a megtekintési nézetben szerkesztesz minden elemet, azonnal, élőben látod a módosításokat (de ezek nyilván csak mentés után lépnek életbe)

A vizuális szerkesztőt a frontenden a „visual builder engedélyezése” menüvel kapcsold be.

Ilyenkor a Divi megkérdezi, hogy a nulláról akarod-e kezdeni a tervezést, vagy egy gyári layoutot használsz, vagy egy meglévő oldalad klónozásával akarod elkezdeni a tervezést.

Ha a vizuális szerkesztőben vagy, az adott elemre (sor, oszlop, modul) viszed az egeret és választhatsz: mozgatod, szerkeszted, duplázod, exportálod, vagy törlöd az elemet. A soroknál (zöld) ezeken kívül még az oszlopok elrendezése opciód fogod találni.

Minden ugyanúgy működik mint a normál szerkesztő nézetben, csak az a fontos különbség van, hogy azonnal látod a módosításokat, így sokkal könnyebb weboldal tervezni.

Layoutok kezelése

A layout, magyarul „elrendezés” egy-egy komplett weboldalt jelent, minden fontos oldal megvan benne: landing page, blog, webshop oldal, kapcsolat stb. Ezeket a Divi gyártja, és adott időközönként rak fel újat a központi divi könyvtárba. Ezeket a layoutokat a vizuális szerkesztőből is eléred már, nem kell letölteni, importálni..

Egy-egy ilyen layout egy-egy tematikus weboldalt jelent: van gasztro-, jogi-, tanácsadói és még számtalan weboldalhoz készült layout. Annyit kell csinálni, hogy ezeket betöltöd és átírod a szövegeket. Ezeket profi designerek csinálták, így amikor átírod, a saját cégedre szabod, arra nagyon kell ügyelni, hogy megmaradjon az eredeti koncepció szerinti harmónia.

A vizuális szerkesztőben, a szerkesztés megkezdésekor válaszd azt, hogy „choose a premade layout”, vagy szerkesztés közben bármikor az oldal alján a kis lila plusz ikonra kattintva is előjön a layout betöltő.

Ezeket a layoutokat egymás mellett látod, ha egyen rajta tartod az egeret, akkor az elkezd lassan gördülni, így jobban látod milyen lesz.

Ha ráklikkelsz egyre, akkor látod, hogy a layouthoz milyen oldalak tartoznak. Contact, blog, shop etc. A legtöbbször a „landing page”-et szokás használni, ezen van a legtöbb elem.

Ha megvan, kattints arra, hogy „use this layout”. Várd meg amíg betöltődik és írd át az angol szövegeket magyarra cseréld ki a képeket, így össze tudod rakni a saját weboldalad.