Hogyan épül fel a Divi? – Útmutatás kezdőknek

június 12, 2019

szerző: Flora

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.

Hogyan épül fel a Divi? - Útmutatás kezdőknek 1

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.

Hogyan épül fel a Divi? - Útmutatás kezdőknek 2

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.

Hogyan épül fel a Divi? - Útmutatás kezdőknek 3
Hogyan épül fel a Divi? - Útmutatás kezdőknek 4

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.

Hogyan épül fel a Divi? - Útmutatás kezdőknek 5

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 😉

Hogyan épül fel a Divi? - Útmutatás kezdőknek 6
Hogyan épül fel a Divi? - Útmutatás kezdőknek 7

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.

Hogyan épül fel a Divi? - Útmutatás kezdőknek 8
Hogyan épül fel a Divi? - Útmutatás kezdőknek 9

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ű:)

Hogyan épül fel a Divi? - Útmutatás kezdőknek 10
Hogyan épül fel a Divi? - Útmutatás kezdőknek 11

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 😉

További cikkek

Megjelent az új WordPress 5.3! Mit kell róla tudnod?

Megjelent az új WordPress 5.3! Mit kell róla tudnod?

Megjelent az új WordPress 5.3, már lehet is rá frissíteni, de azért ne felejts el egy teljes biztonsági mentést készíteni az oldaladról mielőtt rányomsz a gombra! 😉 Az új verzióban továbbra is a Gutenberg névre keresztelt blokk szerkesztő fejlesztésére koncentráltak,...

Október 17-én érkezik az új Divi 4.0

Október 17-én érkezik az új Divi 4.0

Megérkezett a Divi 4.0 és amíg várunk rá, egy nyereményjátékban is részt lehet venni, aminek a kereteiben kisorsolnak egy 15"-os Macbook Pro-t. Itt találod a részleteket>>Theme builder - az új sablon építő A Divi sablonnal és a Divi builder pluginnal már eddig...

Hírlevél

Palackposta tagság