Jak stworzyć 3-stopniowe odsłonięcie rozmycia w najechaniu za pomocą Divi

Wiele firmowych stron internetowych w pewnym momencie udostępnia podgląd swojego podejścia. Tworząc sekcję podejścia, możesz obsługiwać ją w tradycyjny sposób lub możesz spróbować dodać do niej więcej interakcji. Jeśli szukasz sposobu na wprowadzenie drugiej opcji, pokochasz ten post.

W tym samouczku pokażemy, jak utworzyć 3-stopniową prezentację notki za pomocą nowych opcji rozmiaru Divi. Zaczniemy od pokazania tytułu, kontynuujemy od wyświetlenia trzech strzałek prowadzących do kroków i dokończymy efekt, odsłaniając animowane notki. Będziesz mógł również pobrać plik JSON 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 3-etapowy układ prezentacji Blurb za DARMO

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

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Domyślne tło gradientowe

Pierwszą rzeczą, którą musisz zrobić, to dodać nową sekcję do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj do niego następujące tło gradientowe:

• Kolor 1: #ffa3ad
• Kolor 2: #ffcea3
• Kierunek gradientu: 122deg

Unosić tło gradientowe

Zmodyfikuj tło gradientowe po najechaniu myszą:

• Kolor 1: #000000
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 36%
• Pozycja końcowa: 26%

Rozstaw

Przejdź do zakładki projektowania i dodaj niestandardową górną i dolną wyściółkę.

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

Przelewowy

W dalszej części tego wpisu pobawimy się wysokością sekcji. Aby upewnić się, że nic nie przekracza kontenera sekcji, ukryjemy przepełnienia w ustawieniach widoczności.

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

Dodaj wiersz nr 1

Struktura kolumny

Po skonfigurowaniu ustawień sekcji możesz kontynuować, dodając pierwszy wiersz do sekcji przy użyciu następującej struktury kolumn:

Dodaj moduł tekstowy do wiersza

Dodaj zawartość H2

Dodaj nowy moduł tekstowy do kolumny wiersza i wprowadź wybraną zawartość H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pół pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 2vw (komputer), 5vw (tablet), 6vw (telefon)
• Nagłówek 2 Odstępy między literami: -2px

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając drugi wiersz, korzystając z następującej struktury kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj niestandardowe górne i dolne dopełnienie na różnych rozmiarach ekranu.

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

Wyświetlacz

Aby upewnić się, że wszystkie kolumny są wyświetlane obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł tekstowy strzałki do kolumny 1

Dodaj symbol

Użyjemy tego wiersza, aby dodać animowane strzałki. Dodaj nowy moduł tekstowy do pierwszej kolumny wiersza i dodaj symbol „↓” do pola treści.

Ustawienia tekstu

Przejdź do karty projektu i zmień ustawienia tekstu.

• Wyrównanie tekstu: do prawej
• Kolor tekstu: #ffa3ad
• Rozmiar tekstu: 4vw (komputer), 6vw (tablet), 8vw (telefon)

Rozstaw

Dodaj kilka niestandardowych wartości marginesów do ustawień odstępów.

• Górny margines: -3vw
• Dolny margines: 8vw

Przekształć Obróć

Obróć moduł w ustawieniach transformacji.

• Po lewej: 45 stopni

Animacja

Dodaj niestandardową animację, korzystając z następujących ustawień:

• Styl animacji: slajd
• Kierunek animacji: Centrum
• Opóźnienie animacji: 1000 ms

Dodaj moduł tekstowy strzałki do kolumny 2

Dodaj symbol

Kontynuuj, dodając nowy wiersz do drugiej kolumny i dodaj symbol „↓” do pola treści.

Ustawienia tekstu

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

• Wyrównanie tekstu: do środka
• Kolor tekstu: #ffa3ad
• Rozmiar tekstu: 4vw (komputer), 6vw (tablet), 8vw (telefon)

Rozstaw

Dodaj trochę niestandardowego górnego marginesu.

• Górny margines: 1vw

Animacja

I zastosuj następujące ustawienia animacji:

• Styl animacji: slajd
• Kierunek animacji: Centrum

Dodaj moduł tekstowy strzałki do kolumny 3

Dodaj symbol

Przejdź do ostatniej strzałki Moduł tekstowy w kolumnie 3. Dodaj strzałkę '↓' do pola treści.

Ustawienia tekstu

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

• Wyrównanie tekstu: do lewej
• Kolor tekstu: #ffa3ad
• Rozmiar tekstu: 4vw (komputer), 6vw (tablet), 8vw (telefon)

Rozstaw

Następnie dodaj trochę ujemnego górnego marginesu.

• Górny margines: -3vw

Przekształć Obróć

Obróć moduł w ustawieniach transformacji.

• Lewo: 315 stopni

Animacja

I uzupełnij ustawienia modułu, dodając następującą animację:

• Styl animacji: slajd
• Kierunek animacji: Centrum
• Opóźnienie animacji: 1000 ms

Dodaj wiersz nr 3

Struktura kolumny

Po wypełnieniu drugiego wiersza możesz kontynuować, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj wartości szerokości i maksymalnej szerokości w ustawieniach rozmiaru.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 2vw (komputer), 8vw (tablet), 6vw (telefon)
• Dolna wyściółka: 2vw (komputer), 8vw (tablet), 6vw (telefon)
• Lewa wyściółka: 10vw (komputer stacjonarny), 0vw (tablet i telefon)
• Prawa wyściółka: 10vw (komputer stacjonarny), 0vw (tablet i telefon)

Wyświetlacz

Dodaj jeden wiersz kodu CSS do głównego elementu wiersza, aby upewnić się, że wszystkie kolumny są wyświetlane obok siebie na mniejszych ekranach.

display: flex;

Przelewowy

W ostatniej części tego samouczka zmienimy wysokość wiersza. Aby się na to przygotować, musimy upewnić się, że nic nie przekracza kontenera wiersza, ukrywając przepełnienia w ustawieniach widoczności.

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

Dodaj moduł tekstowy liczb do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj nowy moduł tekstowy do pierwszej kolumny i wprowadź liczbę.

Tło gradientowe

Dodaj gradientowe tło do modułu, korzystając z następujących ustawień:

• Kolor 1: #ffa3ad
• Kolor 2: #ffcea3
• Kierunek gradientu: 122deg

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ultra Bold
• Wyrównanie tekstu: do środka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 2vw (komputer), 4vw (tablet), 8vw (telefon)
• Wysokość linii tekstu: 1em

Rozstaw

Dodaj również górną i dolną wyściółkę na różnych rozmiarach ekranu.

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)

Granica

I uzupełnij ustawienia modułu, dodając „20px” do każdego z rogów w ustawieniach obramowania.

Moduł tekstowy klonowania liczb dwa razy i umieszczanie duplikatów w pozostałych kolumnach

Kontynuuj, sklonując moduł tekstowy w kolumnie 1 dwukrotnie i umieść duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień numery

Upewnij się, że zmieniłeś numer w każdym z duplikatów.

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Drugim modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł Blurb. Wprowadź wybraną treść.

Wybierz ikonę

Kontynuuj, wybierając ikonę.

Kolor tła

I zmień kolor tła na biały.

• Kolor tła: #ffffff

Ustawienia ikon

Przejdź do zakładki projekt i odpowiednio zmień ustawienia ikon:

• Kolor ikony: #ffcea3
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 4vw (komputer), 5vw (tablet), 6vw (telefon)

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Czcionka tytułu: Montserrat
• Grubość czcionki tytułu: pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 1vw (komputer), 2vw (tablet), 4vw (telefon)

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

• Wyrównanie tekstu podstawowego: do środka
• Rozmiar tekstu ciała: 0,6vw (komputer), 1,3vw (tablet), 2vw (telefon)
• Wysokość linii ciała: 2,5 em

Rozstaw

Nadajemy również naszemu modułowi pożądany kształt, dodając następujące niestandardowe wartości wypełnienia dla różnych rozmiarów ekranu:

• Górna wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Dolna wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Lewa wyściółka: 1vw
• Prawa wyściółka: 1vw

Granica

Dodaj „20px” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

I stwórz odrobinę głębi, dodając subtelny cień pudełkowy.

• Kolor cienia: rgba (0,0,0,0,07)

Animacja

Na koniec dodaj animację do modułu.

• Styl animacji: slajd
• Kierunek animacji: Centrum
• Opóźnienie animacji: 1000 ms

Clone Blurb Module dwa razy i umieść duplikaty w pozostałych kolumnach

Po ukończeniu modułu Blurb w kolumnie 1 możesz go sklonować trzy razy i umieścić duplikaty w dwóch pozostałych kolumnach rzędu.

Zmień zawartość obu duplikatów

Upewnij się, że zmieniłeś zawartość każdego z duplikatów.

Zmień ustawienia rozmiaru wiersza #3

Domyślna wysokość

Teraz, aby efekt najechania działał, otworzymy ustawienia ostatniego wiersza i przejdziemy do ustawień rozmiaru. Tam zmodyfikujemy wysokość na różnych rozmiarach ekranu.

• Wysokość: 6vw (komputer stacjonarny), 18vw (tablet), 24vw (telefon)

Wysokość zawisu

Po najechaniu na wysokość przywrócimy normalną wysokość.

• Wysokość: auto

Zmień ustawienia rozmiaru sekcji

Domyślna wysokość

Otwórz następnie ustawienia sekcji i odpowiednio zmień wysokość:

• Wysokość: 7vw (komputer), 15vw (tablet), 20vw (telefon)

Wysokość zawisu

Przywróć wysokość po najechaniu i gotowe!

• Wysokość: auto

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 utworzyć 3-stopniową prezentację notki, korzystając z nowych opcji rozmiaru Divi. Wynik przykładu jest bardzo responsywny i pozwala na dodanie dodatkowej interakcji do Twojej strony. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnych alternatywnych projektów w 3 krokach. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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.