Jak używać cieni w pudełku jako tła przesuwania po najechaniu kursorem?

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak używać cieni skrzynek jako tła do przesuwania po najechaniu myszą. Zajmiemy się trzema różnymi przykładami, które wyglądają oszałamiająco na stronie głównej Personal Stylist Layout Pack, ale możliwości, jakie masz, są naprawdę nieograniczone. Krok po kroku odtworzymy każde z przesuniętych teł, korzystając tylko z wbudowanych opcji Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek i jego różne przykłady, przyjrzyjmy się wynikom.

Przykład 1

Przykład #2

Przykład #3

Prześlij stronę główną pakietu osobistego stylisty na nową stronę

Zacznij od dodania nowej strony do swojej witryny i prześlij układ strony głównej Osobisty stylista. Chociaż użyjemy tego układu do wykonania wszystkich trzech przykładów pokazanych powyżej, możesz użyć tego podejścia do dowolnego układu lub witryny, nad którą pracujesz.

Odtwórz przykład nr 1

Kolor cienia pola przycisków

Zacznijmy odtwarzać pierwszy przykład! Ten przykład pomaga wyróżnić sekcję bohatera. Pierwszą rzeczą, którą musisz zrobić, to otworzyć moduł przycisków, który znajdziesz w pierwszej kolumnie i zmienić kolor cienia pola. Robimy to, aby upewnić się, że kolor dobrze współgra z różowym cieniem, który dodamy po najechaniu myszą.

Ustawienia sekcji

Domyślny kolor tła

Kontynuuj, otwierając ustawienia sekcji. Upewnij się, że domyślny kolor tła pozostaje taki sam.

• Kolor tła: #2a2a2a

Wskaż kolor tła

Zmień wskaźnik tła.

• Kolor tła: #ffffff

Domyślny cień pudełka

Kontynuuj, dodając do sekcji domyślny cień pudełka.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: rgba (255,137,159,0.82)
• Pozycja cienia pudełka: cień wewnętrzny

Wskaż cień pola

Zmień poziomą pozycję cienia pudełka. Dodaj dowolną wartość do wyboru.

• Pozycja pozioma cienia pudełka: 800px

Jeśli chcesz, aby efekt przesuwania był wyświetlany od góry do dołu, możesz zamiast tego zmienić położenie cienia pola w pionie.

• Pozycja pionowa cienia pudełka: 650px

Przejścia

Na koniec skróć czas trwania przejścia na karcie Zaawansowane, aby utworzyć szybkie przejście między kolorem tła a tłem przesuwania cienia.

• Czas trwania przejścia: 200 ms
• Krzywa prędkości przejścia: łatwość

Odtwórz przykład nr 2

Zmodyfikuj pierwszy moduł tekstowy

Ustawienia tekstu najechania kursorem

Przejdźmy do następnego przykładu! Otwórz moduł tekstowy, który znajdziesz w pierwszej kolumnie i zmień kolor tekstu po najechaniu myszą.

• Kolor tekstu: jasny

Wskaż granicę

Kontynuuj, zmieniając kolor obramowania po najechaniu myszą na karcie projektu.

• Kolor obramowania: rgba (255,137,159,0.82)

Domyślny cień pudełka

Następnie przejdź do ustawień cienia pudełka i dodaj domyślny cień pudełka.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: rgba (255,137,159,0.82)
• Pozycja cienia pudełka: cień wewnętrzny

Wskaż cień pola

Zmień pozycję poziomą po najechaniu kursorem.

• Pozycja pozioma cienia pudełka: 520px

Przejścia

Na koniec zwiększ czas trwania przejścia w zakładce Zaawansowane, aby uzyskać płynne przejście.

• Czas trwania przejścia: 700ms
• Krzywa prędkości przejścia: łatwość

Kopiuj i wklej style modułu do trzeciego modułu tekstowego

Używamy tych samych stylów modułów również dla trzeciego modułu tekstowego. Aby zaoszczędzić czas, po prostu skopiujemy style modułu z pierwszego modułu tekstowego i wkleimy je do trzeciego modułu tekstowego.

Zmodyfikuj drugi moduł tekstowy

Ustawienia tekstu

Drugi moduł tekstowy jest jednak nieco inny. Otwórz moduł i przejdź do ustawień tekstowych. Jedyne, co musisz tam zrobić, to zmienić kolor tekstu po najechaniu myszą.

• Kolor tekstu: jasny

Wskaż granicę

Kontynuuj, przechodząc do ustawień obramowania i zmieniając kolor obramowania po najechaniu myszą.

• Kolor obramowania: rgba (255,137,159,0.82)

Domyślny cień pudełka

Czas dodać tło machnięcia! Zacznij od dodania domyślnego cienia pudełka, korzystając z następujących ustawień:

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: rgba (255,137,159,0.82)
• Pozycja cienia pudełka: cień wewnętrzny

Wskaż cień pola

Zmień pionową pozycję cienia pudełka po najechaniu myszą.

• Pozycja pionowa cienia pudełka: 500px

Przejścia

Na koniec zwiększ również czas trwania przejścia tego modułu tekstowego.

• Czas trwania przejścia: 700ms
• Krzywa prędkości przejścia: łatwość

Odtwórz przykład nr 3

Zmień ustawienia wiersza

Rozmiary

Przejdźmy do następnego i ostatniego przykładu! Zacznij od otwarcia ustawień wiersza i wprowadź kilka zmian w ustawieniach rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2

Rozstaw

Kontynuuj, dodając również niestandardowe wypełnienie do rzędu.

• Lewa wyściółka: 10vw
• Prawa wyściółka: 10vw
• Kolumna 2 lewa wyściółka: 15vw (komputer), 0vw (tablet i telefon)

Domyślny cień pudełka

Następnie dodaj do wiersza domyślny cień pudełka.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: #ff899f
• Pozycja cienia pudełka: cień wewnętrzny

Wskaż cień pola

Zmień pozycję poziomą po najechaniu kursorem.

• Pozycja pozioma cienia pudełka: 50px

Przejścia

Zmieniamy również czas trwania przejścia i opóźnienie przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1000 ms
• Opóźnienie przejścia: 700ms
• Krzywa prędkości przejścia: łatwość

Zmień ustawienia sekcji

Usuń rozmiar

Po zakończeniu modyfikowania ustawień wiersza przejdź dalej i otwórz ustawienia sekcji. Przejdź do karty projektu i zresetuj szerokość, klikając prawym przyciskiem myszy i klikając reset.

Usuń obramowanie

Zrób to samo dla szerokości obramowania.

Domyślny cień pudełka

Kontynuuj, dodając domyślny cień pudełka.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: #2a2a2a
• Pozycja cienia pudełka: cień wewnętrzny

Wskaż cień pola

Zmień poziomą pozycję cienia pudełka po najechaniu myszą.

• Pozycja pozioma cienia pudełka: 60px

Przejścia

Aby zakończyć projekt, zwiększ czas przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1000 ms

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się trzem różnym przykładom, które odtworzyliśmy krok po kroku.

Przykład 1

Przykład #2

Przykład #3

Końcowe przemyślenia

W tym poście pokazaliśmy, jak używać cieni skrzynek jako tła do przesuwania tylko z wbudowanymi opcjami Divi. Ten samouczek jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do twojego zestawu narzędzi. Mamy nadzieję, że ten samouczek zainspiruje Cię do wykorzystania cieni skrzynkowych w wyjątkowy i kreatywny sposób. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!