Tartalomjegyzék
- Divi megvásárlás, telepítés, API beállítás
- Hogyan kezdj hozzá a weboldaltervezéshez a Divi-vel?
- Oldal vagy blog létrehozása a Divi-vel
- Mi van, ha nem kell se menü se lábléc?
- Hol állítod be a diviben, hogy mi legyen a logó?
- Divi beállítások (settings)
- Divi testreszabás (costumizer)
- Mi a szakasz (section) a sor (row) és a modul (module)?
- Hogyan épül fel egy szakasz, sor, modul szerkesztő felülete?
- Milyen divi szakaszok vannak?
- Milyen beállításai vannak egy divi sornak (row)
- Milyen divi modulok vannak?
- Mi az a Divi Theme Builder?
- Divi könyvtár használata
- Színek kezelése
- Vizuális szerkesztő használata
- Layoutok használata
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 Sablon megrendelése
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)


Divi APi kulcs beillesztése a Divi Theme Options-ban
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. Illetve létezik egy Divi magyarító plugin, ami a legtöbb ilyen félrefordítást megoldja (vannak még benne hiányosságok, de folyamatosan fejlesztik): Nézd meg a WordPress plugintárban: Magyar kiegészítésék Divi-hezHogyan 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 > FullwidthBe 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. A Gutenberg óta a Divi buildert csak vizuális szerkesztőként lehet használni, a back enden már nem működik. Ha mégis ezt szeretnéd, akkor telepítened kell a régi wordpress klasszikus szerkesztő pluginját: 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
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.
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.
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.

A testreszabásnál állítod be a menüsorok kinézetét
- 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.

Minden gombod úgy fog kinézni, ahogy itt beállítod.
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
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
- 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)
- Méretezés
- Áthelyezés
- Forgatás
- Döntés
- Transform origin

Divi hover beállítások

Divi reszponzivitás beállítások
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.
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
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:
- Ajánlás
- Audió
- Ártáblázatok
- Áruház
- Bejegyzés cím
- Bejegyzés elrendezés
- Bejegyzés görgető
- Bejelentkezés
- Blog
- Cselekvésre felhívás gomb
- Elválasztó
- Email optin
- Fülek
- Fülszöveg
- Galéria
- Gomb
- Harmonika
- Hozzászólások
- Kapcsolati űrlap
- Kapcsoló
- Keresés
- Kép
- Kód
- Kör számláló
- Közösségi média követés
- Menü modul
- Lapozó
- Oldalsáv
- Portfólió
- Személy
- Számláló
- Szöveg
- Szűrhető portfólió
- Sáv számlálók
- Térkép
- Videó
- Videó lapozó
- Visszaszámláló
- Woocommerce modulok (ebből 16 van)

Divi áruház modul szerkesztője

Webshop kezdőlap a Divi áruház moduljával
- ActiveCampaign
- Mailchimp
- Aweber
- ConvertKit
- Mailerlite
- Mailster
- Infusionsoft
- Ontraport
- iContact
- HubSpot
- Emma
- MadMimi
- GetResponse
- Feedblitz
- ConstantContact
- Sendinblue
- SalesForce
- CampaignMonitor
- MailPoet

Ha bekapcsolod a gomb egyéni stílust, akkor felülírhatod az alapbeállításokat
- 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)
- 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.
- Ha se a lightboxot nem kapcsolod be, se linket nem adsz meg, akkor csak ott lesz a kép.

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

Divi körszámláló modul
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. 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

Divi Woo modulokkal felépített Woocommerce Product Page
- Woo Add to Cart – ez teszi ki az általáad kiválasztott termék kosár gombját
- Woo Additional info – Az egyéb termékinfót jeleníti meg
- Woo Cart Notice – A kosárba tevés utáni üzenetet jelenítni meg
- Woo Description – A termékleírás: választhatsz, hogy a teljes-, vagy a rövid leírást mutassa
- Woo Gallery – Ez a modul teszi ki a termékgaléria képeket
- Woo Images – Ez a modul a termékképet jeleníti meg
- Woo Meta – Ez a modul jelenítni meg a cikkszámot, termékkategóriát
- Woo Price – Ez a termék ára
- Woo Rating – a csillagos értékelést mutatja, ami a kiválasztott termékre vonatkozik
- 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.)
- Woo Reviews – a termékértékeléseket jelenítni meg
- Woo Stock – a készletet jelenítni meg
- Woo Tabs – a „füleket” jeleníti meg (leírás, vélemények, egyéb infó)
- Woo Title – A termék nevét jelzi ki
- 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
- 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 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
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.

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.


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.


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.

