How To Make an On Trigger Event with Divi Theme

by Mike Shamon | Dec 19, 2019

This post will explain how to make an On Trigger Event with the Divi Theme. Making an On Trigger event with Divi sounds complicated, but it is pretty easy with this step-by-step tutorial.

An on trigger event could also be referred to as an onclick event in this situation.

If you aren’t familiar with an On Trigger event basically it triggers Y to happen, when something happens to X. We will use a button as an example. The button (X) says click here to subscribe, when they click the button a form (Y) will pop up. Clicking on the button triggered the pop up form to pop up.

I recently viewed a video from Elegant Themes, the makers of the Divi Theme, on how to do this. The video could walk through a lot easier to understand, maybe I will make one in the future, but for now here is the text tutorial on how to make an on trigger event with the Divi Theme.

I am using the Divi theme for a number of reasons, but the main reason being that you can import and export child themes, layouts, pages, modules and sections. That makes things go quickly when making a lot of websites.

I have used the Divi theme to design hundreds of landing pages and layouts, I wanted to make this tutorial for those that were wanting to make a on click or on trigger event for their own landing page or button.

The on trigger event does require us to put some code into the theme. If this is your first time working with the Divi theme or WordPress, no need to worry as this code is easy to explain and understand.

Making an On Trigger Event with the Divi Theme

First you will need to add code to the Divi theme. Navigate to the backend of Divi.

1A. Go To Divi > Theme Options

B. Click Integration

C. Add Code, inside element the <head> element

<script type="text/javascript"> jQuery(function($){ jQuery('.button_popup').click(function() { jQuery('.popup').css('display', 'block'); }); jQuery('.close').click(function() { jQuery('.popup').css('display', 'none'); });}); </script>

D. Save

2. Add A New Page, Use The Divi Builder

3. Add New Section, Add A Row
A. Add A Button

B. Go To Content > Link, Set Button Link to #

B. Click Advanced, Class ID & Classes

C. For CSS Class use:

button_popup

D. Save

4. Add Another Section (This section is the section that Pops Up, make your own section or load a design you already have)
5. Click on Section Settings
A. Go To Advanced > Class ID & CSS

B. Add Class “popup”

popup

C. Still in Section Settings, Add Code to Custom CSS Before

top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999; content: ""; background: rgba(0,0,0, 0.8); position: fixed;

D. Add Code to Main Element

display: none;

E. Save

Important Note: Adding the display: none; to the main element means you WILL NOT be able to SEE the section. This means Live on the website or when editing with the Visual Builder on the front end. Only when the button is clicked is when you will see the form. I recommend designing your pop up page as its own new page and saving the layout section. Then load the section in with the Divi builder when your button is ready.

6. Add A Row

A. Go To Row Settings
B. Go To Visibility, Set Z index to 1000

Create A Blurb to Close the On Trigger Event

7. Created a Blurb, to close out the pop up. (I used and an X icon within the blurb module settings, you can use any icon)
A. Blurb Settings > Advanced

B. Go To Custom CSS, Inside Main Element Add code

cursor: pointer;

C. Go To Advanced > Class ID & CSS

D. Set the CSS class to “close”

close

E. Save
8. Test

So, here is what we did. We went inside of the Divi theme and added a code. The code said that when Button Pop Up is clicked, open up The Section labeled “popup”. In order to open the pop up on the right layer we had to adjust the z-index.

There was no styling in this tutorial, just how to link the on trigger event, or on click event, with the Divi Theme from Elegant Themes.

It should be noted that the section and button should be on the page. Remember by putting the display none code inside the section main element, it will not be seen unless clicked.

← Previous Next →

Current Post