Building a website using a page builder is a new norm in the WordPress community scope. Elementor is by far the most popular page builder plugin. Its pro version allows you to add some animation effects like parallax and sticky effect. However, there one missing piece that seems to be expected by some users: CSS transform.
Elementor actually has built-in feature to allow you to add hover effects, but CSS transform offers more advanced effects that many people love about. If you want to add a more advanced hover effect in Elementor using CSS transform, this article will show you how.
There are two options to add CSS transform in Elementor. If you use Elementor Pro, you can accomplish it by adding a custom CSS to an element you want to apply the CSS transform to. If you use Elementor Free (or don’t want to deal with code), you can install Happy Addons. Happy Addons itself is one of the most popular Elementor add-ons with over 100,000 active users. It is released as a freemium plugin and the feature to add CSS transform is available on both versions.
Adding CSS Transform in Elementor Using Custom CSS
If you want to add CSS transform using custom CSS, make sure you have upgraded your Elementor to the pro version if you haven’t done so since the ability to add custom CSS is only available on Elementor Pro. You can add CSS transform to any element. Be it section, column, or widget. In this article, we will show you to add CSS transform to a column.
First, edit your page (or theme builder template) with Elementor and select a column you want to add the CSS transform to. Click the column handle to turn the column into the editing mode.
Next, go to the settings panel and open the Custom CSS block under the Advanced tab. Paste your CSS code that contains CSS transform to the available field.
Here is the code we used on the example above:
selector:hover {
transition: all .2s ease-in-out;
transform: scale(1.2);
cursor: pointer;
z-index: 1;
}And here is the example of the result.
Adding CSS Transform in Elementor Using Happy Addons
If you have no CSS knowledge, Happy Addons offers a solution to allow you to add CSS transform to your Elementor page. However, you can only add CSS transform to widgets. There are no options to add CSS transform to a section or column.
As said above, the feature to add CSS transform is available on both Happy Addons Free and Happy Addons Pro. You can get the free version Happy Addons on the WordPress plugin directory.
Make sure you have installed and activated Happy Addons on your WordPress site to add CSS transform using it.
Once you are ready, edit your page with Elementor. Specify a widget you want to add the CSS transform to and click the widget handle (the pencil icon) to turn the widget into an editing mode.
Go to the settings panel and open the CSS Transform block under the Advanced tab and enable the CSS transform by switching the toggle.
After enabling CSS transform, you can set the transform values. To add CSS transform on hover state, simply click the HOVER tab.
You can continue editing your page. Once done, simply publish/edit it.
