How to Add Triggers in Elementor (Carousel & Accordion)

AE Triggers is an excellent new addition to the Anywhere Elementor Pro’s widget library. It works well with some AE widget that supports carousel and accordion layout, like AE-Post Blocks Advanced, ACF Repeaters, ACF Gallery, and ACF Flexible content widget.

You can use the AE – Trigger widget to invoke an action when the trigger item clicks. For example, triggers can be used to do all sorts of things like moving between slides, pausing the animation, collapsing, or expanding all accordion tabs in a single click.

So, let’s start with creating one using Anywhere Elementor Pro.

Key Takeaways

• What the AE Triggers widget is and how it works
• How to add AE Triggers to carousels and accordions
• Setup steps for AE Post Blocks Advanced with triggers
• Tips for building custom trigger buttons anywhere on your layout
• Where to find the trigger ID for AE widgets

What Are AE Triggers in Elementor?

Generally, all AE widgets support carousel and accordion layouts and are backed up with basic navigational controls. Using this, you can easily change the look and feel of navigational arrows and change their position.

However, these basic controls are limited. You may need more flexibility and control.

So, to attain complete flexibility and advanced controls, AnyWhere Elementor Pro comes with a widget called AE – Triggers.

Using Triggers, you can place your navigation control anywhere on the page. Not only that but a lot more design options are provided to change or modify navigation control completely. So, let’s go through and see what you can build using this fantastic widget.

How to add Triggers in Elementor using Anywhere Elementor Pro  

Carousels are an excellent way to showcase your content. It comes with straightforward previous/next control without any controls to alter their placements.

But with advanced triggers, you will have enormous design flexibility, like a pause and play button. And the first and last buttons which can be used to jump to the specific slide directly. The following layout shows how these triggers can spice up even an ordinary carousel/accordion.

Isn’t it an excellent design to use an ACF gallery with triggers? You can also use ACF Flexible fields, ACF Repeater fields, and your posts loop.

Have a look at this – an accordion layout with some excellent controls that can be used to expand and collapse items, and jump to the next or previous accordion item.

Using these controls, you can give a unique look to your accordion layouts.

Check Out Some Cool Demos Of AE Triggers

Step-by-Step: Using AE Triggers for Accordions

In this tutorial, we will create triggers for the accordion layout using the Post Block advanced and AE triggers widgets.

Let’s see the step-by-step implementation process to achieve the above layout design.

Step: 1 – Designing Layout for the Sliders/Accordions

Firstly, we will create a block layout template to showcase our post. You can skip this step and jump directly to the next one if you know how to create block layouts.

Just create a new AE Template, select random mode as the block layout, and then edit it with Elementor.

Here, we are using a Dynamic background in the section and selecting a source as a post to get the post’s featured image. To show category, title, and description, we can use AE Post Meta, AE Post Title, AE Post Content, and Post Read More widgets, respectively.

Step 2 – Creating Post Carousel/Accordion

Now, we will create a new page where we want to display the accordion post. And start to edit the page with Elementor.

Next, drag the Post Block advanced widget and select the layout as an accordion. Then select the block layout that we have just created to use here.

At the bottom of the Post block Advanced settings, we can find the Triggers Widget ID.

Step 3 – Adding Triggers on the Slider Widgets

Now, drag AE trigger widgets and place them according to your requirements. Here, we are invoking triggers for the post-block adv widget. We can use it anywhere from left to right or top to bottom.

In the target field, enter the trigger ID to invoke the trigger action on Carousel or Accordion layouts. You will get this ID under the Trigger label of all the widgets supporting the Carousel and Accordion layout styles.

For example, in Post Blocks Advanced, when you select layout style as Carousel or Accordion, you will see the Trigger option at the bottom, copy the id, and paste it.

Here, we are using the trigger widget ID of the Post block advanced widget.

Woohoo! That’s it. We have just created a beautiful accordion layout.

You can try and play with another setting option to create your own desired trigger layout.

Similarly, you can use triggers to achieve a carousel layout with AE post block Advanced and AE triggers widgets.

FAQs on AE-Trigger in AEPro

Final Thoughts: Improve UX with AE Triggers

Don’t you feel Triggers are such an extensive addition? Triggers can add extra controls to your carousel & accordions, giving a next-level user experience. Excited about using triggers! Check out the AE trigger Documentation.

Go and Grab Anywhere Elementor Pro