Co tydzień Elegant Theme oferuje nowe pakiety układów Divi za darmo, które możesz wykorzystać w swoim następnym projekcie. W przypadku jednego z pakietów prezentacyjnych udostępniają również przypadek użycia, który pomoże Ci zabrać ze sobą Witryna internetowa na najwyższym poziomie. W tym tygodniu w ramach inicjatywy projektowej Divi Na zajęciach pokażemy Ci, jak kreatywnie wykorzystać opcje najechania kursorem Divi aby wyróżnić wezwania do działania na swoich stronach. Korzystamy z pakietu usług pralniczych Divi i omówimy trzy różne przykłady wyróżniania Twojego wezwania do działania.
badanie
Zanim przejdziemy do samouczka, szybko sprawdźmy, co zamierzamy stworzyć, aby uzyskać pomysł.
Dodaj nową stronę, korzystając z układu Pralnia lub Pralnia
Zacznij od dodania nowej strony do swojego Witryna internetowa i pobierz stronę główną usług pralniczych. Trzy przykłady, które stworzymy, będą oparte na tym układzie. Gdy już masz podejście, możesz zastosować te przykłady do dowolnego układu, nad którym pracujesz.
Sklonuj moduł tekstowy
Zacznijmy od pierwszego przykładu! Przekształcamy istniejący mod tekstowy w wymuszenie najechania kursorem. To podejście pojawi się tylko na pulpicie. Dlatego klonujemy początkowy moduł, aby mógł pojawiać się na mniejszych ekranach bez efektów najechania kursorem.
widoczność
Moduł tekstowy # 1
Kontynuuj, ukrywając pierwszy moduł na tablecie i telefonie.
Moduł tekstowy # 2
I ukryj drugi moduł na pulpicie.
Dodaj efekt najazdu do stacjonarnego modułu tekstowego
Dodaj tytuł treści 3
Edytujemy jedynie pierwszy moduł tekstowy, który będzie tym, który pojawi się na pulpicie. Otwórz moduł i dodaj treść z pozycji 3 do strefy treść.
Najedź kursorem na ustawienia tekstu
Następnie przejdź do ustawień tekstu i „ukryj” tekst akapitu modułu, dodając 0px do rozmiaru tekstu po najechaniu kursorem.
- Rozmiar tekstu: 0px
Najedź kursorem na ustawienia tekstu 2
Zrób to samo dla ustawień tekstu dla nagłówka 2 po najechaniu kursorem.
- Tytuł 2 Rozmiar tekstu: 0px
Domyślny tytuł tekstowy 3
Następnie uzyskaj dostęp do parametrów tekstowych tematu 3 i wprowadź zmiany.
- Nagłówek Czcionki 3: Josefin Sans
- Tytuł Czcionki 3: pół pogrubione
- Tytuł 3 Rozmiar tekstu: 0px
Najedź na nagłówek 3 Ustawienia tekstu
Zmień rozmiar tekstu, najeżdżając kursorem.
- Tytuł 3 Rozmiar tekstu: 40px
Domyślne ustawienia odstępów
Następnie przejdź do ustawień odstępów i upewnij się, że mają zastosowanie następujące niestandardowe wartości wypełnienia:
- Najlepsze dopełnienie: 80px
- Dolne wypełnienie: 50px
- Lewe dopełnienie: 40px
- Tapicerka z prawej: 40px
Ustawienia odstępów między najazdami
Dodaj także niestandardowy margines najazdu.
- Górny margines: 50px
- Lewy margines: -53.5vw
Domyślne ustawienia obramowania
Dodajemy również dolną ramkę bez ramki.
- Szerokość dolnej granicy: 0px
- Kolor dolnej ramki: # ff947f
- Styl dolnej granicy: kropkowany
Ustawienia granicy estakady
Zmień szerokość ramki aktywowania.
- Szerokość dolnej granicy: 5px
Domyślne ustawienia cienia ramki
Następnie dodaj odcień pudełka.
- Pozycja pionowa w cieniu ramki: 50px
- Box Shadow Blur Force: 54px
- Siła propagacji cienia w pudełku: -32px
- Kolor cienia: rgba (255,255,255,0)
Ustawienia cienia pola najazdu
I zmień kolor cienia unoszącego się pola.
- Kolor cienia: rgba (0,0,0,0,2)
Przejścia
Aby utworzyć płynne przejście, zwiększ czas przejścia w ustawieniach przejścia.
- Czas przejścia: 750ms
streszczenie
Wreszcie, w tym samouczku chodziło o to, że stworzyliśmy animację, która podkreśla sekcję na naszej stronie Divi. Możliwości Divi są prawie nieograniczone, korzystając z różnych opcji (kombinacji kilku różnych opcji) będziesz mógł tworzyć interfejsy z dynamiczną i atrakcyjną animacją. Nie kończąc, zajmiemy się drugą częścią tego samouczka później. Do tego czasu, jeśli masz jakieś pytania, możesz je zadawać w sekcji komentarzy.
