Dekorowanie swojej strony za pomocą przekształcania kształtów po najechaniu kursorem za pomocą Divi

Tworzenie interaktywnego projektu to coś, co natychmiast pomaga podnieść wygląd i styl każdej witryny. Dzięki wbudowanym opcjom Divi możesz wykonywać wiele tur i tworzyć efekty, które są naprawdę unikalne dla Twojej witryny.

W tym poście pokażemy Ci, jak udekorować swoją stronę, zmieniając kształty po najechaniu myszą. Wynik, który uzyskamy, skupia się na wrażeniach z pracy na pulpicie, ale zachowuje schludny i przyjazny dla użytkownika wygląd również na mniejszych ekranach.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na dwa przykłady, które odtworzymy od podstaw.

Przykład 1

Przykład #2

Pobierz kształtowane nakładki obrazów

Aby położyć ręce na nakładkach z ukształtowanymi obrazami, które są używane w tym samouczku, musisz je pobrać za pomocą poniższego przycisku. 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 tworzyć!

Dodaj nową sekcję

Kolor tła

Stary, tworząc nową stronę lub otwierając istniejącą. Dodaj do niego zwykłą sekcję, otwórz ustawienia sekcji i dodaj całkowicie czarny kolor tła.

• Kolor tła: #000000

Przelewowy

Aby odciąć nakładkę z ukształtowanym obrazem w dalszej części tego samouczka, upewnimy się, że nic nie przewyższa kontenera sekcji, dodając pojedynczą linię kodu CSS do głównego elementu sekcji.

overflow: hidden;

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

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

Dodaj moduł obrazu do wiersza

Prześlij nakładkę z obrazem w kształcie

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł obrazu. Prześlij pierwszą nakładkę obrazu w kształcie, którą znajdziesz w pobranym folderze. Możesz znaleźć więcej kształtowanych nakładek obrazów, przechodząc do tego posta, pobierając pliki, otwierając plik programu Illustrator i dostosowując je do swoich potrzeb. Jeśli jednak chcesz po prostu odtworzyć przykłady udostępnione w podglądzie tego posta, wystarczy folder pobrany na początku tego posta.

Domyślny kolor tła

Przejdź do ustawień tła modułu obrazu i dodaj następujący domyślny kolor tła:

• Kolor tła: #6a00ff

Wskaż kolor tła

Zmień kolor tła po najechaniu kursorem, używając następującego kodu koloru:

• Kolor tła: #ffa216

Tło gradientowe

Kontynuuj, dodając również tło gradientowe do modułu obrazu.

• Kolor 1: #ff2841
• Kolor 2: rgba (255,255,255,0)
• Kierunek gradientu: 168 stopni
• Pozycja końcowa: 68%

Rozmiary

Przejdź do karty projektu i włącz opcję „Wymuś pełną szerokość”.

• Wymuś pełną szerokość: tak

Rozstaw

Ukrywamy również część nakładki z ukształtowanym obrazem, dodając ujemny górny margines do ustawień odstępów. Zauważysz, że moduł nie przekroczy kontenera sekcji dzięki tej jednej linii kodu CSS, którą dodaliśmy do sekcji na początku samouczka.

• Górny margines: -22vw (komputer stacjonarny i tablet), 0vw (telefon)

Domyślny obrót transformacji

Możemy teraz zacząć przekształcać moduł! Dodaj następujące domyślne ustawienia obracania transformacji do modułu obrazu:

• Środek: 359 stopni

Po najechaniu na transformację Obrót

I zmień te wartości po najechaniu kursorem, aby utworzyć przekształcający się kształt.

• Lewo: 250 stopni
• Środek: 320 stopni

Identyfikator CSS

Po najechaniu na moduł obrazu, ukształtowana nakładka obrazu nałoży się na wszystkie inne moduły, które się na nim znajdują. Aby tego uniknąć, będziemy musieli zmodyfikować indeks Z modułu po najechaniu myszą później w poście. Aby to osiągnąć, musisz dodać niestandardową klasę CSS do modułu obrazu.

Przejścia

Na koniec tworzymy płynne przejście, wydłużając czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 950ms

Dodaj moduł tekstowy nr 1 do wiersza

Dodaj zawartość H2

Następnym modułem, którego potrzebujemy, jest moduł tekstowy. Dodaj wybrane przez siebie treści H2.

Ustawienia tekstu H2

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Dydaktyka gotycka
• Grubość czcionki nagłówka 2: pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 7vw
• Nagłówek 2 Wysokość linii: 0.9em

Rozstaw

Utwórz zakładkę między tym modułem a modułem obrazu, używając niektórych niestandardowych wartości marginesów.

• Górny margines: -68vw
• Dolny margines: 8vw
• Lewy margines: 29vw
• Prawy margines: 29vw

Dodaj moduł tekstowy nr 2 do wiersza

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wprowadź wybraną treść akapitu.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Wysokość linii tekstu: 1,8 em
• Orientacja tekstu: Środek

Rozstaw

Dodaj również niestandardowe wartości marginesów.

• Margines dolny: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Lewy margines: 30vw (komputer stacjonarny), 10vw (tablet i telefon)
• Prawy margines: 30vw (komputer stacjonarny), 10vw (tablet i telefon)

Dodaj moduł dzielnika do rzędu

Widoczność

Następnym i ostatnim modułem, którego potrzebujemy, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projekt i zmień kolor przekładki.

• Kolor: #ffffff

Rozmiary

Zmodyfikuj również wartości rozmiaru.

• Waga dzielnika: 7px
• Szerokość: 15%
• Wyrównanie modułu: Środek

Rozstaw

I dodaj niestandardową wyściółkę dolną.

• Dolny margines: 5vw

Klonuj całą sekcję

Przejdźmy do drugiego przykładu! Sklonuj właśnie ukończoną sekcję.

Zmień moduł obrazu

Prześlij nową nakładkę obrazu w kształcie

Jest kilka zmian, które musimy wprowadzić, zaczynając od nakładki ukształtowanego obrazu. Śmiało i prześlij drugą nakładkę z kształtem, którą znajdziesz w folderze, który pobrałeś na początku tego postu.

Zmień domyślny kolor tła

Następnie przejdź do ustawień tła modułu obrazu i zmień domyślny kolor tła.

• Kolor tła: #2d007c

Zmień kolor tła po najechaniu kursorem

Zmień również kolor tła po najechaniu kursorem.

• Kolor tła: #008089

Zmień tło gradientowe

Wraz z gradientowym tłem.

• Kolor 1: #0c0c0c
• Kolor 2: rgba (255,255,255,0)
• Kierunek gradientu: 168 stopni
• Pozycja końcowa: 68%

Zmień domyślne ustawienia obrotu transformacji

Zmieniamy również efekt transformacji. Przejdź do ustawień transformacji i zmień domyślne wartości obracania transformacji.

• Lewo: 270 stopni
• Środek: 359 stopni

Zmień ustawienia obracania transformacji po najechaniu kursorem

Zmodyfikuj te same wartości po najechaniu myszą.

• Lewo: 192 stopni
• Środek: 280 stopni
• Prawo: 15 stopni

Dodaj niestandardowy kod do strony

Otwórz ustawienia strony

Teraz ostatnia część tego postu zapewnia, że ​​przekształcający się kształt pozostanie pod wszystkimi innymi modułami, gdy zostanie najechany. Otwórz ustawienia strony.

Dodaj kod CSS

Następnie przejdź do zakładki zaawansowane i dodaj następujący kod CSS.

.hover-state:hover {
z-index: -99; }

Używamy klasy CSS, którą przypisaliśmy do sekcji w tym samouczku.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi.

Przykład 1

Przykład #2

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki opcjom transformacji Divi. Mówiąc dokładniej, użyliśmy modułów obrazu z ukształtowanymi nakładkami obrazów, aby utworzyć przekształcający kształt tła. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!