Jak wstawić moduły lub wiersze Divi do innych modułów Divi (bez wtyczki)
Opublikowany: 2020-12-31Jeśli byłeś użytkownikiem Divi przez jakiś czas, myśl o włożeniu modułu Divi (lub rzędu) do innego modułu mogła przyjść ci do głowy. W większości przypadków, jeśli wiesz, jak biegle korzystać z Divi, tego rodzaju rzeczy nie są naprawdę konieczne. Moduły Divi to już potężne elementy pełne funkcji i wbudowanych ustawień projektowych. Czasami jednak fajnie byłoby ulepszyć te funkcje, projektując dwa moduły za pomocą Divi, a następnie wkładając jeden w drugi. Dobrym przykładem może być wstawienie modułu (takiego jak formularz kontaktowy) do modułu przełącznika, aby formularz wyświetlał się po kliknięciu przełącznika.
W tym samouczku podzielimy się sposobem wstawiania modułów lub wierszy Divi do innego modułu Divi. Aby to zrobić, musisz dodać kilka małych fragmentów JQuery. Gdy kod jest już na miejscu, możemy użyć Divi Builder, aby dodać odpowiednie klasy CSS, aby kierować elementy, które chcemy wstawić/przenieść, oraz moduł, w którym chcemy je umieścić.
Zacznijmy!
zapowiedź
Oto krótkie spojrzenie na przykłady, które zbudujemy w tym samouczku.
Formularz kontaktowy w module przełączania
Moduł przełączania i moduł przycisków wewnątrz modułu Blurb (prawa kolumna)
Wiersz Divi wewnątrz modułu przełączania
Pobierz układ za DARMO
Aby położyć swoje ręce na układzie z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Subskrybuj nasz kanał YouTube
Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.
Kliknij przycisk Importuj.
W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.
Następnie kliknij przycisk importu.
Po zakończeniu układ sekcji będzie dostępny w Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
- Wybierz opcję „Buduj od podstaw”.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
O czym należy pamiętać
W tym samouczku proces stylizacji wszystkich modułów, których chcesz użyć w tym procesie, można nadal wykonać wizualnie za pomocą wbudowanych ustawień Divi Builder, więc pozostawimy tę część Tobie. Skoncentrujemy się bardziej na tym, jak zastosować odpowiednie klasy CSS i HTML do każdego elementu Divi, aby wstawić moduł(y)/wiersze do innego modułu.
Pamiętaj, że efekt końcowy będziemy mogli zobaczyć tylko na aktywnej stronie, a nie podczas edycji z wizualnego narzędzia Divi Builder. Innymi słowy, możemy zaprojektować moduły za pomocą Divi, ale pozostaną one oddzielne w kreatorze, dopóki nie zobaczysz wersji strony na żywo.
Możesz wstawiać moduły lub wiersze tylko do modułu, który ma możliwość dodawania text/html.
Ponadto, jak wyjaśnimy później, istnieją pewne ograniczenia liczby instancji (modułów lub wierszy wstawianych do innego modułu), które można umieścić w kolumnie lub sekcji. Podczas wstawiania modułów do innego modułu jesteś ograniczony do jednego modułu „docelowego” (moduł będzie zawierał moduły, które chcesz wstawić) na kolumnę. A podczas wstawiania wierszy do innego modułu jesteś ograniczony do jednego modułu „docelowego” na sekcję. Chociaż jest to ograniczenie w pewnym sensie, daje możliwość posiadania wielu wystąpień na stronie w razie potrzeby.
Część 1: Jak wstawić moduły Divi do innego modułu?
W pierwszej części tego samouczka pokażemy, jak wstawić moduły Divi do innego modułu. Najpierw pokażemy, jak dodać moduł kontaktowy w module przełączania. Następnie pokażemy, jak dodać moduł przełączania i moduł przycisku w module Blurb.
Przykład 1: Wstawianie modułu formularza kontaktowego do modułu przełączania
Dodaj nowy wiersz
Aby rozpocząć, dodaj do sekcji nowy wiersz z jedną kolumną.
Dodaj moduł przełączania (moduł docelowy)
Wewnątrz kolumny dodaj moduł przełączania.
W tym przykładzie chcemy wstawić moduł do tego modułu Toggle, który możemy nazwać naszym modułem docelowym. Technicznie rzecz biorąc, faktyczne miejsce docelowe będzie znajdować się w treści modułu Toggle Module (gdzie można dodać tekst/HTML). Aby wyznaczyć lokalizację docelową, musimy wstawić nowy div z niezbędną klasą CSS, która posłuży jako docelowa lokalizacja dla naszego modułu przenośnego (modułu, który chcemy wstawić).
Na karcie treści w ustawieniach przełączania dodaj następujący kod HTML do treści. Pamiętaj, aby kliknąć kartę Tekst przed wstawieniem kodu HTML.
<div class="divi-module-destination"></div>
Dodaj moduł formularza kontaktowego (moduł przenośny)
Następnie musimy dodać moduł, który chcemy wstawić do modułu Toggle. W tym przykładzie wstawimy moduł Contract Form do ciała modułu Toggle. Ważne jest, aby dodać nowy „przenośny” moduł w tej samej kolumnie, co moduł docelowy.
Aby to zrobić, dodaj nowy moduł formularza kontaktowego bezpośrednio pod modułem przełączania.
Kliknij kartę Zaawansowane w ustawieniach Formularza kontaktowego (dowolnego modułu, który chcesz wstawić) i dodaj następującą klasę CSS:
- Klasa CSS: divi-portable-module
Dodaj klasę kolumny
Następnie musimy dodać niestandardową klasę do kolumny, która zawiera oba moduły. Otwórz ustawienia kolumn i dodaj następującą klasę CSS:
- Klasa CSS: nadrzędna kolumna
Dodaj kod
Kod potrzebny do tego, aby to zadziałało, jest dość krótki i prosty. Zasadniczo chcemy użyć JQuery, aby znaleźć każdy moduł z klasą „divi-portable-module” z kolumną nadrzędną (tą z klasą „parent-column”) i dołączyć każdy z tych modułów wewnątrz div z klasą „ divi-module-destination”.
Kod zawiera również fragment do wstawienia modułu przycisku do innego modułu oraz fragment do wstawienia wierszy Divi do modułu.
Aby dodać kod, dodaj nowy moduł kodu pod modułem formularza kontaktowego.
Zanim wkleisz niezbędny kod, dodaj tagi skryptu potrzebne do osadzenia JS w HTML w polu Kod:
Następnie wklej następujący kod między tagi skryptu :
(function ($) {
$(document).ready(function () {
// Option #1: Move Divi Module(s) into a Module
// Limit: One Instance per Column
// Use following code if you want to move
// a module inside another module. Each column with the
// class 'parent-column' will append any module(s)
// with the class 'divi-portable-module' to the div
// with the class 'divi-module-destination'.
// Only one instance of 'divi-module-destination' should
// be added per column.
$('.divi-portable-module').each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Buttons: Insert Button Module(s) into a Module
// Adding a custom CSS class to a button module
// is applied to the 'a' tag which is a child element
// of the module wrapper. This code makes sure to append
// the entire button module wrapper (the parent element)
// as well. This functionality is the same as option #3 above.
// Siimply use the class 'divi-portable-button' on a button module
// instead of 'divi-portable-module'.
$('.divi-portable-button').parent().each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Option #2: Move Divi Row(s) into a Module
// Limit: One Instance per Section
// Use the following code if you want to move
// a row inside a module on more than one section
// of a page. Each section with the
// class 'parent-section' will append any row(s)
// with the class 'divi-portable-row' to the div
// with the class 'divi-row-destination'.
// Only one instance of 'divi-row-destination' should
// be added per section.
$('.divi-portable-row').each(function () {
$(this).closest('.parent-section').find('.divi-row-destination').append($(this));
});
});
})(jQuery);
Zrozumienie funkcjonalności
Wewnątrz Divi Builder na zapleczu moduły pozostaną oddzielne. Jeśli jednak wyświetlisz wyniki na stronie na żywo w interfejsie, zobaczysz, że formularz kontaktowy został wstawiony do modułu Toggle.
Jeśli sprawdzisz kod na aktywnej stronie, zobaczysz, że moduł formularza kontaktowego został pomyślnie wstawiony do div z klasą „divi-module-destination”.
Stylizacja modułów
Jak wspomnieliśmy wcześniej, moduły pozostaną oddzielne w zapleczu Divi Builder. Jednak style, które dodasz do każdego z nich, będą nadal obowiązywać. Dlatego zachęcamy do dodawania aktualizacji stylów zarówno modułu docelowego, jak i modułu przenośnego za pomocą Divi Builder.
UWAGA: W niektórych przypadkach style modułu docelowego (obecnie modułu nadrzędnego) mogą być zastosowane do wstawionego modułu. W takim przypadku powinieneś być w stanie nadpisać ten styl, aktualizując ustawienia wstawionego modułu.
Wynik
Oto ostateczny wynik podczas przeglądania strony na żywo.
Przykład 2: Wstawianie modułu Toggle do modułu Blurb
W następnym przykładzie wstawimy moduł Toggle wewnątrz modułu Blurb. Proces jest taki sam jak poprzednio. Fragment kodu ogranicza użycie jednego modułu docelowego na kolumnę. Innymi słowy, możesz mieć wiele przenośnych modułów z klasą „divi-portable-module”, które można dodać do modułu docelowego, ale możesz mieć tylko jedną instancję div z klasą „divi-module-destination” na kolumna.
Aby to zademonstrować, powtórzmy ten sam proces z inną grupą modułów w innej kolumnie tego samego wiersza.
Dodaj nową kolumnę do wiersza
Najpierw dodaj nową kolumnę do istniejącego wiersza.
Dodaj klasę kolumny
Nadaj nowej kolumnie następującą klasę CSS, tak jak to zrobiliśmy w pierwszej kolumnie:
- Klasa CSS: nadrzędna kolumna
Dodaj moduł Blurb (moduł docelowy)
W nowej kolumnie dodaj moduł notki, który będzie służył jako nasz moduł docelowy.
Wewnątrz treści notki wklej następujący kod HTML, który zawiera ten sam element div z klasą „divi-module-destination”, do której chcesz wstawić przenośne moduły (w tym przypadku pod pozorowanym tekstem treści):
<div class="divi-module-destination"></div>
Dodaj moduł przełączania (moduł przenośny)
Ponieważ chcemy dodać moduł toggle do notki, utwórz nowy moduł toggle w tej samej kolumnie co notatka.
Następnie dodaj następującą klasę CSS do modułu Toggle, aby oznaczyć go jako moduł, który chcemy przenieść/wstawić do notki:
- Klasa CSS: divi-portable-module
Wynik
Teraz sprawdź stronę na żywo, aby zobaczyć wynik. Przełącznik będzie teraz znajdował się w module notek.
Przykład 3: Wstawianie modułu przycisków do modułu Blurb
W następnym przykładzie wstawimy moduł przycisku do tego samego modułu notki, co w poprzednim przykładzie. Normalnie dla każdego innego modułu powtórzylibyśmy ten sam proces, aby dodać nowy przenośny moduł do notki. Ale ponieważ moduł przycisku jest nieco inaczej zbudowany na zapleczu, musimy dodać inną klasę do modułu przycisku.
Dodaj moduł przycisku (moduł przenośny nr 2)
Aby to zrobić, dodaj nowy moduł przycisku pod modułem przełączania, który jest już wstawiany do notki.
Następnie dodaj następującą klasę CSS do modułu przycisku:
- Klasa CSS: divi-portable-button
Wynik
Teraz sprawdź wynik na aktywnej stronie. Moduł Blurb zawiera teraz moduł przełącznika i moduł przycisku.
A oto odpowiedni fragment kodu używany do wstawienia modułu przycisku do modułu z div „docelowym”. Główna różnica w przypadku tego fragmentu kodu polega na tym, że kierujemy się na element nadrzędny (zakulisowy element div wrappera) klasy przycisku „divi-portable-button”.
Część 2: Jak wstawić wiersze Divi do modułu?
Jeśli chcesz wstawić cały wiersz (lub wiersze) wewnątrz modułu, proces jest bardzo podobny do wstawiania modułu do innego modułu. Musimy dodać klasę „parent-section” do sekcji zawierającej moduł docelowy i przenośne wiersze, które chcemy wstawić. Musimy dodać div z klasą „divi-row-destination” do modułu docelowego. I musimy dodać klasę „divi-portable-row” do wierszy, które chcemy wstawić do modułu docelowego.
Oto jak to zrobić.
Dodaj sekcję
Najpierw dodaj nową, zwykłą sekcję do strony.
W zakładce Zaawansowane ustawień sekcji dodaj następującą klasę CSS:
- Klasa CSS: sekcja nadrzędna
Dodaj wiersz dla modułu docelowego
Dodaj nowy jednokolumnowy wiersz do przechowywania modułu docelowego.
Dodaj moduł przełączania (moduł przeznaczenia wiersza)
W tym przykładzie wstawimy wiersz do modułu Toggle. Dlatego dodaj nowy moduł Toggle do wiersza.
Ponieważ moduł przełączania jest naszym modułem docelowym, otwórz ustawienia przełącznika i dodaj następujący kod HTML do treści treści:
<div class="divi-row-destination"></div>
Utwórz przenośny wiersz
Teraz, gdy moduł docelowy jest na miejscu, dodaj nowy wiersz pod poprzednim wierszem. Będzie to służyć jako przenośny wiersz, który wstawimy do modułu Toggle.
Wypełnij wiersz zawartością
W tym momencie możesz wypełnić wiersz dowolną zawartością/modułami, które chcesz za pomocą Divi Builder. Pamiętaj, że wszystko w wierszu zostanie w końcu wstawione do modułu przełączania, ponieważ znajduje się w wierszu.
Dodaj klasę do wiersza
Następnie otwórz ustawienia wiersza i oznacz go jako wiersz, który chcesz wstawić do modułu Toggle, nadając mu następującą klasę CSS:
- Klasa CSS: divi-portable-row
Jak to działa
Przypominamy, że wiersz pozostanie oddzielony od modułu podczas edycji układu za pomocą Divi Builder na zapleczu. Ale funkcja jest na miejscu, aby wstawić wiersz do modułu Toggle.
Wynik
Aby zobaczyć wynik, sprawdź stronę na żywo i otwórz moduł przełączania. Zawiera teraz cały wiersz.
A oto odpowiedni fragment kodu, który to umożliwia. Zwróć uwagę na używane odpowiednie klasy.
Wstawianie wielu wierszy do modułu
Dopóki zachowujesz jedną instancję modułu docelowego (tj. div z klasą „divi-row-destination”) na sekcję, możesz wstawić wiele wierszy do tego miejsca docelowego, po prostu nadając mu tę samą klasę „divi-portable-row ”.
Na przykład możesz dodać kolejny wiersz z modułem galerii nad wierszem z wcześniej utworzonymi elementami menu. Następnie nadaj wierszowi tę samą klasę „divi-portable-row”
Oba wiersze z klasą „divi-portable-row” zostaną wstawione do modułu Toggle.
Korzystanie z wtyczki/krótkiego kodu
Jeśli szukasz wtyczki, która robi coś podobnego i zapewnia większą elastyczność lub opcje, możesz sprawdzić wtyczkę Shortcodes for Divi z naszego rynku, która pozwala osadzić dowolny układ Divi na swojej stronie za pomocą krótkiego kodu. Po zainstalowaniu wtyczka wygeneruje skrócony kod do osadzenia dla każdego układu zapisanego w bibliotece Divi.
Końcowe przemyślenia
W większości przypadków nie powinno być potrzeby wstawiania modułów lub wierszy do innych modułów, chyba że istnieje specjalna potrzeba. Zwykle możesz uzyskać układ / projekt, którego potrzebujesz, bez konieczności robienia tego typu rzeczy. Jednak dla tych z was, którzy szukają prostego sposobu na zrobienie tego bez konieczności uciekania się do wtyczki, miejmy nadzieję, że to rozwiązanie przyda się.
Dodatkowo pomyśl o wszystkich możliwych zastosowaniach!
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!