Zbuduj własne moduły z grupami modułów Divi 5

Czy chcesz tworzyć niestandardowe moduły Divi bez dotykania wiersza kodu? Dzięki nowym grupom modułów Divi 5 możesz teraz połączyć wiele elementów w jeden, wielokrotny układ - wszystko z wnętrza budowniczego wizualnego. Bez JavaScript. Brak PHP. Po prostu przeciągnij, upuść i zaprojektować.

W tym szybkim przewodniku pokażemy, jak tworzyć własne moduły za pomocą nowych grup Divi. Zobaczysz konkretnie, jak budować od zera, stolik wyceny, opinie lub dowolny inny rodzaj modułu, który możesz sobie wyobrazić.

Uwaga: Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale nie zalecamy jeszcze przekształcenia istniejących stron na Divi 5. Zobaczysz coś od nas, gdy jesteśmy pewni procesu aktualizacji.

Jakie są nowe grupy modułów Divi?

Grupy lub grupy modułów to nowy element kontenera, który łączy wiele modułów i/lub wierszy w pojedynczej jednostce w kolumnie. Ma to tę zaletę, że grupuje wiele mniejszych elementów i umożliwia przeniesienie całej grupy wszędzie tam, gdzie potrzebujesz na stronie.

Grupy modułów można przenosić na całej stronie bez problemu i staną się szczególnie pomocne po wydaniu FlexBox i funkcji Builder Loop. Po wydaniu Builder pętli będziesz mógł używać grup do tworzenia niestandardowych układów blogów, menu stopki, galerii obrazów i innych. Jest to więc teraz przydatne, ale za kilka miesięcy użycie będzie jeszcze bardziej imponujące.

Zagnieżdżone rzędy były kolejną wysoce wymaganą funkcją Divi, którą dodaliśmy do Divi 5. Pozwalają ci umieścić rzędy w rzędach treści serca. Chociaż nazwa „Grupy modułów” może sprawić, że wydaje się, że można grupować tylko moduły, jest odwrotnie. W rzeczywistości możesz użyć zagnieżdżonych rzędów w grupach, co otwiera możliwość zbudowania nieskończenie zagnieżdżonych struktur układu i mieć je częścią grupy wielokrotnego użytku.

Jak stworzyć własne moduły Divi

Grupy modułów pozwalają tworzyć własne moduły w edytorze. Możesz grupować moduły i zagnieżdżone wiersze razem, aby stworzyć złożone aranżacje, które przypominają niektóre z naszych większych modułów.

1. Utwórz własny moduł Blub

Nasz wbudowany moduł Blurb

Moduł Blurb jest podstawą w wielu projektach Divi. Jest to moduł wyjścia, ale kiedy go rozbijesz, ma tylko kilka rzeczy, które klikną. To są:

Obraz/ikona, tytuł/nagłówek i zawartość ciała. Możemy utworzyć grupę modułów i umieścić w niej te moduły: obraz lub ikonę, nagłówek i moduł tekstowy. Razem te trzy moduły mogą odtwarzać tę samą zawartość, przydatną w module Blurb.

Anatomia modułu Blurb

Tworzenie własnej grupy modułów BLURB

Oto przykład modułu BLURB z ikoną po lewej stronie i wizualnie identycznej replikacji modułu Blub za pomocą A:

Grupa, wiersz wewnętrzny, kolumna (1) z modułem ikonem i kolumną (2) z modułem nagłówka i tekstu.

Rentgen jest włączony, aby zobaczyć szkielet każdego z nich, aby zobaczyć ich podobieństwa, mimo że są one skonstruowane inaczej.

Jedyną specjalną rzeczą w tym układzie jest to, że pierwsza kolumna jest ustawiona na szerokość 18%, a druga zajmuje szerokość 82% (opcje wielkości kolumn są nowe z aktualizacją funkcji zagnieżdżonych wierszy).

Budowanie takich modułów ma dodatkową zaletę, że zapewniają więcej opcji stylizacji projektowej dla każdego elementu. Moduł Blub ułatwia umieszczenie obrazu/ikony, ale ma kompromisy. Zastosuj podejście, które daje Ci najbliżej pożądanego projektu.

2. Utwórz własny moduł tabel cenowych

Nasz wbudowany moduł tabeli cenowej

Niektóre moduły Divi mają znacznie więcej. Tak jest w przypadku modułu tabeli cenowej. Istnieje kilka pól na tabelę cenową, jak widać poniżej.

Anatomia modułu tabeli cenowej

Tworzenie własnej grupy modułów tabeli cenowej

Jeśli odtworzymy moduł tabeli cenowej za pomocą grup modułów i modułów poszczególnych, otrzymamy ten wynik.

Zwróć uwagę na siedem osobnych pól tekstowych/opcji na tabelę. Wizualnie każda tabela ma trzy główne części (nagłówek, cena i szczegóły). Istnieje kilka sposobów na robienie tego w grupie, ale poniżej użyliśmy trzech zagnieżdżonych rzędów dla każdego z nich. Stamtąd użyliśmy modułów nagłówkowych i tekstowych w każdej sekcji, aby odtworzyć tabelę cenową.

Zaletą korzystania z modułu tabeli cenowej jest to, że obsługuje on większość układu i dostajesz przewagę. Ale czasami oznacza to, że trudniej jest pracować, gdy chcesz z tym zrobić określone rzeczy. Wykonanie dodatkowej pracy, aby stworzyć ten układ tabeli cenowej z prostszymi modułami, daje nam większą kontrolę projektowania i swobodę.

3. Utwórz własny moduł referencyjny

Nasz wbudowany moduł referencyjny

Moduły referencyjne Divi to kolejny, który wiele się dzieje. Obejmuje maksymalnie cztery różne elementy tekstowe i parę opcji obrazu/ikon.

Tworzenie własnej grupy modułów referencyjnych

Najbardziej czasochłonnym aspektem odtwarzania modułu referencyjnego jest poprawa odstępu (szczególnie w wielu punktach przerwania). Ale kiedy to zdobędziesz, rzeczy są dość proste. W całym układzie grupy użyliśmy kilku modułów ikon, obrazu, nagłówka i tekstu.

Zaletą odtwarzania niektórych z tych modułów jest to, że otwierasz się na więcej możliwości. Niektóre bardziej skomplikowane moduły mają opinię, który może manipulować tylko rozległym CSS. Ale kiedy budujesz go sam, masz większą swobodę poruszania się po wielu z tych podelementów.

Projektując w ten sposób, otwiera się więcej możliwości układu. Na przykład możesz zrobić to, co nie jest możliwe (przynajmniej to, co nie jest łatwe) z modułem referencyjnym, przenosząc elementy do zupełnie różnych pozycji w ramach większej grupy. Jeśli Twój projekt wymaga pewnej elastyczności, budowanie niektórych z tych fragmentarycznych może pomóc w osiągnięciu precyzji, której szukasz.

Uwielbiam też pomysł, abyś mógł stworzyć niestandardowy moduł referencyjny, taki jak ten powyżej, i użyć nadchodzącego konstruktora pętli do pobierania referencji z CPT. Zapewni Ci projektowanie Freedom + możliwość szybszego budowania dzięki ustrukturyzowanym danemu i treści.

Zapisz niestandardowy moduł jako element globalny

Kiedy nowy moduł wydaje się odpowiedni, zapisz go jako globalny element do użytku gdzie indziej w Twojej witrynie. Otwórz menu Ustawienia grupy. Kliknij opcję „ Zapisz do biblioteki ”.

Pojawi się modalny, w którym możesz później wymienić swój moduł, aby ułatwić użycie. Przełącz „ Zapisz jako globalny ”, aby przechowywać go w bibliotece Divi. Wszelkie zmiany, które dokonujesz później, aktualizuje każdą kopię w Twojej witrynie.

Twój globalny element będzie miał teraz wyraźny zielony kolor, który pomoże Ci zauważyć, że jest globalny.

Możesz uzyskać dostęp do wszystkich zapisanych globalnych elementów i innych elementów biblioteki w pulpicie pulpitu> Divi> Divi Library . Edycja globalnego elementu tutaj zaktualizuje go na stronie. Możesz także edytować globalne elementy bezpośrednio na stronach, na których są używane (i będzie aktualizować SiteSwide).

Potrzebujesz modułu na każdej budowieniu witryny? Przełącz „ Zapisz w Cloud Divi ”. Moduł jest teraz w Twojej bibliotece w chmurze, gotowy na każdy projekt w dowolnym miejscu. Elementy biblioteczne trzymają rzeczy na jednej stronie, podczas gdy Cloud Divi podróżuje z tobą z witryny na stronę. Użyj obu, aby przyspieszyć kompilacje i wprowadzić większą spójność.

Zdobądź chmurę Divi

Zbuduj dziś coś nowego

Grupy modułów wkładają nową moc w ręce. Możesz kształtować układy oryginalne i właśnie to potrzebujesz. Zacznij od odtworzenia modułu Blub i zobacz, jak pasuje ten proces. Kiedy przyzwyczajasz się do korzystania z Divi w ten sposób, zauważysz, że tworzysz jeszcze bardziej skomplikowane projekty, ponieważ możesz użyć standardowych modułów lub tworzyć własne.

Wiele z powyżej, było możliwe z Divi, zanim grupy spadły, ale ułatwiają one. Zwłaszcza gdy uruchamiamy Flex i Builder Loop, grupy staną się podstawą twojego projektowania z Divi.

Gotowy do awansu? Weź świeżą stronę i przetestuj swój pierwszy moduł niestandardowy już dziś.