Im bardziej atrakcyjne wizualnie wezwanie do działania, tym większa szansa na współczynnik konwersji. Istnieje wiele sposobów projektowania wezwań do działania, ale w tym artykule pokażemy, jak tworzyć wspaniałe szablony kolumn wezwań do działania z półprzezroczystymi obrazami i nakładającymi się kolumnami. Możesz znaleźć półprzezroczyste obrazy w folderze pobierania poniżej, ale możesz użyć innych obrazów. Będziesz także mógł bezpłatnie pobrać plik JSON!
Chodźmy.
Zapowiedzi
Zanim przejdziemy do samouczka, przyjrzyjmy się, jak to wygląda na różnych rozmiarach ekranu.
Zacznijmy od nowa!
Dodaj nową sekcję
kontekst
Zacznij od utworzenia nowej strony lub dodania nowej zwykłej sekcji do istniejącej strony. Następnie przejdź do ustawień sekcji i dodaj tło gradientowe.
- Tło: gradient
- Gradient koloru gradientu: bardzo jasny szary #efefef
- Kolor tła drugi: biały #ffffff
- Typ gradientu: promieniowy
- Kierunek promieniowy: środek
- Pozycja początkowa: 52%
- Końcowa pozycja: 50%
rozstaw
Przejdź do zakładki Projekt i dostosuj wypełnienie w ustawieniach odstępów.
- Górna i dolna wyściółka
- Biuro: 0vw
- Tapicerka W Pończochach
- Tablet + telefon: 70vw
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
zaklejania
Następnie dostosuj szerokość i maksymalną szerokość linii.
- Szerokość: 100%
- Maksymalna szerokość 100%
Dodaj moduł tekstowy
Dodaj H2 i treść tekstową
Czas dodać moduły! Najpierw dodaj moduł tekstowy i wstaw go treść H2 i wybrane przez Ciebie akapity.
teksty
Przejdź do karty projektu i stylizuj tekst w następujący sposób:
- Tekst czcionki: Open Sans
- Wyrównanie tekstu: środek
- Kolor tekstu: zielony #5bba1b
- Rozmiar tekstu:
- Biuro: 1.2vw
- Tablet: 2.8vw
- Telefon: 3.6vw
- Rozstaw liter: 0.2vw
- Wysokość linii tekstu: 1.8em
Tytuł 2 Tekst
Po stylizowaniu tekstu akapitu stylizuj również tekst H2.
- Sekcja: H2
- H2 Waga czcionki: Doppio One
- H2 Wyrównanie tekstu: Środek
- Kolor tekstu H2: #3d3d3d
- H2 Rozmiar tekstu:
- Biuro: 4.4vw
- Tablet: 5.9vw
- Telefon: 6.9vw
rozstaw
I dodaj trochę wypełnienia u góry.
- Top Padding: 212px
Dodaj moduł podziału
widoczność
W module Tekst dodaj moduł podziału i ustaw widoczność na „Tak”.
- Widoczność: tak
Linia
Następnie zmień kolor separatora.
- Kolor linii: Ciemnoszary #545454
zaklejania
Teraz dostosuj rozmiar separatora, aby wyglądał na mniejszy.
- Waga separatora: 4px
- Szerokość: 9%
- Wyrównanie modułu: centrum
rozstaw
Dodaj także ujemny górny margines.
- Górny margines:
- Biuro: -40px
- Tablet + telefon: -15px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz z trzema kolumnami o jednakowym rozmiarze. Będzie to podstawa do zaprojektowania kolumny CTA.
kontekst
Przed dodaniem modułów dodaj gradient do tła parametrów linii.
- Tło: gradient
- Gradient koloru tła 1: biały #ffffff
- Kolor tła gradientowego dwa: przezroczysty
- Typ gradientu: promieniowy
- Promieniowe centrum sterowania
- Pozycja początkowa: 42%
- Końcowa pozycja: 50%
zaklejania
Teraz dostosuj rozmiar linii.
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości wypełnienia.
- górna tapicerka: 22vw
- Wyściółka u dołu: 10vw
- Lewe i prawe wypełnienie: 10vw
Ustawienia kolumny 1
kontekst
Kontynuuj, otwierając kolumnę 1 i dodając tło gradientowe.
- Tło: gradient
- Kolor tła gradientowego: Niebieski #2a4eed
- Kolor tła gradientowego dwa: jasnoniebieski #91f5f7
- Rodzaj gradientu: liniowy
- Gradient Direction: 38deg
- Pozycja początkowa: 23%
granica
Następnie zdefiniuj zaokrąglone rogi kolumn w ustawieniach obramowania.
- Zaokrąglone rogi: 2vw na wszystkich rogach
Pole cienia
Dodaj też subtelny odcień pudełka.
- Box Shadow: druga opcja
- Cień pudełka Pozycja pozioma: 6px
- Pozycja pionowa w polu cienia: -10px
- Box Shadow Blur Force: 50px
przepełnienia
Upewnij się, że przepełnienia kolumny są również widoczne.
- Przelew poziomy i pionowy: widoczny
Ustawienia kolumny 2
kontekst
Przejdź do drugiej kolumny i dodaj następujące tło gradientowe:
- Tło: gradient
- Kolor gradientu pierwszego: #1ba038
- Dwukolorowy gradient w tle: #c6f727
- Rodzaj gradientu: liniowy
- Gradient Direction: 38deg
- Pozycja początkowa: 23%
granica
Dodaj także promień obramowania do kolumny.
- Zaokrąglone rogi: 2vw w czterech rogach
Pole cienia
Z subtelnym kloszem.
- Box Shadow: druga opcja
- Cień pudełka Pozycja pozioma: 6px
- Pozycja pionowa w polu cienia: -10px
- Box Shadow Blur Force: 50px
Transformator
Ta kolumna jest trochę wyższa niż inne. Aby stworzyć ten efekt, dostosujemy ustawienia konwersji transformacji dla kolumny 2.
- Przetłumacz transformator:
- Biuro: -8vw, oś y
- Tablet + telefon: 30vw, oś Y
przepełnienia
Widoczne są również przepełnienia tej kolumny.
- Przelewy poziome i pionowe: widoczne
Ustawienia kolumny 3
kontekst
Przejdźmy do ostatniej i ostatniej kolumny! Dodaj tło gradientowe.
- Tło: gradient
- Gradientowy kolor tła 1: #f0562c
- Dwukolorowy gradient w tle: #f1a526
- Rodzaj gradientu: liniowy
- Gradient Direction: 38deg
- Pozycja początkowa: 23%
granica
Przejdź do zakładki Projekt i dodaj promień obramowania do każdego rogu.
- Zaokrąglone rogi: 2vw na wszystkich rogach.
Pole cienia
Dodaj również odcień pudełka.
- Box Shadow: druga opcja
- Cień pudełka Pozycja pozioma: 6px
- Pozycja pionowa w polu cienia: -10px
- Box Shadow Blur Force: 50px
Transformator
Na mniejszych ekranach będziemy musieli zmienić położenie kolumny, używając niestandardowych wartości konwersji przekształcania.
- Przetłumacz transformator:
- Tablet + telefon: 60vw
przepełnienia
Na koniec dostosuj ustawienia przelewu.
- Przelewy poziome i pionowe: widoczne
Dodaj moduły obrazów
Zaimportuj półprzezroczysty obraz wycięcia
Po ustawieniu wszystkich parametrów kolumny nadszedł czas na dodanie modułów. Dodaj moduł obrazu do kolumny 1 i prześlij wybrany półprzezroczysty obraz. Obrazy, których użyliśmy, możesz znaleźć w spakowanym folderze, który mogłeś pobrać na początku tego artykułu.
zaklejania
Zrób moduł o pełnej szerokości.
- Przełącz na tryb pełnej szerokości: Tak
rozstaw
Następnie dodaj niestandardowy margines i wartości wypełnienia.
- Górny margines:
- Biuro: -11vw
- Tablet + telefon: -24vw
- Wyściółka lewa i prawa:
- Biuro: 5vw
- Tablet + telefon: 20vw
Zmień drabinę w unoszący się w powietrzu
Dodajemy do obrazu subtelny efekt po najechaniu za pomocą opcji skali transformacji w ustawieniach transformacji.
- Skala transformacji po najechaniu kursorem: 120% na obu osiach.
Z-Index
Aby upewnić się, że obraz pojawi się u góry kolumny, zwiększ wartość indeksu z na karcie Zaawansowane.
- Indeks Z: 1
Zduplikuj i przeciągnij moduły obrazu
Teraz dwukrotnie sklonuj moduł obrazu i umieść duplikaty w pozostałych dwóch kolumnach. Ten proces jest łatwiejszy w trybie przewodowym.
- Zacznij od dwukrotnego skopiowania modułu obrazu
- Następnie przeciągnij nowe moduły obrazów do kolumn 2 i 3.
- Pobierz różne obrazy
Dodaj moduły tekstowe
Dodaj zawartość H3
Pod obrazkiem w kolumnie 1 dodaj moduł tekstowy i wstaw go treść H3 według własnego wyboru.
Tytuł 3 Tekst
Przejdź do karty projektu i zastosuj styl do ustawień tekstu H3.
- Tytuł tekstu: H3
- Czcionka H3: Doppio One
- H3 Waga czcionki: pogrubiona
- H3 Wyrównanie: środek
- Kolor tekstu H3: biały #ffffff
- H3 Rozmiar tekstu:
- Biuro: 1.8vw
- Tablet: 5vw
- Telefon: 6vw
Duplikuj i przeciągaj moduły tekstowe
Sklonuj moduł tekstowy dwukrotnie i umieść duplikaty w dwóch pozostałych kolumnach.
- Zacznij od dwukrotnego skopiowania modułów tekstowych.
- Następnie przeciągnij je pod moduły obrazu w kolumnach 2 i 3.
- Zmienić treść w każdym nowym module tekstowym
Dodaj moduły tekstowe
Dodaj treść
Pod modułem tytułowym dodaj nowy moduł tekstowy. Dodaj treść akapitu w obszarze zawartości.
teksty
Teraz stylizuj tekst w następujący sposób.
- Tekst czcionki: Open Sans
- Kolor tekstu: biały #ffffff
- Rozmiar tekstu:
- Biuro: 0.6vw
- Tablet: 2vw
- Telefon: 2.8vw
- Wysokość linii tekstu: 2.2em
rozstaw
Aby wyśrodkować tekst, dostosuj odstępy między modułami w następujący sposób.
- Dolna marża:
- Biuro: 5vw
- Tablet + telefon: 10vw
- Wyściółka w lewo i prawo
- Biuro: 5vw
- Tablet + telefon: 14vw
Duplikuj i przeciągaj moduły tekstowe
Sklonuj moduł tekstowy dwa razy i przeciągnij duplikaty do pozostałych dwóch kolumn.
- Zacznij od dwukrotnego skopiowania modułów tekstowych
- Następnie umieść duplikaty w kolumnach 2 i 3
- Zmień zawartość każdego duplikatu
Dodaj moduły przycisków
Dodaj treść
Przejdźmy do ostatniego modułu! Dodaj moduł przycisku do kolumny 1 z wybraną kopią.
Dodaj link
Wstaw link w opcjach łącza modułu.
wyrównanie
Teraz wyrównaj moduł przycisku.
- Wyrównanie: środek
Style przycisków
Następnie wywołaj przycisk w następujący sposób.
- Rozmiar tekstu przycisku:
- Biuro: 1vw
- Tablet: 2vw
- Telefon: 3vw
- Kolor tekstu przycisku: Jasnoniebieski #2a4eed
- Kolor tła przycisku: biały #ffffff
- Promień granicy przycisku: 50vw
- Czcionka przycisku: Double One
- Waga czcionki: pogrubiona
- Kolor przycisków: jasny niebieski #2a4eed
rozstaw
Uformuj przycisk i utwórz zakładkę u dołu, dodając niestandardowy margines i wartości dopełnienia w ustawieniach odstępów.
- Dolna marża:
- Biuro: -1.7vw
- Tablet: -4vw
- Telefon: -6vw
- Tapicerka góra i dół:
- Biuro: 1vw
- Tablet + telefon: 3vw
- Wyściółka w lewo i prawo
- Biuro: 4vw
- Tablet + telefon: 10vw
Pole cienia
Na koniec dodaj do przycisku subtelny odcień pudełka.
- Cień pudełka: pierwsza opcja
- Poziome położenie cienia pudełka: 0px
- Pozycja pionowa cienia pudełka: 2px
- Box Shadow Blur Force: 50px
Duplikuj i przeciągaj moduły przycisków
Podobnie jak w przypadku poprzednich modułów, klonuj przycisk dwukrotnie i umieść duplikaty w pozostałych dwóch kolumnach linii.
- Sklonuj moduł przycisku dwa razy
- Umieść duplikaty w kolumnach 2 i 3
Przycisk 2 Tekst i kolor ikony
Zmień kolor przycisku i ikony modułu przycisków w kolumnie 2.
- Kolor tekstu przycisku: zielony # 1ba038
- Kolor ikony: # 1ba038
Przycisk 3 Tekst i kolor ikony
Zrób to samo z przyciskiem w ostatniej kolumnie i gotowe!
- Kolor tekstu przycisków: pomarańczowy #f0562c
- Kolor ikony: # f0562c
Na koniec
W tym artykule pokazaliśmy, jak używać półprzezroczystych obrazów, aby stworzyć oszałamiający projekt kolumny CTA. Użyliśmy ustawień przepełnienia kolumny Divi aby obrazy i przyciski bezproblemowo nakładały się na siebie. Spróbuj użyć tego projektu w swoim następnym projekcie Divi i daj nam znać w sekcji komentarzy!
