Blok układu Divi otwiera drzwi do wielu wygodnych sposobów integracji potężnych funkcji projektowych Divi Builder z domyślnym edytorem bloków WordPress (Gutenberg). Dzięki temu możesz napisać większość treść swojego wpisu na blogu, korzystając ze znanego interfejsu blokowego Gutenberga, a następnie wstrzyknij układy Divi tam, gdzie potrzebny jest niestandardowy projekt lub funkcjonalność. Blok układu Divi może zawierać wszystko, co możesz utworzyć w Divi Builder, ale świetnie nadaje się również do dołączenia czegoś tak prostego i niezbędnego, jak forma subskrypcji.
W tym samouczku zobaczymy, jak dodać plik forma subskrypcja posta na blogu Gutenberga przy użyciu bloku układu Divi.
Możliwy wynik
Importowanie bloku układu JSON
Pobierz układ z biblioteki Divi
Aby zaimportować plik JSON, który byłeś w stanie pobrać powyżej, przejdź do biblioteki Divi na zapleczu pulpitu WordPress i kliknij „Importuj i eksportuj”.
Następnie wybierz plik JSON w folderze pobierania i kliknij „Importuj układy Divi Builder”.
Dodaj nowy blok Divi w poście Gutenberga
Po zaimportowaniu układu możesz uzyskać dostęp do wiadomości Gutenberga i dodać nowy blok układu Divi.
Zaimportuj plik JSON z zapisanych prezentacji
Następnie kliknij „Załaduj z biblioteki”, przejdź do „Twoje zapisane układy” i wybierz układ, aby zaimportować blok układu Divi CTA do swojego wpisu na blogu. Otóż to !
I to wszystko!
Przejdźmy do samouczka, dobrze?
Dodaj moduł e-mail Optin do swojego posta na blogu Gutenberga
Utwórz lub edytuj post na blogu
Aby rozpocząć, musimy utworzyć nowy wpis na blogu lub edytować istniejący. Dla tego przykładu dodajmy treść sfałszuj tytuł i treść artykułu, używając kilku bloków nagłówka i akapitu. Następnie dodaj wyróżniony obraz i wybierz „Brak paska bocznego” dla układu w ustawieniach strony Divi.
Dodaj blok układu Divi online
Gdy już utworzymy większość postu, wystarczy, że dodamy nowy blok układu Divi w dowolnym miejscu obszaru postu. treść publikacji. Możemy dodać go gdzieś bliżej końca wiadomości, aby pozyskać wykwalifikowanego leada, który jest wyraźnie zainteresowany treścią wiadomości.
Aby go dodać, najedź kursorem na obszar, w którym chcesz dodać opcję e-mail, a następnie kliknij niebieską ikonę plusa, aby dodać nowy blok. Na liście bloków kontekstowych wybierz blok Divi Layout.
Utwórz nowy układ w bloku układu Divi
Po wybraniu bloku układu Divi będziemy mieli opcję „Utwórz nowy układ” lub „Załaduj z biblioteki”. Ponieważ musimy stworzyć opcję poczty od zera, wybierz opcję „Utwórz nowy układ”.
projekt sekcji
W edytorze układu możemy przystąpić do projektowania opcji e-mail, którą zamieścimy w naszym poście. Wszystko, co zaprojektujemy w tym edytorze, pojawi się w obszarze bloku Divi Layout Block.
Aby rozpocząć, otwórz ustawienia sekcji domyślnej, która już tam jest.
Do układu wybierzemy układ dwukolumnowy.
Następnie do jednej z kolumn dodamy moduł Email Optin, wybór kolumny pozostawiam Państwu.
Następnie dostosujemy tło sekcji. Zawsze możesz zmienić wartości, aby Twój projekt był wyjątkowy. Użyliśmy jednak następujących wartości:
- Tło: #ff6100
- Separator górny i dolny: 13., licząc od góry.
- Szerokość elementu rozdzielającego: 40px (góra i dół).
Teraz dodamy tekst do przeciwnej kolumny. Tutaj użyjesz tekstu motywacyjnego, aby przynieść gość subskrybować.
Następnie będziesz musiał dokonać różnych modyfikacji:
- Czcionka tekstu: Montserrat
- Kolor czcionki: #FFF
- Czcionka napisów tekstowych H2: Montserrat
- Tekst napisów H2 Rozmiar: 2.5 em
- Tekst napisów H2 Kolor: #FFF
Nie zapomnij skonfigurować systemu poczty e-mail, z którego będziesz korzystać. Powinieneś wiedzieć, że Gutenberg jest kompatybilny z MailChimp.
końcowe przemyślenia
Dodanie zgody na e-mail do postu Gutenberga stało się niezwykle proste dzięki blokowi układu Divi. Możesz nie tylko dodać w pełni funkcjonalną (i łatwą w użyciu) opcję poczty e-mail w ciągu kilku sekund, ale możesz także użyć Divi Builder, aby dodać niestandardowy projekt, efekty najechania kursorem i animację. Wszystko to bez konieczności używania wtyczki!