1. Divi Ultimate is the best Divi child theme for Divi Wordpress.
    - 20+ awesome homepage design
    - 33+ beautifully designed pages
    - 200+ reusable Divi library items
    - Custom global header & navigation (5 premade styles)
    - Custom global footer (2 premade styles)
    - Custom widget design (2 premade styles)
    - Single Blog Post Customizer (new) - see it in action here: https://youtu.be/aIN2bvsokb8

    Live Demo: https://diviultimate.com/
    Buy now at $89 Unlimited Use: https://divi.help/categories/divi-ultimate.46/
    See what people say about Divi Ultimate: https://divi.help/forums/customer-testimonials.59/
    Dismiss Notice

Tutorial to Create a Big Icon Overlap - A Trendy Design for Divi

Discussion in 'Divi Tutorials & News' started by Divi Ultimate, Jul 28, 2017.

  1. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Today, we are going to share a short tutorial on Big Icon Overlap trendy design - one of the popular design in our 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:

  2. Sathish s

    Sathish s New Member
    Divi Ultimate Child Theme

    Is the DU Header plugin included in the $89 pack? Sorry for the random thread jack , but I am not able to send you a PM.
     
  3. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    For the $89 pack, it has the header features integrated into the child theme. Meaning, if you are using our child theme, you don’t have to separately install the DU Header plugin. But if you want to use the header features in other Divi sites (not using our child theme), then you need to purchase the DU Header plugin.

    In short, DU Header plugin is a standalone plugin. And it’s not included with the $89 pack. But the child theme has this header features included.

    Let me know if you have any other questions.

    **By the way, you can ask any questions in the pre-sale forum.