CSS Hero: A Plugin to Let You Quickly Change the Appearance of Your Site

Change your site’s appearance with a point-and-click visual editor.

A lot of WordPress owners are generally happy with the appearance of their WordPress sites, but would like to be able to quickly make changes to the font, size, or color of text, or perhaps the background color. If this describes you, and if you dont know CSS the language for making styling changes to websites), then a handy plugin called CSS Hero could really help you out.

CSS Hero adds a visual editor to your WordPress site, which allows you to alter the appearance of your website. These changes can all be made by clicking on the element you want to modify, and then clicking the buttons and selecting the options from the editor. With CSS Hero there is never a need to edit any CSS code directly.

CSS Hero editing window

This tool won’t allow you to give your site a complete design overhaul, but it’s a great choice if you just want to make a few changes.

This tool won’t easily allow you to give the design of your site a complete overhaul, but for anyone who just wants to make a few changes, it’s a great choice to help you gain a bit more control over the finer points of the design of your site.

If you don’t have the coding experience to delve into the CSS files that contain the presentation data for your WordPress site, then a plugin like this can save you a lot of time or expense.

How to Use CSS Hero to Edit Your Site’s Appearance

Once you’ve installed the plugin, which you can find out how to do in our guide to installing WordPress plugins, CSS Hero adds a small button to the frontend of your site.

CSS Hero Editor

Clicking that button activates the controls for the editor, and then it’s just a case of selecting the page element you want to modify, such as the blog post title, and then choosing the property of the element you want to edit, such as the font or color.

Depending on what page element you’ve selected, you could be able to make changes to the following properties:

  • Text: font, size, color, style
  • Borders: width, color, style
  • Backgrounds: colors, images, repeat, and attachment
  • Sizes: width and height
  • Plus many more

CSS Hero Save

While you are making changes to the appearance of your site, you get to see a preview of how the design will look, should you decide to keep those changes.

But don’t worry; the visitors to your website won’t see the changes you are making until you save them, allowing you to experiment with a whole range of colors and fonts.

If you are happy with the changes you have made, click the save button on the visual editor to allow them to be applied to your site for all to see.

One Limitation of This Plugin

I should point out that the CSS Hero plugin won’t work with all WordPress sites, at least not without a bit of extra work on your part.  

This is because not all WordPress themes are compatible with this plugin, although the list is growing.

You can view a list of compatible themes here, but even if your theme is a custom-designed one, or isn’t on the list, you can still use this plugin. However, setting it up will take a few more steps than simply installing the plugin.

If your theme isn’t on the list then this two minute video will walk you through the process of making any WordPress theme editable with CSS Hero.

Is CSS Hero Right For You?

If you are happy with the design and appearance of your WordPress site, but there are just a few little details you like to change—a color here or a font there—then CSS Hero can allow you to make those changes.

CSS Hero is ideal for making small changes to your site’s appearance.

However, if the changes you want to make are more fundamental—changes to navigation menus, layouts, logos, color schemes, or the arrangement of page elements such as sidebars and widgets—then you’re probably better off looking for a new theme that better matches your vision, or seeking the services of a WordPress developer who specializes in design.

But for anyone who is looking for a simple and effective way to make small changes that can make a big difference to the overall appearance of their website, CSS Hero is well worth investing in.

Find out more about CSS Hero

Like what you've read? Subscribe!

When you sign up to get notified of our newest article every Thursday, you'll also get an awesome free ebook about content marketing. Sign up now for that double win!

Leave a Reply

Please use your real name instead of you company name or keyword spam.