Czy chcesz połączyć ustawienia maski tła i opcje transformacji wzoru? Divi stworzyć niepowtarzalne tła?
Projekty tła to świetny sposób, aby nadać Witryna internetowa wizualny talent i wyróżnij się z tłumu. Nowe ustawienia maski tła i przekształcenia wzoru z Divi można łączyć na wiele sposobów, aby tworzyć te wzory tła.
W tym artykule zobaczymy, jak używać ustawień maski tła i transformacji wzoru z Divi aby stworzyć ciekawe tła dla swoich układów Divi.
Zacznijmy.
badanie
Po pierwsze, oto podgląd każdego przykładu na różnych rozmiarach ekranu (telefon i komputer).
Czytaj także: Divi: Jak używać efektów cienia i najechania do tworzenia interaktywnych treści
Przykład 1
Wersja 1 na pulpicie
Wersja 1 na telefon
Pobierz DIVI teraz !!!
Wersja 2 na pulpicie
Wersja 2 na telefon
Przykład 2
Wersja 1 na pulpicie
Wersja 1 na telefon
Pobierz DIVI teraz !!!
Wersja 2 na pulpicie
Wersja 2 na telefon
Przykład 3
Wersja 1 na pulpicie
Wersja 1 na telefonie
Pobierz DIVI teraz !!!
Wersja 2 na pulpicie
Wersja 2 na telefon
Opcje maski tła Divi i przekształcenia wzoru
Nowe funkcje maski i wzoru tła Divi obejmują kilka opcji ich dostosowania. Korekty obejmują odwracanie w poziomie i pionie, obracanie i odwracanie. Aby zobaczyć opcje, przejdź do ustawień tła sekcji lub linii i wybierz zakładki Wzór tła lub Maska tła.
Po dodaniu wzoru lub maski wyświetlane są ustawienia transformacji. Po prostu kliknij opcje, których chcesz użyć. Możemy ich używać razem i w dowolnej kombinacji.
Jak działają ustawienia maski i transformacji wzoru Divi
Poniższy wzór to Zig Zag z ustawieniami domyślnymi.
Na poniższym obrazku dodajemy maskę Layer Blog. Użyjmy ich, aby zademonstrować, jak działają ustawienia Maska tła i Transformacja wzoru.
Odwróć w poziomie
Jest to odwrócenie poziome. Zastosowaliśmy ustawienia transformacji zarówno do wzoru, jak i maski.
Odwróć w pionie
To jest pionowe odwrócenie wzoru i maski.
Rotacja
Ten pokazuje obrót dla wzoru i maski.
Odwrócić
Ten przykład pokazuje Odwróć dla wzoru i maski.
Kombinacje maski tła i przekształcenia wzoru
Oczywiście możemy również używać parametrów transformacji w różnych kombinacjach. Oto kilka przykładów.
Obraca to wzór i odwraca maskę.
W tym przykładzie użyto pionowego odwracania, obracania i odwracania wzoru tła. Maska tła wykorzystuje odwracanie w poziomie, odwracanie w pionie i obracanie.
W tym przykładzie użyliśmy odwracania i obracania w poziomie dla wzoru tła oraz odwracania i obracania w pionie dla maski tła.
Przykłady ustawień maski tła i transformacji wzoru
Następnie zobaczmy, jak te ustawienia mogą być używane z układami Divi. Użyjemy jednej sekcji jako punktu wyjścia i stworzymy trzy przykłady. Dostosujemy go, a następnie użyjemy ustawień transformacji, aby zmodyfikować go dla każdego przykładu.
W naszych przykładach używamy zmodyfikowanej wersji sekcji Hero na stronie docelowej układu Planowanie nieruchomości dostępne w Divi.
Oto przegląd omawianej sekcji. Używa koloru tła: #92a5ab.
- Tło: #92a5ab
Parametry maski tła i transformacji wzoru Przykład 1
Nasz pierwszy przykład daje nam łuk, który znajduje się pionowo na środku ekranu. Jedna strona ekranu ma tuftowany wzór. Następnie stworzymy alternatywną wersję z łukiem skierowanym w drugą stronę.
wzór tła
Otwórz ustawienia sekcji, przewiń w dół do Tło i wybierz zakładkę Wzór tła. Wybierz Tufted dla wzoru tła i Inverting dla Pattern Transform.
- Wzór tła: Tuftowany
- Transformacja wzoru: odwrotna
Maska tła
Wybierz kartę Maska tła i wybierz łuk dla maski tła. Zmień kolor maski na #616d72 i ustaw transformację maski na Odwróć. To kończy naszą pierwszą wersję łuku z pęczkami.
- Maska tła: Arch
- Kolor maski: #616d72
- Transformacja maski: odwrócona
Przykład 1 Wersja 2
Następnie stwórzmy wariację naszego projektu. Po prostu zmodyfikuj transformacja maski dla wzoru tła w przerzuceniu poziomym i przerzuceniu w pionie. Zmienia to łuk tak, aby był zwrócony w innym kierunku i przesuwa wzór, dzięki czemu nie wygląda on tylko jak odbicie lustrzane.
- Transformacja maski: odwróć w poziomie, odwróć w pionie
Parametry maski tła i transformacji wzoru Przykład 2
W naszym drugim przykładzie utworzymy owal na środku ekranu z wzorem wewnątrz owalu. Następnie zmienimy położenie wzoru. Zmodyfikujemy ten również dla różnych rozmiarów ekranu.
Wzór tła
W ustawieniach tła wybierz zakładkę Wzór tła i wybierz Shippo za motyw. Ustaw transformację wzoru na Odwróć.
- Tło wzór: Shippo
- Transformacja wzoru: odwrotna
Maska tła
Następnie wybierz zakładkę Maska tła i zmień następujące ustawienia.
- Maska tła: elipsa
- Kolor: #758489
- Transformacja maski: odwrócenie w poziomie, obrót
Tablet i telefon
Zarówno tablet, jak i telefon będą korzystać z tych samych ustawień, więc będziemy musieli zmienić tylko ustawienia tabletu. Wybierz Karta tabletu i zmodyfikuj transformacja maski w odwróceniu poziomym.
- Transformacja maski: odwrócenie w poziomie, odwrócenie
Przykład 2 Wersja 2
Następnie utworzymy odmianę dla naszego drugiego przykładu. Najpierw wybierz zakładkę Wzór tła i ustaw kolor wzoru na rgba(0,0,0,0.06).
- Kolor wzoru: rgba (0,0,0,0.06)
Następnie wybierz zakładkę Maska tła i wybierz opcję Odwróć poziomo, Obróć i Odwróć dla transformacji maski.
- Transformacja maski: odwrócenie w poziomie, obrót, odwrócenie
Tablet i telefon
Aby wyświetlić opcje tabletu i telefonu, wybierz ikonę Tablet . Zmodyfikuj transformacja maski w odwróceniu poziomym i inwersji. Alternatywna wersja przykładu XNUMX jest już gotowa.
- Transformacja maski: odwrócenie w poziomie, odwrócenie
Parametry maski tła i transformacji wzoru Przykład 3
W naszym trzecim przykładzie ustawień transformacji maski i wzoru użyjemy wzoru plastra miodu z maską farby. Stworzymy również wersję mobilną dla tego.
wzór tła
Najpierw wybierz zakładkę Ustawienia urządzenia i wybierz ikonę Urządzenie. biuro. Wybierz kartę Wzór tła i wybierz plaster miodu jako wzór tła. Zmień kolor na rgba(0,0,0,0.42). W tym przypadku zostawimy opcje Transformacja wzorca dezaktywowana. Dodamy je do wersji alternatywnej.
- Wzór tła: plaster miodu
- Kolor wzoru: rgba (0,0,0,0.42)
- Transformacja wzoru: brak
Maska tła
Następnie wybierz zakładkę Maska tła. Wybierać Malowanie dla maski tła. Zmień kolor na #697b82. Wybierz opcję Odwróć w pionie dla przekształcenia maski.
- Maska tła: Farba
- Kolor maski: #697b82
- Transformacja maski: odwracanie w pionie
Następnie wybierz Motywacja dla rozmiaru. To otwiera kilka dodatkowych opcji. Wybierać Prawy dolny dla lokalizacji. To wszystko w wersji na komputery stacjonarne. Następnie stworzymy wersję mobilną.
- Rozmiar maski: okładka
- Pozycja maski: dolny prawy
Tablet i telefon
Następnie wybierz kartę tabletu i zmodyfikuj transformację maska tło w przerzuceniu i obrocie w pionie. To kończy styl naszego trzeciego przykładu. Następnie utworzymy wersję alternatywną.
- Transformacja maski: odwrócenie w pionie, obrót
Przykład 3 Wersja 2
W alternatywnej wersji tego przykładu dostosujemy zarówno wzór tła, jak i maskę tła.
wzór tła
W przypadku wzoru tła zmień kolor wzoru na rgba(0,0,0,0.11). Zmień transformację wzoru, aby odwrócić poziome, odwrócić w pionie i obrócić.
- Kolor maski: rgba (0,0,0,0.11)
- Transformacja maski: przerzucanie w poziomie, przerzucanie w pionie, obracanie
maska tła
Następnie wybierz kartę Maska tła. Zmień kolor na biały i przekształcenie maski w odwrócenie w poziomie, odwrócenie w pionie i odwrócenie.
- Kolor maski: #ffffff
- Transformacja maski: odwracanie w poziomie, odwracanie w pionie, odwracanie
Następnie zmień rozmiar maski do zakrycia, a następnie wybierz Środek dla pozycji maski.
- Rozmiar maski: okładka
- Pozycja maski: Środek
Tablet i telefon
Na koniec wybierz zakładkę tablette stworzyć wersję mobilną. Wybierz zakładkę maska tła i wybierz cztery opcje transformacji maski. To kończy alternatywną wersję trzeciego przykładu.
- Transformacja maski: odwrócenie w poziomie, odwrócenie w pionie, obrót, odwrócenie
Ostateczne rezultaty
Oto przegląd każdego przykładu z różnymi rozmiarami ekranu (komputer stacjonarny i telefon)
Przykład 1
Wersja 1 na pulpicie
Wersja 1 na telefonie
Wersja 2 na pulpicie
Wersja 2 na telefon
Przykład 2
Wersja 1 na pulpicie
Wersja 1 na telefonie
Wersja 2 na pulpicie
Wersja 2 na telefonie
Przykład 3
Wersja 1 na pulpicie
Wersja 1 na telefonie
Wersja 2 na pulpicie
Wersja 2 na telefonie
Pobierz DIVI teraz !!!
Zobacz też: Divi: Jak utworzyć sekcję członków zespołu jako karuzelę
Wnioski
Oto nasze spojrzenie na to, jak używać maski tła i ustawień transformacji wzoru Divi, aby tworzyć wiele interesujących wzorów tła.
Ponieważ wzory i maski mogą być używane razem, ich ustawienia transformacji mogą być również używane razem. Otwiera to wiele możliwości projektowania, dając jeszcze więcejnarzędzia aby dodać elegancji do tła Divi.
Najlepszym sposobem na nauczenie się, jak ich używać, jest zabawa z korektami i zobaczenie, co możesz stworzyć.
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 projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie 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.
...
