Example
Here’s a quick look at all 7 Styled Blend Mode effects included in the pack. The download is later in the message.
Subscribe to our YouTube channel
Download 7 Stylized Blend Mode Effects for Divi 5
Get all 7 designs for free. Import them into your Divi library and add them to any page in Visual Builder.
What’s included (8 exports)
Once you download and unzip the file, you will find seven exports of the Styled Blend Mode Effect Section, plus one file containing all the designs.
Stylized Blend Mode Effect Section 1 to 7 (7) → Seven stylized section layouts with layered images and blend mode styling that you can reuse for headers, hero sections, and visual callouts.
Stylized Blending Mode Effect Sections (All) → Imports all designs at once to your Divi library.
How to use the stylized blend mode effects
Have your download folder handy. We import the sections and then add one to a page.
1. Import the sections into the Divi library
Go to Divi → Divi Library. Click Import and export at the top of your screen.
In the Import and export layouts modal, switch to the Import tab and then click Choose File and select your JSON.
Choose a JSON with stylized blend mode effect that you want to use, then click Import Divi Builder layouts.
2. Add a stylized blend mode effect section to each page
Open a page in the Visual builder and add a new one Section.
In the Insert section modal, click Add from library and select a Styled Blend Mode Effect section.
Finally, click Use this section.
3. Swap the images
Once the layout is on the page, replace the placeholder images with your own images. Click on an image or background area within the design and then update the image source in the relevant settings panel.
If a section uses multiple layers, you can swap them one at a time to maintain the intended composition. If necessary, replace background images within containers to balance the effect of the blend mode.
4. Adjust the effect (optional)
You can easily tailor these sections to your brand by adjusting the blend modes, opacity, overlays, and spacing.
Look for blending mode options wherever the images are applied (for example, in background layers or image style). Small changes in opacity and contrast can dramatically change the final appearance.
If your section contains text or buttons over the images, confirm readability by adjusting the overlay strength and text contrast.
Tips for better results in blend mode
Blend mode designs work best when the layers feel intentional and your content remains readable. Use these quick tips to keep your results clean and consistent.
Start with high-contrast images
Blending modes often look strongest when the base image has clear highlights and shadows. Avoid muddy images that flatten when layered.
Use simple overlays
Textures, color gradients and subtle pattern layers can add depth without overwhelming the composition. If the effect feels busy, reduce the opacity first.
Test the readability of text early
If your layout contains headings or body text over images, check the contrast on multiple screens. Increase the strength of the overlay or simplify the layers if necessary.
See an example of responsive breakpoints
Layered compositions can shift on smaller screens. Preview each section on your mobile and adjust the spacing or alignment to keep the focal point clear.
Start building in Divi 5 today!
These 7 stylized blend mode effects give you a quick way to add modern, layered image treatments to hero sections, banners, and featured content areas. Swap the images, refine the effect, and in minutes you’ll have a polished section that suits your site with Divi 5’s Visual Builder.
#Blend #Mode #Effects #Divi #Free #Download