Jak korzystać z trybów mieszania wzorów na obrazach tła Divi

Wbudowane ustawienia wzoru tła Divi umożliwiają tworzenie przyciągających wzrok projektów i dodawanie stylu do obrazów tła w witrynie. Możesz użyć ustawień trybów mieszania, aby precyzyjnie dopasować sposób mieszania wzoru z obrazem tła. Połącz obrazy tła, desenie i tryby mieszania, aby stworzyć unikalne tła i elementy projektu dla swojego układu. Dzięki 24 wzorom do wyboru i 16 trybom mieszania, nie wspominając o wszystkich innych ustawieniach, których możesz użyć do dopracowania wyglądu wzoru, niebo jest granicą dla Twojego projektu tła!

W tym samouczku pokażemy Ci kilka przykładów, jak dodać tryb mieszania wzorów do obrazów tła na Twojej stronie. Postępuj zgodnie z instrukcjami, aby samodzielnie odtworzyć te stylizacje lub wykorzystaj je jako inspirację do tworzenia własnych niestandardowych projektów.

Zacznijmy!

zapowiedź

Oto podgląd tego, co zaprojektujemy w tym samouczku.

Pierwszy układ

Drugi układ

Trzeci układ

Czego potrzebujesz, aby zacząć

Zanim zaczniemy, zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej.

Teraz zacznijmy!

Jak korzystać z trybów mieszania wzorów na obrazach tła Divi

Utwórz nową stronę z gotowym układem

Zaczniemy od użycia gotowego układu z biblioteki Divi. Do tego projektu wykorzystamy stronę docelową Marina z pakietu Marina Layout Pack.

Dodaj nową stronę do swojej witryny i nadaj jej tytuł, a następnie wybierz opcję Użyj Divi Builder.

W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz Przeglądaj układy.

Wyszukaj i wybierz układ strony docelowej Marina.

Wybierz opcję Użyj tego układu, aby dodać układ do swojej strony.

Teraz jesteśmy gotowi do zbudowania naszego projektu.

Pierwszy układ

W naszym pierwszym projekcie do pierwszego obrazu nagłówka dodamy wzór w jodełkę. To doda wizualnego zainteresowania do nagłówka. Ze względu na tryb mieszania, który zastosujemy, wzór będzie bardziej subtelny i nadal będzie widoczny obraz tła.

Najpierw otwórz ustawienia sekcji i przejdź do sekcji Tło. Kliknij na zakładkę wzór i wybierz Dodaj wzór tła.

Następnie wybierz typ wzoru. Jak widać, do wyboru jest wiele różnych wzorów, które można dodatkowo dostosować za pomocą poniższych ustawień wzoru.

• Typ wzoru: Odwrócone szewrony 2

Dodawanie trybu mieszania wzorów

Na koniec ustaw tryb mieszania wzorów. Dla tego nagłówka użyjemy trybu mieszania Soft Light. Ten tryb mieszania sprawia, że ​​wzór jest bardziej subtelny, aby nie odwracał uwagi od obrazu tła.

• Tryb mieszania wzorów: miękkie światło

Ostateczny projekt

Oto ostateczny projekt naszego pierwszego układu.

Oto widok mobilny tego projektu.

Drugi układ

W przypadku drugiego układu dodamy wzór w sekcji Jak to działa układu strony docelowej Marina. Użyjemy wzoru fali nałożonego na obraz tła i gradient, który pasuje do morskiego motywu strony. Zacznijmy.

Najpierw przejdź do sekcji Jak to działa i otwórz Ustawienia sekcji. Otwórz ustawienia tła, wybierz zakładkę Wzór, a następnie kliknij Dodaj wzór tła.

W tym projekcie użyjemy wzoru typu Waves.

• Typ wzoru: Fale

Następnie zmień kolor wzoru na biały.

• Kolor wzoru: #FFFFFF

Dodawanie trybu mieszania wzorów

Teraz możemy dodać tryb mieszania do naszego wzoru. Ustaw tryb mieszania wzoru na nakładanie. Ten tryb mieszania sprawia, że ​​ciemne kolory obrazu tła są ciemniejsze, a jasne kolory jaśniejsze. Po dodaniu trybu mieszania do tej sekcji biały wzór fali zmienia się w odcienie niebieskiego, tworząc ciekawy efekt wzoru, który świetnie wygląda z projektem tej strony.

• Tryb mieszania wzorów: nakładka

Ostateczny projekt

Oto ostateczny projekt sekcji Jak to działa.

A oto projekt mobilny.

Trzeci układ

Zacznijmy od naszego trzeciego układu. W tym układzie dodamy trochę nieprzezroczystych ukośnych pasków w tle sekcji „Najwyższe zabezpieczenia i naprawy”.

Zacznij od otwarcia ustawień sekcji i przejścia do sekcji tła. Kliknij kartę wzór, a następnie wybierz Dodaj wzór tła.

Wybierz wzór Ukośne paski.

Następnie ustaw kolor wzoru.

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

Odwróć wzór w poziomie za pomocą ustawień Przekształcenie wzoru. To kolejne ustawienie, które może pomóc w dostosowaniu wzoru do własnych upodobań.

• Transformacja wzoru: pozioma

Dodawanie trybu mieszania wzorów

Na koniec ustaw tryb mieszania wzorów. W tym projekcie użyjemy trybu mieszania jasności. To w połączeniu z naszym kolorem wzoru dodaje jasny ekran do obrazu, ale nadal pozwala na prześwitywanie zdjęcia. Dzięki temu projektowi wizerunek łodzi bardziej odstaje od tła, ponieważ wzór dodaje wyrazistego kontrastu.

• Tryb mieszania wzorów: Jasność

Ostateczny projekt

Oto ostateczny projekt tej sekcji.

A oto projekt mobilny dla tej sekcji.

Ostateczny wynik

Przyjrzyjmy się teraz pełnemu projektowi strony z trybami mieszania wzorów.

Końcowe przemyślenia

Dodanie wzoru może być świetnym sposobem na dodanie wizualnego zainteresowania do obrazu tła, ale czasami wzór może przytłaczać obraz tła. A może chcesz, aby kolor wzoru zmienił się na podstawie obrazu za nim. Na szczęście Divi jest wyposażony w wiele trybów mieszania, dzięki czemu możesz dostosować wzory tak bardzo, jak chcesz. Możesz bawić się różnymi kombinacjami wzorów, trybami mieszania, kolorami wzorów, rozmiarami wzorów i wieloma innymi ustawieniami Divi, aby stworzyć całkowicie unikalny projekt dla obrazów tła.

Mamy nadzieję, że ten samouczek zainspirował Cię do włączenia kilku wzorów i użycia trybów mieszania w projektach witryn internetowych! Aby zapoznać się z kolejnym samouczkiem projektowania z wykorzystaniem wzorków, zapoznaj się z tym samouczkiem, aby dowiedzieć się, jak tworzyć subtelne maski wzorków tła. Aby zapoznać się z przeglądem różnych filtrów, efektów i trybów mieszania, których można używać z Divi, zapoznaj się z tymi artykułami: Część 1 i Część 2. Czy używałeś wcześniej wzorów Divi i trybów mieszania na obrazach tła? Daj nam znać w komentarzach!