5 projektów e-mail opt-in, które możesz stworzyć za pomocą modułu e-mail opt-in Divi

Wszyscy kochamy nowych subskrybentów naszej listy e-mailowej. Jednym z głównych sposobów na pozyskanie nowych subskrybentów jest zapewnienie odwiedzającym dobrze zaprojektowanego formularza zgody na e-mail. Dlatego w tym samouczku pokażę Ci, jak osiągnąć pięć różnych projektów za pomocą modułu zgody na e-mail Divi, aby pobudzić Twoją wyobraźnię, co jest możliwe dzięki temu potężnemu i elastycznemu modułowi.

zapowiedź

Oto podgląd pięciu projektów modułu zgody e-mail Divi, którymi będziemy się dzisiaj zajmować.

#1 Zgłaszanie się do stosów cieni

Zacznij projektować #1

#2 Duża i minimalna akceptacja

Rozpocznij projektowanie #2

#3 Zgoda Chudego

Zacznij projektować #3

#4 Rezerwacja Oferty Zgłoszenie

Zacznij projektować #4

#5 Możliwość wyboru wycięcia w ramce

Zacznij projektować #5

Czego potrzebujesz, aby zacząć

Subskrybuj nasz kanał YouTube

W tym samouczku wszystko, czego potrzebujesz, to Divi. Każdą zbudujemy od podstaw, więc nie ma potrzeby tworzenia gotowego układu. Jednak użyję kilku obrazów z niektórych naszych pakietów układów, ale możesz użyć własnego, jeśli chcesz.

Ważne jest również, aby wiedzieć, że nie będziesz mógł zobaczyć pól formularza zgody na aktywnej stronie, dopóki nie przypiszesz dostawcy/listy poczty e-mail do swojego modułu zgody na pocztę e-mail. Możesz to zrobić w ustawieniach opcji e-mail w sekcji Konto e-mail.

Przejdźmy teraz do tych projektów!

#1 Zgłaszanie się do stosów cieni

Ten projekt dodaje dwa cienie skrzynek do modułu akceptacji wiadomości e-mail Divi, aby uzyskać wyjątkowy efekt układania, który sprawia, że ​​formularze się wyróżniają. Pierwszy cień pola jest dodawany do modułu akceptacji wiadomości e-mail, a drugi cień pola jest dodawany do wiersza, który ma niestandardowy rozmiar i obramowanie, aby działał.

Oto jak to się robi.

Najpierw utwórz nową sekcję z jednokolumnowym wierszem i dodaj do tego wiersza moduł zgody na pocztę e-mail.

Otwórz ustawienia zgody na pocztę e-mail i zaktualizuj następujące informacje:

Kolor tła: #1a0a38
Układ: ciało na górze, formularz na dole
Pola zaokrąglone rogi: 0px
Orientacja tekstu: Środek
Grubość czcionki tytułu: lekka
Rozmiar tekstu tytułu: 36px
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: #00ac69
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 0px
Niestandardowe wypełnienie: 3vw góra, 3vw dół, 5vw lewo, 5vw prawo

Teraz dodajmy naszą pierwszą warstwę cienia pola za naszym modułem akceptacji e-maili.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 25px
Pozycja pionowa cienia pudełka: -25px
Kolor cienia: rgba (26,10,56,0.82)

Dodajmy teraz mały fragment niestandardowego CSS, aby usunąć lewe dopełnienie, które jest domyślnie dodawane do formularza. Przejdź do zakładki zaawansowane i dodaj następujący kod CSS w formularzu zgody.

padding-left: 0px !important;

To zajmuje się ustawieniami modułu zgody na pocztę e-mail. Teraz edytujmy nasz wiersz. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 600px
Niestandardowe dopełnienie: 25px góra, 0px dół, 25px prawo
Szerokość dolnego obramowania: 25px
Kolor dolnej krawędzi: rgba (0,0,0,0)
Szerokość lewej krawędzi: 25px
Kolor lewej krawędzi: rgba(0,0,0,0)

Teraz możemy dodać cień do wiersza.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 50px
Pozycja pionowa cienia pudełka: -50px
Siła rozprzestrzeniania się cieni w pudełku: -25px
Kolor cienia: rgba (26,10,56,0,55)

Sprawdźmy teraz ostateczny projekt.

#2 Duża i minimalna akceptacja

Ten projekt akceptacji wiadomości e-mail jest minimalistyczny, przejrzysty i duży. Pola formularza skalują się wraz z rozmiarem przeglądarki, dzięki czemu świetnie wygląda na wszystkich urządzeniach. I nie jest zbyt duży, żeby zmuszał użytkownika do przewijania.

Oto jak to zrobić.

Najpierw utwórz nową sekcję z jednokolumnowym wierszem i dodaj do tego wiersza moduł zgody na pocztę e-mail.

Otwórz ustawienia zgody na pocztę e-mail i zaktualizuj treść, aby zawierała tekst tytułu i stopki.

Następnie zaktualizuj tło ciemnym kolorem lub obrazem:

Kolor tła: #121212
Obraz tła: jest to opcjonalne. Używam jednego z pakietów układu podcastów

Zanim przejdziemy do zakładki projektowania, aby uzyskać więcej możliwości dostosowania, musimy zrobić miejsce na duże elementy formularza, które dodamy. Aby to zrobić, przejdź do ustawień wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 100%

Wskazówka: użycie 100% niestandardowej szerokości to świetny sposób, aby upewnić się, że Twój projekt nie będzie miał żadnego prawego ani lewego marginesu na urządzeniu mobilnym. Jeśli użyjesz opcji „Make Fullwidth”, Twoja maksymalna szerokość wyniesie 89%, więc nadal będziesz mieć marże na urządzeniach mobilnych.

Teraz wróć do ustawień modułu zgody na e-mail i zaktualizuj następujący projekt:

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

Kolor tła pola formularza: rgba (0,0,0,0)
Pola zaokrąglone rogi: 0px
Szerokość dolnego obramowania pól: 2px
Kolor dolnego obramowania pól: #ffffff

Orientacja tekstu: Środek

Czcionka tytułu: Lato
Grubość czcionki tytułu: lekka
Styl czcionki tytułu: TT
Rozmiar tekstu tytułu: 4vw
Wysokość wiersza tytułu: 1em

Kolor tekstu pola: #ffffff
Czcionka pola: Lato
Grubość czcionki pola: Lekka
Rozmiar tekstu pola: 3.5vw
Odstępy między literami pola: 0.1 em
Wysokość linii pola: 1,3 em

Odstępy między literami ciała: 0,5 em

Rozmiar tekstu przycisku: 4vw
Promień obramowania przycisku: 0px
Odstępy między literami przycisków: 0.1 em
Czcionka przycisku: Lato
Waga czcionki: lekka
Niestandardowe wypełnienie: 10vw góra, 10vw dół, 10vw lewo, 10vw prawo

Zwróć uwagę na użycie jednostki długości vw dla rozmiaru czcionki w połączeniu z jednostką długości em dla wysokości linii i odstępów między literami. Pozwala to na płynne skalowanie tekstu i projektu podczas dostosowywania przeglądarki.

Ostatnim krokiem jest dodanie kilku fragmentów niestandardowego CSS w celu dopracowania projektu. Przejdź do zakładki Zaawansowane i dodaj następujący Niestandardowy CSS w polu Pola formularza zgody:

font-size: 3.5vw;

Dzięki temu rozmiar tekstu podczas pisania będzie zgodny z tekstem zastępczym w polach formularza.

Następnie dodajmy trochę niestandardowego marginesu nad przyciskiem, aby dać mu trochę swobody. Dodaj następujące elementy w przycisku Subskrybuj:

margin-top: 3.5vw;

Sprawdźmy teraz ostateczny projekt.

#3 Zgoda Chudego

Ten kolejny projekt z pewnością będzie popularnym rozwiązaniem dla firm i blogów, które chcą zaoszczędzić trochę miejsca w pionie na swoich postach lub stronach docelowych. Mimo że moduł Divi's Email Opt-in jest najlepszy w przypadku bardziej tradycyjnych formularzy pionowych, możesz przekonwertować formularz na chudy formularz poziomy za pomocą tylko małego fragmentu kodu CSS.

Oto jak to zrobić.

Utwórz nową sekcję z jednokolumnowym wierszem i dodaj do tego wiersza moduł zgody na pocztę e-mail.

Otwórz ustawienia akceptacji e-maili i zaktualizuj treść, tak aby zawierała tytuł, ale nic więcej.

Następnie zaktualizuj projekt za pomocą tła i koloru przycisku w następujący sposób:

Kolor tła: #54677d
Układ: korpus na górze, formularz na dole
Orientacja tekstu: Środek
Kolor tła przycisku: #b0c94f
Szerokość obramowania przycisku: 0px

Teraz nadszedł czas na niestandardowy CSS. Ponieważ chcemy, aby chudy projekt formularza był dostępny tylko na komputerze (a nie na urządzeniach mobilnych), dodamy CSS do strony (w ustawieniach strony) przy użyciu niestandardowego identyfikatora CSS, aby określić styl formularza.

Aby to zrobić, przejdź do zakładki zaawansowane i nadaj modułowi zgody niestandardowy identyfikator CSS.

Identyfikator CSS: chudy

Będzie to używane do kierowania tego formularza za pomocą zewnętrznego CSS, który dodamy do strony.

Teraz otwórz ustawienia strony Divi Builder i dodaj następujący kod CSS w zakładce Zaawansowane.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Ponieważ Divi już używa flex do stylizowania formularza na zapleczu, ten CSS usuwa właściwość flex-wrap, która powoduje, że pola formularza są wyrównane w pionie. Rezultatem jest poziomy układ pól formularza. Dostosowanie właściwości flex-basis do 23% zasadniczo ustawia szerokość każdego z pól formularza. A ponieważ dodaliśmy CSS w zapytaniu o media, projekt będzie możliwy tylko na komputerach z domyślnym układem formularza wyświetlanym na urządzeniach mobilnych.

Oto ostateczny projekt.

#4 Rezerwacja Oferty Zgłoszenie

Ten projekt zawiera kilka obrazów w module zgody na e-mail w celu promowania oferty bezpłatnej książki do rejestracji. W tym celu wystarczy dodać obrazek za pomocą wbudowanego edytora wysiwyg do dodawania opisu i zawartości stopki. To prawda, że ​​możesz osiągnąć ten sam projekt, łącząc moduł e-mail opt-in z innymi modułami w rzędzie dwóch kolumn, ale pomyślałem, że pomocne będzie pokazanie, jak to wszystko zrobić w tym samym module.

Oto jak to zrobić.

Utwórz nową sekcję z jednokolumnowym wierszem i dodaj do tego wiersza moduł zgody na pocztę e-mail.

Otwórz ustawienia zgody na e-mail i pozostań na karcie treści.

Pod opisem skróć domyślny tekst do kilku zdań. Następnie dodaj obraz z biblioteki multimediów, klikając przycisk Dodaj multimedia.

Chcesz mieć pewność, że obraz ma nie więcej niż około 200 pikseli szerokości. W tym przykładzie używam średniego rozmiaru obrazu.

W sekcji Stopka dodaj kilka zdań do treści tekstu stopki, a następnie kliknij przycisk Dodaj multimedia, aby dodać obraz logo pod tekstem (jest to oczywiście opcjonalne).

Aby upewnić się, że obraz jest wyśrodkowany, ustaw opcję wyrównania na środek podczas dodawania obrazu z biblioteki multimediów.

Teraz jesteś gotowy, aby zaktualizować resztę projektu. Zacznij od nadania modułowi obrazu tła i gradientu tła nad obrazem, aby tekst był bardziej czytelny.

Obraz tła: [dodaj obraz]
Kolor lewego gradientu tła: rgba (0,0,0,0,5)
Prawy kolor gradientu tła: rgba (0,0,0,0,5)
Umieść gradient nad obrazem tła: TAK

Następnie zaktualizuj resztę projektu w następujący sposób:

Kolor tekstu przycisku: #333333
Kolor tła przycisku: #ffcb7a
Szerokość obramowania przycisku: 0px
Odstępy między przyciskami: 5px
Grubość czcionki: Ultra Bold
Styl czcionki: TT
Szerokość: 700px
Wyrównanie modułu: środek
Niestandardowe wypełnienie: 3vw góra, 3vw dół, 3vw lewo, 3vw prawo

Oto ostateczny projekt.

#5 Możliwość wyboru wycięcia w ramce

Ta prosta technika projektowania to świetny sposób na nadanie Twojej wiadomości e-mail wyjątkowego wyglądu. Sztuką jest użycie dzielników sekcji, które mają ten sam kolor, co tło sekcji. Następnie, dostosowując wysokość przegródek, możesz nałożyć formularz zgody na e-mail, aby w unikalny sposób wyciąć krawędzie, aby uzyskać ładny efekt obramowania.

Oto jak to zrobić.

Utwórz nową sekcję z jednokolumnowym wierszem i dodaj do tego wiersza moduł zgody na pocztę e-mail.

Otwórz ustawienia akceptacji e-maili i nadaj modułowi gradient tła.

Kolor gradientu tła po lewej stronie: #8300e9
Prawy gradient tła: #06c8ff
Typ gradientu: Promieniowy
Kierunek promieniowy: górny lewy

Następnie zaktualizuj resztę projektu w następujący sposób:

Grubość czcionki tytułu: pogrubiona
Rozmiar tekstu tytułu: 36px
Szerokość: 70% (komputer stacjonarny), 100% (tablet i smartfon)
Wyrównanie modułu: środek
Niestandardowa wyściółka: 6vw góra, 6vw dół, 6vw lewo, 6vw prawo
Zaokrąglone rogi: 50px u góry po lewej, 0px u góry po prawej, 50px na dole po prawej, 0px na dole po lewej

Zapisz swoje ustawienia.

Następnie zaktualizuj ustawienia wiersza o niestandardową szerokość.

Szerokość niestandardowa: 100%

Teraz jesteśmy gotowi, aby dostosować ustawienia sekcji, aby dodać nasz efekt wycięcia ramki za pomocą tych dzielników sekcji.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Kolor tła: #222222

Styl Top Divider: patrz zrzut ekranu
Kolor górnej przegrody: #222222 (upewnij się, że pasuje do koloru tła sekcji)
Wysokość rozdzielacza górnego: 12vw (komputer), 150px (tablet i smartfon)
Układ dzielnika górnego: nad zawartością sekcji

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnej przegrody: #222222 (upewnij się, że pasuje do koloru tła sekcji)
Wysokość dolnej przegrody: 12vw (komputer), 150px (tablet i smartfon)
Powtarzanie poziome dolnej przegrody: 0,8x
Klapka dolnego rozdzielacza: pionowa i pozioma
Układ dolnego rozdzielacza: na górze zawartości sekcji

Sprawdźmy teraz ostateczny projekt.

Sprawdź post na temat tworzenia unikalnych projektów ramek, aby dowiedzieć się więcej o tej technice projektowania.

Końcowe przemyślenia

Te projekty, które możesz wyrazić przez e-mail, to naprawdę tylko wierzchołek góry lodowej, gdy myślisz o wszystkich opcjach stylu dostępnych w Divi. Celowo utrzymałem projekty na tyle proste, aby dać ci szerokie pociągnięcia tego, co możesz zrobić. Możesz samodzielnie odkrywać bardziej dopracowane projekty, dodając nowe czcionki, kolory i efekty najechania kursorem. I nie zapomnij o zabawie w tym procesie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!