Jak stworzyć animowaną mobilną sekcję bohatera podzielonej treści za pomocą Divi

Stworzenie wyróżniającej się sekcji bohatera jest naprawdę ważne. I nie tylko powinien się wyróżniać, ale powinien być również podzielony na wiele elementów, które wzmacniają wezwanie do działania, które tam jest. Dzięki łatwej do zrozumienia strukturze sekcji bohaterów z podziałem treści są one bardzo popularne i często używane w różnych rodzajach witryn.

I chociaż tworzenie sekcji bohaterów z podzieloną treścią na komputery jest proste, tworzenie ich dla mniejszych rozmiarów ekranu może nie być. Tutaj przyda się ten samouczek. Zamierzamy odtworzyć wysoce interaktywną sekcję bohaterów podzieloną na urządzenia mobilne, która będzie dobrze wyglądać nie tylko na urządzeniach mobilnych, ale także na wszystkich ekranach o różnych rozmiarach. Łączymy również kilka świetnych animacji, aby styl projektowania idealnie pasował do 2019 roku. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnych mobilnych sekcji z bohaterami podzielonej zawartości.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

mobilny

Pulpit

Zacznijmy odtwarzać!

Dodaj nową sekcję

Rozstaw

Zacznij od utworzenia nowej strony lub otwarcia istniejącej. Dodaj do niego nową zwykłą sekcję, przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj nowy wiersz

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 dodaj całkowicie czarny kolor tła.

• Kolor tła: #000000

Kolor tła kolumny 1

Dodaj czarny kolor tła również do pierwszej kolumny.

• Kolor tła kolumny 1: #000000

Kolor tła kolumny 2

To samo dotyczy drugiej kolumny.

• Kolor tła kolumny 2: #000000

Rozmiary

Następnie przejdź do ustawień rozmiaru i pozwól wierszowi i jego kolumnom zająć całą szerokość ekranu.

• 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

Usuwamy również wszystkie domyślne górne i dolne dopełnienie wiersza.

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

Wyświetlacz

Na koniec zadbamy o to, by obie kolumny pojawiały się obok siebie również na mniejszych ekranach. Aby to zrobić, musimy dodać jeden wiersz kodu CSS do zaawansowanej karty wiersza.

display: flex;

Dodaj moduł obrazu do kolumny 1

Pozostaw puste pole obrazu

Czas dodać wszystkie potrzebne nam moduły! Zacznij od modułu obrazu w pierwszej kolumnie. Zamiast przesyłać obraz do pola obrazu, w kolejnych krokach prześlemy obraz do ustawień tła. To pozwoli nam bawić się tym, jak obraz jest pozycjonowany 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 mieszania, aby przyciemnić obraz.

• Kolor tła: #686868

Dodaj obraz tła

Dodaj wybrany obraz tła i odpowiednio zmodyfikuj ustawienia tła:

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

Rozmiary

Użyliśmy dwóch kolumn o jednakowej wielkości dla wiersza, nad którym pracujemy, ale wynik nie wygląda w ten sposób. Zamierzamy ręcznie zmienić rozmiar każdego dodawanego modułu, aby wyglądało na to, że używamy innej struktury kolumn. Powodem, dla którego to robimy (zamiast po prostu wybierać inną strukturę kolumn), jest sprawienie, aby wszystko wyglądało dobrze i było responsywne również na mniejszych ekranach. Przejdź do ustawień rozmiaru modułu obrazu i zmień szerokość.

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

Rozstaw

Teraz możemy zdecydować o rozmiarze naszego obrazu w ustawieniach odstępów. Używamy również jednostki rzutni dla tych wartości, aby upewnić się, że nasz projekt pozostaje w pełni responsywny na wszystkich rozmiarach ekranu.

• Górna wyściółka: 26,3vw (komputer stacjonarny), 48vw (tablet), 72vw (telefon)
• Dolna wyściółka: 26,3vw (komputer stacjonarny), 48vw (tablet), 72vw (telefon)

Animacja

Na koniec dodamy animację slajdu do naszego modułu obrazu. Po zastosowaniu animacji zauważysz, że obraz zacznie się pojawiać dopiero od momentu wejścia do pierwszej kolumny. Kolor tła drugiej kolumny pozostaje na górze modułu obrazu podczas jego przesuwania w lewo.

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Czas trwania animacji: 1450 ms
• Intensywność animacji: 60%
• Początkowe krycie animacji: 100%

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

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

Ustawienia przycisków

Następnie przejdź do zakładki design i zmień ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 4vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #e02b20
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 1px
• Czcionka przycisku: Poppins
• Grubość czcionki: Ciężka

Rozstaw

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

• Górny margines: -3,3vw (komputer), -6vw (tablet), -9.1vw (telefon)
• Lewa wyściółka: 8vw
• Prawa wyściółka: 8vw

Cień Pudełka

Dodaj subtelny cień w kształcie pudełka, aby nadać stronie głębi.

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

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H1

Do drugiej kolumny! Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Dodaj wybrane przez siebie treści H1.

Ustawienia tekstu H1

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H1.

• Czcionka nagłówka: Poppins
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 4vw (komputer), 5vw (tablet), 6vw (telefon)

Rozstaw

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

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

Animacja

I dodaj subtelną animację.

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w dół
• Czas trwania animacji: 1450 ms
• Intensywność animacji: 10%
• Początkowe krycie animacji: 100%

Dodaj moduł rozdzielający do kolumny 2

Widoczność

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

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projekt i zmień kolor przekładki.

• Kolor: #e02b20

Animacja

Następnie dodaj animację do modułu dzielnika.

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w prawo
• Czas trwania animacji: 1450 ms
• Intensywność animacji: 83%
• Początkowe krycie animacji: 100%

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

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

Ustawienia tekstu

Następnie przejdź do ustawień tekstu w zakładce projekt i wprowadź odpowiednie zmiany:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #919191
• Rozmiar tekstu: 0,7vw (komputer), 1,8vw (tablet), 2,2vw (telefon)
• Odstępy między literami tekstu: 0,1vw
• Wysokość linii tekstu: 2,2 em

Rozstaw

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

• Górny margines: 9vw (komputer stacjonarny), 19vw (tablet), 23vw (telefon)
• Margines dolny: 12vw (komputer stacjonarny), 19vw (tablet), 23vw (telefon)
• Lewy margines: -3vw
• Prawy margines: 20vw (komputer), 6vw (tablet), 3vw (telefon)

Animacja

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

• Styl animacji: zanikanie
• Powtórzenie animacji: raz
• Czas trwania animacji: 1450 ms
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 0%

Zapowiedź

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

mobilny

Pulpit

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć oszałamiające sekcje bohaterów z podzieloną treścią za pomocą Divi. Sekcje bohaterów z podzieloną treścią są bardzo popularne i często używane w sieci, ale ważne jest, aby upewnić się, że są one również bardzo responsywne. Mamy nadzieję, że ten samouczek pomoże Ci stworzyć mobilne sekcje bohaterów z podzieloną treścią dla nadchodzących witryn, które zbudujesz! Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!