A Divi sablon rengeteg variációra ad lehetőséget, szinte bármit meg lehet csinálni benne, és a használata sem bonyolult, de van néhány dolog, amit mindenképpen érdemes tudni róla, mert különben nagyon gyorsan nagyon meglepő dolgok történhetnek szerkesztés közben.
Egy kattintásra eltűnik egy szövegdoboz, fél oldallal lejjebb kerül egy szövegrész, vagy csupán érdekes, nem általad megadott színű sávok jelennek meg két blokk között? Ezek nagyon könnyen előfordulhatnak, ha egy-két alapvető dologgal nem vagy tisztában a Divi kezelésével kapcsolatban.
A Divi felépítése
A Divi alapvetően szakaszokból (sections), sorokból (rows) és modulokból (modules) áll. Ezeknek a könnyebb megkülönböztethetőség érdekében különböző színük is van: a szakaszok kékek, a sorok zöldek, a modulok pedig sötétszürkék.
Az oldal nagy egységei a szakaszok; egy oldal állhat csupán egy szakaszból is, de többől is. Fontos, hogy az oldal hátterét (tehát azt az alapszínt vagy képet, ami az egész képernyőre kiterjed), a szakasz háttere határozza meg.
A szakaszokon belül helyezhetjük el a sorokat; ezeknek különböző elrendezési módjai vannak, amikkel megszabjuk az oszlopok számát egy sorban és hogy azok milyen arányban töltsék ki a sort. Fontos viszont, hogy amit itt választunk, az fogja meghatározni a sor (zöld) rész elrendezését: annyi modult adhatunk hozzá egymás mellé, amennyi zöld téglalapot látunk az előnézeti képen (a modul típusát persze később még megváltoztathatjuk, nem kell tehát megijedni, ez nem egy végleges döntés, ami utána visszavonhatatlanul meghatározza az oldalad;)
A sorokba modulokat illeszthetünk be, olyan elrendezésben, ahogyan azt az előbb kiválasztottuk. A Divi rengeteg féle modult ajánl, ezek között van például szöveg, portfólió, idézet, lenyíló lista, visszaszámláló, blog bejegyzés, számoló, gomb, kapcsolati űrlap, galéria, és még sok más. A kiválasztott modul típusa alapvetően meghatározza a modul kinézetét és elrendezését, de természetesen azért még testreszabhatjuk.
Nagyon fontos tudnunk, hogy ezek az elemek milyen sorrendben épülnek egymásra. A legalsó a szakasz, fölötte a sor, és a legfelső a modul. Ezek úgy fedik egymást, mint az egymásra tett, különböző méretű papírlapok: a modul háttérszíne/ -képe mindig látszik, a sor háttere csak a modul körül látszik, a szakasz háttere pedig csak a sor körül kimaradó sávban.
Mit lehet tenni, ha nem szeretnéd kitakarni a modul hátterével az alatta levő hátteret? A megoldás egyszerű, elég átlátszó hátteret állítanod neki. (Ennek a színkódja rgba(255,255,255,0.1), a végén a 0.1-et tetszés szerint változtathatod attól függően, hogy mennyire szeretnéd átlátszóvá tenni a hátteret.) Még egyszerűbb üresen hagyni a hátteret, vagy ha már beállítottál egy színt, akkor azt kitörölni.
Nézzük meg, milyen lehetőségeink vannak a Visual Builderben, ha egy szakasz vagy egy modul fölé visszük az egeret (ennél a két elemnél ugyanazok a gyorsgombok állnak rendelkezésünkre, a sorok gyorsmenüjében van ezekhez képest egy plusz lehetőség, erre utána térünk ki).
1. Move/Mozgatás
Ezzel értelemszerűen a szakaszt/modult elmozgathatjuk, egyszerű drag-and-drop-pal. Vigyázat! Nagyon könnyű ugyanezt, de nem szándékosan elérni, ez pedig nem szokott kellemes perceket okozni 😉 Ha bárhol az oldalon kattintasz és elmozdítod az egeret, akkor, ha nem szövegbe kattintottál, ugyanúgy drag-and-drop lesz az eredmény! Figyeld tehát a kurzort, és amint átvált a mozgatást jelző keresztre, ne próbálj meg szöveget kijelölni, mert nem biztos, hogy az lesz a végeredmény, amit szeretnél 😉
2. Settings/Beállítások
Nem árulok el nagy titkot, ha azt mondom, hogy itt tudod testreszabni a szakaszt/modult. Itt találod meg többek között a szöveg stílusát és méretét, a hátteret, illetve a szakaszt/modult körülvevő hely nagyságát, szegélyeket, ikonokat, és még sok hasznos beállítást, melyekről egy külön cikk fog beszámolni. Itt is lehet szerkeszteni a dobozban lévő szöveget: ez talán ideálisabb megoldás, mert nem okoz meglepetéseket például az előbb említett véletlenszerű drag-and drop.
3. Duplicate/Duplikálás
A név itt is magáért beszél (ezért is olyan könnyű használni a Divit;) : erre a gombra kattintva azonnal megduplázod az adott szakaszt/modult. Ez a funkció nemcsak a szakasz/modul formázását viszi át az új, duplikált elembe, hanem minden tartalmat is, amit utána már csak át kell írnunk, de nem kell újraformáznunk.
4. Save to library/Mentés a könyvtárba
A Divi Librarybe elmenthetünk bármilyen szakaszt/sort/modult, melyet később még szeretnénk használni. Ez nagyon hasznos, és rengeteg felesleges kattintást spórolhat meg a továbbiakban, tudni kell viszont jól használni, hogy azt a néhány buktatót elkerülhessük, amik megnehezítenék a dolgunkat. Elmenthetünk ide bármilyen felépítő elemet, és később egy az egyben ugyanezt a már elkészített elemet beszúrhatjuk a weboldalon bárhova, így nem kell egyesével újra beállítgatni a betűtípust, -méretet, -színt, a hátteret, az elrendezést, stb. A befektetett idő, illetve energia megtakarításáról lesz még szó egy másik cikkben, ahol ügyes, „spórolós” trükkökkel szolgálunk majd 🙂
5. Delete/Törlés
Erről többet nem is írnék, azt hiszem, egyértelmű:)
5+1. Change Column Structure / Szerkezet megváltoztatása
Az extra opció, ami csak a zöld, sorokat szimbolizáló elemeknél elérhető. Ez a menüpont engedi meg, hogy a már kiválasztott elrendezést módosítsuk, például ha rájövünk, hogy mégsem egy nagy és két kicsi dobozt szeretnénk ebben a blokkban, hanem mondjuk három nagyot és egy kicsit.
Remélem, hasznos volt a cikk, ha kérdésed merült fel, tedd fel a Facebook oldalamon és igyekszem válaszolni 😉
