Elementor is a popular page builder for WordPress that offers amazing capabilities for customizing the appearance of your website. However, sometimes we need to make changes that are not provided “out of the box” by the Elementor builder. One such scenario is changing the color of a title when hovering over it. Let’s see how this can be done using CSS.
Creating a Title
- Drag the “Title” widget onto your page in Elementor.
- Enter the title text and select the desired level (from H1 to H6).
Adding CSS Styles
- Go to “Advanced Settings” for the title element.
- Open the “Custom CSS” tab.
- Insert the following code:
selector :hover { color: #YOUR_HOVER_COLOR; }
Replace #YOUR_HOVER_COLOR with the desired color, for example, #FF5733 or write the color name in English without a hash-tag like red.
Saving Changes and Testing
After entering the code, don’t forget to save the page for the changes to take effect. Now that you have added custom CSS, test the title by hovering over it. The color should change to the one you specified.
With custom CSS, you can easily extend the functionality of Elementor and add additional effects and styles that are not provided by default. Changing the hover color of a title is just one of many examples of what you can do with this powerful tool.