How to Use Pattern Blend Modes on Your Divi Background Images

by | Jul 17, 2022 | Etcetera | 0 comments

Divi’s integrated background trend settings permit you to create attention-grabbing designs and upload some aptitude to the background photographs for your web page. You’ll be able to use the mix modes settings to fine-tune the way in which that the trend blends with the background symbol. Mix background photographs, patterns, and mix modes to create distinctive backgrounds and design components in your format. With 24 patterns to make a choice from and 16 mix modes, to not point out all the different settings you’ll use to fine-tune the glance of the trend, the sky’s the prohibit in your background design!

On this instructional, we will be able to display you a couple of examples of the best way to upload a trend mix mode to the background photographs for your web page. Practice alongside to recreate those seems to be by yourself, or use them as inspiration to create your personal customized designs.

Let’s get began!

Sneak Peek

Here’s a preview of what we will be able to design on this instructional.

First Structure

Divi Background Pattern Blend Mode Layout 1 Final Design

2d Structure

Divi Background Pattern Blend Mode Layout 2 Final Design

3rd Structure

Divi Background Pattern Blend Mode Layout 3 Final Design

What You Want to Get Began

Earlier than we commence, install and activate the Divi Theme and you’ll want to have the newest model of Divi for your web page.

Now, let’s start!

Tips on how to Use Development Mix Modes on Your Divi Background Photographs

Create a New Web page with a Premade Structure

We’ll get started by way of the use of a premade format from the Divi library. For this design, we will be able to use the Marina Touchdown Web page from the Marina Layout Pack.

Upload a brand new web page for your web page and provides it a identify, then make a selection the strategy to Use Divi Builder.

Divi Background Pattern Blend Mode Layout 3 Use Divi Builder

We can use a premade format from the Divi library for this case, so make a selection Browse Layouts.

See also  10+ Tutorials to Help You Get Started with Divi Cloud

Divi Background Pattern Blend Mode Browse Layouts

Seek for and make a selection the Marina Touchdown Web page format.

Divi Background Pattern Blend Mode Search Layout

Make a selection Use This Structure so as to add the format for your web page.

Divi Background Pattern Blend Mode Use Layout

Now we’re in a position to construct our design.

First Structure

For our first design, we will be able to upload a chevron trend to the primary header symbol. This may increasingly upload some visible passion to the header. On account of the mix mode we will be able to practice, the trend will probably be extra refined and nonetheless permit the background symbol to be visual.

First, open the phase settings and navigate to the Background phase. Click on at the trend tab and make a selection Upload Background Development.

Divi Background Pattern Blend Mode Layout 1 Add Background Pattern

Subsequent, make a selection the trend kind. As you’ll see, there are lots of other patterns to make a choice from, and they may be able to all be additional custom designed by way of the trend settings beneath.

  • Development Sort: Inverted Chevrons 2

Divi Background Pattern Blend Mode Layout 1 Select Pattern

Including the Development Mix Mode

In spite of everything, set the trend mix mode. We can be the use of the Cushy Mild mix mode for this header. This mix mode makes the trend extra refined in order that it doesn’t distract from the background symbol.

  • Development Mix Mode: Cushy Mild

Divi Background Pattern Blend Mode Layout 1 Pattern Blend Mode

Ultimate Design

Here’s the overall design for our first format.

Divi Background Pattern Blend Mode Layout 1 Final Design

Here’s the cell view for this design.

Divi Background Pattern Blend Mode Layout 1 Final Design Mobile

2d Structure

For the second one format, we will be able to upload a trend to the The way it Works phase of the Marina touchdown web page format. We can use a wave trend overlaid at the background symbol and gradient, which matches neatly with the nautical theme of the web page. Let’s get began.

First, navigate to the The way it Works phase and open the Segment Settings. Open the Background settings, then make a selection the Development tab after which click on Upload Background Development.

See also  The 14 Easiest WordPress E mail Plugins in 2021

Divi Background Pattern Blend Mode Layout 2 Add Background Pattern

For this design, we will be able to use the Waves trend kind.

  • Development Sort: Waves

Divi Background Pattern Blend Mode Layout 2 Select Pattern

Subsequent, trade the trend colour to white.

  • Development Colour: #FFFFFF

Divi Background Pattern Blend Mode Layout 2 Pattern Color

Including the Development Mix Mode

Now we will upload the mix mode to our trend. Set the trend mix mode to overlay. This mix mode makes the darkish colours within the background symbol darker and the sunshine colours lighter. When the mix mode is added to this phase, the white wave trend turns sun shades of blue, growing a captivating trend impact that appears nice with the design of this web page.

  • Development Mix Mode: Overlay

Divi Background Pattern Blend Mode Layout 2 Select Blend Mode

Ultimate Design

Here’s the overall design for the The way it Works phase.

Divi Background Pattern Blend Mode Layout 2 Final Design

And this is the cell design.

Divi Background Pattern Blend Mode Layout 2 Final Design Mobile

3rd Structure

Let’s get began on our 3rd format. For this format, we will be able to upload some opaque diagonal stripes to the background of the “Most sensible notch safety and maintenance” phase.

Get started by way of opening the phase settings and navigating to the background phase. Click on the trend tab after which make a selection Upload Background Development.

Divi Background Pattern Blend Mode Layout 3 Add Background Pattern

Make a selection the Diagonal Stripes trend.

Divi Background Pattern Blend Mode Layout 3 Select Pattern

Subsequent, set the trend colour.

  • Development Colour: rgba(255,255,255,0.25)

Divi Background Pattern Blend Mode Layout 3 Pattern Color

Turn the trend horizontally the use of the Development Develop into settings. That is some other environment that allow you to fine-tune the trend for your liking.

  • Development Develop into: horizontal

Divi Background Pattern Blend Mode Layout 3 Pattern Transform

Including the Development Mix Mode

In spite of everything, set the trend mix mode. For this design, we will be able to use the luminosity mix mode. This blended with our trend colour provides a mild display to the picture however nonetheless lets in the picture to turn thru. With this design, the picture of the boat stands proud extra from the background because the trend provides a particular distinction.

  • Development Mix Mode: Luminosity
See also  Download a FREE Header & Footer for Divi’s Home Remodeling Layout Pack

Divi Background Pattern Blend Mode Layout 3 Blend Mode

Ultimate Design

Here’s the overall design for this phase.

Divi Background Pattern Blend Mode Layout 3 Final Design

And this is the cell design for this phase.

Divi Background Pattern Blend Mode Layout 3 Final Design Mobile

Ultimate Outcome

Now let’s check out the whole design of the web page with the trend mix modes.

Divi Background Pattern Blend Mode Full Final Design

Ultimate Ideas

Including a trend can also be a good way so as to add visible passion for your background symbol, however on occasion the trend can weigh down the background symbol. Or possibly you wish to have your trend colour to switch in line with the picture in the back of it. Fortunately, Divi comes with many mix modes so as to customise the patterns up to you want to. You’ll be able to mess around with other mixtures of patterns, mix modes, trend colours, trend sizes, and lots of extra Divi settings to create a wholly distinctive design in your background photographs.

Expectantly, this instructional has impressed you to include some patterns and use mix modes to your web page designs! For some other design instructional the use of patterns, take a look at this tutorial to discover ways to create refined background trend mask. And for an outline of the other filters, results, and mix modes you’ll use with Divi, check out those articles: Part 1 and Part 2. Have you ever used Divi’s patterns and mix modes for your background photographs prior to? Tell us within the feedback!

The put up How to Use Pattern Blend Modes on Your Divi Background Images seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *