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

Wynik końcowy divi

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”.

Import Divi

Następnie wybierz plik JSON w folderze pobierania i kliknij „Importuj układy Divi Builder”.

Importuj json divi 1

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.

Projekt 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 !

Wstrzyknij formularz na Gutenberga
Subskrypcja e-mail w układzie Divi

I to wszystko!

Wstrzyknij moduł formularza Divi

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.

Projekt przedmiotu

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.

Dodaj blok projektu divi

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”.

Zaprojektuj nowy projekt divi

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.

Wybierz układ divi

Następnie do jednej z kolumn dodamy moduł Email Optin, wybór kolumny pozostawiam Państwu.

moduł e-mailowy umożliwiający wyrażenie zgody na divi

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.
Separator modułów Divi
  • Szerokość elementu rozdzielającego: 40px (góra i dół).

Teraz dodamy tekst do przeciwnej kolumny. Tutaj użyjesz tekstu motywacyjnego, aby przynieść gość subskrybować.

Moduł tekstowy Divi

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
dostosowywanie tytułu divi

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!