Jak dodać opcję Divi Email Optin do swojego postu na blogu Gutenberg

Blok układu Divi otwiera drzwi na wiele wygodnych sposobów na przeniesienie potężnych funkcji projektowych Divi Builder do domyślnego edytora bloków WordPress (Gutenberg). Pozwala to na napisanie większości treści postów na blogu przy użyciu znanego interfejsu blokowego Gutenberga, a następnie wstrzyknięcie układów Divi tam, gdzie potrzebny jest niestandardowy projekt lub funkcjonalność. Blok układu Divi może zawierać wszystko, co możesz zbudować w Divi Builder, ale doskonale nadaje się również do dołączania czegoś tak prostego i niezbędnego, jak e-mail Optin.

W tym samouczku omówimy, jak dodać piękną opcję Divi Email Optin do posta na blogu Gutenberga za pomocą bloku układu Divi.

Zacznijmy!

zapowiedź

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach 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 pliki

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.

POBIERANIE

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!

Importowanie bloku układu JSON

Prześlij układ do biblioteki Divi

Aby zaimportować plik JSON, który udało Ci się pobrać powyżej, przejdź do swojej 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 wewnątrz postu Gutenberga

Po zaimportowaniu układu możesz przejść do swojego postu Gutenberg i dodać nowy blok układu Divi.

Importuj plik JSON z zapisanych układów

Następnie kliknij „Wczytaj z biblioteki”, przejdź do „Twoich zapisanych układów” i wybierz układ, aby zaimportować blok układu Divi CTA do posta na blogu. Otóż ​​to!

I to wszystko!

Przejdźmy do samouczka, dobrze?

Dodawanie opcji Divi Email Optin do posta na blogu Gutenberg

Utwórz lub edytuj post na blogu

Aby rozpocząć, musimy utworzyć nowy wpis na blogu lub edytować już istniejący. W tym przykładzie dodajmy trochę pozorowanej zawartości do tytułu i treści posta, używając kilku bloków nagłówka i akapitu. Następnie dodaj wyróżniony obraz i wybierz "Bez paska bocznego" dla układu strony w ustawieniach strony Divi.

Dodaj wbudowany blok układu Divi

Po utworzeniu większości postów wystarczy dodać nowy blok układu Divi w dowolnym miejscu w obszarze treści posta. Moglibyśmy dodać go gdzieś bliżej końca posta, aby uchwycić wykwalifikowanego leada, który jest oczywiście zainteresowany treścią posta.

Aby go dodać, najedź kursorem na obszar, do którego chcesz dodać opcję e-mail, a następnie kliknij niebieską ikonę plusa, aby dodać nowy blok. Z listy bloków podręcznych wybierz blok Divi Layout.

Zbuduj nowy układ w bloku układu Divi

Po wybraniu bloku układu Divi będziemy mieli opcję „Zbuduj nowy układ” lub „Załaduj z biblioteki”. Ponieważ musimy zbudować optin e-mail od podstaw, wybierz opcję „Zbuduj nowy układ”.

Projekt przekroju

W edytorze Layout Block możemy rozpocząć projektowanie opcji e-mail, która ma być zawarta w naszym poście. Wszystko, co zaprojektujemy w tym edytorze, będzie wyświetlane w obszarze bloku układu Divi posta.

Aby rozpocząć, otwórz ustawienia sekcji sekcji domyślnej, która już tam jest.

Gradient tła

Następnie dodaj gradient tła w następujący sposób:

• Kolor lewego gradientu tła: #ff9945
• Prawy gradient tła: #f86a4c

Dzielniki

Następnie przejdź do zakładki projektu i przegrody górnej i dolnej części w następujący sposób:

• Styl Top Divider: patrz zrzut ekranu
• Kolor górnego rozdzielacza: #f86a4c
• Powtarzanie poziome górnego dzielnika: 0,8x

• Styl dolnego rozdzielacza: patrz zrzut ekranu
• Kolor dolnej przegrody: #ff9945
• Powtarzanie poziome dolnej przegrody: 0,8x
• Dolna klapka przegrody: pozioma i pionowa

Margines i granica

Po umieszczeniu dzielników nadaj sekcji mały margines powyżej i poniżej, a następnie zakończ ją obramowaniem i animacją w następujący sposób:

• Margines: 20px góra, 20px dół
• Zaokrąglone rogi: 30px
• Szerokość obramowania: 2px
• Kolor obramowania: #ff9945
• Styl animacji: Odwróć

Dodaj kolumnę i ustaw szerokość wiersza

Teraz, gdy sekcja jest gotowa, dodaj do wiersza strukturę jednokolumnową.

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Zbuduj e-mail Optin

Dodaj moduł e-mail Optin

Następnie dodaj moduł optin e-mail do wiersza.

Treść opcji e-mail

W przypadku ustawień zawartości e-mail optin zaktualizuj następujące elementy:

• Tytuł: „Otrzymuj BEZPŁATNE porady co tydzień!”
• Body: [zachowaj domyślną imitację treści]
• Lista Mailchimp: [dodaj listę]
• Użyj pola pojedynczego nazwiska: TAK
• Użyj koloru tła: NIE

E-mail Optin Design

Pola

Przejdź do karty projektu i zaprojektuj pola zgody na pocztę e-mail, aktualizując następujące elementy:

• Układ: ciało po prawej stronie, formularz po lewej
• Kolor tła pól: #f86a4c
• Kolor tekstu pól: #ffffff
• Czcionka pól: IBM Plex Sans
• Rozmiar tekstu pól: 18px
• Odstęp między literami w polach: 2px
• Wysokość linii pól: 2em

Tytuł

Zaktualizuj ustawienia tekstu tytułu w następujący sposób:

• Czcionka tytułu: IBM Plex Sans Condensed
• Grubość czcionki tytułu: pół pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 60px (komputer), 30px (telefon)
• Wysokość wiersza tytułu: 1,2 em (komputer), 1,6 (telefon)

Przycisk

W przypadku przycisku zaktualizuj następujące elementy:

• Użyj niestandardowych stylów dla przycisku: TAK
• Kolor tekstu przycisku: #ff9945
• Kolor lewego gradientu tła przycisku: #ff9945
• Prawy kolor gradientu tła przycisku: #ffffff
• Kierunek gradientu: 90 stopni
• Pozycja końcowa: 34%
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: IBM Plex Sans
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT
• Wypełnienie przycisków: 15px góra, 15px dół

Wyściółka

I na ostatni dotyk dodaj następujące wypełnienie:

• Wyściółka: 5% po lewej, 5% po prawej

Ostateczny wynik

Po zakończeniu projektowania układu w edytorze Divi Layout, upewnij się i zapisz układ. Następnie zapisz post, aby zobaczyć podgląd opcji optin e-mail na aktywnej stronie. Oto jak to wygląda.

Oto niewielka animacja opcji optin e-mail podczas przewijania posta.

Końcowe przemyślenia

Dodanie opcji e-mail do swojego posta Gutenberga stało się niezwykle proste dzięki blokowi układu Divi. Nie tylko możesz dodać w pełni funkcjonalną (i łatwą w użyciu) opcję e-mail optin w kilka sekund, ale także możesz użyć Divi Builder, aby dodać niestandardowy projekt, efekty najechania i animacje. Wszystko to bez konieczności używania wtyczki!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!