Are you overwhelmed by the thought of having to write CSS code to customize your WordPress site? It can be a daunting task to make your website look exactly how you want it to look. Copy and pasting snippets from across the web can often leave your site broken and sometimes even incompatible with mobile devices.
Today, we are going to take a look at CSS Hero. A modern and intuitive WordPress CSS customization tool.
It is built to help beginners and experienced users alike to customize their site with nothing but a simple point-and-click user interface!
CSS Hero: What is it all about?
CSS Hero is one of the most complete, live customization tools for WordPress sites. It allows you to easily edit the appearance of your WordPress website without having to write a single line of code.
In fact, you will be able to use CSS Hero with most WordPress themes thanks to its unique selection feature, which allows you to select any available website element in a single click.
Understanding the different ways that CSS and HTML interact with one another can take months to master. You might find yourself getting frustrated more often than you end up getting the results you want.
Why go through all the trouble when a plugin like CSS Hero can give you the design freedom you desire?
Sound interesting enough? Let’s dive deeper and take a look at the different features and tools that CSS Hero has to offer.
Easy to install, easy to use.
First things first, you’ll need to grab yourself a copy of the plugin from the official CSS Hero homepage. Once you have it, you can upload it and activate it on your WordPress site just like any other plugin.
You’ll be required to enter a license key ($29) which will be available within your dashboard on the official website after you make your purchase.
Once this has been completed, you’ll see that the plugin has added a new menu option in your WordPress admin dashboard.
Voila! Your site is ready to be customized with CSS Hero.
At this point, you can head over to your website’s homepage and click the “Customize with CSS Hero” menu option.
Once you do, you’ll see a screen just like the following image:
There are two important things to note here:
- The plugin will ask you to select any website element to start editing.
- An element can be either an entire section of your site, or a specific element such as a headline, a paragraph, or anything else.
It really is that simple to use this plugin. And, of course, there are a lot of interesting features to play around with. So let’s look at those.
Point and click editing.
Any element that is a part of your page design can be selected and customized independently.
For example, here I’ve just selected the “What They Say About Us” headline. You’ll notice that once you’ve selected the element, CSS Hero presents you with the set of customization options that are available on the left-hand side (as shown below):
The CSS Hero interface lets you apply a number of customizations to each element, including custom colors and typography, but also the option to manage text alignment, style, and decoration.
But, that’s not all. CSS Hero also lets you add advanced CSS to your elements, all within the same customization panel.
This will not only save you time but also let you create extremely creative and versatile designs.
In addition to this, you’ll also find features called Snippets and Animations. These are essentially designed to help you quickly add specific design effects to your elements.
Snippets can be created as well as saved for later usage.
Here is an example of us using a snippet to apply the box-shadow element to content boxes within a section of the homepage:
Once again, it is possible to modify the values of the specific snippet without needing to write any code whatsoever.
Advanced layout management: positioning, and placement.
Most web developers use either Flexbox or CSS Grid to create a website layout. But, if you are a complete beginner to layout management, then learning to use either of those is going to prove difficult.
Thankfully, CSS Hero provides seamless and advanced layout management tools. And it all comes down to 3 fundamental properties:
- Extra. This is where you’ll be able to adjust properties like Float, Box-Sizing, and Display.
- Measures. This is an advanced property which helps you defined the width and height dimensions of your content sections. It works for individual elements as well.
- Positioning. You’ll be using this to move certain elements in a different direction within the layout. E.g. 20px from the top or 10px to the right.
In the example shown below, I’ve used the positioning property to move the “Read More” button to the middle of the individual content section. And if I preview the site on a mobile device, you’ll see that the new positioning placement is still there.
And while we’re on the topic of mobile devices, you’ll be pleased to hear that CSS Hero also seamlessly integrates with responsively designed websites?
Create mobile-friendly sites with ease.
Web design isn’t linear. The days of designing for a single larger-sized screen are over. You have to think about multiple devices all at the same time, which means designing for different screen resolutions.
And if you have no prior experience with media-queries, the result of this will be that you’ll likely end up with one big mess.
Fortunately, this is where CSS Hero really shines through. All you have to do is select the device type (tablet or mobile) from the top dashboard menu, and the plugin will instantly present your site layout in that specific format.
This will show you whether your property settings are working fine for mobile devices. And if they’re not, you can adjust them as needed.
If needed, custom media-query dimensions can be added by going to Project -> Media Query Manager. The Project menu item can be found in the CSS Hero dashboard at the top.
Peace of mind with history revisions.
Once you get your hands on this feature-rich live WordPress theme editor, there’s no question in my mind that experimentation is going to be high on your list of things to do.
But as we all know because we’ve all been there before, mistakes are bound to happen.
Thankfully that won’t be a problem because CSS Hero comes fully prepared for any accidental design choices you make. You can undo or redo changes, or you can go ahead and restore a previous change you made from the history panel.
Furthermore, if you create something you really like — use the Checkpoint feature to save it for later use. You’ll have the option to easily jump back to a specific checkpoint from the time of saving allowing you to make changes in increments.
Add awesome stock photos with Unsplash integration.
Good photography affects design in numerous different ways. It helps to accentuate certain elements, as much as it helps to create a story of your design. To make things easier, CSS Hero gives you access to the entire library of Unsplash photos directly from within the editor interface.
You can effortlessly apply full-size background images to any section of your site. And since this is a live editing experience, you’ll be able to see any changes made immediately.
CSS Hero integrates with your favorite WordPress plugins.
CSS Hero natively integrates with many popular WordPress plugins as well as the new Gutenberg Block editing experience.
As a result, compatibility isn’t something you need to worry about.
Some of the plugins are:
- Visual Composer
- Gravity Forms
- …and many others!
For the full list of supported plugins, please see this page here.
Please note that CSS Hero is also built to support most if not all plugins published within the WordPress Plugin directory but only guarantees compatibility with those in the above-linked list.
Custom WordPress design used to be something that only skilled people had access to. Fortunately, technology for web customization is evolving rapidly. And live customization tools like CSS Hero make the designing process not only easy but also engaging and fun.
If you want to take full control the way your WordPress websites look, CSS Hero is a must-have plugin.