We’re excited about this plugin because we hear from WordPress beginners all the time. They get frustrated from trying to figure out how to make minor design changes on their site and we think this plugin will help tremendously with that process. CSS hero is a premium WordPress plugin that lets you design your theme how you want it to look without needing to know any html or CSS. So let me show you some of the features.
After purchasing the plugin, you’ll need to install and activate it on your site.
Once activated, you’ll be redirected to get your license key so we’ll do that now.
Once we have everything activated, make sure you’re logged into your site and go the front of your site to get started. The goal of CSS hero is to give you a WYSIWYG interface or a what you see is what you get to work with. From the front of my site, you’ll see this little button.
And when I click on it, it expands and you’ll see more buttons.
You also see that my site becomes a live preview for me to work with. The first item is the selection tool. When I click on that and click on any part of my site that I want to change.
CSS Hero will show me the different elements I can work on.
For now i just want to change the font of the title so I’ll click site title. When I click that, now I see all these other items that I can change. Such as the background, text, padding and all these others.
I’ll click on text and I get all these items I can change as well.
Notice when I edit here, I see the changes being made on the site as a preview.
When I make all the changes that I want for that area, I’ll click save changes.
You can keep doing that with all the areas of your site that you want to make changes to. And if I make any change that I don’t like I can pull up the history of those changes and revert back here.
Click on the preview button to see what those changes are.
and click activate to revert to that.
Now, just know that reverts the whole site back to what it was before, but if I’ve made several changes and only want to reverse one thing, say the title I just changed, I’ll just go to that and click reset
and it changes that part to the WordPress default area only.
Now lets look at customizing your site for mobile devices. I can click here to see what my site will look like with different device sizes to make sure my site is mobile friendly.
You can edit the site while it’s in the mobile size as well. CSS Hero is compatible with many of the popular free WordPress themes as well as many of the premium themes out there.
Themes like Elegant Themes, StudioPress and WooThemes work with this. It also works with the biggest frameworks like Genesis, Thematic, Pagelines and more.
Now if your theme isn’t on the list, you can go into Rocket Mode with the plugin. When you activate rocket mode, CSS Hero will try to guess all the information needed to work on your site. If your theme follows the WordPress coding standards, it will likely work.
The plugin also works with many of the more popular WordPress plugins, say like Gravity Forms, Contact Form 7 and more. So you can customize those as well on the front end.
When you get the plugin, just take some time and play with your theme to redesign it and make your site look how you want.