Jak stworzyć piękną sekcję bohatera kolidującą z kolumnami na przewijaniu za pomocą Divi

Efekty przewijania Divi zapewniają mnóstwo nowych możliwości projektowania tworzonych stron internetowych. Subtelne interakcje, które zdecydujesz się dodać, mogą naprawdę pomóc podnieść ogólny wygląd i styl Twojej witryny. Wszystko staje się jeszcze lepsze, gdy tylko zsynchronizujesz efekty przewijania. W tym samouczku zajmiemy się tworzeniem pięknej sekcji bohatera kolidującej z kolumnami podczas przewijania. Projekt sekcji bohatera łączy dwie różne kolumny na zwoju, co z kolei pomaga podkreślić kopię. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Teraz, gdy wykonaliśmy już wszystkie kroki, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ sekcji bohaterów kolidujących z kolumnami ZA DARMO

Aby położyć ręce na darmowym, kolidującym z kolumnami, układzie sekcji bohaterów, musisz najpierw pobrać go 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!

Odtwórz układ sekcji bohatera

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #f4f2f7

Rozstaw

Usuń również domyślną górną i dolną wyściółkę wszystkich sekcji.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

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

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

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

Przepełnienia

I ukryj przepełnienia rzędu.

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

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 15vw
• Dolna wyściółka: 10vw
• Lewa wyściółka: 5vw
• Prawa wyściółka: 5vw

Indeks Z

Zwiększ również indeks z kolumny.

• Indeks Z: 12

Ustawienia kolumny 2

Zdjęcie w tle

Kontynuuj, otwierając ustawienia kolumny 2 i przesyłając wybrany obraz tła.

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

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H1

Czas na dodanie modułów, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści H1.

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Cienie w światło
• Grubość czcionki nagłówka: pogrubiona
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 6vw (komputer), 11vw (tablet), 13vw (telefon)
• Odstępy między literami nagłówka: -2px
• Wysokość linii nagłówka: 1,2 em

Rozstaw

Dodaj też górny margines.

• Górny margines: 10vw

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Wstaw kolejny moduł tekstowy z wybraną zawartością opisu.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #1e1e1e
• Rozmiar tekstu: 0,9vw (komputer), 1,9vw (tablet), 3vw (telefon)
• Wysokość linii tekstu: 2,4 em

Rozstaw

I dodaj kilka niestandardowych wartości marginesów dla różnych rozmiarów ekranu.

• Górny margines: 4vw (komputer stacjonarny), 8vw (tablet), 12vw (telefon)
• Margines dolny: 4vw (komputer stacjonarny), 8vw (tablet), 12vw (telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Zmodyfikuj ustawienia przycisków modułu w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px

• Czcionka przycisku: Otwórz Sans

Rozstaw

I uzupełnij ustawienia przycisków, 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ł tekstowy do kolumny 2

Dodaj zawartość

W drugiej kolumnie jedynym modułem, którego będziemy potrzebować, jest moduł tekstowy. Wprowadź wybraną treść.

Ustawienia tekstu

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

• Czcionka tekstu: Cienie w światło
• Kolor tekstu: rgba(0,0,0,0.25)
• Rozmiar tekstu: 9vw (komputer), 14vw (tablet i telefon)
• Odstępy między literami tekstu: -3px
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: środek (komputer), lewo (tablet i telefon)

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

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

Zastosuj animacje przewijania

Sekcja

Skalowanie w górę i w dół

Gdy wszystkie twoje moduły są już na miejscu, nadszedł czas na zastosowanie efektów przewijania! Najpierw otwórz ustawienia sekcji i użyj następującego efektu skalowania w górę i w dół:

• Włącz skalowanie w górę i w dół
• Skala początkowa: 100% (przy 49%)
• Skala środkowa:
  • Komputer stacjonarny: 70% (przy 100%)
  • Tablet i telefon: 100% (przy 100%)
• Skala końcowa:
  • Komputer stacjonarny: 70%
  • Tablet i telefon: 100%

Kolumna 1

Ruch poziomy

Kontynuuj, otwierając ustawienia kolumny 1 i użyj następującego efektu ruchu poziomego:

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe:
  • Komputer stacjonarny: 0 (przy 65%)
  • Tablet i telefon: 0 (przy 93%)
• Odsunięcie końcowe:
  • Pulpit: 6
  • Tablet i telefon: 0

Skalowanie w górę i w dół

Zastosuj również efekt skalowania w górę iw dół do kolumny.

• Włącz skalowanie w górę i w dół: Tak
• Skala początkowa:
  • Pulpit: 10%
  • Tablet i telefon: 100%
• Skala środkowa:
  • Komputer stacjonarny: 90%
  • Tablet i telefon: 100%
• Skala końcowa: 100%

Kolumna 2

Ruch poziomy

Następnie otwórz ustawienia kolumny 2 i użyj następujących ustawień ruchu w poziomie:

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: 0
• Przesunięcie środkowe:
  • Komputer stacjonarny: 0 (przy 53%)
  • Tablet i telefon: 0 (przy 56%)
• Odsunięcie końcowe:
  • Komputer stacjonarny: -6 (przy 53%)
  • Tablet i telefon: 0 (przy 100%)

Zanikanie i zanikanie

Uzupełnij ustawienia kolumny, dodając efekt zanikania i zanikania.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 100% (przy 47%)
• Średnie krycie:
  • Komputer stacjonarny: 0% (przy 47%)
  • Tablet i telefon: 100% (przy 47%)
• Końcowe krycie:
  • Komputer stacjonarny: 0%
  • Tablet i telefon: 100%

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 kreatywnie wykorzystać efekty przewijania Divi, aby stworzyć sekcję bohatera kolidującą z kolumnami. Gdy tylko odwiedzający przewiną, dwie różne kolumny i ich elementy zaczną się łączyć. To z kolei pozwoli jeszcze mocniej podkreślić kopię. Udało Ci się również 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.