This tutorial is meant for all those that use the popular Divi Theme and Divi Builder on WordPress. The Divi Builder is very advanced and also easy to use, especially when you already know CSS. When I started using the Divi Builder, I struggled to find how to set hover styles, when I normally would apply a “elementID:hover{}” on CSS, but using a visual builder comes with the challenge of re-learning how things are done.

So to cut to the point, when you have opened the visual builder and say you want to change the background colour when a user hovers over a button, you need to hover over the words “Background Color” on the settings, under Button Settings -> Design, typically accessed using the gear icon. When you hover on any setting label, more icons appear on the right, and you should click the cursor icon. After the cursor icon is activated, at the bottom another cursor icon will appear on the right of the desktop icon, you must click the 2nd cursor icon also to activate hover settings. Then any change you make under the hover settings will be effective whenever your hover over an element. It’s as easy as that.