Jak tworzyć płynne przejścia między elementami Divi?

Tworzenie płynnych przejść w tle między elementami Divi to świetny sposób na ulepszenie projektu witryny Divi. Pomysł polega na stworzeniu dopasowanych projektów tła (zarówno dla wiersza, jak i sekcji), które mają ten sam rozmiar i położenie w zależności od szerokości przeglądarki (przy użyciu jednostek długości vw). Pozwala to na płynne przenoszenie gradientu tła, wzoru i maski między wierszem a sekcją w kreatywny sposób. Na przykład wzór lub maska ​​mogą przechodzić w różne kolory bez utraty ogólnego wyrównania i symetryczności projektu.

W tym samouczku użyjemy wbudowanych opcji projektowania tła Divi, aby stworzyć płynne przejście projektu tła między sekcją Divi a wierszem. Zastosowanie i wszechstronność tego projektu są nieograniczone, przenosząc opcje projektowania tła Divi na zupełnie nowy poziom!

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Oto kilka przykładowych projektów, które są możliwe dzięki kilku prostym zmianom masek i wzorów tła.

Pobierz układ za DARMO

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

ŚCIĄGNIJ

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 sekcji do biblioteki Divi, wykonaj następujące czynności:

1. Przejdź do Biblioteki Divi.
2. Kliknij przycisk Importuj u góry strony.
3. W wyskakującym okienku przenoszenia wybierz zakładkę importu
4. Wybierz plik do pobrania z komputera (najpierw rozpakuj plik i użyj pliku JSON).
5. Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w 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 płynnego przejścia projektu tła między sekcją Divi a rzędem

Część 1: Tworzenie nagłówka jako makiety

Zanim zaczniemy projektować nasze tła, musimy dodać nagłówek jako mock content. Aby rozpocząć, dodaj jednokolumnowy wiersz do domyślnej sekcji strony.

Następnie dodaj moduł tekstowy do wiersza.

Dodaj nagłówek H1 do treści treści.

Na karcie projektu zaktualizuj projekt tekstu nagłówka, jak chcesz. W przypadku tego projektu warto dodać jednostkę długości VW dla rozmiaru tekstu nagłówka, aby skalował się płynnie z resztą projektu.

2. Projektowanie tła sekcji

Dodanie wyściółki VW do sekcji

Po umieszczeniu pozorowanego nagłówka otwórz ustawienia sekcji i zaktualizuj odstępy w następujący sposób:

• Wyściółka: 15vw góra, 15vw dół

Dodawanie gradientu tła do sekcji

Teraz, gdy mamy więcej miejsca do pracy, jesteśmy gotowi do dodania naszego projektu tła do sekcji. W zakładce gradientu dodaj następujące przystanki gradientu:

• Stop gradientu 1: #4f0f75 (przy 0%)
• Stop gradientu 2: #2843c9 (przy 25%)
• Stop gradientu 3: #4ae2e0 (przy 50%)
• Stop gradientu 4: #3881ff (przy 75%)
• Stop gradientu 5: #4f0f75 (przy 100%)

Dodawanie wzoru tła do sekcji

Na karcie Wzór zaktualizuj następujące elementy:

• Wzory: ukośne paski
• Kolor wzoru: rgba (79,15,117,0.23)
• Transformacja wzoru: Obróć
• Rozmiar wzoru: Rozmiar niestandardowy
• Szerokość wzoru: 7vw
• Wysokość wzoru: 5vw
• Powtarzanie wzoru pochodzenie: środek

Uwaga: Upewnij się, że używasz jednostki długości VW dla szerokości i wysokości wzoru. Pamiętaj też, aby ustawić powtarzane źródło na „środek”. Dzięki temu wzór tła pozostanie w tym samym miejscu, co wzór tła, który dodamy później do rzędu.

Dodawanie maski tła do sekcji

Na karcie Maska dodaj następujące elementy:

• Maska tła: warstwa Blob
• Kolor maski: rgba (0,0,0,07)
• Rozmiar maski: 100vw
• Pozycja maski: Środek

Uwaga: Podobnie jak w przypadku wzoru musimy nadać masce rozmiar używając jednostki długości VW. Musimy również nadać masce pozycję centralną.

3. Projektowanie tła rzędu

Skopiuj i wklej tło sekcji do tła wiersza

Aby przyspieszyć proces projektowania tła wiersza, skopiuj ustawienia tła sekcji.

Następnie wklej tło do istniejącego wiersza.

W tym momencie możesz już zobaczyć, jak wzór tła i maska ​​w rzędzie stanowi płynne przejście do tła sekcji. Wygląda na to, że wiersz ma przezroczyste tło, ale w rzeczywistości jest to ten sam wzór i maska ​​użyte w sekcji, o tym samym rozmiarze i położeniu.

Dostosuj rozmiar i dopełnienie wiersza za pomocą VW

Następnie musimy nadać naszemu wierszowi niestandardową szerokość za pomocą jednostki długości VW. Zaktualizuj następujące elementy:

• Szerokość: 75vw
• Maksymalna szerokość: 75vw
• Wyściółka: 10vw góra, 10vw dół, 10vw lewo, 10vw prawo

Przegląd odstępów i wymiarowania w jednostkach długości VW

Do tej pory dodawaliśmy wartości odstępów i pozycji w naszym układzie za pomocą jednostki długości VW. Oto krótka ilustracja aktualnie używanych wartości.

Jak dotąd mamy płynne przejście między tłem wiersza a tłem sekcji dla wzorców i masek. Następnie zaktualizujemy gradient tła wiersza, aby był również płynny.

Dostosuj stopnie gradientu w rzędzie

Następnie musimy dostosować stopnie gradientu na tle wiersza, aby płynnie przejść do gradientu tła przekroju. Pod zakładką gradientu zachowamy trzy środkowe stopnie gradientu odziedziczone z tła sekcji) i usuniemy pierwszy i ostatni przystanek gradientu. Następnie ustaw pierwszy ogranicznik na 0%, a trzeci na 100%. Po zakończeniu powinieneś mieć następujące gradienty.

• Gradient Stop 1: #2843c9 (przy 0%)
• Gradient Stop 2: #4ae2e0 (przy 50%)
• Stop gradientu 3: #3881ff (przy 100%)

Dodaj cień pola do wiersza

Aby nadać projektowi odrobinę elewacji i podkreślić płynne przejście tła, możemy dodać cień do rzędu.

• Cień pudełka: zobacz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 4vw
• Kolor cienia pudełka: rgba (0,0,0,0,5)

Dostosuj kolor wzoru tła wiersza

Teraz, gdy mamy już wszystkie elementy tła we właściwym miejscu, możemy zacząć dostosowywać kolory, aby uzyskać bardziej kreatywny projekt. W opcji wzoru wiersza zaktualizuj następujące elementy:

• Kolor wzoru: rgba (255,255,255,0.23)

Dostosuj kolor maski tła wiersza

Możemy również zaktualizować kolor maski w rzędzie, aby projekt naprawdę się wyróżniał! Na karcie maski zaktualizuj następujące elementy:

• Kolor maski: #ffffff
• Transformacja maski: odwrócona

Ostateczny wynik

Sprawdźmy efekt końcowy.

Więcej możliwości

Oto kilka przykładowych projektów, które są możliwe dzięki kilku prostym zmianom masek i wzorów tła.

Końcowe przemyślenia

Kluczem do tworzenia płynnych przejść projektu tła w Divi jest mądre wykorzystanie jednostek długości VW. Najpierw musimy stworzyć projekt tła sekcji, który będzie skalowany wraz z szerokością okna przeglądarki (od wyśrodkowanej pozycji na stronie). Po zakończeniu możemy użyć tego samego projektu tła w rzędzie. Potem wystarczy wprowadzić kilka zmian w gradiencie i kolorach, aby uzyskać niesamowity projekt. Mamy nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania w przyszłych projektach

Czekam na kontakt z Państwem w komentarzach.

Twoje zdrowie!