No website is complete without a design that grabs and holds your readers’ attention. But with so many WordPress theme options available in the market, it can be overwhelming trying to decide which one to use.
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?
Or, what if your design skills are seriously lacking and you have no coding experience, but hiring an expensive professional to do the work for you is out of the question?
Any of these situations might apply to you. In fact, I’ve been there 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, hire a designer, or break the bank?
Well get ready, because that’s what I’m about to do.
Meet CSS Hero, a WordPress plugin that will help you easily customize your WordPress theme in real time.
Today I’ll look at what CSS Hero 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.
What Is CSS Hero And How Does It Work?
Similar to a page builder, CSS Hero works by allowing you to select and modify elements of your website using a visual live editor. The editor displays on the front end of your website. And get this, customizing each element on your website is as simple as pointing and clicking.
CSS Hero applies customizations separately to your original theme styles by generating an additional CSS stylesheet. This is great news if you want to edit your WordPress theme without touching any code in your theme files. After all, messing with code you know nothing about can lead to the dreaded WordPress white screen of death. In others words, you could crash your site, ruin the user experience for site visitors, and lose a lot of hard work.
Instead, the new code replaces the old, but leaves it intact and available should you wish to revert to your default code later.
In addition, thanks to its widespread compatibility with many of the most popular WordPress themes, you shouldn’t expect to run into any conflicts.
CSS Hero plays well with themes like Twenty Nineteen, all Genesis Themes, and Divi. Here’s a full list of compatible themes.
Key features include:
- Customize fonts with Google web fonts
- Color picker for choosing the perfect color palette
- Sliders change margins, text heights, and column widths
- Special effects like gradients, transitions, and shadows
- Clean and minified CSS output
- Full history of changes for easy undo
- Responsive preview modes for a range of screen sizes
- Commit edits to specific devices
- WordPress login page styling
- Site customizations as an “unlogged user”
- Save checkpoints, or snapshots, of edits and push your favorites live
- Reset option to put everything back to default mode
There’s so much potential in this plugin that I’m certain there’s much more you can discover through use and experimentation.
How Much Does CSS Hero Cost?
In terms of pricing, CSS Hero isn’t that expensive. There are four price plans available, all of which suit different needs and requirements.
One thing to note before purchasing this plugin, 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.
Here’s a quick breakdown of CSS Hero pricing:
- Starter Plan ($29/year): for use on 1 site.
- Personal Plan ($59/year): for 2-5 sites and great for publishers with multiple websites.
- Pro Plan ($199/year): up to 999 sites and perfect for those that run web agencies and manage a ton of websites.
- Lifetime Pro ($599 one-time payment): up to 999 sites, lifetime product upgrades and support, and WordPress Multisite
So depending on how many WordPress sites you have, CSS Hero has a plan for you.
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 simple. The first thing you’ll need to do is purchase and download the CSS Hero plugin and then upload it to your WordPress site just like you would any other plugin.
Next you’ll need to activate the plugin by following the prompts on screen. This involves clicking on the Get my key now button in your WordPress dashboard, logging in to your CSS Hero account, and connecting your WordPress site to the plugin.
When your license is activated and ready to go, you’ll see your site listed in the CSS Hero dashboard under Your Active Licenses.
When you’re ready to use CSS hero to customize your website, start by previewing your page, post, or website. For this example, I’ll preview a blog post.
At the top of the preview screen, you’ll see a pencil icon labeled Customize with CSS Hero. Click on it to launch CSS Hero and start customizing the elements of your WordPress website.
For the purpose of this review, I’m using the WordPress Twenty Sixteen theme. This is a great theme to test the plugin out on since it’s on the list of compatible themes.
How to Make CSS Hero Customizations
To show you how CSS Hero works, I’m going to start by customizing the background of my blog post.
I’ll do this by clicking on the area of my blog post that I want to change. This will open a sidebar of options where you can make any changes you want.
To customize my blog post’s background color, I’ll then click on the menu item labeled Background. Doing this opens up another set up customization options that I can use to make my desired changes.
When I click on the Color option, I am presented with a color picker. All I have to do is choose the color I want. Immediately, my blog post’s background color changes. If I like the change, I’ll click OK. This will make a real-time change to my already published blog post.
Remember, the background is only one section I can customize. I can also makes changes to the:
- Typography
- Borders
- Borders-radius
- Spacings
- Transform
- Filters
- Lists
There’s also a place where you can create customizations that can be used time and again throughout your site. For instance, create a global button style or change the backgrounds, hover effects, and more.
And if you want to get really creative, you can even customize the scroll effects your site visitors see as they engage with your content using the Animations section. Define things like the reveal effect, easing, delay, and animation duration and easily apply it to your website within seconds.
And whatever you do, don’t worry about making a mess of your website. As I’ll show you a little later, everything can be undone and restored to their default settings, so there’s no reason to avoid a little experimentation.
It’s All in the Details
One popular customization that people love to make on their website is changing the color of hyperlinks within a blog post. Now, this might seem like a simple request for people familiar with editing CSS, however, if you have no knowledge of it, it can be pretty intimidating – especially without CSS Hero.
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.
Want to know how to do this?
Start by clicking on the section of the screen that contains your hyperlink. Next, hover your mouse directly over the hyperlink you want to customize and right click it.
You’ll see a small box appear. Click on the Only this Element option. This tells CSS Hero to change only this element.
Next, click on the Typography section in the sidebar and choose the color you want your hyperlink to be from the color picker.
If you want to change all the post’s hyperlinks to the same color, instead of choosing Only this Element when you right click a link, click on entry-content link. Then, click on Typography and choose the link color from the color picker.
As you can see, changing the elements on your site with CSS Hero really just involves you clicking, changing, and saving.
Are you interested in adding actual code to the CSS stylesheet CSS Hero creates for you?
Click the Inspector tab near the top left-hand corner of the CSS Hero editor and add your code snippets right into the inspector section.
Restoring to Default Code
There might come a time when you want to restore a customized site to its default settings. But maybe you want to export your changes to another website first because it’s a client site and it’s ready to go.
With CSS Hero you can do just that using a very straightforward process.
CSS Hero minifies any changes you make to your site and creates a new stylesheet to hold them in. This gives you the freedom to easily export those changes anywhere you want.
To do this, start by changing tabs in the CSS Hero editor. In the upper left-hand corner, click the Inspector tab.
From there, click on CSS or Minified CSS (whichever you prefer) near the bottom of the editor under the Export section, and watch it automatically add to your clipboard. From there, you can paste your new stylesheet anywhere you want, such as a client’s 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 Theme Edits in the upper right hand corner of the CSS Hero editor.
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. You can email the team for support using the public contact form, submit a support ticket in your CSS Hero account, or catch the team on Facebook and Twitter.
As I mentioned earlier, 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 unless you continue to pay the yearly renewal fee.
Final Thoughts
I’ve used CSS Hero before on a few of my other websites. However, this was shortly after its initial release. Since then, I’ve seen a lot improvements that have enabled me to really continue enjoying this plugin.
It seems to be a lot faster than I previously recall, the user interface looks nicer and is easier to navigate, and of course, it’s compatible with a lot more WordPress plugins and themes. Not to mention, exporting my work (even the kind I do in actual code!) to other places is super simple now thanks to the one-click export functionality.
One thing I would keep an eye on is the CSS Hero website. There are often heavy discounts on their different pricing plans, which you can take advantage of to save some money.
But don’t worry, if there aren’t any public deals for those wanting to buy CSS Hero, we’ve got you covered.
For being a loyal WPKube reader, we’ve got an exclusive offer for CSS Hero’s forts three pricing tiers, complete with discounts of up to 40% off. All you have to do is use the coupon code HEROKUBE for 40% off.
Overall, CSS Hero is lightweight, 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.
Great info and I just started a new blog with wordpress so I should keep this for working on it.
Glad you enjoy the post Cyndu – let me know how you get on!
This is the killer app for WordPress in 2015!. Thanks for all the improvements. I am getting the feel for it.
Given enough time, like days, I could usually but not always find how to change some CSS. Other times I would end up paying someone for the change.
Now I can do it myself, saving huge amounts of time and money too.
Thank you!
You’re very welcome Dave!
That’s the beauty of a plugin such as this one. Certain elements of CSS can be pretty tricky. CSS Hero simplifies it all down which can be helpful when you don’t want to go rooting around in code.
Awesome review! CSS Hero does look like something a lot of WordPress Designer would want but as things would have it, if you need a design to be more unique, best if you design it yourself. I mean, CSS itself isn’t that hard, provided you have lots of practice.
You’re quite right Qoyyuum, if you’re really after something unique you’re probably best off hiring someone. However for those bloggers who want to make a few tweaks, or who can’t get their head around CSS (tool me a while!), this could be just the thing to help.
Thanks for a great comment!
Do you have to keep the plugin on after you make the changes? That bugs me and also the pricing. The dev price is too high at $199 per year. A better model would be a year with unlimited site use at $99 or less.
I had the same question, mailed them and thought you may be interested in their reply:
basically CSS Hero allows you to easily export your CSS Hero generated edits and save them as plain or minified CSS to be used without the plugin up and running.
Plus they specified that the subscription is necessary if you’re willing to activated NEW sites, get plugin upgrades and get support otherwise your actually licensed sites will continue working with CSS Hero and will not need a renewal.
Great plugin indeed, i bought it after reading this article and it saved me sooooo much time (and money).
Thanks WP Kube, awesome review indeed.
Thanks for providing that additional information Manfred, it’s really appreciated!
Hi, Stacey,
What a great review! I’m heading over to check it out.
Sue
Nice review! Very in depth. If anyone wants to try CSS HERO free, I’ve set up a demo system here: [Link Removed, site not active anymore]
Thanks, but It looks like the URL is giving “404 No Results Found” error.
Thank you for sharing this information.
Keep it up!
How do you actually contact them? There is no contact form on their site which is likely intentional. That’s not a good sign….
Otherwise, seems like a good tool for CSS edits.
Hi James, if you browse their terms and conditions page, they provide this email address: info@csshero.org – I hope this helps!
Yeah! Very cool review! Looking forward to test CSS Hero by myself after (hopefully) winning the giveaway 😛
Best regards from Germany,
Tom!
fingers crossed.
Hey Devesh, thanks for the review, looking to win the giveaway.
If I get the copy, then I’ll try to write an in-depth review of the plugin on my WordPress blog, and also showcase few possibilities with CSS Hero customization.
🙂
Thanks Pranjal, good luck!
This looks pretty awesome and would be fantastic for some of my clients who are a little challenged in the CSS department.
I’d like to win this to have on my blog to be able to change how it looks.
I would like to win, because this plugin seems to be quite useful.
I’d really love to get a shot at this plugin because lot of customization are really limited by complex coding specifications. Let’s see how it goes
Very comprehensive review. I’m definitely buying the plugin if I don’t win. As a Genesis user, I’m glad to see it works on that framework. Thanks!
This is what attracted me to it Sandee. I use Genesis almost all of the time, so it’s great to see it working with such a promising framework.
Looks very interesting and thank you for the review.
CssHero is awesome. I’d like to include it in Theme I’m building for CreativeMarket.
Winning CSS Hero will help us bring TechGarage.my to the next level. As we’re a small team, any tool that eases customisation costs and increases productivity is to be lauded. And that’s why CSS Hero is such an awesome tool, even more so if we win it.
It’s a very interesting idea and good implemented.
The only sad thing is that it needs an internet connection for work and can’t be used offline.
CSS is my archnemesis
Very interesting plugin. What’s the licensing on the plugin (GPL)? Looks like something to take a look at. Any conflicts with any plugins at the moment?
Hi Nile, unfortunately I don’t believe it is GPL license. From looking at the plugin files, it appears CSS Hero is a commercial license and therefore isn’t open for development. They do however have an exclusive membership plan for those looking to develop the plugin.
Great!!!
Being a non-programmer, I am hoping that CSS Hero plugin will help me build better websites especially since I use the Divi theme. Thanks in advance.
I have been wanting to try this and get my employer on-board with purchasing it. This would be the perfect way to try it and show it to her.
This looks fantastic–could definitely use a handy tool like this to save some time.
I’m always both curious and hesitant about tools like this, but if all it does is create an additional stylesheet, that seems reasonable code-wise, and it might speed up development. (CSS is not difficult, just FINICKY.) It would be nice to have an opportunity to try it out.
Thanks for such a comprehensive review. CSS Hero looks like it could be a great timesaver, not to mention super easy for non-coders to use. I’d love to put it through it’s paces and write up some thoughts and a tutorial or two too!
I’m extremely happy to see such service introduced via plugin. It gives strength to our newbies who want to grow their careers in the WordPress industry. Cheers and best of luck!
I’ll be definitely checking it out.
I can always use a little helper here and there and this tool looks just like the perfect product to help do the trick.
I’ve been wanting to add this to my collection of WP tools, not only to just spiffy up my current sites, but to also be at the ready for a client with that one little extra request…the request that usually would throw off the schedule. I could use this little helper for sure.
Winning CSSHero will not be a one way win. It’s a win for my clients, their business and for the themes I use (mostly Divi) that will help show the world how great they are as well.
Newbie to Divi…and to wordpress I’ve designed my site just recently and continue to run into css blocks as I’m still learning – I see this helping my site design and hoping to move my group site http://www.creativebeadchat.com to divi very soon with Amanda Henson’s assistance. Our future endeavor is to offer a multi -site environment and this could really assist our efforts. Please consider me! Thanks for the opportunity.
Having this plugin would mean that I would save alot of time working with wordpress themes and get the job done quicker 🙂
Having CSS Hero would make customizing my WordPress websites much easier.
Looks very impressive. Would love to use this on our non-profit org website.
I’m completely new to wordpress and trying to create my first website. I know almost nothing about CSS and coding, with the exception of having done basic coding on a myspace account 10+ years ago to get an awesome pink background! I’ve been trying to customize my Divi theme and while I learned some basics, like changing font size and colors, it takes me a few hours to learn and implement each customization. CSS hero would definitely make things go faster! Thanks for considering me and thanks for having such a helpful website!
Looks like a great new tool – can’t wait to try it out!
Hi,
I have customers who don’t want to deal with css, this could be pretty handy 😉
I did not know this plugin, so thanks for this nice post.
Really disappointing. Massive compatibility issues and no real workarounds with Divi theme. Tried to resolve issues with support to no avail – tried to get a refund as the app is definitely not what I expected when I spent north of $100. Definitely would suggest against it to anyone.
thanks alot for the great review, also big thanks for your coupon , i just bought it using the coupon and got the discount as expected.
thanks alot
Glad I could be of help, Muhamed.
Thanks for the comment. Have a great week ahead.
Amazing informative blog!
Unfortunately I’ve had issues with css hero and had no resolution to my customer service ticket for 2 weeks, terrible.
Just logged in to check the status of my ticket and it has now been deleted, I’m a fair customer, went into full detail with my issue including a video demonstration and login details, they said they would look into it then stopped replying and now it seems just deleted.
Check your email for any messages from them. If nothing, try submitting a new ticket about the issues. If they have several people handling support it might have been some kind of confusion.
CSS Hero is the definitive WordPress plugin to easily customize the look of your site, with an easy and intuitive point and click interface.