Jak korzystać z ustawień maski tła i transformacji wzoru Divi

Wzory tła to świetny sposób, aby nadać swojej witrynie nieco wizualnego charakteru i wyróżnić się z tłumu. Nowa maska ​​tła Divi i ustawienia transformacji wzoru można łączyć na wiele sposobów, aby tworzyć te wzory tła. W tym poście zobaczymy, jak używać maski tła Divi i ustawień transformacji wzoru, aby stworzyć interesujące tła dla swoich układów Divi.

Zacznijmy.

Zapowiedź

Najpierw spójrz na każdy przykład z pulpitem, telefonem i alternatywnymi opcjami dla każdego z nich.

Przykład pierwszy Wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Przykład dwa wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Przykład trzy wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Opcje maski tła Divi i przekształcenia wzoru

Nowe funkcje maski tła i wzoru Divi obejmują kilka opcji ich dostosowania. Regulacje obejmują odwracanie, obracanie i odwracanie w poziomie i pionie. Aby zobaczyć opcje, przejdź do ustawień tła sekcji lub wiersza i wybierz zakładki Wzór tła lub Maska tła.

Po dodaniu wzoru lub maski pojawią się 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 Divi i przekształcenia wzoru

Poniższy wzór to Zig Zag z ustawieniami domyślnymi.

Dodałem maskę Layer Blog na obrazku poniżej. Użyjmy ich, aby zademonstrować, jak działają ustawienia maski tła i transformacji wzoru.

Odwracanie w poziomie

To jest przerzucanie w poziomie. Zastosowałem ustawienia transformacji zarówno do wzoru, jak i maski.

Odwracanie w pionie

To jest odwracanie w pionie dla wzoru i maski.

Obracanie

Ten pokazuje Obracanie dla wzoru i maski.

Odwracanie

Ten przykład pokazuje odwracanie dla wzoru i maski.

Kombinacje maski tła i przekształcenia wzoru

Oczywiście możemy również używać ustawień transformacji w różnych kombinacjach. Oto kilka przykładów.

Ten obraca wzór i odwraca maskę.

W tym przykładzie użyto pionowego odwracania, obracania i odwracania jako wzoru tła. Maska tła wykorzystuje Odbijanie w poziomie, Odwracanie w pionie i Obracanie.

W tym przykładzie użyłem przerzucania w poziomie i obracania jako wzoru tła oraz przerzucania i obracania w pionie jako maski tła.

Przykłady ustawień maski tła i przekształcenia wzoru

Następnie przyjrzyjmy się, jak te ustawienia mogą być używane z układami Divi. Użyjemy sekcji jako punktu wyjścia i stworzymy trzy przykłady. Zmodyfikujemy go, a następnie użyjemy ustawień transformacji, aby zmienić go dla każdego przykładu.

W moich przykładach używam zmodyfikowanej wersji sekcji bohatera ze strony docelowej Planowanie posiadłości, która jest dostępna w Divi. Oto spojrzenie na moją sekcję. Modyfikacja upraszcza sekcję bohatera dla naszych potrzeb. Używa tła koloru tła: #92a5ab.

• Tło: #92a5ab

Ustawienia maski tła i przekształcenia wzoru Przykład pierwszy

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 przeciwnym kierunku.

Wzór tła

Otwórz ustawienia sekcji, przewiń w dół do opcji Tło i wybierz kartę Wzór tła . Wybierz Tuftowane dla wzoru tła i Inverting dla transformacji wzoru.

• Wzór tła: Tuftowany
• Transformacja wzorca: odwracanie

Maska tła

Wybierz zakładkę Maska tła i wybierz Łuk jako maskę tła. Zmień kolor maski na #616d72 i ustaw Transformację maski na Odwracanie. To kończy naszą pierwszą wersję łuku z kępkami.

• Maska tła: Arch
• Kolor: #616d72
• Transformacja maski: odwracanie

Przykład jednej odmiany

Następnie stwórzmy wariację naszego projektu. Po prostu zmień Przekształcenie maski dla Wzoru tła na Odwracanie w poziomie i Odwracanie 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: Przerzucanie w poziomie, Przerzucanie w pionie

Ustawienia maski tła i przekształcenia wzoru Przykład drugi

W naszym drugim przykładzie utworzymy owal na środku ekranu z wzorem wewnątrz owalu. Następnie zmienimy położenie wzoru. Zmodyfikujemy to 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 jako wzór. Ustaw Transformację wzoru na Odwracanie.

• Wzór tła: Shippo
• Transformacja wzorca: odwracanie

Maska tła

Następnie wybierz kartę Maska tła . Wybierz Eclipse jako maskę tła i najedź na opcje tła. Wybierz wyświetloną ikonę tabletu. Spowoduje to otwarcie ustawień urządzenia. W przypadku ustawień pulpitu ustaw kolor na #758489. W polu Transformacja maski wybierz opcję Odwracanie i obracanie w poziomie. To kończy wersję na komputer. Zmieńmy to na wersję mobilną.

• Maska tła: Zaćmienie
• Kolor: #758489
• Transformacja maski: Odwracanie w poziomie, obracanie

Tablet i telefon

Tablet i telefon będą korzystać z tych samych ustawień, więc wystarczy zmienić ustawienia tabletu. Wybierz kartę Tablet i zmień Przekształcenie maski na Odwracanie w poziomie.

• Transformacja maski: Odwracanie w poziomie, odwracanie

Przykład druga wariacja

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 kartę Maska tła i wybierz opcję Odwracanie w poziomie, obracanie i odwracanie dla transformacji maski.

• Transformacja maski: Odwracanie w poziomie, obracanie, odwracanie

Tablet i telefon

W przypadku opcji tabletu i telefonu wybierz ikonę tabletu . Zmień Przekształcenie maski na Odwracanie i odwracanie w poziomie. Alternatywna wersja przykładu 2 jest już gotowa.

• Transformacja maski: Odwracanie w poziomie, odwracanie

Ustawienia maski tła i przekształcenia wzoru Przykład trzeci

W naszym trzecim przykładzie ustawień maski i transformacji wzorca użyjemy wzorca plastra miodu z maską farby. Stworzymy również wersję mobilną dla tego.

Wzór tła

Najpierw wybierz zakładkę ustawień urządzenia i wybierz ikonę na pulpicie . 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 wyłączone opcje transformacji wzorca. 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 kartę Maska tła . Wybierz farbę jako maskę tła. Zmień kolor na #697b82. Wybierz Odwracanie w pionie dla Transformacji maski.

• Maska tła: Farba
• Kolor: #697b82
• Transformacja maski: przerzucanie w pionie

Następnie wybierz opcję Okładka dla rozmiaru. To otwiera kilka dodatkowych opcji. Wybierz Dolny prawy dla pozycji. To wszystko w wersji na komputery stacjonarne. Następnie utworzymy wersję mobilną.

• Rozmiar: okładka
• Pozycja: dolny prawy

Tablet i telefon

Następnie wybierz kartę tabletu i zmień Przekształcenie maski tła na Odwracanie i obracanie w pionie. To kończy stylizację naszego trzeciego przykładu. Następnie utworzymy wersję alternatywną.

• Transformacja maski tła: odwracanie w pionie, obracanie

Przykładowa trzecia wariacja

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ń Przekształcenie wzoru na Odbijanie w poziomie, Odwracanie w pionie i Obracanie.

• Kolor wzoru: rgba(0,0,0,0.11)
• Transformacja wzoru: Przerzucanie w poziomie, Przerzucanie w pionie, Obracanie

Maska tła

Następnie wybierz kartę Maska tła . Zmień Kolor na biały i Przekształć maskę na Odwracanie w poziomie, Odwracanie w pionie i Odwracanie.

• Kolor: #ffffff
• Transformacja maski: przerzucanie w poziomie, przerzucanie w pionie, odwracanie

Następnie zmień Rozmiar maski na Pokrycie, a następnie wybierz Środek dla pozycji maski.

• Rozmiar maski: okładka
• Pozycja maski: Środek

Tablet i telefon

Na koniec wybierz kartę tabletu , aby utworzyć wersję mobilną. Wybierz zakładkę Maska tła i wybierz wszystkie cztery opcje Transformacji maski. To kończy alternatywną wersję trzeciego przykładu.

• Transformacja maski tła: przerzucanie w poziomie, przerzucanie w pionie, obracanie, odwracanie

Wyniki

Oto spojrzenie na każdy przykład z pulpitem, telefonem i alternatywnymi opcjami dla każdego z nich.

Przykład pierwszy Wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Przykład dwa wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Przykład trzy wyniki

Standardowa wersja pulpitu

Zwykła wersja telefonu

Alternatywna wersja pulpitu

Telefon w wersji alternatywnej

Końcowe myśli

Oto nasze spojrzenie na to, jak używać maski tła i ustawień transformacji wzoru Divi, aby tworzyć wiele interesujących projektów tła. Ponieważ desenie i maski mogą być używane razem, ich ustawienia transformacji mogą być również używane razem. Otwiera to wiele opcji projektowania, dając jeszcze więcej narzędzi do dodawania elegancji twojemu teł Divi. Najlepszym sposobem na nauczenie się ich używania jest zabawa z korektami i zobaczenie, co możesz stworzyć.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś ustawienia maski tła i transformacji wzoru Divi w swoich układach Divi? Daj nam znać w komentarzach.