Pobierz BEZPŁATNY projekt sekcji CTA Column Swipe Hero dla Divi

Sekcja bohatera Twojej strony zasługuje na całą uwagę, jaką może uzyskać. Istnieją nieskończone sposoby stylizowania sekcji bohaterów, w zależności od tego, o czym jest Twoja witryna i jak zachowują się Twoi docelowi odbiorcy. W przypadku niektórych witryn przydatne może być umieszczenie wielokolumnowych kart CTA bez tworzenia przytłaczającego doświadczenia. Świetnym sposobem na podejście do tego jest tworzenie kart CTA z przesuwaniem kolumn. W dzisiejszym samouczku Divi pokażemy, jak stworzyć od podstaw oszałamiający projekt, który wykorzystuje tę technikę. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz sekcje bohaterów ZA DARMO

Aby położyć ręce na darmowych sekcjach bohaterów, najpierw musisz je 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Dodaj nową sekcję

Tło gradientowe

Dodaj nową sekcję do strony, nad którą pracujesz, otwórz ustawienia sekcji i wstaw gradientowe tło.

• Kolor 1: #ffffff
• Kolor 2: #f5ede5
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 17%
• Pozycja końcowa: 17%

Rozstaw

Przejdź do zakładki projektowania i dodaj niestandardowe górne i dolne wyściółki na różnych rozmiarach ekranu.

• Górna wyściółka: 5vw (komputer stacjonarny), 10vw (tablet), 13vw (telefon)
• Dolna wyściółka: 5vw (komputer), 10vw (tablet), 13vw (telefon)

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #fff6ed

Rozmiary

Przejdź do zakładki projektu i zmień również ustawienia rozmiaru wiersza.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 60vw (komputer stacjonarny), 100% (tablet i telefon)
• Maksymalna szerokość: 100%
• Wyrównanie wierszy: w prawo

Rozstaw

Dodajemy też kilka niestandardowych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 6vw
• Dolna wyściółka: 6vw
• Lewa wyściółka: 5,5vw
• Prawa wyściółka: 24vw

Granica

Następnie przejdź do ustawień obramowania i dodaj lewą obramowanie, korzystając z następujących ustawień:

• Szerokość lewej krawędzi: 6px
• Kolor lewej krawędzi: #FFFFFF

Cień Pudełka

Dodaj subtelny cień w kształcie pudełka, aby stworzyć głębię w sekcji bohatera.

• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: rgba(0,0,0,0.22)

Klasa CSS

I użyj klasy CSS w zakładce Zaawansowane. Później w tym poście użyjemy tej klasy CSS, aby ukryć pasek przewijania.

• Klasa CSS: swipe-scrollbar

Główny element

Aby utworzyć przewijanie/przesuwanie w poziomie, musimy umieścić kolumny poziomo. Zrobimy to, dodając niestandardowy kod CSS w głównym elemencie wiersza.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Przepełnienia

Przejdź do ustawień widoczności i zmień przepełnienia wiersza.

• Przepełnienie poziome: Przewiń
• Przepełnienie pionowe: ukryte

Ustawienia kolumny

Po skonfigurowaniu ustawień wiersza możesz otworzyć ustawienia pierwszej kolumny.

Tło gradientowe

Dodaj tło gradientowe.

• Kolor 1: rgba (245 237 229 0,91)
• Kolor 2: rgba(219,34,65,0.84)
• Pozycja startowa: 35%
• Pozycja końcowa: 81%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Wraz z obrazem tła.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

Przejdź do zakładki projektowania i dodaj kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 4vw (komputer), 10vw (tablet), 12vw (telefon)
• Dolna wyściółka: 4vw (komputer stacjonarny), 10vw (tablet), 12vw (telefon)
• Lewa wyściółka: 2vw (komputer), 5vw (tablet), 7vw (telefon)
• Prawa wyściółka: 2vw (komputer), 5vw (tablet), 7vw (telefon)

Granica

Kontynuuj, dodając promień obramowania „20px” do każdego z rogów w ustawieniach obramowania.

Główny element

Inną ważną częścią wykonania tej pracy jest dodanie jednej linii kodu CSS do głównego elementu kolumny.

width: 100% !important;

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H3

Czas zacząć dodawać moduły! Możesz dodać dowolną liczbę modułów i stylizować je według własnych preferencji. Jeśli jednak chcesz odtworzyć dokładnie ten sam przykład, który został udostępniony w podglądzie tego posta, zacznij od modułu tekstowego i wstaw trochę treści H3.

Ustawienia tekstu H3

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H3:

• Czcionka nagłówka 3: Poppins
• Grubość czcionki nagłówka 3: Lekka
• Kolor tekstu nagłówka 3: #e92640
• Rozmiar tekstu nagłówka 3: 1,5vw (komputer), 3,5vw (tablet), 4,5vw (telefon)

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Następnym modułem, którego potrzebujemy, jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

Przejdź do ustawień tekstu i wprowadź zmiany.

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #e92640
• Rozmiar tekstu: 0,8vw (komputer), 1,9vw (tablet), 2,8vw (telefon)

Rozstaw

Dodajemy również margines dolny, aby zrobić miejsce na naszej karcie do przesuwania kolumn.

• Margines dolny: 18vw (komputer stacjonarny), 30vw (tablet), 42vw (telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Przejdźmy do następnego modułu, którym jest moduł przycisków. Wprowadź wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projekt i odpowiednio zmień ustawienia przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer stacjonarny), 1,8vw (tablet), 2,5vw (telefon)
• Kolor tekstu przycisku: #f5ede5
• Szerokość obramowania przycisku: 1px
• Kolor obramowania przycisku: #f5ede5
• Promień obramowania przycisku: 5px
• Czcionka przycisku: Poppins

Rozstaw

Zwiększ rozmiar przycisku, dodając niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Prawa wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym modułem, którego potrzebujemy, jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu i zmień kolor linii.

• Kolor linii: #f5ede5

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #f5ede5
• Rozmiar tekstu: 0,8vw (komputer), 1,9vw (tablet), 2,8vw (telefon)
• Wysokość linii tekstu: 2,3 em

Rozstaw

Dodaj również górny margines.

• Górny margines: 2vw

Klonuj kolumnę do 5 razy i używaj ponownie dla innych CTA

Po ukończeniu pierwszej kolumny i wszystkich zawartych w niej modułów możesz sklonować całą kolumnę do 5 razy, w zależności od tego, ile kart wezwania do przeciągnięcia kolumny chcesz wyświetlić. Upewnij się, że zmieniłeś całą kopię dla każdej zduplikowanej kolumny wraz z linkami przycisków.

Dodaj wiersz nr 2

Struktura kolumny

Do drugiego rzędu! Użyjemy tego wiersza, aby utworzyć nakładanie się z poprzednim. Wybierz następującą strukturę kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio dostosuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

W dalszej części postu dodamy potrzebne moduły i utworzymy ujemną górną zakładkę, aby wyglądało na to, że moduły są częścią pierwszego rzędu. Oznacza to, że w ogóle nie potrzebujemy drugiego rzędu, aby zajmować miejsce w naszym projekcie. Dlatego usuwamy wszystkie domyślne dopełnienie górnych i dolnych wierszy.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H1

Czas zacząć dodawać moduły! Zacznij od pierwszego modułu tekstowego i wprowadź wybraną treść H1.

Ustawienia tekstu H1

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Poppins
• Kolor tekstu nagłówka: #e92741
• Rozmiar tekstu nagłówka: 3vw (komputer), 5vw (tablet), 7vw (telefon)

Rozstaw

Następnie dodaj kilka wartości marginesów.

• Górny margines: -35vw (komputer), 7vw (tablet), 10vw (telefon)
• Lewy margines: 5vw
• Prawy margines: 12vw

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Drugim modułem, którego potrzebujemy, jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

Przejdź do zakładki projekt i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #e92741
• Rozmiar tekstu: 0,8vw (komputer), 1,9vw (tablet), 2,8vw (telefon)
• Wysokość linii tekstu: 2.8em

Rozstaw

Dodajemy również kilka niestandardowych wartości marginesów do modułu tekstowego.

• Górny margines: 2vw (komputer), 7vw (tablet), 10vw (telefon)
• Margines dolny: 2vw (komputer), 7vw (tablet), 10vw (telefon)
• Lewy margines: 5vw
• Prawy margines: 13vw (komputer stacjonarny), 5vw (tablet i telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym modułem, którego potrzebujemy, jest moduł przycisku. Wprowadź wybraną kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projektowania i stylizuj przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,9vw
• Kolor tekstu przycisku: #e92741
• Kolor tła przycisku: #f5ede5
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 5px
• Czcionka przycisku: Poppins

Rozstaw

Zwiększamy również rozmiar przycisku, dodając kilka niestandardowych wartości odstępów.

• Górny margines: 2vw
• Lewy margines: 5vw
• Górna wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3vw (telefon)
• Lewa wyściółka: 6vw (komputer), 9vw (tablet), 15vw (telefon)
• Prawa wyściółka: 6vw (komputer), 9vw (tablet), 15vw (telefon)

Cień Pudełka

Zakończ projekt modułu przycisku, dodając subtelny cień pudełka.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 50px
• Siła rozprzestrzeniania się cieni w pudełku: -5px
• Kolor cienia: rgba(0,0,0,0.19)

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście udostępniliśmy piękną sekcję bohaterów machnięcia kolumnami za darmo, a także pokazaliśmy, jak odtworzyć ją od zera. To świetny sposób na zaprezentowanie wielu kart CTA w sekcji bohaterów bez zbytniego wyglądu. Mamy nadzieję, że podobał Ci się ten samouczek, a jeśli masz jakieś pytania lub sugestie, zostaw je w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.