Four Divi Blend Modes You Should Use
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:
- Soft Light
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?
More From Divi Dude
Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…
This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …
Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).