Are you looking to provide users with the ability to add different styling options for different states of an element in your custom Elementor widget? The Normalhover control is the perfect option for achieving this, allowing users to define separate styling settings for various states such as normal, hover and active. With the Normalhover control, you can enhance the visual appeal and interactivity of your widget by giving users the ability to customise the appearance of elements based on different interactions.
To check the complete feature overview documentation of The WDesignKit Widget Builder, click here.
Requirement – This feature is a part of The WDesignKit, make sure it’s installed & activated to enjoy all its powers.
To add a styling option for different states, in the Widget Builder, search and add Normalhover control in the Layout.
Note: You can also add this option in the Style tab, as it is a styling control.
From the NHA type, you can enable the Active option along with Normal and Hover.
Based on that, you’ll see relevant tabs in the Normalhover control. In each tab, you can add different style related controls.
Let’s suppose we have a custom button with a class btn.
Now, we want to change the button background colour on mouse hover and on click, which can be called as active state.
Click on the Normal tab and add the Color control. Then in the Selectors field, add the button class i.e. btn.
In the Selectors value field, add background-color as the CSS property.
Then click on the Hover tab and add the Color control. Now in the Selectors field, you have to add the button class with the hover pseudo-class to make it work on hover, like this .btn:hover.
In the Selectors value field, add background-color as the CSS property.
Now, for the active state, click on the Active tab and add the Color control. In the Selectors field, add the button class with the active pseudo-class, like this .btn:active.
Note: For active state, you can also use javascript to add an extra class. In that case, you have to add the selector accordingly.
In the Selectors value field, add background-color as the CSS property.
Once done, click on the Save button to save the widget.
Now, if you check the widget in the Elementor editor, you can set different background colours for normal, hover and active states.
Also, check How to Add Style Controls Using Selectors and Selector Values.