Jak dodać animowane strzałki narożne do swojego projektu za pomocą Divi

Sposób, w jaki prezentujesz swoje wezwanie do działania na projektowanej stronie, może mieć duży wpływ na sposób, w jaki podejmują działania Twoi użytkownicy. Możesz przejść do tego najczęściej używany sposób, używając formatu przycisku z kopią pośrodku, ale możesz też z nim wykazać się kreatywnością. W dzisiejszym samouczku pokażemy Ci kreatywny sposób na umieszczenie wezwania do działania w projekcie Divi. Dokładniej zamieścimy animowane strzałki narożne. Po najechaniu strzałką kierunek strzałki zmieni się wraz ze stylem. Będziesz mógł również pobrać plik JSON tego projektu 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 układ za DARMO

Aby położyć swoje ręce na darmowym układzie, 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!

Zacznijmy odtwarzać!

Dodaj nową sekcję specjalistyczną

Dodaj nową sekcję specjalizacyjną do strony, nad którą pracujesz. Wybierz dla niego następującą strukturę kolumn:

Tło gradientowe

Otwórz ustawienia sekcji i zastosuj następujące tło gradientowe:

• Kolor 1: #fff8f5
• Kolor 2: #f9f3ef
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny lewy
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Rozmiary

Przejdź do zakładki projektu przekroju i zmień ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość wewnętrzna: 90%
• Maksymalna szerokość wewnętrzna: 1580px

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj odpowiednie dopełnienie do kolumny 1.

• Kolumna 1 prawa wyściółka: 6%

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści H2.

Ustawienia tekstu H2

Stylizuj ustawienia tekstu H2 modułu w następujący sposób:

• Czcionka nagłówka 2: Kumbh Sans
• Grubość czcionki nagłówka 2: pogrubiona
• Kolor tekstu nagłówka 2: #08665c
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 75px
  • Tablet: 60px
  • Telefon: 45px

Rozstaw

Dodaj trochę górnego i dolnego marginesu.

• Górny margines: 50px
• Margines dolny: 50px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj treść opisu

Dodaj kolejny moduł tekstowy poniżej poprzedniego z wybraną zawartością opisu.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Kumbh Sans
• Kolor tekstu: #08665c
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 1,8 em

Rozstaw

Dodaj trochę dolnego marginesu również na mniejszych rozmiarach ekranu.

• Margines dolny:
  • Pulpit: /
  • Tablet i telefon: 50px

Dodaj wiersz nr 1 do kolumny 2

Struktura kolumny

Do drugiej kolumny sekcji. Tam dodaj pierwszy wiersz, korzystając z następującej struktury kolumn

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia kolumny 1 i zastosuj wybrany kolor tła.

• Kolor tła: #cccccc

Rozstaw

Przejdź do ustawień odstępów w kolumnie i użyj następujących responsywnych wartości:

• Górna wyściółka:
  • Pulpit: 100px
  • Tablet i telefon: 70px
• Lewa wyściółka:
  • Komputer stacjonarny i tablet: 8%
  • Telefon: 10%
• Prawa wyściółka:
  • Komputer stacjonarny i tablet: 8%
  • Telefon: 10%

Granica

Dodaj również zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 10px

Widoczność

Uzupełnij ustawienia kolumny, ustawiając przepełnienia na widoczne w zakładce Zaawansowane.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu:

• Czcionka tekstu: Kumbh Sans
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #08665c
• Rozmiar tekstu: 30px
• Wysokość linii tekstu: 1em

Rozstaw

Zastosuj również trochę dolnego marginesu.

• Margines dolny: 15px

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnie dodaj moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

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

• Kolor linii: #fff8f5

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 2px
• Wysokość: 2px

Rozstaw

Dodaj też dolny margines.

• Margines dolny: 50px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość H3

Dodaj kolejny moduł tekstowy do kolumny 1. Użyj wybranych treści H3.

Ustawienia tekstu H3

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H3 w następujący sposób:

• Czcionka nagłówka 3: Kumbh Sans
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: #08665c
• Rozmiar tekstu nagłówka 3:
  • Pulpit: 48px
  • Tablet: 38px
  • Telefon: 32px

Rozstaw

Użyj również trochę dolnego marginesu.

• Margines dolny: 15px

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj zawartość

Dodaj ostatni moduł tekstowy do kolumny 1 z wybraną zawartością opisu.

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstu:

• Czcionka tekstu: Kumbh Sans
• Kolor tekstu: #08665c
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 1,8 em

Rozstaw

Uwzględnij również dolny margines.

• Margines dolny:
  • Pulpit: 200px
  • Tablet i telefon: 150 pikseli

Dodaj moduł Blurb do kolumny 1

Pozostaw puste pola zawartości

Przejdźmy do ostatniego modułu, którego potrzebujemy w tej kolumnie, czyli modułu Blurb. Pozostaw puste pola zawartości.

Domyślna ikona

Następnie wybierz ikonę strzałki.

Wskaż ikonę

Zmień ikonę po najechaniu myszą.

Dodaj link

Użyj linku również do tego modułu.

Wskaż kolor tła

Następnie dodaj kolor tła po najechaniu kursorem.

• Unosić kolor tła: #08665c

Domyślne ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikon w następujący sposób:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: do prawej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 80px

Ustawienia ikony najechania kursorem

Zmodyfikuj rozmiar czcionki ikony po najechaniu myszą.

• Rozmiar czcionki ikony wskaźnika myszy: 40px

Rozmiary

Następnie dodaj trochę szerokości do ustawień rozmiaru.

• Szerokość: 80px

Odstępy najechania

Zmodyfikuj górną i prawą wyściółkę po najechaniu kursorem.

• Górna wyściółka: 25px
• Wypełnienie prawego kursora: 10px

Granica

Uwzględnij również zaokrąglone rogi w ustawieniach obramowania.

• Wszystkie rogi: 5px

Skala wskaźnika

Następnie użyj opcji skali transformacji po najechaniu myszą.

• Unieś oba: 130%

Główny element i obraz rozmycia CSS

Następnie przejdź do zakładki zaawansowane i użyj następującego wiersza kodu CSS dla głównego elementu:

cursor: pointer;

Użyj tego wiersza dla pola css Blurb Image:

margin-bottom: 0px;

Pozycja

Uzupełnij ustawienia modułu, przestawiając go w ustawieniach pozycji:

• Pozycja: bezwzględna
• Lokalizacja: prawy dół

Ponowne użycie kolumny 1

Usuń kolumnę 2

Po wypełnieniu pierwszej kolumny możesz użyć jej ponownie w drugiej. Aby to zrobić, najpierw usuń drugą kolumnę.

Klonuj kolumnę 1

Następnie sklonuj pierwszego.

Zmień kolor tła kolumny 2

Oczywiście będziesz musiał wprowadzić pewne zmiany w zduplikowanej kolumnie, zaczynając od koloru tła.

• Kolor tła kolumny 2: #f0c7b1

Dodaj przekształcenie Przetłumacz do kolumny 2

Dodajemy również wartość tłumaczenia transformacji na mniejszych ekranach.

• Dobrze:
  • Pulpit: /
  • Tablet i telefon: 50px

Zmień zduplikowaną treść

Upewnij się, że zmieniłeś wszystkie zduplikowane treści.

Zmień łącze modułu Blurb

Uzupełnij kolumnę duplikatów, zmieniając link w module Blurb.

Użyj ponownie wiersza

Po wypełnieniu pierwszego wiersza i jego kolumn możesz sklonować cały wiersz.

Usuń kolumnę 2

Usuń drugą kolumnę w ustawieniach wiersza.

Zmień kolor tła kolumny

Następnie zmień kolor tła pozostałej kolumny.

• Kolor tła kolumny: #dfe7f2

Dodaj górny margines do wiersza

Wróć do ogólnych ustawień wiersza i dodaj responsywny górny margines.

• Górny margines:
  • Pulpit: 50px
  • Tablet i telefon: 100px

Zmień zduplikowaną treść

Następnie zmień wszystkie zduplikowane treści w kolumnie.

Zmień łącze modułu Blurb

Ukończ samouczek, zmieniając link w module Blurb. Otóż ​​to!

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 pokazaliśmy, jak wykazać się kreatywnością, korzystając z wezwania do działania. Mówiąc dokładniej, pokazaliśmy, jak dodać strzałki narożnych przycisków animowanych po najechaniu kursorem. Takie podejście pomaga zachować przejrzysty wygląd i styl podczas projektowania sekcji z wieloma wezwaniami do działania. Dodaje też dodatkowy poziom interakcji. Udało Ci się pobrać plik JSON za darmo. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz 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.