Merging multiple images can be useful for custom background design divi for your website. The idea is to take two or three separate images and overlap them. Then use a blend mode to blend the layers to create a unified, harmonious design.
Each element of Divi Builder has a built-in merge mode and filter options making it easy to merge the elements in the Divi builder. Of course, you can mix images in Photoshop (or another photo editor), but for those looking for a practical Divi solution, this tutorial should help you, because with Divi it’s pretty easy. Once you have the images in the right place, you can mix them up with just a few clicks. And of course, you have an arsenal of Divi options to bring the final touches and give a new creative dimension to the design.
What you need to get started custom background design divi
To get started, you will need to do the following:
- If you haven’t already done so, install and activate the installed Divi theme (or the Divi Builder plug-in if you are not using the Divi theme).
- Create a new page in WordPress and use Divi Builder to edit the page on the front-end (visual builder).
- Upload a few dummy images to the media library to use for the tutorial.
After that, you will have a blank canvas to start designing in Divi.
How to mix multiple images to create a custom background design in Divi
Let’s start with the section and the line
To get things going, add a one-column row to the regular section.
Adding images with the image module
Image n ° 1
Once the row and column are defined, add an image module to the row.
Upload an image that is approximately 500 pixels by 700 pixels. I am using one from the Eye Doctor Layout Pack.
Once the image is uploaded, make the image maximum width using the vw unit of length so that it fits well with the other images we are going to merge, and then align it left as follows :
- Max width: 33vw
- Module alignment: left
We want the next image we add to align to the right of that image. So we need to float this image to the left. To do this, add the following CSS to the main element:
Image n ° 2
Then add a new image module below the current image.
Then give the image a new width and a new maximum alignment.
- Max width: 40vw
- Module alignment: right
As the first image is floating on the left, the second image should now be adjacent to the right.
We’ll come back to put some finishing touches on these images, but for now, let’s move on to the settings in the section.
Open the section settings and add a background image and gradient as follows:
- Background image: [download image approx 1920px by 1280px]
- Background gradient left Color: rgba (1,16,63,0.64)
- Gradient background right Color: rgba (12,113,195,0.82)
- Place the gradient above the background image: YES
Then adjust the padding a bit.
- Padding (desktop): 0px top, 0px bottom
- Padding (phone): 0px on top, 10vw on bottom
Once the section is complete, open the row settings and update the following:
- Width: 100%;
- Maximum width: 100%;
- Padding: 0px top, 0px bottom
Add the blend mode to the row
Now the line should cover the entire bottom of the section. This will allow us to add a merge mode to the line to merge the two images with the background of the section. To do this, add the following blend mode.
- Blending mode: multiply
Multiply blend mode multiplies the current layer/row (including any images in it) by the layer below it (the section background). An easy way to think about the effect is to imagine two slides in a slide projector stacked behind each other. If you project the two images on a screen, you will get a slightly darker mixture of the two.
Vertically center images
This isn’t necessary, but if you want to make sure that both images in the row stay centered vertically, you can add a CSS snippet to the column. To do this, open Row Settings, then click Column Settings. Then add the following CSS code to the main element.
Finishing touches to the two best images
Right now our top two images pair well, but they can use a few design changes to make it look a bit more professional. We can use a white box shadow to soften the edges of the images and use the Transform command to position them exactly where we want them to stay.
Image # 1 Final touches
Open Image Module Settings on the left and update the following:
- Box Shadow: see screenshot
- Box Shadow Blur Force: 6vw
- Box shade thickness: 6vw
- Shadow Color: #ffffff
- Transform Translate: 5vw (X-axis), 11vw (Y-axis)
Image # 2 Final touches
Once you are done manipulating image # 1 on the left, open the settings for image # 2 on the right and make the following changes:
- Box Shadow: see screenshot
- Box Shadow Blur Force: 3vw
- Box Shadow Spread Force: 3vw
- Shadow Color: #ffffff
We can even add some filters to make the image sharper.
- Saturation: 30%
- Opacity: 60%
Adding text content
Now that our section is complete with three nicely mixed-up images, we can add our content to the top of the section. To do this, add a new section under the current section.
Then add a row of one column to the regular section.
Then add a text module to the line.
Update the content of the text module with the body content:
Once the body content is in place, update the design parameters as follows:
- Text Text Color: #ffffff
- Police: Poppins
- Title text color: #ffffff
- Text Title Size: 5vw
- Width: 60vw (desktop), 100% (phone)
- Margin (office): -35% at the top, 35% at the bottom
- Margin (phone): -70% at the top, 70% at the bottom
Divi’s blend mode and filter options provide everything you need to blend images to create professional backgrounds. The trick is to position the images using vw length units so that the background design is also responsive on mobile. But once the images are in position, we can experiment with all kinds of blend modes and countless other design options to create extremely harmonious designs.
For website maintenance service contact us.