In this short tutorial, I’ll show you how to add some nice smooth transitions or animation to the pop-up form in Bricks Builder.
Bricks Builder is by far the most flexible visual website builder for WordPress. Whether you’re a seasoned web developer working with WordPress or starting to learn the art of visual design, Bricks is packed with a lot of features to help you create amazing layouts for your website.
One of my favorite features of Bricks Builder is the pop-up builder. However, one thing that is missing or perhaps not so obvious is how we can add transitions to the pop-up element in Bricks.
This is where this post comes in:
For this tutorial, we’ll need to add some CSS somewhere on our website. However, because Bricks Builder doesn’t come with a dedicated stylesheet manager, we can add the CSS inside a code block element on our page.
I like to WPCodeBox 2.0 for managing custom code snippets and generally all of my stylesheets when working with Bricks Builder.
The process is really easy to do. Simply copy the code snippet below and paste it into your website (code block element or a new snippet inside of WPCodeBox 2.0)
Here’s a screenshot of how I have pop-up animation set up in WPCodeBox –
Bricks Builder pop-up smooth transition code snippet
Copy the code below to add to your website –
/* Smooth Pop-up
------*/
.brx-popup .brx-popup-backdrop {
transition: all 0.6s cubic-bezier(0, 0, 0.2, 1);
}
.brx-popup .brx-popup-content {
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1);
transform: scale(1);
}
.brx-popup.hide .brx-popup-content {
transform: scale(0.8);
}
Increasing and decreasing animation speed
To adjust the animation speed, change the transition values on lines 4 and 7 of the code snippet above.
Once you have made your adjustments, don’t forget to save everything and test it out on the front end.
Need help implementing this code?
The code above has been tested with Bricks Builder version 1.9.2. If you are having a problem making this code work for your pop-up in Bricks, I’m available to assist you here.
If you’re new to Bricks Builder, You might also find my complete Bricks Builder course useful. Click here to learn more.
