Have you ever wanted to modify your website design just a little and had no clue where to start? Then you heard you had to learn something called CSS just to make ever little change? Who needs that?!?
Our plugin pick today is CSS Hero and you will fall in love with this plugin. It will allow you to make small (and large) changes to your website with NO CODING! CSS Hero allows you to select parts of your website and visually make changes. You also get a visual preview of how your changes are affecting the website. It’s almost like magic. Here are some of the things you can do:
- Change the fonts to use Google Fonts (there are over 600 to choose from)
- Change the colors of almost anything
- Change the spacing between elements of the website
- And much more!
A Deeper Dive Into CSS
CSS or “Cascading Style Sheets” is the website programming language the controls the “style” of your website. In general CSS controls most if not all of the design of the website. This is a powerful programming language for website designers, but normal people also want to be able to adjust their website as well.
The Cascading nature of this language means that you can make a change to the entire website, or target a specific part of the website and only change that one element.
While you don’t have to know any CSS coding to use the plugin, a working knowledge of CSS will help you know what properties you want to change. And it will help you troubleshoot when you think something should be changing but isn’t.
FAQ’s About The CSS Hero Plugin:
Does it work with my theme? Yes! Most likely, CSS Hero works with many of the most popular themes including Genesis, Elegant Themes, Woothemes, Twenty Fourteen, etc. Note that some elements on the themes may not be editable, but you may not even notice.
How much does it cost? The Plugin Retails for between $29 for a regular license for one website through a Pro License for basically unlimited websites (999 sites to be exact).
Installing the CSS Hero Plugin
- Install and Activate the plugin
- Activate your license
- Goto the Front page of your website and Start Editing
How to Use CSS Hero (Watch the video for more details)
- Click the Blue Lightning Bolt
- Click the Crosshairs to select an item to modify
- Choose the Specific CSS Property to modify
- Customize to your heart’s content
Adjust Responsive Site Settings
Below the Crosshair Icon is a Screen Size icon. Choose between Large Screen, Tablet, and Phone. Then you can modify the design for those specific screen sizes.
If you don’t like the changes, Go back to default or step backwards through your history
- The Circular Arrow button will allow you to step back through your history of changes.
- The tools hold a reset to theme default button.
Optional- What to do when you’re done customizing.
Once you have your website styled like you want, you may want to deactivate the plugin for speed and performance reasons.
- Under the Tools menu, you can Show Generated CSS.
- Copy that CSS
- Paste it into your website’s CSS file at the bottom of the file
- Deactivate the plugin
- Note- Fonts may not load properly, until you load them in the functions.php file. If all else fails, leave the plugin activated so all the styles will take effect.
If you’d like to check out this plugin, we appreciate you using one of our affiliate links throughout this post. We will never promote a bad plugin, only the best that we think will be of real value to you. Click here to check out CSS Hero!
