CSS Hero

CSS HERO is a plugin for WordPress that allows you to style just about any element on your website by allowing you to adjust the CSS values of your theme. You don’t need to know HTML or code to make this work so for designers it’s an easy way to make theme customisations.

The CSS Hero interface is activated on the front end of your site and once enabled, allows you to target elements on the page by hovering your mouse and clicking on them. Once you found the element you want to target, CSS Hero lists all the CSS values related to that element and you can then change the values in the control box to get the look you’re after. You can change colours, fonts, positions – anything that you would be able to change using manual CSS declarations, you’ll be able to change in CSS Hero. So if you want to target a single headline for more punch then you can do that by clicking on the single headline element. If you want to change all the headlines , you can do that too.

Once you’ve made a series of changes to your site, CSS Hero will save all the new CSS values in a file that you can also export if you prefer. You can even revert back using the history panel or reset elements to their default. CSS Hero also has a preview panel to let you see how your site will look across all devices and you can edit the CSS while in mobile or tablet mode as well.

CSS Hero works with the Beaver Builder theme, Genesis and others. You can see a list of compatible themes here and check out the Beaver Builder page where you can take the BB Theme and CSS Hero for a spin.