The Different Ways of Closing Divi Overlays Popups

 

Introduction

Divi Overlays have 4 ways to close the Overlay. Basically to close an overlay on any section, row or module, you need to use the CSS Class:

close-divi-overlay

So different ways to close an overlay are:

1) The default close button that could be styled. You can follow this tutorial in order to style your Defualt Divi Overlays close button.
2) A Custom close button. Using the CSS Class.
3) Pressing the ESC key
4) Clicking outside the overlay content. This needs to add a class into the section settings, so if you need this, the section shouldn’t have any change in the size.

So this tutorial is for this, to close

Step 1: Go to Divi Overlays Posts

1. Go to WordPress dashboard
2. Open Divi Overlays CPT (Custom Post Type)
3. Go to your Divi Overlays post

 

Step 2: Setting the Close Button – Clicking outside the content

1. Open the section settings
2. Go to Advanced Tab > CSS ID & Classes > CSS Class
3. Add the CSS Class close-divi-overlay

 

Save changes and now your overlay can be closed clicking outside the content area 😊

 

Setting the Close button – Using A Divi Module

1. Open the module settings
2. Into the URL field, add an anchor link #close
3. Go to Advanced Tab > CSS ID & Classes > CSS Class
4. Add the CSS Class close-divi-overlay