Jak stworzyć znak 3D z efektami najechania w Divi
Opublikowany: 2019-05-13Wszyscy wiemy, że dobra strona internetowa ułatwia odwiedzającym szybkie i sprawne znalezienie tego, czego szukają. I zawsze pomaga, jeśli możesz sprawić, by Twoje treści były bardziej angażujące. W tym samouczku pokażę, jak zaprojektować słupek 3D, który zaangażuje użytkowników i ułatwi im znalezienie tego, czego szukają w wyjątkowy sposób. Aby to zrobić, użyjemy opcji transformacji Divi i właściwości CSS Perspektywa w wielu modułach notatek, aby stworzyć efekt 3D znaków obróconych na poście.
Zacznijmy!
zapowiedź
Pobierz układ znaków 3D za DARMO
Aby położyć swoje ręce na projekcie znaku 3D z tego samouczka, najpierw musisz go pobrać 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 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.
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!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Subskrybuj nasz kanał YouTube
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Upewnij się, że masz zainstalowany i aktywny motyw Divi w swojej witrynie WordPress.
- Jeśli chcesz stworzyć własny obraz posta, potrzebujesz edytora zdjęć, takiego jak Photoshop, Gimp lub Sketch. Lub możesz użyć obrazu dostarczonego w darmowym pobraniu układu dla tego projektu powyżej.
- Poza tym będziemy budować wszystko od podstaw na froncie Divi Builder.
Tworzenie obrazu dla drogowskazu
Najłatwiejszym sposobem na stworzenie znaku dla tego projektu jest utworzenie małego powtarzalnego bloku obrazu, który możemy dodać jako obraz tła, który będzie powtarzał się pionowo w dół sekcji lub wiersza strony. Jeśli chcesz pominąć ten krok, możesz zaimportować układ json zawarty w bezpłatnym pobraniu powyżej, aby rozpocząć. Ale jeśli chcesz stworzyć własny z niestandardowym kolorem do wyboru, oto jak to zrobić.
W tym przykładzie użyję Photoshopa, ale proces jest bardzo podobny również w przypadku innych popularnych edytorów zdjęć.
W programie Photoshop kliknij, aby utworzyć nowy dokument o niestandardowej wysokości i szerokości 25 pikseli.
Ustaw kolor pierwszego planu na czarny (#000000) lub dowolny inny kolor.
Następnie wybierz narzędzie Wiadro z farbą i kliknij wewnątrz pustej warstwy kwadratu, aby pomalować kwadrat na czarno.
Następnie zapisz obraz jako jpeg na swoim komputerze. To jest obraz, którego użyjemy w projekcie, aby stworzyć słupek do naszego projektu słupka 3D.
Wdrażanie projektu znaku 3D w Divi
Gdy będziesz gotowy, utwórz nową stronę, nadaj jej tytuł i wdroż Divi Builder na interfejsie. Wybierz opcję „Buduj od podstaw”.
Twoje puste płótno czeka!
Teraz utwórz nową zwykłą sekcję z wierszem z jedną kolumną.
Dostosowywanie rzędu
Zanim dodamy moduł, otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Obraz tła: [wstaw niestandardowy kwadratowy obraz do posta]
Rozmiar obrazu tła: rzeczywisty rozmiar
Powtarzanie obrazu tła: Powtórz Y (w pionie)
Następnie zaktualizuj następujące elementy:
Szerokość rynny: 1
Maksymalna szerokość: 980 pikseli
Niestandardowa wyściółka: 2vw góra, 2vw dół
Następnie musimy dodać następujący niestandardowy kod CSS do głównego elementu kolumny w następujący sposób:
perspective: 1000px;
Ta perspektywiczna właściwość css jest niezbędna, aby uzyskać efekt 3D znaku (lub notki) za każdym razem, gdy obracamy go za pomocą opcji transformacji.
Aby uzyskać więcej informacji na ten temat, sprawdź, jak działa perspektywa z opcjami transformacji Divi.
Tworzenie znaku z modułem Blurb
Aby stworzyć nasz pierwszy znak na naszym drogowskazie 3D, użyjemy modułu notki. Śmiało i dodaj moduł notki do rzędu.
Następnie otwórz ustawienia notki i zaktualizuj zawartość notki w następujący sposób:
Zmniejsz pozorowaną zawartość, aby zawierała tylko kilka wierszy tekstu.
Użyj ikony: TAK
Ikona: strzałka w lewo (patrz zrzut ekranu)
Kolor tła: #1a233f
Kolor ikony: #9eb3c2
Umieszczenie obrazu/ikony: po lewej
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 80px
Orientacja tekstu: środek
Czcionka tytułu: Playfair Display
Kolor tekstu tytułu: #9eb3c2
Rozmiar tekstu tytułu: 38px (komputer), 26px (telefon)
Maksymalna szerokość: 600px
Wyrównanie modułu: Środek
Niestandardowe wypełnienie: 5% góra, 5% dół, 5% lewo, 5% prawo
Zaokrąglone rogi: 20px
Szerokość obramowania: 3px
Kolor obramowania: #21335e
To zajmuje się stylizacją naszego modułu notatek, ale aby uzyskać nasz efekt 3D, musimy użyć opcji transformacji, aby obrócić nasz moduł notatek. Aby to zrobić, zaktualizuj następujące elementy:
Przekształć Obróć oś X: 20 stopni
Powiel wiersz, aby uzyskać więcej znaków
Teraz, gdy mamy ukończony jeden z naszych projektów znaków, możemy powielić wiersz, aby uzyskać więcej. Za każdym razem, gdy powielamy wiersz, musimy po prostu zaktualizować obrót transformacji, aby znaki obracały się w różnych stopniach wokół słupka.
Śmiało, zduplikuj wiersz i zaktualizuj moduł notki w nowym wierszu w następujący sposób:
Przekształć Obróć oś X: -30 stopni
Powiel wiersz, aby utworzyć trzeci znak i zaktualizuj moduł notki w tym nowym wierszu w następujący sposób:
Przekształć Obróć oś X: 40 stopni
Zmiana kierunku drugiego znaku
W tej chwili wszystkie strzałki skierowane są w tym samym kierunku. Aby zmienić kierunek z lewej na prawą, musimy nieco zaktualizować ustawienia modułu notek.
Otwórz ustawienia modułu notki w drugim rzędzie (środkowym) i zaktualizuj następujące elementy:
Ikona: strzałka w prawo (patrz zrzut ekranu)
Orientacja tekstu: w lewo
Możemy zmienić kolejność treści notatek tak, aby tekst znajdował się po lewej stronie, a ikona po prawej. Aby to zrobić, musimy dodać pojedynczą linię niestandardowego CSS do głównego elementu w następujący sposób:
direction: rtl;
Teraz treść notki jest odwrócona i masz znak wskazujący nowy kierunek!
Obróć znaki z powrotem do pierwotnego stanu po najechaniu Hover
Jedną z fajnych rzeczy w tej konfiguracji jest to, że możesz łatwo dodać stan najechania, aby przywrócić obrócony moduł z powrotem do oryginalnego obrotu (0 stopni). Pozwala to użytkownikowi na zaangażowanie się w treść i wyraźny widok tekstu po najechaniu kursorem na moduł.
Ponieważ chcemy dodać ten sam stan najechania do wszystkich trzech modułów notatek, użyj multiselect, aby wybrać wszystkie trzy moduły notatek i otwórz ustawienia jednego z modułów, aby wyświetlić modalne ustawienia elementu. Następnie zaktualizuj następujące elementy:
Przekształć Obróć oś X (najechanie): 0deg
Zapisz ustawienia i gotowe!
Teraz Sprawdź dotychczasowy wygląd i funkcjonalność.
Dostosowywanie naszej sekcji za pomocą obrazu tła
W ostatnim kroku możemy dodać nowy obraz tła do naszej sekcji. Jest to oczywiście opcjonalne, ale odpowiedni obraz może wyglądać naprawdę fajnie, zwłaszcza jeśli użyjesz efektu paralaksy.
Otwórz sekcję i dodaj nowy obraz tła. (Używam obrazu z naszego pakietu układów agencji)
Następnie zaktualizuj następujące elementy:
Użyj efektu paralaksy: TAK
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Ostateczny wynik
Końcowe przemyślenia
Stworzenie znaku 3D naprawdę dodaje kreatywnego i angażującego elementu projektu do Twojej witryny, który może naprawdę sprawić, że Twoje treści wyskoczą (dosłownie). A efekt najechania umożliwia użytkownikowi przeglądanie treści bez efektu 3D, co zapewnia miłą rezerwę. Nie zapomnij, że możesz łatwo dodać adres URL linku do modułu notki, aby mógł służyć jako klikalny element nawigacyjny, jeśli chcesz. W każdym razie mam nadzieję, że to da Wam inspirację do następnego projektu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!