There are lots of killer features on Bricks Builder.
Probably one of the biggest one is Interactions. You can create very advanced logins with this feature.
All elements in the bricks can have Interactions logics. This Hand Icon opens the interaction UI.
This UI allows us to add single or multiple interactions to any element.
What can we do with Interactions?
Anything you can imagine and think the logic for. ANYTHING. Interactions are visual representations of coding.
When you click the + icon this window comes you can select trigger, action, and target. You can add multiple Interactions to element.
What are these fields?
Trigger is the user’s perspective. Think of it as whatever the user is doing you can catch it with triggers.
Action is whatever you want to do for the selected Target.
Target is where you apply your Action when the Trigger happens. You can select the targets dynamically or with just .class names.
Chaining Triggers
You can create a simple interaction or a more advanced one like triggering this action unless another trigger happens think this like chaining the triggers.
Like; If the first trigger happens –> run the second trigger.
Interactions itself is pretty strong already but this feature makes the interactions a superpower.
Chaining different triggers allows you to create more dynamic solutions, pages, or components for your site.
Imagine you are running an e-commerce, community, or membership site. You can do wonders with chaining triggers 😉
Form Trigger Example
I will give one fun example.
Let’s add a form on the page and when the form is filled show a lottie animation. I will use Bricksable plugin for lottie element it is free.
Here is the structure. Just a simple form only one input name and lottie file.
Let’s give a class name to the lottie and make it display:none from Custom CSS. we want to hide animation until form is sent.
Now I will add the Interaction to the Form element and select the Trigger as Form Success
copy the form id from form element.
paste it into interaction Form ID. lets select Action as show element and give the CSS Selector class name so it knows what dom to show.
here is the result
Easy now we have a fun Interaction to show when someone sends a message with form 😊
Wait there is more.
You can create so many actions or even animations with these Interactions.
