Czy chcesz tworzyć przejścia w tle między elementami? Divi ?
Twórz płynne przejścia w tle między elementami Divi to świetny sposób na ulepszenie projektu Twojego Witryna internetowa Divi.
Pozwala to na płynne przejście gradientu, wzoru i maski tła między linią a sekcją w kreatywny sposób.
Na przykład możesz mieć przejście wzoru lub maski w różnych kolorach bez utraty ogólnego wyrównania i symetrycznego wyglądu projektu.
W tym samouczku użyjemy wbudowanych opcji projektowania tła Divi, aby utworzyć płynne przejście projektu tła między sekcją Divi a linią. Zastosowanie i wszechstronność tego projektu są nieograniczone, przenosząc opcje projektowania tła Divi na zupełnie nowy poziom!
Zacznijmy.
badanie
Oto krótkie spojrzenie na projekt, który będziemy budować w tym samouczku.
Oto kilka innych przykładowych projektów, które są możliwe po kilku prostych zmianach masek i wzorów tła.
Utwórz nową stronę za pomocą Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Tworzenie płynnego przejścia w tle między sekcją Divi a linią
Tworzenie nagłówka jako treści zastępczej
Czytaj także: Divi: Jak tworzyć zakładki z efektem najechania z linii
Zanim przystąpimy do działania, musimy dodać nagłówek as treść fikcyjny. Aby rozpocząć, dodaj jednokolumnowy wiersz do domyślnej sekcji strony.
Następnie dodaj do wiersza moduł Text.
Dodaj tekst w rozmiarze H1.
Pod zakładką Wnętrze, zaktualizuj projekt tekstu nagłówka zgodnie z potrzebami.
- Czcionka: Roboto Condensed
- Waga czcionki: pogrubiona
- Styl: TT
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu: #000000
- Rozmiar tekstu nagłówka: 4vw
- Odstępy między literami: 0.1em
- Wysokość linii: 1.3 em
Projekt tła sekcji
Dodano wyściółkę do sekcji
Po umieszczeniu fałszywego nagłówka otwórz ustawienia sekcji i zaktualizuj odstępy w następujący sposób:
- Wyściółka (góra i dół): 15vw
Dodano gradient tła do sekcji
Teraz, gdy mamy więcej miejsca do pracy, jesteśmy gotowi do dodania naszego projektu tła do sekcji. Pod zakładką Gradient tła, dodaj następujące punkty gradientu:
- Gradient zatrzymuje się:
- 0%: #4f0f75 (przy 0%)
- 25%: #2843c9 (przy 25%)
- 50%: #4ae2e0 (przy 50%)
- 75%: #3881ff (przy 75%)
- 100%: #4f0f75 (przy 100%)
Dodawanie wzoru tła do sekcji
Pod zakładką Wzór tła, zaktualizuj następujące elementy:
- Wzór: ukośne paski
- Kolor wzoru: rgba (79,15,117,0.23)
- Przekształć: Obróć
- Rozmiar wzoru: Rozmiar niestandardowy
- Szerokość: 7vw
- Wzrost: 5vw
- Powtarzanie wzoru pochodzenie: środek
Uwaga: Pamiętaj, aby użyć jednostki długości VW dla szerokości i wysokości wzoru. Upewnij się również, że powtarzany początek jest ustawiony 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 wiersza.
Dodawanie maski tła do sekcji
Pod zakładką Maska tła, dodaj następujące:
- Maska tła: warstwa Blob
- Kolor maski: rgba (0,0,0,0.7)
- Szerokość maski: 100vw
- Pozycja: Centrum
Uwaga: Podobnie jak w przypadku wzoru, rozmiar maski musimy dopasować za pomocą jednostki długości VW. Musimy również nadać masce centralną pozycję.
Projekt tła linii
Skopiuj i wklej tło sekcji do tła wiersza
Aby przyspieszyć proces projektowania tła linii, skopiuj ustawienia tła przekroju.
Następnie wklej tło w istniejącym wierszu.
W tym momencie możesz już zobaczyć, jak wzór tła i maska na linii tworzą płynne przejście do tła sekcji.
Wygląda na to, że linia 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 wiersza i dopełnienie 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 (góra, dół, lewo i prawo): 10vw
Dostosuj przystanki gradientu na linii
Następnie musimy dostosować stopnie gradientu na tle linii, aby płynnie przejść do gradientu tła przekroju.
Pod zakładką Gradient tła, zachowamy trzy środkowe punkty gradientu odziedziczone z tła sekcji) i usuniemy pierwszy i ostatni punkt gradientu.
Następnie ustaw pierwszy przystanek na 0%, a trzeci na 100%. Po zakończeniu powinieneś mieć następujące gradienty.
- Gradient zatrzymuje się
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Dodaj cień pola do linii
Aby nieco podnieść projekt i podkreślić płynne przejście tła, możemy dodać cień do rzędu.
- Cień pudełka: patrz zrzut ekranu
- Pozycja pionowa: 0px
- Siła Rozmycia Cienia Pudełkowego: 4vw
- Kolor cienia: rgba(0,0,0,0.5)
Dostosuj kolor tła linii
Teraz, gdy mamy już wszystkie elementy tła, możemy zacząć dostosowywać kolory, aby uzyskać bardziej kreatywny projekt.
Pod opcją Wzór tła wiersz, zaktualizuj następujące elementy:
- Kolor wzoru: rgba (255,255,255,0.23)
Dostosuj kolor maski tła linii
Możemy również zaktualizować kolor maski dla linii, aby naprawdę wyróżnić projekt.
Pod zakładką Maska tła, zaktualizuj następujące elementy:
- Kolor maski: #ffffff
- Transformacja maski: odwrócona
Ostateczny wynik
Zobaczmy wynik końcowy.
Pobierz DIVI teraz !!!
Więcej możliwości
Oto kilka innych przykładowych projektów, które są możliwe po kilku prostych zmianach masek i wzorów tła.
Zobacz też: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy
Pobierz DIVI teraz !!!
Wnioski
Kluczem do tworzenia płynnych przejść projektu tła w Divi jest mądre wykorzystanie tych jednostek długości VW.
Najpierw musimy stworzyć projekt tła sekcji, który będzie pasował do szerokości okna przeglądarki (od wyśrodkowanej pozycji na stronie). Po zakończeniu możemy użyć tego samego jednowierszowego projektu tła. Następnie mamy tylko kilka poprawek gradientów i kolorów, aby uzyskać niesamowity projekt.
Mam nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania do przyszłych projektów.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
