Czy chcesz tworzyć unikalne obrazy tła przy użyciu trybu mieszania wzorów Divi ?

Wbudowane ustawienia wzoru tła Divi pozwalają tworzyć przyciągające wzrok projekty i dodawać stylu do obrazów tła Twojego Witryna internetowa. Możesz użyć ustawień trybu mieszania, aby precyzyjnie dopasować sposób mieszania wzoru z obrazem tła. 

W tym samouczku pokażemy Ci kilka przykładów, jak dodać tryb mieszania wzorów do obrazów tła Twojej strony. Śledź je, aby samodzielnie odtworzyć te stylizacje lub wykorzystaj je jako inspirację do tworzenia własnych niestandardowych projektów.

Zacznijmy!

badanie

Oto podgląd tego, co będziemy projektować w tym samouczku.

Pierwszy układ

Tryb mieszania wzorów Divi

Drugi układ

Tryb mieszania wzorów Divi

Trzeci układ

Tryb mieszania wzorów Divi

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

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

Zaczniemy od użycia predefiniowanego układu z biblioteki Divi. W tym projekcie użyjemy « Strona docelowa Mariny "Z Pakiet układu mariny .

Dodaj nową stronę do swojej Witryna internetowa i nadaj mu 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.

Divi Tryb mieszania wzorów tła Przeglądaj układy

Znajdź i wybierz układ Strona docelowa Mariny.

Układ wyszukiwania w trybie mieszania wzorów tła Divi

wybierać Użyj tego układu aby dodać układ do swojej strony.

Tryb mieszania wzorów tła Divi Użyj układu

Jesteśmy teraz gotowi do projektowania.

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. 

Czytaj także: Divi: Jak dostosować moduł „Odliczanie czasu” za pomocą GIF

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 tła i wybierz Dodaj wzór tła.

Divi 1 Wzór tła Układ trybu mieszania Dodaj wzór tła

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

  • Typ wzoru: Odwrócona jodełka 2

Dodano tryb „mieszania wzorów”

Na koniec ustaw tryb mieszania wzoru. Użyjemy trybu mieszania Miękkie światło dla tego przykładu. 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
Tryb mieszania wzoru tła Divi Tryb mieszania wzoru Układ 1

Wynik

Oto ostateczny projekt naszego pierwszego przykładu.

Divi 1 Wzór tła Mieszanie układu Tryb Ostateczny projekt

Oto wersja mobilna.

Divi 1 Wzór tła Mieszanie Układ trybu Ostateczny projekt Mobilny

Drugi układ

W drugim układzie użyjemy wzoru fali nałożonego na obraz tła i gradient, który dobrze pasuje do morskiego motywu strony.

Najpierw przejdź do sekcji "Jak to działa" i otwórz ustawienia sekcji. 

Otwórz ustawienia Tło, a następnie wybierz kartę Wzór tła, a następnie kliknij przycisk Dodaj wzór tła.

Divi 2 Wzór tła Układ trybu mieszania Dodaj wzór tła

W tym projekcie użyjemy typu wzoru Fale.

  • Typ wzoru: Fale
Divi 2 Układ trybu mieszania wzorów tła Wybierz wzór

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

  • Kolor wzoru: #FFFFFF
Divi Wzór tła Mieszanie Układ Trybu 2 Kolor wzoru

Dodano tryb mieszania wzorów

Możemy teraz dodać tryb mieszania do naszego wzoru. Ustaw tryb mieszania wzorów na Overlay

Odkryj również: Divi: Jak dostosować ikony koszyka i wyszukiwania w module „Menu o pełnej szerokości”

Ten tryb mieszania przyciemnia ciemne kolory obrazu tła i rozjaśnia jasne kolory.

  • Tryb mieszania wzorów: nakładka
Divi 2 Wzór tła Układ trybu mieszania Wybierz tryb mieszania

Wynik

Oto końcowy wynik drugiego przykładu zastosowanego do sekcji "Jak to działa".

Divi 2 Wzór tła Mieszanie układu Tryb Ostateczny projekt

A oto wersja mobilna.

Divi Wzór tła Mieszanie Tryb 2 Układ Ostateczny projekt Mobilny

Trzeci układ

Zacznijmy nasz trzeci układ. 

W tym układzie dodamy nieprzezroczyste ukośne paski do tła „ Wezwanie do działania”.

Zacznij od otwarcia ustawień sekcji i przejdź do sekcji Tło. Kliknij na zakładkę Wzór tła, a następnie wybierz Dodaj wzór tła.

Divi 3 Wzór tła Układ trybu mieszania Dodaj wzór tła

Wybierz wzór Ukośne paski.

Divi 3 Układ trybu mieszania wzorów tła Wybierz wzór

Następnie ustaw kolor wzoru.

  • Kolor wzoru: rgba (255,255,255,0.25)
Divi Wzór tła Mieszanie Układ trybu 3 Kolor wzoru

Odwróć wzór w poziomie, korzystając z ustawień Przekształć wzór. To kolejny parametr, który może pomóc w dostosowaniu wzoru do własnych upodobań.

  • Transformacja wzoru: pozioma
Divi 3 Tryb mieszania wzorów tła Transformacja układu wzoru

Dodano tryb mieszania wzorów

Na koniec ustaw tryb mieszania wzoru. W tym projekcie użyjemy trybu mieszania Jasność

Przeczytaj także nasz przewodnik na temat: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy

To, w połączeniu z naszym kolorem wzoru, dodaje jasny ekran do obrazu, jednocześnie umożliwiając 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ść
Divi 3 wzór tła układ trybu mieszania Tryb mieszania

Wynik

Oto ostateczny projekt tej sekcji.

Divi 3 Wzór tła Mieszanie układu Tryb Ostateczny projekt

A oto jego mobilna wersja.

Tryb mieszania wzorów Divi

Ostateczny wynik

Przyjrzyjmy się teraz całemu projektowi strony z trybami mieszania wzorów.

Tryb mieszania wzorów Divi

Pobierz DIVI teraz !!!

Wnioski

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. Na szczęście Divi jest wyposażony w wiele trybów mieszania, dzięki czemu możesz dowolnie dostosowywać wzory. 

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.

...