USE CASE

DOM manipulation

Basic DOM Manipulation with Interactor

Accessible frontend DOM manipulation set up from the Elementor Editor thanks to interactor.

JavaScript DOM manipulation made easy with Interactor.

Sometimes, we as web developers may find ourselves in a situation where we may want user input on the frontend to change or otherwise modify items on the page they’re on. This is oftentimes achieved with DOM manipulation using JavaScript, but it’s not always straightforward or even possible to do if we’re working with Elementor. Interactor by Gloo makes this accessible to everybody by allowing designers and developers to create JS triggers and events directly within the Elementor editor, using the UI we’re all used to working with.

The concept behind its usage is simple: first thing we need is a page which has all the elements we need, both the “controllers” and the items to be modified by them. A great way to fetch user inputs is of course Elementor Forms, due to the vast range of fields that we can let the users play with. One extremely important thing to remember is to give every item that comes into play an unique ID.

Once the playing field is set, focus shifts to the main player: Interactor. Let’s use an example to understand how we’re gonna use its triggers and events to achieve exactly what we want.

Specific Use case:

YouTube video

In this short showcase we’re using three simple form fields

  • Text Field
  • Select Field
  • Color Picker Field

We’ll give each an unique ID, as said before, and we also have a simple text widget that will be our target for the DOM manipulation. Now it’s time to work with Interactor. Let’s set up three triggers, one for each field.
First trigger is the typing trigger, which will fire on the Key Down firing event as soon as the user types in the text field. To make sure that that’s the case, all we gotta do is map the trigger to the field, using the target field in the settings and pasting the ID of the field in it. IMPORTANT: this is not the ID we gave the field in the editor, but it’s another ID Elementor assigns to its elements. To check which one we need, we can do so with the inspect tool in the browser on the frontend.

The second trigger works exactly the same except we’ve set the firing event as Input Change, and mapped it to the Select field. Same goes for the color trigger.

Events.

This is where the magic actually happens. Let’s create an event for each of the parameters we want to modify on our text widget. As such, each event should have the widget as the target. For the first event we set the type of event as interaction and select set text as the interaction. We want to fetch the parameter that replaces the default one from the text field, so we toggle on Fetch Form Field, and it’s pretty much done.

For the second trigger, the idea is the same but we select Set CSS as the interaction. The first parameter is font-family, so we’re not fetching it from the select field. The second one however will be the actual font family name, which we need to fetch from the form field. Map it to the select field and we’re done. What this does is basically writing “font-family:(selected font)” in the DOM.

For the third trigger, we did the exact same thing but set it up to have colors as its parameters. Let’s connect all the events to their matching triggers, and once the page is updated, everything works exactly as intended: Each user input in each respective field will change the mapped parameter in the heading widget!

Check the related tutorial for a more in-depth view on this exact application if you’d like to truly learn how to master interactor.

 

Interactor
Play Video

Interactor Forms Control – Tutorial

Got A Question ?

We Are Here to Help
More Cases
Dynamify Repeaters + Fluid Logic
Use Cases

Repeaters for Elementor

  • Dynamify Repeaters
Feed widgets dynamic information from backend repeaters and then show or hide them according to the number of items thanks to Dynamify and Fluid Logic.
Fluid Dynamic
Forms Extensions + Fluid Logic
Use Cases

Elementor Forms + Gloo

  • Fluid Logic
More options for your Elementor forms thanks to forms extensions and fluid logic, together.
Forms Extensions
Fluid Logic for form fields - use case
Use Cases

Elementor Forms + Fluid Logic

  • Fluid Logic
Dynamic conditions and visibility for form fields and for widgets according to form values.
Fluid Dynamic
interactor - replacing sections use case
Interactor Use Cases

Replacing Sections

  • Interactor Engine
Replace sections with other sections entirely using the Interactor engine.
Interactor
Show or hide sections on command with Interactor
Use Cases

Elementor Sections

  • Interactor Engine
Interactor gives us multiple ways to show and hide entire sections at the click of a button.
Interactor