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:
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.
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.