CSS Hero for WordPress: an ally or an enemy for your site? [Quick Guide]

4:59 pm April 15, 201712192

CSS Hero - Plugin WordPress
For a long time I wanted to test CSS Hero for WordPress !

You know, this premium plugin that allows you to change any element of your web page on the fly from the front-end of your site . Well, it’s made since Fabrice gave me this opportunity. In this article, we will find out together…

Overview of the plugin CSS Hero

first of all, you need to purchase a license on CSS Hero official site , then you can download the plugin files to send to your server via FTP or directly from the upload of extensions available in the administration of your site. Finally, you need to activate the plugin using your personal key. Now, when you go on the side of the Front End of your site, you will see appearing a new blue button, with a “lightning bolt” icon in the upper right of your screen.

CSS Hero - Front End

By clicking on it, you will enable CSS Hero and a menu will appear. It is from it that you can start your customizations… This menu is made up of 9 tabs we’ll fly together:

1. The main editor

Inspecteur CSS Hero - 1
when you select this tool, you can fly over your page and each editable element will be highlighted. As a result, you can easily start your customization. Attention, there are many options and you need to enter your changes in the right place.

2. the Inspector pro

Inspecteur CSS Hero - 2
by selecting this tool, a window will appear at the bottom of your screen and will give you the option to write you even your CSS . It’s from here that you’ll manage “Media Queries”, inherent to each type of screen CSS rules. In addition, you can export your code of how basic or minimifiee. This tool is by far the most effective and the most powerful that offer CSS Hero, however it is available from the “personal” at $59 ht/year version.

3. the ‘device’ mode

Inspecteur CSS Hero - 3
this tool also allows you to manage your different types of screen, but unlike “the Inspector pro” previously seen, here you can’t write code manually. You will then go by the “main Editor” tool to select your item and make changes via the options.

4. the history of changes

Inspecteur CSS Hero - 4
this tool lists the history of the changes you have made. You can easily find your different versions based on the date and time of your backups. It will certainly serve you.

5. the presets

Inspecteur CSS Hero - 5
with this tool, you can save configurations, styles “pre-made” to serve you later – on other pages for example – allowing you to keep a homogeneity of design and save time.

6 tools

Inspecteur CSS Hero - 6
the ‘Tools’ tab you will have 3 options:

  • the first being to recover the default styles of your theme (in the case where you are not satisfied with the result obtained),
  • the second will allow you to clear your history,
  • the third will give you the possibility to see the generated CSS code of how basic or minimifiee and eventually export it (copy – paste).

7. the tab shares, full screen mode and closing the plugin.

Inspecteur CSS Hero - 7/8/9
These three tabs allow you to promote CSS Hero on your social networks, switch to full screen mode and out of CSS Hero mode to return to normal mode.

If you want to learn more about CSS Hero, watch this video:

benefits to use CSS Hero

of course there are advantages to using CSS Hero!

Especially if you know anything about CSS and HTML language and you do not want to deepen the subject but also to change certain elements that give of the trouble when we try to change the traditional way…

You can also use some pre-made styles, it’s a pretty nice option… Not to mention that it is very easy to reverse if the final result does not suit us through the tab dedicated to “versioning” (history of changes) or the “reset” button.

Finally, with CSS Hero, it’s really easy to define the CSS rules associated with each type of screen, writing of the responsive part managed by Media Queries becomes child’s play…

the disadvantages brought by CSS Hero

the first cons is definitely the fare! Indeed, it will subscribe to an annual license $ 29 ht to be able to use CSS Hero on 1 single site, “the Inspector pro” Meanwhile arrives from the formula 5 sites for $ 59 ht per year.

It is not really excessive but what bothers me is the fact that the generated CSS styles are stored in the plugin… This means that if you disable the plugin on the site and much… SURPRISE! Your customization will disappear like snow in the Sun! Implication is that you will be required to renew your subscription each year unless you export the CSS generated to store in your theme files .

Then, the question arises “existential” of the weight generated by the plugin… I then do a Pingdom test . Although I is not no expert on the subject, the result is unequivocal: on a simple page – where I made less than a dozen action using CSS Hero – load time for almost doubled from 498ms to 916ms and 4 requests we added summer, evidence below:

Test Pingdom Tools

Finally just keep in mind that CSS Hero may conflict with your site! Check compatibility with your theme and your plugins before buy you.

and otherwise… How to change the CSS without CSS Hero?

Inspecteur Firefox

However, you will have the old way! If you are new in the web, including WordPress, know that you can achieve the same result with CSS Hero in just 5 steps:

  1. on the side of the front end, make a right click on the element you want to change and choose “to examine the item” (in Firefox) or “inspect” (in Chrome). A panel will open.
  2. Select the symbol of the Inspector, at the top left of the Panel.
  3. Hover over your page up to highlight the item you want to change. Click on it.
  4. On the right side of the Panel, you can make changes to achieve a result in real time. Don’t be afraid to make mistakes, the Inspector is not on your site, it makes the changes in the browser only…
  5. Then you can see these results in the appearance tab > customize > CSS additional in the administration of your WordPress site.

I do not hide you to have some knowledge… You can take a tour on the site which explains the mechanism of the CSS language very well or on this one which is a reference in the field…

bonus: CSS Hero Animator

CSS HERO Animator

the site of CSS Hero, I discovered the existence of a free plugin to add easily any CSS animation on any element on the page. This remembered me a ticket that I wrote a while back on how to integrate animations using Animate CSS . Having tested both, I find CSS Hero Animator very effective since it makes integration very easy and will save you time!



there are always two schools: for / against, and, for any domain! However, CSS Hero raised some thoughts:

  • if we use the “site 1” version, this will be sufficient since the pro Inspector is not included in the offer?
  • If you subscribed to the ‘5 sites’ version or even to the ‘999 sites’ version, we’re supposed to be a “pro”, isn’t it? Will we therefore really need this plugin in this case?

In fact, ideally that Inspector pro is available separately from CSS Hero…
And what do you think?