Kreatywne sposoby łączenia efektów obracania i przewijania z okrągłymi elementami w Divi

Podczas projektowania nowej witryny internetowej zawsze szukamy nowych i kreatywnych sposobów prezentowania polecanych elementów (takich jak produkty i usługi). A dzięki efektom przewijania Divi, nowe drzwi zostały otwarte, aby przenieść układy notatek na zupełnie nowy poziom. W tym samouczku pokażemy, jak stworzyć układ modułu notatek z obracającymi się okrągłymi elementami podczas przewijania. Ten unikalny układ zawiera sprytne wykorzystanie kombinacji kolorów z wieloma okrągłymi elementami, które obracają się za notatkami, gdy użytkownik przewija stronę w dół. Bez wątpienia ten projekt miałby wiele zastosowań dla niemal każdej treści.

Cieszyć się!

zapowiedź

Oto krótkie spojrzenie na układ notki z obracającymi się okrągłymi elementami, które tworzymy w tym samouczku.

Pobierz Układ Blurb Rotating Circular Elements ZA DARMO

Aby położyć swoje ręce na projektach 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 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?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie układu rozmycia z obracającymi się elementami kołowymi podczas przewijania w Divi

Dodawanie rzędu

Najpierw dodaj wiersz z trzema kolumnami do sekcji.

Margines sekcji tymczasowej

Następnie dodaj trochę górnego i dolnego marginesu do sekcji, aby stworzyć trochę miejsca na przewijanie.

Tworzenie projektu Blurb z obracającym się elementem kołowym #1

W naszym pierwszym projekcie stworzymy moduł notatek z trzema kolorowymi przekładkami, które będą znajdować się za notatką i obracać się podczas przewijania przez użytkownika. Ten pierwszy projekt będzie dobrym szablonem dla kolejnych dwóch projektów, które dodamy do pozostałych kolumn.

Oto jak to zbudować.

Dodaj moduł Blurb

W kolumnie 1 dodaj moduł notki.

Blurb 1 Treść

Otwórz ustawienia modułu notki i zaktualizuj treść treści w następujący sposób:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Następnie dodaj wybraną ikonę, aby zastąpić domyślny obraz.

Rozmycie 1 Ustawienia projektu

Na karcie projekt zaktualizuj następujące elementy:

• Kolor tła: #121212
• Kolor ikony: #41828d
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 75px
• Wyrównanie tekstu: do środka
• Czcionka tytułu: Oswald
• Styl czcionki tytułu: TT
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 22px
• Kolor tekstu ciała: #ffffff

Aby notka była okrągła, zaktualizuj rozmiar i zaokrąglone rogi w następujący sposób:

• Szerokość: 300px
• Maksymalna szerokość: 300px
• Padding: 25px góra, 25px dół, 25px po lewej, 25px po prawej
• Zaokrąglone rogi: 50%

Kombinacja równej szerokości i wysokości w połączeniu z zaokrąglonymi rogami sprawia, że ​​notka jest okrągła.

Następnie zaktualizuj pozycję o przesunięcie.

• Pozycja: Względny
• Przesunięcie w pionie: 25px
• Przesunięcie w poziomie: 25px
• Indeks Z: 1

Spowoduje to wyśrodkowanie notki w dzielnikach, które dodamy później. Indeks Z zapewni, że notatka znajdzie się również nad innymi przegrodami.

Następnie dodaj do notki efekt obracającego się przewijania.

Na karcie Efekty obracania…

• Włącz obracanie: TAK
• Obrót początkowy: 45 stopni (przy widoku 0%)
• Średnia rotacja: 0 stopni (w widoku 40%-60%)
• Obrót końcowy: -45° (przy 100% widoku)

Spowoduje to lekkie obrócenie notki do pozycji pionowej w kierunku środka strony, a następnie obrócenie o kolejne 45 stopni, gdy opuści górną część strony.

Dodaj okrągły rozdzielacz nr 1

Teraz dodamy nasz pierwszy z trzech modułów rozdzielających, które stworzą nasz projekt obracającego się elementu okrągłego.

Dodaj moduł rozdzielający pod modułem notki.

Ustawienia rozdzielacza 1

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

• Pokaż dzielnik: NIE
• Kolor gradientu tła po lewej stronie: #311847
• Prawy gradient tła: #ec4067
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

A teraz robimy to okrągłe w następujący sposób:

• Szerokość: 350px
• Maksymalna szerokość: 350px
• Wysokość: 350px
• Zaokrąglone rogi: 50%

Zwróć uwagę, że przegroda jest nieco większa niż moduł notatek, dzięki czemu będziemy mogli zobaczyć zewnętrzną krawędź przegrody po umieszczeniu za notatką.
Teraz po prostu aktualizujemy pozycję dzielnika do wartości bezwzględnej, która będzie idealnie pasować do notki.

• Pozycja: bezwzględna

Jeśli separator znajduje się na górze notki, upewnij się, że zaktualizowałeś indeks noty z do 1.

Następnie dodaj do dzielnika następujące efekty przewijania:

Na karcie Efekt rotacji…

• Włącz obracanie: TAK
• Rotacja początkowa: 0 stopni (przy widoku 0%)
• Obrót w połowie: 45 stopni (przy 50% widoku)
• Końcowa rotacja: -180 stopni (w widoku 100%)

Dodaj dzielnik kołowy 2

Aby utworzyć drugą okrągłą przegrodę, otwórz pole warstw, klikając ikonę warstw w menu ustawień. Następnie zduplikuj moduł rozdzielacza, aby utworzyć nowy.

Aktualizacja dzielnika 2 Ustawienia projektu

Dla tego dzielnika nadajmy mu inny kolor tła gradientu w następujący sposób:

• Kolor lewego gradientu tła: rgba (160,26,125,0,5)
• Prawy gradient tła: rgba (255,255,255,0)

UWAGA: Ważne jest, aby użyć tutaj półprzezroczystych kolorów, aby wyeksponować tło za nim. Tworzy to piękną kombinację kolorów.

Następnie zaktualizuj efekty przewijania w następujący sposób:

Na karcie Efekty obracania…

• Obrót w połowie: 90 stopni (przy 50% widoku)
• Obrót końcowyg: 180 stopni (przy 100% widoku)

Dodaj dzielnik kołowy 3

Kontynuuj ten sam proces, aby utworzyć trzeci i ostatni dzielnik, powielając dzielnik 2.

Zaktualizuj dzielnik 3 Ustawienia projektu

Dla tego dzielnika nadajmy mu również inny kolor tła gradientu w następujący sposób:

• Kolor lewego gradientu tła: rgba (255,255,255,0)
• Prawy gradient tła: rgba (41,196,169,0,5)

Następnie zaktualizuj efekty przewijania w następujący sposób:

Na karcie Efekty obracania…

• Obrót w połowie: 180 stopni (przy 50% widoku)
• Rotacja końcowag: 360 stopni (w widoku 100%)

Na karcie Skalowanie w górę i w dół…

• Włącz skalowanie w górę i w dół: TAK
• Skala początkowa: 110% (przy widoku 0%)
• Skala średnia: 110% (przy 50% widzialności)
• Skala końcowa: 100% (w widoku 100%)

Tworzenie Obracanego Okrągłego Projektu Blurb #2

Ponieważ mamy już ukończony projekt w kolumnie 1, zacznijmy drugi projekt, powielając całą pierwszą kolumnę. Przeniesie to również cztery moduły. Będziesz musiał usunąć jedną z pustych kolumn, aby zachować układ trzech kolumn.

Zaktualizuj projekt modułu Blurb

W tym projekcie zamierzamy zastosować białe tło rozmycia, abyśmy mogli użyć efektu filtra ekranu, aby pokazać ruchome kolory za tekstem rozmycia. Zamierzamy również dodać efekt przewijania skalowania, aby powiększyć tylną przegrodę.

Oto jak to zrobić.

Otwórz ustawienia modułu notki w kolumnie 2 i zaktualizuj następujące elementy:

• Tło: #ffffff

Następnie zmień Kolor tekstu tytułu i treści na czarny.

• Kolor tekstu tytułu: #000000
• Kolor tekstu ciała: #000000

Następnie dodaj następujący tryb mieszania:

• Tryb mieszania: ekran

Zaktualizuj efekty przewijania rozdzielacza 1

Otwórz ustawienia modułu rozdzielającego bezpośrednio pod modułem notki w kolumnie 2 i zaktualizuj następujące efekty przewijania:
Na karcie Efekty skalowania w górę i w dół…

• Włącz skalowanie w górę i w dół: TAK
• Skala początkowa: 100% (przy widocznym obszarze 0%)
• Skala średnia: 120% (przy oglądaniu 40%-60%)
• Skala końcowa: 100% (w widoku 100%)

Spowoduje to, że separator powiększy się o 20% w stosunku do oryginalnego rozmiaru w trakcie przewijania strony w dół.

Tworzenie Obracającego się Okrągłego Projektu Blurb #3

W tym ostatnim projekcie stworzymy obracającą się, okrągłą notkę podobną do tej w kolumnie 1. Jednak dodamy inny tryb mieszania, aby pokazać kolory poprzez biały tekst na ciemnym tle.

Oto jak to zrobić.

Powiel kolumnę 1

Ponieważ mamy już gotowy projekt w kolumnie 1, zacznijmy od razu trzeci projekt, powielając cały pierwszy słup i przenosząc go do umieszczenia trzeciego słupa za pomocą pola warstw. Następnie usuń dodatkową pustą kolumnę.

Zaktualizuj ustawienia modułu Blurb

Najpierw dodajmy tryb mieszania mnożenia, aby pokazać kolory rozdzielaczy przez biały tekst w następujący sposób:

• Tryb mieszania: wiele

Następnie zaktualizuj kolor ikony również na biały.

• Kolor ikony: #ffffff

Zaktualizuj ustawienia rozdzielacza 3

Teraz usuńmy efekt przewijania skalowania na ostatnim (trzecim) dzielniku w kolumnie 3.
Otwórz ustawienia trzeciego rozdzielacza i zaktualizuj następujące elementy:

Na karcie Efekty skalowania w górę i w dół…

• Włącz skalowanie w górę i w dół: NIE

Dostosuj pozycję kolumny 2 na urządzeniu mobilnym

W tej chwili trzy wzory notatek zostaną wyrównane po lewej stronie ekranu na wyświetlaczach tabletów i telefonów. Aby zrównoważyć projekt, możemy łatwo przesunąć środkową kolumnę w prawo, używając skali transformacji.

Otwórz ustawienia dla kolumny 2 i zaktualizuj następujące elementy:

Transform Scale X Axis: 40% (na tablecie), 15% (na telefonie)

Ostateczny wynik

Otóż ​​to! Sprawdźmy ostateczny wynik na aktywnej stronie.

Oto projekt na pulpicie, gdy użytkownik przewija układ.

Oto projekt na tablecie.

I tutaj jest na telefon.

Końcowe przemyślenia

Jedną z najlepszych cech tego układu jest kreatywność, jaką można uzyskać dzięki efektom przewijania i kombinacjom kolorów, z których każdy można łatwo dostosować za pomocą wbudowanych opcji Divi. A kiedy już lepiej zrozumiesz, jak włączać efekty filtrów, rzeczy naprawdę zaczynają pękać. Mam nadzieję, że da ci to inspirację do następnego tworzonego układu notatek.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!