~Just the Facts~

FOUR BLEND MODES YOU

SHOULD BE USING IN DIVI

written by Divi Dude

W hen Divi introduced Blend Modes to images we were all like – cool! Wait, how do I use Blend Modes in Divi? And more importantly, why? (well, maybe not more importantly, but just as important).  Blending modes are ways to enhance photos without being destructive. What does that mean? If you create a photo in Photoshop with a Blend Mode, then that change is permanent when you output it to jpeg or png.  But when you use Divi to create the Blend Mode, and then later decide you don’t like the effect, all you have to do is remove the Blend Mode and your photo goes back to its original state (well, it actually never left the original state, but the effect is removed).

Blend Modes are found in the Module’s Design Tab under the Filters section. By default, it is set to Normal. And usually, this is where it should stay. But there are times using a Blend Mode on a photo is a good choice.  With that said, there are 4 Blend Modes in Divi I find useful:

  • Multiply
  • Screen
  • Soft Light
  • Overlay

Please note: Blend Modes do not seem to be supported by Microsoft Edge at this time.

How To Apply Blend Modes in Divi

I’ll go into detail for each one of these below, but first, a quick tutorial on how to apply Blend Modes, so that my descriptions of what each one does makes sense.

The Blend Mode does what it says– it blend items. In order to use them, you must have two objects to blend. In my examples, one will be a photo, and the other can either be another photo, a solid color, or a gradient.

In the Row module, you’ll want to add either a background color, or gradient or image to the corresponding column in which you are adding your photos.  For instance, if you have a row of three photos and the middle one is going to have the Blend Mode applied, then you would choose Column 2 in the Row Module and the color or graphic there.  Then in the Module that you are applying the Blend Mode to, go to the Design Tab and under Filter choose the Blending Mode you want to use.

What does the Multiply Blend Mode Do?

Multiply is used to darken images, more or less.  When you use multiply in Divi it multiplies the luminance levels of the image (the current layer you are blending) with the layer below (the layer in which you are blending with). The key here is it multiplies the darker pixels.  Have you ever taken a piece of tracing paper and traced something? When you place the paper on top of the object you want to trace, what happens? You can see everything that is darker than the paper, but nothing that is lighter, right? This is essentially what multiply does. It lets the darker stuff through and at the corresponding levels: 100% black comes through, whereas 100% white does not, and then everything else comes in at the proportionate amount. 

Now look at the example below. Image 1 is normal. Image two is using multiply Blend Mode with a simple black to white gradient with black on top and white on bottom. See the difference?

One of the fun things you can do with Multiply Blending is to create a vignette around a photo.  Just take the image module and add a photo, then on the background layer, create a radial gradient with white in the center and black around the edges. Apply the Blend Mode to the photo and voila, instant vignette. (you may have to play with the settings to get the desired effect you want, like changing the placement of the center and the starting point).

Using Screen Blend Mode in Divi

If Multiply multiplies the darker pixels, can you guess which pixels the Screen Blend Mode multiplies? If you said the lighter pixels, then you are correct. It basically does the opposite of the Multiply Blend Mode. If you have black or dark areas of a photo you want to disappear or make lighter, then this is the Blend Mode for you.  It blends in the pixels that are 100% white and ignores the pixels that are 100% black, and blends the pixels in-between proportionately.

Now look at the example below. Image 1 is normal. Image two is using Screen Blend Mode with a simple gradient with white on top and black on bottom. See the difference?

If you had fun with Multiply, then you can also have fun with Screen by creating a white vignette around a photo.  Just take the image module and add a photo and on the background layer, create a radial gradient with black in the center and white around the edges. Apply the Screen Blend Mode and you can add a white vignette around it. Pretty cool, eh?

Divi’s Soft Light Blend Mode

Soft light is a favorite of photographers.  The term essentially means the light levels are evening out, meaning that there are no harsh shadows. Now it doesn’t necessarily mean the same thing when it comes to blend mode.  What the soft light blend mode does is basically combine the multiply and screen blend modes.  It makes the darks a bit darker and the lights a bit lighter, thus adding contrast to the image.  It uses the top layer to achieve this effect (by contrast, the Overlay Blend Mode discussed below uses the bottom layer).  In order to know what is a dark and what is a light, it uses a 50% grey level as the barometer.  Everything above 50% grey gets darker, and everything below gets lighter, while 50% stays the same. 

As you can see in the example below. Image 1 is normal. Image 2  is using Soft Light Blend Mode. See the difference? (in this example I blended two of the same photos together). The image on the right (with Screen Blend Mode) has much more contrast than the image on the left.

Divi’s Overlay Blend Mode Explained

Overlay Blend Mode is a lot like Soft Light, in that it is a Blend Mode used for contrast.  Unlike Soft Light, Overlay Blending Mode uses the layer underneath to decide how the contrast is applied.  This Blend Mode makes the darks darker and the lights lighter and uses 50% as the point of measurement. 

As you can see in the example below. Image 1 is normal. Image 2  is using Overlay Blend Mode. See the difference?

Instagram Training




Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Build Better Websites

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Big Discounts for Domains, Hosting, SSL and more

Subscribe

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

For Your Inner Nerd

Rolecosplay Movie Costumes

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission. As an Amazon Associate I earn from qualifying purchases. Thank you for your support.

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This