Jak tworzyć pływające moduły, które zderzają się w przestrzeni 3D w Divi

Zawsze fajnie jest odkrywać nowe projekty, które są możliwe przy użyciu Divi. A dzisiaj będziemy używać Divi do eksploracji przestrzeni 3D! Z technicznego punktu widzenia będziemy badać, jak zaprojektować pływające moduły, które wyglądają tak, jakby się zderzały w przestrzeni 3D. Ten projekt sprawdzi się jako kreatywny sposób na zadziwienie odwiedzających, pokazując, że masz „obszerne” usługi, produkty lub zasoby w swojej witrynie.

Oczywiście ten samouczek nie będzie porównywał się z tym, jak wyobrażam sobie eksplorację kosmosu w prawdziwym życiu. Ale miejmy nadzieję, że wy, odkrywcy Divi, możecie nauczyć się kilku rzeczy po drodze.

zapowiedź

Oto zapowiedź projektu, który wspólnie zbudujemy.

Pobierz pływające moduły, które zderzają się w układzie przestrzeni 3D ZA DARMO

Aby położyć swoje ręce na projekcie zbudowanym w tym samouczku, 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 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!

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

Pierwsze kroki z gotowym układem

Aby rozpocząć, upewnij się, że masz zainstalowany i aktywny motyw Divi. Następnie utwórz nową stronę, nadaj jej tytuł i wdróż Divi Builder (na interfejsie). Wybierz opcję „Wybierz gotowy układ”. Następnie wybierz układ strony docelowej gier wideo i zaimportuj go na nową stronę.

Aby uzyskać przewagę nad naszym projektem, użyjemy sekcji zatytułowanej „Funkcje gry”, która zawiera notki, których zamierzamy użyć w naszym projekcie. Ponieważ jest to jedyna sekcja, której naprawdę potrzebujemy, usuń wszystkie sekcje i wiersze z wyjątkiem dwóch wierszy notatek.

Implementacja Floating Blurbs w projektowaniu przestrzeni 3D w Divi

Tworzenie pierwszego rzędu Blurbs

Wewnątrz sekcji gotowego układu zawierającej dwa rzędy notatek utwórz nowy jednokolumnowy wiersz i przeciągnij go na górę sekcji.

Teraz korzystając z funkcji wielokrotnego wyboru Divi (przytrzymaj ctrl/cmd podczas wybierania każdej notki), wybierz 5 notatek w dwóch kolumnach poniżej i przeciągnij je do nowego wiersza w jednej kolumnie u góry sekcji.

Teraz możesz usunąć dwa wiersze, które zostały dostarczone z gotowym układem poniżej. Następnie powinieneś mieć tylko jeden jednokolumnowy wiersz zawierający 5 notatek.

Dodanie perspektywy do naszej sekcji

Aby uzyskać efekt 3D, którego szukamy w tym projekcie, musimy dodać do naszej sekcji właściwość CSS Perspektywa. Spowoduje to dodanie perspektywy 3D do naszego wiersza za każdym razem, gdy obrócimy wiersz za pomocą opcji transformacji.

Otwórz ustawienia sekcji i dodaj następujący niestandardowy kod CSS do elementu głównego:

perspective: 1000px;

Później możesz chcieć zwiększyć lub zmniejszyć wartość perspektywy, aby przybliżyć lub oddalić elementy 3D (w tym przypadku wiersze) od perspektywy użytkownika patrzącego na ekran.

Aby uzyskać więcej informacji, sprawdź, jak perspektywa działa z opcjami przekształcania w Divi.

Dostosowywanie rzędu

Zanim zaczniemy stylizować nasze notki, skonfigurujmy najpierw ustawienia wierszy. W tym projekcie musimy zmienić trzy główne rzeczy na poziomie wiersza:

1. Musimy wyrównać nasze notki w poziomie za pomocą „display:flex”. Dzięki temu nasz projekt będzie spójny i responsywny na wszystkich urządzeniach (w przeciwieństwie do 5-kolumnowego układu, który zepsuje się na tablecie i telefonie).
2. Musimy pozbyć się domyślnych marginesów kolumn, ustawiając szerokość rynny na 1.
3. Musimy użyć transform rotate, aby obrócić wiersz o 45 stopni na osi X. Po dodaniu właściwości Perspektywa do rodzica (sekcji), wiersz i wszystkie jego elementy mają efekt 3D, którego szukamy.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość rynny: 1
Szerokość: 80% (komputer), 100% (tablet), 100% (telefon)
Przekształć Obróć oś X: 45 stopni

Główny element kolumny CSS:

display: flex;
justify-content: center;

Dostosowywanie stylu i odstępów Blurb

Teraz nadszedł czas, aby nieco dostosować treść i styl naszych notek.

Ponieważ chcemy zastosować te same dostosowania do wszystkich naszych notatek, ponownie użyj wielokrotnego wyboru, aby wybrać wszystkie notki i wdrożyć modalne ustawienia elementów.

Najpierw usuń zawartość treści.

Następnie dodaj kolor tła:

Kolor tła: rgba (20 241 217 0,16)

Następnie zaktualizuj następujące odstępy:

Margines niestandardowy (komputer): 2vw prawy
Margines niestandardowy (tablet i telefon): 0vw prawy

Niestandardowe wypełnienie: 2% u góry, 2% u dołu, 3% w lewo, 3% w prawo

Następnie dodaj obramowanie w następujący sposób:

Szerokość obramowania: 2px
Kolor obramowania: rgba (20 241 217 0,66)

W tym momencie wszystkie notki mają już odpowiednią stylizację. Nadal musimy używać opcji transformacji, aby zmienić skalę i położenie każdego z notatek indywidualnie, co doda efektowi 3D pływania notatek. Ale zanim to zrobimy, zduplikujmy wiersz, aby utworzyć nasz drugi wiersz notek.

Tworzenie drugiego rzędu notek

Aby utworzyć drugi rząd notatek, po prostu zduplikuj rząd 5 właśnie dostosowanych notatek.

Aby stworzyć efekt kolizji, możemy obrócić zduplikowany wiersz w przeciwnym kierunku (-45 stopni).

Otwórz zduplikowany wiersz i zaktualizuj następujące elementy:

Przekształć Obróć oś X: -45 stopni

Zwiększ dopełnienie górnej i dolnej części

W tym momencie przednie notki mogą wychodzić poza sekcję. Aby to naprawić, dodaj do sekcji następujące dopełnienie:

Niestandardowa wyściółka: 15% na górze, 15% na dole

Korzystanie z opcji przekształcania w celu indywidualnego rozmiaru i położenia każdego rozmycia

W tym momencie jesteś gotowy do kreatywności w sposobie, w jaki chcesz, aby każda z notatek „unosiła się” w przestrzeni 3D. Aby to zrobić, możesz użyć opcji transformacji, aby dopasować rozmiar i umieścić każdą notkę jeden po drugim dokładnie tam, gdzie chcesz. Dzięki temu Twoje notki będą miały różne głębie w przestrzeni 3D.

Aby było łatwiej, ponumeruję notki od 1-10, zaczynając od notki po lewej stronie w górnym rzędzie (Streszczenie #1) i kończąc na notatce po prawej stronie w drugim rzędzie (Streszczenie #10).

Rozmycie nr 1

Zacznijmy od naszego pierwszego notki w górnym rzędzie. Otwórz ustawienia notki i zaktualizuj następujące elementy:

Skala transformacji (oś x i y): 90%

Rozmowa #2

Otwórz ustawienia Blurb #2 i zaktualizuj następujące elementy:

Skala transformacji (oś x i y): 80%
Przekształć Przesuń oś X: -10%

Blurba #3

Skala transformacji (oś x i y): 80%
Przekształć Przesuń oś X: 20%

Plama #4

Skala transformacji (oś x i y): 85%
Przekształć Przesuń oś X: -30%

Rozmowa nr 5

Skala transformacji (oś x i y): 60%

Po zakończeniu pierwszy rząd powinien wyglądać mniej więcej tak.

Kontynuuj dostosowywanie opcji transformacji dla notek 6-10, zaczynając od notki #6 po lewej stronie drugiego rzędu.

Blur # 6

Skala transformacji (oś x i y): 60%
Przekształć Przesuń oś X: -40%
Przekształć Przesuń oś Y: -20%

Blur # 7

Skala transformacji (oś x i y): 90%
Przekształć Przesuń oś X: 20%

Rozmowa nr 8

Skala transformacji (oś x i y): 70%
Przekształć Przesuń oś X: -50%

Blurba nr 9

Skala transformacji (oś x i y): 80%
Przekształć Przesuń oś X: -20%

Plama #10

Skala transformacji (oś x i y): 70%
Przekształć Przesuń oś X: -60%

Zobaczmy teraz, jak wygląda drugi wiersz, gdy zderza się z naszym pierwszym wierszem w przestrzeni 3D.

Aby ukończyć projekt, możemy dodać do sekcji ładny obraz tła 3D w przestrzeni. Używam obrazu tła w górnej sekcji, który został dostarczony z układem strony docelowej gier wideo, którego użyliśmy w tym samouczku.

Ostateczny projekt

Przyjrzyjmy się teraz ostatecznemu projektowi naszych pływających modułów 3D.

Pulpit

Tablet

Telefon

Ze względu na 5 notatek rozciągających się w rzędzie, trochę większym wyzwaniem jest dopasowanie wszystkich 5 notatek bez wychodzenia poza widoczny obszar. Aby to naprawić, możesz po prostu ukryć daleką notatkę w każdym wierszu na telefonie. Możesz też nadać każdej ze swoich notatek na telefonie mniejszy rozmiar.

Końcowe przemyślenia

Mam nadzieję, że ten samouczek da ci inspirację do tworzenia własnych pływających modułów w przestrzeni 3D. Wystarczy kilka kroków, aby cały rząd modułów został obrócony w 3D przy użyciu opcji perspektywy i przekształcenia. Następnie możesz umieścić każdy z modułów, aby unosić się w dowolnym miejscu.

Miłej zabawy podczas odkrywania.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!