Divi Theme Tutorials

In this quick Divi Theme Tutorial, I am going to show you a fairly simple way to use a custom icon for your Divi gallery, shop or portfolio module overlays.

 

Here are the steps to accomplish this tutorial:

  1. The first step is to create your icon. You will want create so that the height and width are the same (25px X 25px). To do this you will need to use a photo editing program such as Photoshop, Gimp or Paint Shop Pro. If you are not able to create your own custom icon, there are a lot of free icons available for download if you do a little searching on the web.
  2. Next, you will need to upload your custom icon to your website. Once you have it uploaded you will need to copy the URL to the icon.
  3. Next you will need to copy the code below and paste it either into Divi > Theme Options > General > Custom CSS or, if your using a child theme (which I highly recommend), you can add it to Appearance -> Editor.

     
    Here is the CSS code that makes the magic happen –

    .et_overlay:before
    {
    content: url(paste URL from step 2 to your icon here);
    position: absolute;
    top: 55%;
    left: 50%;
    margin: -14px 0 0 -14px;
    font-size: 32px;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    }

 

That’s it, simple right?

You can see an example of this in the gallery below.

I hope you find this simple Divi Theme Tutorial helpful and if you ever need help building your Divi websites, please consider contacting us!

Need Help With Your Divi Website?


4 Comments

  1. Rob van den Broek

    Dustin replied within a day with the solution.
    I’m using the Fullwidth Portfolio. And the requires a slightly different code.

    Replace the first line of code with the following:

    .et_pb_fullwidth_portfolio .et_overlay:before

    Thank you Dustin!

    Reply
    • mm

      Your most welcome, glad it worked for you!

      Reply
  2. Steve

    Hello, thanks for this tutorial. I tried the code for the Image Module and the icon is not appearing.

    Here is the page: http://henryclarke.co/web-design/a-new-site-services/websites/site-editor/

    Here is the code…

    .et_overlay et_pb_inline-icon:before
    {
    content: url(http://henryclarke.co/web-design/wp-content/uploads/2017/03/Logo-FOR-WEBSITE-03292017-smaller.png);
    position: absolute;
    top: 55%;
    left: 50%;
    margin: -14px 0 0 -14px;
    font-size: 32px;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    }

    Let me know what I am missing. Thanks again.

    Reply
    • mm

      Hello Steve,

      Thanks for visiting and reading my tutorial!

      Are you using the gallery module? I have not tried it on the image module, but it should work for the gallery module.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *