Większość stron internetowych posiada sekcję „Bohaterowie”, która nie musi już się udowadniać. Jego rolą jest nie tylko wyróżnianie się, ale także podzielenie na kilka elementów, które wzmacniają istniejące wezwanie do działania. Sekcja bohatera do treść split o łatwej do zrozumienia strukturze są bardzo popularne i często używane przez różne typy stron internetowych.
I chociaż tworzenie sekcji bohaterów treść podział do biura wydaje się prosty, nie zawsze należy ufać pozorom. Tutaj przyda się ten poradnik. Zamierzamy odtworzyć wysoce interaktywną sekcję bohatera podzieloną na urządzenia mobilne, która będzie świetnie wyglądać nie tylko na urządzeniach mobilnych, ale niezależnie od rozmiaru ekranu. Łączymy również doskonałe animacje, aby idealnie dopasować się do stylu projektowania 2019. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnych sekcji bohaterów mobilnych treść podział.
Chodźmy!
badanie
Zanim zagłębisz się w samouczek, przyjrzyjmy się wynikowi, jaki możesz uzyskać po ukończeniu tego samouczka.
Projekt interfejsu
Dodaj nową sekcję
rozstaw
Zacznij od utworzenia nowej strony lub otwarcia istniejącej. Dodaj do niej nową sekcję zwykłą, przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne marginesy dopełnienia.
- Najlepsze dopełnienie: 0px
- Padding Bottom: 0px
Dodaj nową linię
Struktura kolumny
Będziemy kontynuować, dodając nowy wiersz i stosując następującą strukturę 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 także czarny kolor tła do pierwszej kolumny.
- Kolumna 1 Kolor tła: #000000
Kolor tła kolumny 2
To samo dla drugiej kolumny.
- Kolumna 2 Kolor tła: #000000
zaklejania
Następnie przejdź do ustawień rozmiaru i pozwól, aby wiersz i jego kolumny zajmowały 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 z wiersza.
- Górne wypełnienie: 0px
- Padding Bottom: 0px
- Prawa wyściółka: 1vw
pokaz
Na koniec zadbamy o to, aby obie kolumny pojawiały się obok siebie na mniejszych ekranach. Aby to zrobić, będziemy musieli dodać pojedynczą linię kodu CSS do zakładki Zaawansowane tej linii.
display: flex; |
Dodaj moduł obrazu do kolumny 1
Pozostaw obszar obrazu pusty
Teraz przechodzimy do wszystkich modułów, których potrzebujemy! Musisz zacząć od modułu obrazu w pierwszej kolumnie. Zamiast przesyłać obraz w polu obrazu, w kolejnych krokach prześlemy obraz w ustawieniach tła, dlatego musimy usunąć domyślnie dodany obraz. Możemy więc bawić się sposobem ułożenia obrazu i ilością miejsca, jaki 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 z obrazem tła, używając efektu mieszania, 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
- Pozycja obrazu tła: środek
- Powtórz obraz tła: Bez powtórzeń
- Mieszanka obrazów tła: pomnóż
zaklejania
Użyliśmy dwóch kolumn o tej samej wielkości dla wiersza, nad którym pracujemy, ale wynik nie jest taki sam. Ręcznie zmienimy rozmiar każdego dodanego modułu, aby wyglądało na to, że używamy innej struktury kolumn. Powodem, dla którego to robimy (zamiast wybierać inną strukturę kolumn), jest sprawienie, aby wszystko było responsywne
na mniejszych ekranach. Przejdź do ustawień 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. Używamy również jednostki wyświetlającej te wartości, aby mieć pewność, że nasz projekt pozostanie w pełni responsywny niezależnie od rozmiaru ekranu.
- Górna wyściółka: 26.3vw (komputer stacjonarny), 48vw (tablet), 72vw (telefon)
- Tapicerka u dołu: 26.3vw (komputer stacjonarny), 48vw (tablet), 72vw (telefon)
Animacja
Na koniec dodamy animację slajdu do modułu Obraz. 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 podczas przesuwania w lewo.
- Styl animowany: slajd
- Powtórz animację: Raz
- Kierunek animacji: w lewo
- Czas trwania animacji: 1450ms
- Intensywność animacji: 60%
- Animacja Krycie początkowe: 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 zakładki Projekt i zmień ustawienia przycisków.
- Użyj niestandardowych stylów 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ń granicy przycisku: 1px
- Czcionka przycisku: Poppins
- Waga czcionki: Bold
rozstaw
Zmień także wartości odstępów.
- Górny margines: -3.3vw (komputer stacjonarny), -6vw (tablet), -9.1vw (telefon)
- Lewe wypełnienie: 8vw
- Prawa wyściółka: 8vw
Pole cienia
I dodaj subtelny cień, aby stworzyć głębię na stronie.
- Box Shadow Blur Force: 20px
- Kolor cienia: rgba (0,0,0,0.3)
Dodaj moduł tekstowy # 1 do kolumny 2
Dodaj zawartość H1
W drugiej kolumnie! Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Dodaj wybraną zawartość H1.
Ustawienia tekstu H1
Następnie przejdź do zakładki Projekt i zmień ustawienia tekstu H1.
- Czcionka: Poppins
- Kolor tekstu tytułu: #ffffff
- Rozmiar tytułu tekstu: 4vw (komputer stacjonarny), 5vw (tablet), 6vw (telefon)
rozstaw
Zmień także 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 animowany: slajd
- Powtórz animację: Raz
- Kierunek animacji: w dół
- Czas trwania animacji: 1450ms
- Intensywność animacji: 10%
- Animacja Krycie początkowe: 100%
Dodaj moduł podziału do kolumny 2
widoczność
Następnym modułem, którego potrzebujemy w drugiej kolumnie, jest moduł rozdzielacza. Upewnij się, że opcja „Pokaż separator” jest włączona.
- Pokaż dzielnik: Tak
Kolor
Następnie przejdź do zakładki Projekt i zmień kolor separatora.
- Kolor: #e02b20
Animacja
Następnie dodaj animację do modułu podziału.
- Styl animowany: slajd
- Powtórz animację: Raz
- Kierunek animacji: w lewo
- Czas trwania animacji: 1450ms
- Intensywność animacji: 83%
- Animacja Krycie początkowe: 100%
Dodaj moduł tekstowy # 2 do kolumny 2
Dodaj treść
Przejdźmy do kolejnego i ostatniego potrzebnego nam modułu 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.9vw (komputer stacjonarny), 1.8vw (tablet), 2.2vw (telefon)
- Rozstaw liter: 0.1vw
- Wysokość linii tekstu: 2.2em
rozstaw
Zmień także wartości odstępów.
- Górny margines: 9vw (komputer stacjonarny), 19vw (tablet), 23vw (telefon)
- Dolny margines: 12vw (komputer stacjonarny), 19vw (tablet), 23vw (telefon)
- Lewy margines: -3vw
- Prawy margines: 20vw (komputer stacjonarny), 6vw (tablet), 3vw (telefon)
Animacja
Na koniec dodaj do modułu animację zanikania i gotowe!
- Styl animacji: Zanik
- Powtórz animację: Raz
- Czas trwania animacji: 1400ms
- Opóźnienie animacji: 1000 ms
- Animacja Krycie początkowe: 0%
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak tworzyć niesamowite sekcje bohaterów podzielonej zawartoś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 również, aby były bardzo responsywne. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz i udostępnij go w mediach społecznościowych!
