CSS Hero Review & Tutorial – Limited Time Offer 2019
Ever wished there was a way for you to customize CSS often but not write it yourself? Sure, something like Elementor does major work, but what about a tool that extends your page builder’s capabilities?
CSS Hero, with its seemingly magical interface, provides in that area.
It is a WordPress plugin that customizes the look of any element on your website. And I do mean any element – your header, your footer, your WooCommerce product pages, and more.
To celebrate the release of version 4 of their software, CSS Hero is currently offering a massive discount on their licenses, both the annual and the lifetime plans. I’ll walk you through it and show you how it works.
CSS Hero lets you:
- Select an element or a group of elements on your web page, then modify that using the WYSIWYG editor, for easy editing.
- Incorporate CSS codes manually with its code editor, letting you apply your own CSS tweaks.
- Use the responsive design settings that the interface automatically suggests, so you won’t worry much about cleaning your codes.
- Publish your changes in a few clicks and make them live right after.
The Version 4
CSS Hero’s version 4 just came out recently, but it has been in beta for several months now. It is finally out in the wild, highly anticipated among CSS Hero fans.
Some 71,000 people are already using CSS Hero. As v4 implies, this is not a brand new tool.
It’s been constantly developed, with a great team behind it. So that’s very important when you’re looking at an LTD. You’d want to know if the developer is actually sticking around – is this a quick cash grab or is this a product they seem to care about?
For CSS Hero, I’d say that they genuinely care about it. They’re adding new features pretty much constantly.
CSS Hero’s Major Lifetime Plan Discount
Here are CSS Hero’s pricing plans. On the rightmost side is the lifetime deal. Before you get a sticker shock with its $599 tag, know that it is not the current amount to pay.
There’s a coupon code up in the hello bar and CSS Hero very frequently deploys offers like this.
That means you’ll actually be paying $249 for lifetime access and 999 sites. So that’s already plenty of sites to keep you busy for many years to come, such as use them for clients.
Meanwhile, they do have annual plans. If you don’t need that many sites, you can grab one of their lower price plans and you’ll still get a healthy discount with this coupon code.
So it’s a reasonably affordable tool here, regardless of whether you go with an LTD or one of their annual plans. These also come with a 30-day return policy.
They do often offer upgrades too. If you buy the starter site for $29, you can use a coupon code and knock a little bit of money off of that. Then later down the road, they might offer you an upgrade to the lifetime Pro Plan, so definitely check into that as well.
Starting Up CSS Hero
Now let’s find out how CSS Hero v4 works. I have a WooCommerce website running the Astra theme for this demo. I’ve used this website in several other videos so it might look familiar. Meanwhile, I already installed CSS Hero.
Elementor also remains to be running on my site. As you can see, CSS Hero is not replacing a page builder. It’s simply an added layer that lets you style elements that (maybe) aren’t available in your page builder.
Select the Elements to Edit
To start editing, I pressed the “Customize with CSS Hero” button at the navigation bar. It opens CSS Hero’s editing interface.
Your basic drill is to click on an element that you want to style, then use the WYSIWYG editor (at the left side of the page) to make your changes. So when I click on one heading and change something like the font size, all of the headings in my website are going to be affected.
Of course, I can override that default setting by clicking on a particular element’s hamburger menu, then choosing among the following options: Only this Element, Only on this Page, and Only on this Template.
Meanwhile, the trash can icon at the side bar lets you reset the element properties you’ve changed.
Now you might be thinking, “why would you need to change the heading’s font size here when you have Elementor to do that?” You’re right, this isn’t a use case – I’m just kind of showing you how the software works.
Still, if you’re using a page builder for almost everything, there are certainly times that you’d need some custom CSS code and CSS Hero often comes to the rescue.
So even if you know how to hand code, it’s just so much faster to use a page builder plus a tool like CSS hero. And I don’t see why we’d really want to do it any other way.
I’m sure some will say that the code will be cleaner or whatnot, but then again, let’s just say modern workflows call for modern tools.
Navigate Pages with the Toggle Button
One thing I really like about CSS Hero that I’d like to see in Elementor is its edit-navigate toggle button. So when you want to edit a different webpage, you can:
First, click the navigate button.
Next, select the site page where you want to be.
Finally, click the Edit button.
By now, you can make edits on your chosen page. It’s a simpler process than Elementor’s (where you have to save the current page and take some loading time, navigate to the other page, hit edit with Elementor again, before opening the other page).
So, again, this is a pretty cool feature. It would be really nice to see page builders incorporate this.
Publish within a Few Seconds
You can make edits live by hitting Save and Publish at the bottom.
Upon checking the website’s front end, you’ll see that the changes are published fast. You won’t need to copy and install a code on a target website, as it will be implemented straight from CSS Hero.
See A Code’s Changes using the Inspector Tab
To see the actual code that’s been changed, you can view the Inspector tab. There is also a nice code editor here to guide you.
You can also erase the code, which automatically restores the settings to the default mode.
Go Deeper with CSS
So let’s get into this a little bit deeper. Sure, you can change the font size, etc. but we don’t really need an extra tool to do that. So how is this going to shine for you?
There are three major sections in CSS Hero’s WYSIWYG editor, which are the Properties, Snippets, and Animations.
To view them, you can either click the dropdown button of the current section you’re in or scroll down to the bottom of the page.
Let’s check the Properties category. This is where you can find image manipulating tools like the background, typography, borders, and more.
That means you can adjust an element’s look using the controls for each tool.
For the demo, I changed the background color (light red color) and font (Anonymous Pro) of the paragraph underneath the “Jeans” heading.
So upon doing that (with the corresponding setting for it), I was able to affect similar category pages with my changes.
Snippets are groups of reusable edits that you can apply. You can create your own snippets. If you’re used to CSS, you can think of a snippet like a class, where you make a bunch of changes and save them as a snippet. You can then use that snippet later for other elements.
The snippets section reveals options as shown below.
Let’s say I wanted to add an icon to the home item in the navigation. I can select it as the only element to edit. Then I can apply one of the items in Icon Sets, also found under Snippets.
I picked one icon that might be appropriate for a home page. Then I inputted the icon’s settings, including the name, position, size, and background color. The resulting icon is as shown in the screenshot:
Viewing from the front end, the home icon does update across the entire website, not just that particular page where we were editing.
For our second example, let’s focus on the page title “Jackets”. Here, we went for the Buttons category so that we can choose from the button-like designs.
For our third example, we changed the element’s background using one of the available snippets. This is actually pretty useful as you stylize things here.
The example below seems too striking for the page but you get the idea:
These and more readily-made items are available in the Snippets section.
Create A Snippet
A great option here is to create your own snippet. To start, you can edit an element as usual. When you have your preferred settings for that element, you can click the “Store edits as Snippet” button found at the code editor.
This then lets you name a snippet and save it.
So when you want to apply your saved snippet to other elements, you can just go over to the “Your Snippets” category and pick from your items there.
With my stored snippet as shown above, I didn’t have to copy and paste anything. That’s a really nice function.
Finally, we have Animations as one of the major categories in the menu. These are all on scroll animations, which let you move an element when the page is scrolled.
Actually, there are only a few options found in the Animations section as shown below.
For our example, we animated our footer. I chose Fade for On Reveal Effect, 500 for Delay, and 1500 milliseconds for Duration.
After saving the changes, the animation can be viewed from the front end website.
The animations are nice and minimal, if you’re into them. Personally I’m not a fan of them all that much.
This concludes the three main sections of the editor. You can experiment on the tools’ options to attain the right look for your site.
Optimize Mobile Responsiveness
Now what about mobile responsiveness? If you change a heading so it has a huge font size inside of desktop, isn’t that gonna screw up everything for tablets and mobile view? Well it doesn’t have to.
There are five preset breakpoints and you can actually add as many as you like. The first default breakpoint is for desktops, the second is for tablets, and the rest are for smaller phones. You can also see the maximum pixels that each device accommodates as you hover over it.
Having five different breakpoints and the ability to add more are not even possible in Elementor. So when you’re editing content in Elementor and you wish you had a way to add a breakpoint, this can do it for you.
With that, you can do adjustments so that your webpages fit and work well in different devices.
Style Your Login Page
How about styling your login page? CSS Hero has you covered as well. Simply go over to Tools and choose Style Login Page.
Then you can start clicking and styling to your heart’s content.
For our example, I turned the default login page into the resulting page as shown below:
To do that, I went over to the Properties section. To get rid of the logo, I chose Extra, then changed the Display settings to none.
However, I could also have it display, but this time set Visibility to Hidden. In that case, I would still get that space where the logo was meant to be.
I added a background image. To change the background, click Background under the Properties section, click the Image’s plus button, where you can either use an image from their media library or upload your own. Of course, you can also opt for other settings here, such as go for plain colors.
I chose the cover version (because the image was too big when I used the large version). I also adjusted the position a bit by using its selector.
To make the login form transparent, I clicked on the form, went to over to Background, and chose Color. There, you can find a slider that lets you set the level of transparency of the login form.
So right away I’m able to make this login page look pretty snazzy. Compared to what we’re used to seeing in WordPress login pages, this certainly looks a lot better.
One thing not working for me with CSS Hero is the undo and redo function. I have used CSS Hero in years past and the undo function worked just fine, so there’s definitely a bug in the code.
I’m guessing this is either an error with the 4.0 of the software or a conflict of my hosting. I did try different servers and they both had the same error, so I believe it’s just a problem with their software. This is something that needs fixing.
CSS Hero Final Thoughts and Rating
CSS Hero is a fast and flexible tool to edit your WordPress theme or any individual site element.
As a non-developer myself, CSS Hero really becomes my hero as I’m working on clients’ websites. That is, every time I need to change the style and I don’t have time to go into Google Developers Console to find a particular CSS class.
CSS Hero makes it fast and easy and I appreciate that.
Now the undo-redo functionality being broken is a huge red flag. However, I know this developer’s track record, so personally, I’m able to overlook that and give it a higher score than I normally would for an unfamiliar developer. I’m pretty confident that the undo redo functionality will be fixed pretty quickly in a software update.
Rating: So I’m gonna give this software a 9.1 out of 10.
I think this is a really good tool for anybody who’s working on websites on a day to day basis.