1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/
    Dismiss Notice

Create a Big Icon Overlap Design in Divi

Discussion in 'Divi Tutorials, Tips & Tricks' started by Divi.Help, Dec 21, 2018.

  1. Divi.Help

    Divi.Help Administrator
    Staff Member

    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.

    [​IMG]

    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.

    big-icon-overlap-2.png

    Step 2
    Select the icon that you wish to use.

    big-icon-overlap-3.png

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

    big-icon-overlap-4.png

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

    big-icon-overlap-5.png

    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:
    position: absolute!important;
    z-index: 1;
    top: -240px;
    left: -10%;
    margin-left: -400px!important;
    You need to edit the values of the top, left & margin-left to suit your need.

    big-icon-overlap-6.png

    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:
    position: relative;
    z-index: 2;
    big-icon-overlap-7.png

    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:
    overflow: hidden!important;
    big-icon-overlap-8.png

    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.
     

    Attached Files: