Create a Big Icon Overlap Design in Divi

Today, we are going to share a short tutorial on Big Icon Overlap trendy design - one of the popular design in Divi Ultimate child theme.

Screenshot below is what you're going to achieve at the end of this tutorial.
If you're lazy to follow this tutorial, you can just download the Big Icon Overlap.json file at the bottom of this post & import it in your Divi library.



We are going to skip the basic design (title & contact form), and jump straight to the big icon overlap.

Step 1
To create the big icon, we need a blurb module. So, create a new blurb module in your row.



Step 2
Select the icon that you wish to use.



Step 3
Change the icon color to rgba(255,255,255,0.06) , so that it will fit any background color.



Step 4
Change the icon font size to be a super big icon: 820px



Step 5
Now, it's time to adjust it to the side.
Go to Advanced -> Custom CSS -> Main Element & add the following CSS code:

Code:

Log In or Sign Up to view this code.

You need to edit the values of the top, left & margin-left to suit your need.



Step 6
You will notice that the icon is overlapping in front of the contact form or any other modules that you use.
So for your other modules, you need to add the following code to the Advanced -> Custom CSS -> Main Element :

Code:

Log In or Sign Up to view this code.

Step 7 (Last Step)
Now that the overlapping issue is solved, you will also notice that the big icon is overflowing to the section below it.
To solve that, you need to go to the Section Settings -> Advanced -> Custom CSS -> Main Element & add the following code:

Code:

Log In or Sign Up to view this code.

That's it! Hope you enjoy this short tutorial.

If you're lazy to follow this tutorial, you can just download the Big Icon Overlap.json file below & import it in your Divi Library.