Jak zaprojektować atrakcyjną sekcję subskrypcji dla każdego rodzaju witryny za pomocą Divi

Jednym z głównych powodów, dla których ludzie tworzą strony internetowe, jest znalezienie nowego sposobu na dotarcie do grupy docelowej. Kiedy już zrobisz ten pierwszy krok i zaczniesz budować stronę internetową, zaczynasz się zastanawiać, jak dokładnie będziesz w stanie skontaktować się z potencjalnymi klientami. Jedną z rzeczy, które okazały się pomocne dla wielu właścicieli witryn, jest budowanie list. Wszystko sprowadza się do zbierania adresów e-mail od odwiedzających, przekształcania ich w potencjalnych klientów (i ostatecznie klientów) za pomocą e-mail marketingu.

A z budowaniem listy przychodzi tworzenie atrakcyjnych sekcji subskrypcji na swojej stronie internetowej. Chcesz, aby Twoja sekcja subskrypcji przyciągała wzrok, a co ważniejsze, chcesz, aby sekcja subskrypcji była konwertowana. Na potrzeby tego samouczka stworzyliśmy oszałamiającą sekcję subskrypcji, która niezaprzeczalnie przyciągnie uwagę odwiedzających. Łączymy zgrabny projekt z argumentami, dlaczego warto zapisać się na listę e-mailową. Ponadto udostępnimy również trzy palety kolorów, z których możesz wybierać podczas tworzenia projektu.

Weźmy się za to!

Subskrybuj nasz kanał YouTube

Zapowiedź

Zanim zagłębimy się w samouczek, spójrzmy na wynik na różnych rozmiarach ekranu.

Paleta kolorów #1

• Kolor #1: rgba (79,35,255,0.88)
• Kolor #2: #e09900
• Kolor #3: #4f23ff

Paleta kolorów #2

• Kolor #1: rgba (255,35,97,0.75)
• Kolor #2: #e09900
• Kolor #3: #d80e00

Paleta kolorów #3

• Kolor #1: rgba (41,17,147,0,75)
• Kolor #2: #00ffd8
• Kolor #3: #291193

Zbliżać się

Wybierz jedną z powyższych palet kolorów (lub stwórz własną) i używaj tych kolorów w trakcie samouczka. Odnosimy się do koloru #1, #2 lub #3, gdy używamy koloru w naszych ustawieniach. Sprawiamy również, że moduł Subskrybuj nakłada się na dwie kolumny i podkreślamy korzyści wynikające z zapisania się na listę e-mailową.

Odtwórz sekcję subskrypcji

Dodaj nową sekcję

Górny rozdzielacz

Otwórz stronę, do której chcesz dodać sekcję subskrypcji i dodaj nową sekcję standardową. Otwórz ustawienia swojej sekcji od razu i dodaj następujący górny rozdzielacz:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #FFFFFF
• Wysokość dzielnika: 200px
• Przerzucanie dzielnika: Pionowy

Dolny rozdzielacz

Dodaj ten sam rodzaj przegrody na dole swojej sekcji:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #FFFFFF
• Wysokość dzielnika: 200px
• Przerzucanie dzielnika: Pionowy

Rozstaw

Otwórz ustawienia odstępów dalej i usuń wszystkie domyślne dopełnienie sekcji, dodając „0px” do dopełnienia górnego i dolnego.

Dodaj nowy wiersz

Struktura kolumny

Teraz, gdy skończyliśmy ze wszystkimi ustawieniami sekcji, możemy dodać nowy wiersz. Wybierz dla niego następującą strukturę kolumn

Tło gradientowe

Otwórz ustawienia wiersza i kontynuuj, dodając następujące tło gradientowe:

• Pierwszy kolor gradientu: kolor nr 1
• Drugi kolor gradientu: kolor #2
• Kierunek gradientu: 123deg
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Kontynuuj, dodając wybrany obraz tła. Ten obraz tła będzie widoczny tylko trochę. Wybierz także „Okładka” jako Rozmiar obrazu tła.

Kolor tła kolumny 2

Następnie dodaj „rgba(255,255,255,0.87)” jako kolor tła kolumny 2.

Rozmiary

Zamierzamy również zmniejszyć odstęp między obiema kolumnami i sprawić, by wiersz zajmował całą szerokość ekranu, stosując następujące ustawienia rozmiaru:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Ostatnią rzeczą, którą musisz zrobić w ustawieniach wiersza, jest dodanie niestandardowego wypełnienia:

• Górna i dolna wyściółka: 0px
• Górna wyściółka kolumny 1: 200px
• Dolna wyściółka kolumny 1: 100px
• Kolumna 2 Górna wyściółka: 300px (komputer) 50px (tablet i telefon)
• Dolna wyściółka kolumny 2: 100px (tablet i telefon)
• Kolumna 2 dopełnienie lewego i prawego: 50px

Dodaj Blurb Module #1 do kolumny 1

Dodaj tytuł plamy

Teraz zacznijmy dodawać nasze moduły! Zaczniemy od pierwszej kolumny, dodając moduł Blurb. Gdy skończymy modyfikować ten Moduł Blurb, ponownie użyjemy jego ustawień również dla pozostałych dwóch. Po dodaniu modułu Blurb nadaj mu tytuł.

Dodaj ikonę rozmycia

Następnie dodaj ikonę do modułu Blurb. W pierwszym module użyliśmy następującej ikony:

Ustawienia ikon

Zmień wygląd ikony, dodając następujące ustawienia:

• Kolor ikony: #FFFFFF
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 43px

Ustawienia tekstu tytułu

Używamy tylko tytułu notki. Dlatego musimy zmodyfikować ustawienia tekstowe tylko w H4:

• Czcionka tytułu: Yeseva One
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #FFFFFF
• Odstępy między literami tytułu: -1px

Rozmiary

Zmodyfikujemy również szerokość naszego modułu Blurb zgodnie z różnymi rozmiarami ekranu:

• Szerokość treści: 150px
• Szerokość: 33% (komputer stacjonarny), 40% (tablet), 60% (telefon)
• Wyrównanie modułu: Środek

Rozstaw

Na koniec dodaj następujące niestandardowe wypełnienie do swojego modułu Blurb:

• Górna i dolna wyściółka: 50px

Klonuj moduł Blurb dwa razy i zmodyfikuj wyróżniony moduł Blurb

Zmień ikonę i zawartość

Możesz teraz śmiało sklonować moduł Blurb dwukrotnie. Zachowaj je wszystkie w pierwszej kolumnie. Dla każdego z nowych modułów Blurb zmień ikonę i tytuł, aby dopasować je do wiadomości, którą chcesz wysłać.

Dodaj kolor tła

Podświetlimy środkowy moduł Blurb. Aby to zrobić, zaczniemy od dodania do niego białego koloru tła.

Zmień kolor ikony i tekstu tytułu

Zmienimy również kolor ikony i tytułu H4 na „#000000”.

Dodaj zaokrąglone rogi

Następnie dodamy „5px” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Na koniec dodamy trochę głębi, korzystając z pierwszej opcji cienia pola.

Dodaj moduł tekstowy nr 1 do kolumny 2

Ustawienia tekstu

Przejdźmy do drugiej kolumny! Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Po dodaniu treści zastosuj do niej następujące ustawienia tekstu:

• Czcionka tekstu: Yeseva One
• Kolor tekstu: #000000
• Rozmiar tekstu: 54px
• Wysokość linii tekstu: 1em

Dodaj moduł tekstowy nr 2 do kolumny 2

Rozstaw

Tuż pod tym modułem tekstowym dodamy kolejny moduł tekstowy do opisu. Po dodaniu treści dodaj „20px” do górnego marginesu.

Dodaj moduł e-mail Optin do kolumny 2

Kolor tła

Następnym modułem, który musimy dodać, jest moduł Email Optin. Po dodaniu zmień kolor tła na „rgba(255,255,255,0)”.

Konto e-mail

Dodaj swoje konto e-mail, wybierając swojego usługodawcę.

Pola

Kontynuuj, otwierając Ustawienia pola i wyłączając pola Imię i Nazwisko.

Ustawienia pola

Zmodyfikujemy również ustawienia pola. Usuń zaokrąglone rogi, dodając „0px” do każdego z rogów. Dodaj również pierwszą opcję cienia pola.

Ustawienia przycisków

Następnie zmień wygląd swojego przycisku:

• Kolor tekstu przycisku: #FFFFFF
• Kolor tła przycisku: kolor nr 3
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Yeseva One
• Pokaż ikonę przycisku: Tak
• Kolor ikony przycisku: #FFFFFF
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie
• Box Shadow: Wybierz pierwszą opcję

Rozstaw

Na koniec spraw, aby moduł subskrypcji nakładał się na obie kolumny, używając następujących ustawień odstępów:

• Górny margines: 20px (komputer), 0px (tablet i telefon)
• Lewy margines: -60% (komputer stacjonarny i tablet), 0px (telefon)
• Prawy margines: 60% (komputer), 50% (tablet), 0px (telefon)

Dodaj moduł śledzenia mediów społecznościowych do kolumny 2

Dodaj tyle sieci społecznościowych, ile chcesz

Na koniec dodamy moduł śledzenia w mediach społecznościowych. Śmiało i dodaj sieci społecznościowe, które chcesz się pojawić.

Zaokrąglone rogi

Po dodaniu wszystkich sieci społecznościowych dodaj „50px” do każdego z rogów w ustawieniach obramowania.

Rozstaw

Przesuniemy również moduł w dół, dodając „50px” do górnego marginesu.

Zmień kolor tła każdej sieci społecznościowej indywidualnie

Na koniec zmień kolor tła każdej z sieci społecznościowych z osobna na „#000000”.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

Sekcje subskrypcji są ważną częścią Twojej witryny. Pomagają budować listy e-mailowe, umożliwiają marketing e-mailowy i przekształcanie leadów w odwiedzających w ciągu zaledwie kilku sekund. W tym poście pokazaliśmy, jak stworzyć oszałamiającą sekcję subskrypcji, która będzie pasować do każdego rodzaju witryny. Połączyliśmy za pomocą wspaniałego projektu z zaletami rejestracji. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!