Divi határozottan az egyik WordPress témák legnépszerűbb manapság. Ennek a témának az egyik erőssége az építője (Divi Builder), ami nagyon emlékeztet minket arra, Visual Composer.

A Divi Builder kétféle formában kapható: a szokásos „Back-end Builder” és „Visual Builder”. Mindkét felület lehetővé teszi, hogy pontosan ugyanolyan típusú webhelyeket építsen fel ugyanazokkal a tartalmakkal és ugyanazokkal a tervezési paraméterekkel. Az egyetlen különbség a kezelőfelület. A háttérépítő a WordPress irányítópultján belül él, és minden más szabványos WordPress-beállítással elérhető.

A WordPress felhasználói felület belsejében helyezkedik el, és lecseréli a szokásos WordPress bejegyzésszerkesztőt. Nagyszerű a gyors változtatások végrehajtásához, miközben az irányítópulton tartózkodik, de az irányítópult is korlátozza, és a webhely blokkolt ábrázolásaként jelenik meg. Ez az oktatóanyag csak a vizuális készítőre összpontosít.

Töltse le a DIVI WordPress témát

divi builder.jpeg

A vadonatúj Visual Builder viszont lehetővé teszi az oldalak felépítését a weboldal elülső részén! Elképesztő élmény, és sokkal gyorsabb tervezést tesz lehetővé. Amikor tartalmat ad hozzá, vagy módosítja a tervezési beállításokat a vizuális készítőben, a módosítások azonnal megjelennek.

Kattintson az oldalra, és elkezdheti gépelni. Kiemeli a szöveget, és beállíthatja annak betűtípust és stílusát. Felvehet új tartalmat, felépítheti az oldalt, és mindent megnézhet a szem előtt.

a-visual-builder.jpg használata

A Visual Builder engedélyezése

Amikor be van jelentkezve a WordPress irányítópultjára, navigálhat a webhelyének bármelyik oldalára, majd a készítő elindításához kattintson a WordPress adminisztrációs sávjában található "Visual Builder aktiválása" gombra. vizuális.

hogyan lehet a vizuális builder.jpeg engedélyezni

Ha az oldalt az irányítópulton szerkeszti, a Divi Builder háttérfelületének tetején található „Visual Builder engedélyezése” gombra kattintva válthat a vizuális készítőre (vegye figyelembe, hogy először aktiválja a Divi Buildert, mielőtt megjelenik a vizuális készítő gomb).

használja a Divi.jpeg vizuális készítőt

A Visual Builder alapjai

A Divi ereje a Visual Builderben rejlik, amely egy olyan oldalkészítő, amely a "Drag And Drop" funkcióval működik, és amely lehetővé teszi, hogy bármilyen típusú weboldalt készítsen a tartalom egyesítésével és elrendezésével.

Az építtető három fő építőelemet használ: szakaszokat, sorokat és modulokat. Számuk egységes használata lehetővé teszi számtalan elrendezés létrehozását. A szakaszok a legnagyobb építőelemek, és sorcsoportokat tartalmaznak. A sorok a szakaszok belsejében vannak, és a modulok elhelyezésére szolgálnak. A modulok a sorok belsejében helyezkednek el. Ez a Divi-webhelyek felépítése.

Szekciók

A Divivel történő elrendezés tervezésénél használt legalapvetőbb és legnagyobb építőelemek a szakaszok. Nagy tartalmi csoportok létrehozására használják őket, és ez az első dolog, amit hozzáad az oldalához. Három típusú szakasz létezik: Normál, Speciális és Teljes szélesség.

A szokásos szakaszok oszlopsorokból állnak, míg a teljes szélességű szakaszok teljes szélességű modulokból állnak, amelyek kiszélesítik a képernyő teljes szélességét. A speciális szakaszok fejlettebb oldalsó elrendezéseket tesznek lehetővé.

sor

A sorok a szakaszok belsejében vannak, és tetszőleges számú sort elhelyezhet egy szakaszon belül. Sokféle oszlop közül lehet választani. Miután meghatározta az oszlop struktúráját a sorához, modulokat helyezhet el a kívánt oszlopba. Az oszlopokban elhelyezhető modulok száma nincs korlátozva.

Modulok

A modulok a webhelyet alkotó tartalom darabjai. Minden Divi modul alkalmazkodhat bármilyen oszlopszélességhez, és mindegyikük teljes mértékben reagál.

Készítse el első oldalát

A három alapvető építőelemet (szakaszok, vonalak és modulok) használják az oldal felépítéséhez.

egy Divi.jpg oldal építése

Az első szakasz hozzáadása

Mielőtt bármit hozzáadhatna az oldalához, először hozzá kell adnia egy szakaszt. A kék (+) gombra kattintva szakaszok vehetők fel. Ha az oldalon már meglévő szakasz fölé viszi az egérmutatót, akkor egy kék (+) gomb jelenik meg. Ha rákattint, egy új szakasz kerül hozzáadásra annak a szakasznak a alatt, amelyen jelenleg lebeg.

Ha új oldalt indít, az első szakasz automatikusan hozzáadódik.

a divi.jpg szakaszok listája

Az első sor hozzáadása

Az első szakasz hozzáadása után elkezdhet oszlopsorok hozzáadását. Egy szakasz tetszőleges számú sort tartalmazhat, és különböző elrendezésű oszlopok keverésével és egyeztetésével különféle elrendezéseket hozhat létre.

Sor hozzáadásához kattintson a zöld (+) gombra egy üres szakaszon belül, vagy kattintson a zöld (+) gombra, amely akkor jelenik meg, amikor az aktuális sor fölé viszi az egeret, hogy új sort adjon hozzá alább. Miután rákattintott a zöld (+) gombra, egy oszloptípusok listája fogadja. Válassza ki a kívánt oszlopot, és készen áll az első modul hozzáadására.

hogyan lehet beszúrni a Divi.jpeg sort

Az első modul hozzáadása

A modulok hozzáadhatók a sorok belsejébe, és minden sor tetszőleges számú modult tartalmazhat. A modulok az oldal tartalmi elemei, és a Divi több mint 40 különféle elemet tartalmaz, amelyekkel felépíthet.

Használhat olyan alapvető modulokat, mint a szövegek, képek és gombok, vagy fejlettebb modulokat, például csúszkákat, portfóliógalériákat és eCommerce Üzletek.

Modul hozzáadásához kattintson a szürke (+) gombra, amely egy üres oszlopban található, vagy kattintson a szürke (+) gombra, amely akkor áll fenn, amikor az egérrel az oldalon lévő modul fölé viszi az egérmutatót, és új modult szeretne hozzáadni. . Miután rákattint a gombra, megkapja a modulok listáját.

Válassza ki a választott modult, amely hozzáadódik az oldalához, és megjelenik a modul kezelőpanelje. E vezérlőpult használatával elindíthatja a modul konfigurálását.

illesszen be egy DIVI.jpeg modult

Ennyi az oktatóanyag. A ma tanultak alapján elrendezést készíthet a Divi segítségével. A témában haladó oktatóanyagokkal térünk vissza. Már letöltheted a Divi téma.

[vc_row center_row = "igen"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" kibontva "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] A DIVI TÉMA LETÖLTÉSE [/ vcex_button] [/ width [»v_c_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "üres" layout = "kibontva" igazítás = "középre" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" TE fa-downLOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Egyéb Divi oktatóanyagok