Jak stworzyć Sticky Email Optin w Divi, który przyciąga uwagę?

Przyklejone opcje pozycji Divi umożliwiają przyklejenie dowolnego elementu na stronie. Umożliwia to naprawianie elementów na stronie w określonych odstępach czasu, gdy użytkownik przewija stronę w dół, dzięki czemu dłużej pozostają widoczne. A dla was, blogerów, bardzo sensowne jest dodanie przyklejonego e-maila do szablonu posta, aby subtelnie, ale skutecznie utrzymać ten ważny formularz na pierwszym planie.

W tym samouczku pokażemy, jak dodać przyklejoną zgodę na e-mail do szablonu posta na blogu Divi, który przyciągnie więcej uwagi i, miejmy nadzieję, przyciągnie więcej potencjalnych klientów. Pokażemy Ci nawet, jak dodać efekt najechania wyskakującym okienkiem do przyklejonych e-maili!

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz szablon Sticky Email Optin Post 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!

Jak przesłać szablon posta z opcją Sticky Email Optin do swojej witryny?

Aby przesłać szablon, przejdź do Divi Theme Builder na zapleczu swojej witryny WordPress.

Następnie w prawym górnym rogu zobaczysz ikonę z dwiema strzałkami. Kliknij ikonę.

Przejdź do zakładki importu, prześlij plik JSON, który udało Ci się pobrać w tym poście, i kliknij „Importuj szablony Divi Theme Builder”.

Po przesłaniu pliku zauważysz nowy szablon z nowym obszarem treści, który został przypisany do wszystkich postów. Zapisz zmiany Divi Theme Builder, gdy tylko chcesz, aby szablon został aktywowany.

Przejdźmy do samouczka, dobrze?

Część 1: Zaimportuj gotowy szablon postu na blogu

W tym samouczku użyjemy szablonu wpisu na blogu dla pakietu układów konsultanta biznesowego Divi, który można pobrać z tego wpisu na blogu.

Po pobraniu pliku zip musisz go rozpakować i zaimportować do Divi Theme Builder.

Oto jak to zrobić…

1. przejdź do Divi > Kreator motywów.
2. Kliknij ikonę przenoszenia w prawym górnym rogu.
3. Wybierz kartę importu w wyskakującym okienku przenoszenia.
4. Wybierz plik json z pobranego pliku.
5. Kliknij przycisk Importuj.

Część 2: Dodawanie opcji Sticky Email Optin do szablonu

Po zaimportowaniu pliku JSON kliknij ikonę edycji, aby edytować niestandardowy układ szablonu treści.

Na dole układu szablonu posta znajduje się sekcja z formularzem zgody na e-mail, którego będziemy używać do wyrażenia zgody na przyklejony e-mail.

W tym przykładzie chcemy, aby przyklejona pozycja e-mail opt-in została umieszczona w sekcji, aby użytkownik nie widział zgody na e-mail, dopóki nie przewinie do sekcji z przyklejoną zgodą e-mail. Ponieważ jednak opcja zgody na e-mail znajduje się w osobnej sekcji, nie będzie wystarczająco dużo miejsca, aby się przenieść. Dlatego musimy umieścić go w powyższej sekcji, która zawiera sekcję komentarzy, aby akceptacja e-maila była najechana na tę sekcję, zanim zatrzyma się w pierwotnym miejscu.

Dodaj nowy wiersz w sekcji powyżej

Aby to zrobić, utwórz nowy jednokolumnowy wiersz bezpośrednio pod wierszem zawierającym moduł komentarzy.

Dodaj styl wiersza

Następnie otwórz ustawienia nowego wiersza i dodaj kolor tła w następujący sposób:

• Kolor tła: #282828

Na karcie projektu zaktualizuj następujący rozmiar i odstępy w rzędzie:

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Marża: górna 15vw
• Padding: 0px na górze, 0px na dole

Przenieś zgodę na pocztę e-mail do nowego wiersza

Po ustawieniu stylu wiersza przenieś zgodę na e-mail w dolnej sekcji do nowego wiersza, który właśnie utworzyłeś.

Usuń dolną sekcję (już jej nie potrzebujemy).

Zaktualizuj zgodę na pocztę e-mail z przyklejoną pozycją

Następnie otwórz ustawienia zgody na e-mail teraz w nowym wierszu i zaktualizuj opcje pozycji drążka w następujący sposób:

• Lepka pozycja: trzymaj się do dołu
• Górny limit lepkości: sekcja

Spowoduje to, że zgoda na e-mail zostanie przyklejona na dole okna przeglądarki podczas przewijania sekcji, zanim zostanie zatrzymana w wierszu nadrzędnym.

Zaktualizuj styl zgody na e-mail

Na karcie projektu zaktualizuj układ zgody na e-mail w następujący sposób:

• Układ: ciało na górze, formularz na dole

Następnie zaktualizuj następujący styl:

• Rozmiar tekstu tytułu: 32px
• Maksymalna szerokość: 600px
• Wyrównanie modułu: Środek

Następnie ustaw styl animacji na brak.

Wynik

W tym momencie możemy sprawdzić wynik, przeglądając post w innym oknie przeglądarki.

Dodawanie stylizacji przyklejonej pozycji

Gdy e-mail opt-in znajduje się w pozycji przyklejenia, możemy dodać do modułu określoną stylizację, która będzie miała zastosowanie tylko do stanu przyklejenia. Dzięki temu możemy dodawać różne schematy kolorów, aby zrównoważyć białe tło, aby nieco bardziej się wyróżniało.

Aby dodać inny kolor tła dla stanu przyklejenia, otwórz ustawienia akceptacji e-maili i wybierz ikonę miniatury (ikona przyklejenia) obok opcji tła. Następnie kliknij przyklejoną kartę i dodaj następujący kolor tła:

• Kolor tła (lepki): #282828

Kontynuuj ten sam proces, aby dodać lepką stylizację do następujących opcji na karcie projektu:

• Kolor tekstu tytułu (przyklejony): #ffffff
• Kolor tekstu (przyklejony): #ffffff
• Maksymalna szerokość (przyklejony): 500px
• Padding (przyklejony): 18px góra, 30px dół, 30px po lewej, 30px po prawej

Wynik

Sprawdźmy teraz wynik w poście na żywo.

Dodaj efekt wyskakującego okienka do wyrażenia zgody na przyklejony e-mail

Aby dodać efekt wyskakującego okienka na przyklejonym e-mailu, otwórz ustawienia zgody na e-mail i zaktualizuj przekształcenie kija w następujący sposób:

• Przekształć Przesuń oś Y (przyklejony): 85%

Spowoduje to obniżenie poziomu akceptacji e-maili (poza widocznym obszarem) o 85% własnej wysokości, odsłaniając tylko tyle opcji, aby użytkownik mógł najechać kursorem na tytuł.

Następnie dodaj stan najechania do opcji przekształcenia, aby pozycja przekształcenia przekształcenia powróciła do pierwotnej pozycji po najechaniu kursorem:

• Przekształć Przesuń oś Y (najechanie): 0%

Wynik

Oto ostateczny wynik.

Ostateczne rezultaty

Oto trzy wersje naszego przyklejonego nagłówka, który zbudowaliśmy.

Końcowe przemyślenia

Na szczęście Divi ułatwia dodawanie przyklejonych e-maili do Twojej witryny. Dzięki temu masz więcej czasu na dostosowywanie projektu przyklejonego elementu, aby uzyskać bardziej unikalne sposoby wyświetlania formularza. Mamy nadzieję, że ta technika dobrze sprawdzi się w nadchodzących projektach blogowych.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!