CSS Hero Review: Taking The Pain Out Of WordPress Customization

No website is complete without a design that grabs and holds your reader’s attention. With so many themes for WordPress sites on the market, it can be easy be overwhelmed by the amount of choice.

How do you know which theme is the best for you without trying it out first? What if you need to make extensive customizations but have a limited budget? Perhaps your design knowledge is lacking and you don’t have the budget to hire someone to do it for you.

Any of those scenarios can be applicable – I’ve been in that situation myself. But what if I told you there was a tool out there, that could help you make the design changes you need for your website, without having to touch a single line of code?

CSS Hero is that tool, a plugin for WordPress to be exact. Today I’ll look at what it can do by testing it out myself. I’ll be showing you just how easy it is to change the look and feel of your website, with only a few clicks and how you can use it yourself to inject new life into a standard WordPress theme.

Get CSS Hero »

What Is CSS Hero And How Does It Work?

Similar to a visual page builder, CSS Hero works by allowing you to select and modify elements of your website via a visual live editor. The editor is displayed on the front end of your website and customizing each element is as simple as pointing and clicking.

Customizations are applied separately to your original theme styles, by generating an additional css stylesheet. This is great news if you want to edit the look of a WordPress theme, without touching the code in your theme files. The new code will simply replace the old, leaving them intact but available should you wish to revert to default at a later date.

There’s a wealth of customizations you can make with CSS Hero, all of which are compatible with many of the most popular WordPress themes. These include the latest Twenty Fifteen theme, Genesis Themes, Divi Theme, and more. Here’s a full list of compatible themes for you to look at.

Key features include:

• Customize your fonts with Google web fonts
• Change the colors of almost anything
• Use sliders to change margins, text heights and column widths
• Select special effects such as gradients, transitions and shadows
• CSS output is clean and minified
• Contains a full history of changes should you wish to undo something
• Has responsive preview modes for a range of screen sizes
• Commit edits to specific devices
• Can reset everything back to default mode

There’s so much potential here in this little plugin that I’m certain there’s much more you can discover through constant use and experimentation. For those of us with basic needs however, these features will provide everything you need to make the changes you want.

How Much Does It Cost?

In terms of pricing CSS Hero isn’t that expensive. There are three price plans available, all of which suit different needs and requirements. One thing to note before purchasing however is that all packages include only one year of upgrades and support. This means if you’d like continued access to updates and the added benefit of using the support team, you’ll need to renew your license at the end of each year.

The first option available is the Starter plan. This plan allows you to use CSS Hero on one site only and costs $29. Next up is the Personal plan – one which allows the use of CSS Hero on up to 5 websites. It will cost you $59 however gives you more freedom if you manage multiple personal sites. The final plan is Pro which costs $199. The Pro plan is an excellent choice for developers, agencies and publishers who manage a large volume of WordPress websites. This plan allows the use of CSS Hero on up to 999 sites.

So depending on how many WordPress sites you have, there should be a plan to suit. But what about actually using the plugin? Let’s see how it fared when I tested it on one of my own websites.

Reviewing CSS Hero

Getting started with CSS Hero is a simple, 3-step process. To begin with purchase and download the CSS Hero plugin and then upload it to your WordPress site. Next you’ll need to activate the plugin by following the prompts on screen.

Once activated, you’ll see a blue icon in the top right corner of the front-end of your website. This is where you can launch CSS Hero and begin to customize the elements of your WordPress website.

For the purpose of this review, I have the latest WordPress Twenty Fifteen Theme installed. This is a great theme to test the plugin out on as it’s a fairly new release and has only just been added to the list of compatible websites.

Let’s start customizing by opening the CSS Hero options panel. Clicking the blue lightning icon will open up a dropdown menu which reveals a range of options for styling, saving and exporting your customizations.

To begin with, I’d like to change the background of my post content. I’ll do this by clicking the blue crosshairs icon. This opens further options and you’ll be prompted to select an element on your screen to customize.

Because I wish to customize my post background, I’ll click on that area of my screen. As you can see from the image above, depending on where you click, you’ll be shown options that relate to that area. In this instance I’d need to choose the Main Contents Area and then Entry.

The areas above show which elements of the entry content area I can customize. I could choose to change the Text, Border, Size, Padding, Lists, Borders and Margins if I wanted to. My primary focus is the background, therefore I’d select the Background option.

Clicking the background option reveals all of the background elements for the entry content I’m able to customize. To change the entry content background, I simply need to click the color picker icon, choose a color and click OK. I’d then save and my screen will automatically reset.

Since bright pink is a tad dazzling on the eyes, I’ve decided to change the background color back to its default color and edit some other elements for a more subtle effect. This is where you get to have some fun and experiment with different styles and options.

Don’t worry about making a mess – as I’ll show you a little later – everything can be undone and restored to their default settings, so there’s no reason to not brave it and be creative.

One popular customization that I’ve been asked to do for many of my clients, is to change the color of links within a blog post. This might seem like a simple easy request for people familiar with editing CSS, however if you have no knowledge of it, it can be pretty intimidating.

With CSS Hero you can drill down to the smallest elements on a page (like links) and customize them however you want. No coding, no rewriting of style sheets, just point, click and save.

So what would you do if, let’s say, you wanted to restore everything to their default settings, but first export your changes for use on another website? The answer is very straightforward.

CSS Hero minifies any changes you make and creates a new style sheet to hold them in. This allows you to easily export them, ready for use elsewhere. After this it’s merely a case of copying the code to another website.

Once you’ve safely exported your changes, you can reset everything to return your theme to its original state. To do this, click on Tools and Reset Changes. A confirmation box will appear to double check that you’re 100% sure you wish to reset. Click OK and your screen will refresh to show your website as it was before you started customizing.

Support And Documentation

Looking at the support side of things, I’m happy to say that I’m impressed with the effort taken to provide as much help and information as possible. The documentation is easily accessible from the CSS Hero website and contains a wealth of tutorials for using each of the plugin’s settings.

This video is particularly useful for getting to grips with using CSS Hero for the very first time.

For personal support with the plugin, you’re encouraged to use a number of communication methods to get help and resolve your problems. First there’s the CSS Hero support forum which appears to be fairly active, with a number of helpful topics. You can also email the team for support as well as catching them on Facebook and Twitter.

As I mentioned earlier in this article, updates and support for CSS Hero are only available for one year after purchase. You can continue to use the plugin on sites where you’ve already installed and activated it, however you won’t benefit from key updates to the plugins files and the support available from the CSS Hero team.

Final Thoughts

I’ve used CSS Hero before I wrote this article on a few of my other websites, shortly after it was released. Since then I’ve seen a few improvements that have enabled me to really enjoy using it once again. It seems to be a lot faster than I previously recall, the user interface is easier to navigate and of course, there’s a whole lot more themes and plugins that it’s compatible with.

One thing I would keep an eye on, is the CSS Hero website. There are often heavy discounts on the pricing plans which you can take advantage of and save some money. At the time of writing this, there’s an exclusive offer on for all three plans with discounts of up to 40% off. For me that would seriously sway me towards the direction of purchasing. Use the coupon code “HEROKUBE” for 40% off.

Get CSS Hero »

Overall CSS Hero is light-weight, easy to use and takes the pain out of customizing your WordPress theme. If you already have some skills in design, this plugin will make the process a lot quicker, while users with zero experience can finally customize their sites without paying a fortune in web design fees.