All CollectionsDivi Attention!Using the ‘Click Trigger’ with Divi Attention!

Using the ‘Click Trigger’ with Divi Attention!

Contributed by Alex Brinkman Updated over a week ago

Using the ‘click trigger’ option in Divi Attention! allows you to make virtually any element on your page a trigger for your attention element.

Set the trigger class or ID in your attention trigger module

The first step is tell the trigger module what CSS class or ID it should be expecting a click event on to display your attention element. To do this, open your trigger module, select the Trigger toggle and enter a CSS class or ID in the Click Element field.

Divi Attention! plugin Trigger toggle settings — Note: It is important that you include the leading period (.) to denote a class name or hashtag (#) to denote an ID. The plugin will not work properly if it doesn’t know if it should be looking for a class or an ID.

Add the trigger class/ID to trigger elements

Now you can add the trigger class/ID any element you’d like to make a click trigger for your attention element. This will work on virtually any element on your page, including (but not limited to):

buttons
images
text links
blurbs
menu links

To add CSS classes or IDs to Divi modules, open the settings for any Divi module, click on the Advanced tab and open the CSS Classes & ID toggle. Use the CSS ID field to add an ID or the CSS Class field to add class(es) as shown in the image below.

Divi Module Custom CSS Classes & ID toggle — *Note: you do not need to add the leading period (.) or hashtag (#) in these fields as Divi will add them automatically for you. To add multiple classes, separate them with a single space.*

Important: it is considered semantically invalid for HTML documents to contain more than one element with the same CSS ID. For this reason we highly recommend you use a CSS class instead of an ID if you’re going to have more than one element act as a trigger for an attention element on the same page.

Did this answer your question?
Yep!No