Przejdź do głównej treści

Jak stworzyć animowaną sekcję bohatera na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Większość stron internetowych ma sekcję „Heros”, która nie musi się już sprawdzać. Jego rolą jest nie tylko wyróżnienie się, ale także podzielenie go na kilka elementów, które wzmacniają istniejące wezwanie do działania. Łatwo zrozumiałe sekcje bohaterów treści strukturalnych są bardzo popularne i często używane przez różne typy stron internetowych.

I choć tworzenie sekcji bohaterów podzielonej treści na pulpicie wydaje się proste, nie zawsze polegaj na wyglądzie. W tym miejscu przydatny będzie ten samouczek. Odtworzymy wysoce interaktywną mobilną sekcję podzielonego bohatera, która będzie dobrze wyglądać nie tylko na urządzeniach mobilnych, ale niezależnie od wielkości ekranu. Łączymy również świetne animacje, aby idealnie dopasować styl projektowania 2019. Mamy nadzieję, że ten samouczek zachęci Cię do tworzenia własnych sekcji podzielonych treści mobilnych bohaterów.

Chodźmy!

badanie

Zanim zanurzysz się w samouczku, spójrzmy na wynik, który możesz uzyskać po tym samouczku.

Projekt interfejsu

Dodaj nową sekcję

rozstaw

Zacznij od utworzenia nowej strony lub otwarcia istniejącej. Dodaj nową regularną sekcję, uzyskaj dostęp do ustawień odstępów i usuń domyślnie wszystkie marginesy dopełniające.

  • Najlepsze dopełnienie: 0px
  • Padding Bottom: 0px

Dodaj nową linię

Struktura kolumny

Będziemy nadal dodawać nową linię i używać następującej struktury kolumn:

Kolor tła

Bez dodawania kolejnych modułów otwórz ustawienia linii i dodaj całkowicie czarny kolor tła.

  • Kolor tła: #000000

Kolor tła kolumny 1

Dodaj także kolor pierwszego tła do pierwszej kolumny.

  • Kolumna 1 Kolor tła: #000000

Kolor tła kolumny 2

To samo dotyczy drugiej kolumny.

  • Kolumna 2 Kolor tła: #000000

zaklejania

Następnie przejdź do parametrów rozmiaru i pozwól wierszowi i jego kolumnom wypełnić całą szerokość ekranu.

  • Ustaw tę linię na pełną szerokość: Tak
  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak

rozstaw

Usuwamy również wszystkie domyślne górne i dolne marginesy linii.

  • Wypełnienie na górze: 0px
  • Padding Bottom: 0px
  • Tapicerka po prawej: 1vw

pokaz

Na koniec zapewnimy, że obie kolumny pojawią się obok siebie na mniejszych ekranach. Aby to zrobić, będziemy musieli dodać jedną linię kodu CSS do karty Zaawansowane linii.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

pokaz: flex;

Dodaj moduł graficzny do kolumny 1

Pozostaw obszar obrazu pusty

Teraz przechodzimy do wszystkich potrzebnych modułów! Musisz zacząć od modułu obrazu w pierwszej kolumnie. Zamiast przesyłać obraz do obszaru obrazu, w następnych krokach prześlemy obraz do ustawień tła, więc domyślnie musisz usunąć dodany obraz. W ten sposób będziemy mogli grać w sposób, w jaki obraz jest ustawiony i ile miejsca zajmuje w naszym rzędzie.

Dodaj kolor tła

Przejdź do ustawień tła modułu obrazu i dodaj kolor tła. W następnym kroku połączymy ten kolor tła i obraz tła za pomocą efektu scalania, aby przyciemnić obraz.

  • Kolor tła: #686868

Dodaj obraz tła

Dodaj wybrany obraz tła i odpowiednio zmień ustawienia tła:

  • Rozmiar obrazu tła: okładka
  • Położenie obrazu tła: środek
  • Powtórz obraz tła: bez powtórzeń
  • Połącz obraz tła: pomnóż

zaklejania

Użyliśmy dwóch kolumn o jednakowej wielkości dla linii, nad którą pracujemy, ale wynik nie jest taki sam. Będziemy ręcznie zmieniać rozmiar każdego dodanego modułu, aby sprawić wrażenie, że używamy innej struktury kolumn. Powodem, dla którego to robimy (zamiast wybierania innej struktury kolumn), jest sprawienie, aby wszystko reagowało

na mniejszych ekranach. Uzyskaj dostęp do parametrów rozmiaru modułu obrazu i zmień szerokość.

  • Szerokość: 88%
  • Wyrównanie modułu: lewo

rozstaw

Teraz musimy określić rozmiar naszego obrazu w ustawieniach odstępów. Dla tych wartości używamy również wyświetlacza, aby zapewnić, że nasz projekt pozostaje w pełni responsywny, niezależnie od rozmiaru ekranu.

  • Górna wyściółka: 26.3vw (pulpit), 48vw (tablet), 72vw (telefon)
  • Tapicerka na dole: 26.3vw (pulpit), 48vw (tablet), 72vw (telefon)

Animacja

Na koniec dodamy animację slajdu do modułu Image. Po zastosowaniu animacji zauważysz, że obraz zacznie się pojawiać dopiero po wejściu do pierwszej kolumny. Kolor tła drugiej kolumny pozostaje na górze modułu obrazu, gdy przesuwa się w lewo.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

  • Styl animacji: Slajd
  • Powtórz animację: Raz
  • Kierunek animacji: w lewo
  • Czas trwania animacji: 1450ms
  • Intensywność animacji: 60%
  • Animacja Rozpoczęcie krycia: 100%

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Kolejnym modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisków. Wprowadź wybraną kopię.

Ustawienia przycisków

Następnie przejdź do karty Projekt i zmień ustawienia przycisku.

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 1.5vw (pulpit), 2.5vw (tablet), 4vw (telefon)
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: #e02b20
  • Szerokość obramowania przycisku: 0px
  • Promień granicy przycisku: 1px
  • Czcionka przycisku: Poppins
  • Waga czcionki: Bold

rozstaw

Zmień również wartości odstępów.

  • Górny margines: -3.3vw (pulpit), -6vw (tablet), -9.1vw (telefon)
  • Lewe wypełnienie: 8vw
  • Tapicerka po prawej: 8vw

Shadow Box

I dodaj subtelny cień, aby stworzyć głębię na stronie.

  • Box Shadow Blur Force: 20px
  • Odcień koloru: rgba (0,0,0,0.3)

Dodaj moduł tekstowy # 1 do kolumny 2

Dodaj zawartość H1

Na drugiej kolumnie! Pierwszym potrzebnym modułem jest moduł tekstowy. Dodaj dowolną zawartość H1.

Ustawienia tekstu H1

Następnie przejdź do karty Projekt i zmień ustawienia tekstu H1.

  • Czcionka: Poppins
  • Kolor tekstu tytułu: #ffffff
  • Rozmiar tytułu tekstu: 4vw (pulpit), 5vw (tablet), 6vw (telefon)

rozstaw

Zmień również wartości odstępów.

  • Górny margines: 12vw
  • Lewy margines: -20vw
  • Prawy margines: 17vw (desktop), 15vw (tablet), 1vw (telefon)

Animacja

I dodaj subtelną animację.

  • Styl animacji: Slajd
  • Powtórz animację: Raz
  • Kierunek animacji: w dół
  • Czas trwania animacji: 1450ms
  • Intensywność animacji: 10%
  • Animacja Rozpoczęcie krycia: 100%

Dodaj moduł podziału do kolumny 2

widoczność

Następny moduł, którego potrzebujemy w drugiej kolumnie, to moduł podziału. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż dzielnik: Tak

Kolor

Następnie przejdź do karty Projekt i zmień kolor separatora.

  • Kolor: #e02b20

Animacja

Dodaj animację do modułu podziału dalej.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

  • Styl animacji: Slajd
  • Powtórz animację: Raz
  • Kierunek animacji: w prawo
  • Czas trwania animacji: 1450ms
  • Intensywność animacji: 83%
  • Animacja Rozpoczęcie krycia: 100%

Dodaj moduł tekstowy # 2 do kolumny 2

Dodaj treść

Przejdźmy do następnego i ostatniego modułu, którego potrzebujemy w drugiej kolumnie! Dodaj opis swojego wyboru.

Ustawienia tekstu

Następnie przejdź do ustawień tekstu na karcie Projekt i wprowadź odpowiednie zmiany:

  • Czcionka tekstu: Poppins
  • Masa czcionki tekstu: Światło
  • Kolor tekstu: #919191
  • Rozmiar tekstu: 0.9vw (desktop), 1.8vw (tablet), 2.2vw (telefon)
  • Rozstaw liter: 0.1vw
  • Wysokość linii tekstu: 2.2em

rozstaw

Zmień również wartości odstępów.

  • Górny margines: 9vw (pulpit), 19vw (tablet), 23vw (telefon)
  • Dolny margines: 12vw (desktop), 19vw (tablet), 23vw (telefon)
  • Lewy margines: -3vw
  • Prawy margines: 20vw (desktop), 6vw (tablet), 3vw (telefon)

Animacja

Na koniec dodaj animację zanikania do modułu i gotowe!

  • Styl animacji: Zanik
  • Powtórz animację: Raz
  • Czas trwania animacji: 1400ms
  • Czas animacji: 1000ms
  • Animacja Rozpoczęcie krycia: 0%

Ostatnie myśli

W tym samouczku pokazaliśmy, jak tworzyć piękne sekcje bohaterów podzielonej zawartości za pomocą Divi. Sekcje bohaterów podzielonej treści są bardzo popularne i często używane w Internecie, ale ważne jest również, aby były bardzo responsywne. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz i podziel się nim w sieciach społecznościowych!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
4 akcji
udział4
ćwierkanie
Enregistrer