What Is CSS Hero
Surely it has happened to you many times that you have wanted to change some style of some element of your website, but you have not had a clue how to do it, and if you have asked someone, their answer has been: “you have to do it by adding code CSS in WordPress” , or similar.
Maybe you’ve wanted to change the size of an image, change the font color, put a background color, add space between elements… but you have no idea how to edit CSS on your website.
Yes, there are themes that allow you to customize many aspects of your website, like Divi for example, but there is always something that escapes the theme customizations and that you would like to modify, but you find that you have to touch the CSS code .
And, of course, there are also many themes that do not have many customization options, and if you want to change a style at least, you have to do it through CSS yes or yes.
And you, who find CSS code just as understandable as Mandarin Chinese, are left with a silly face because you can’t leave your website to your liking because of this.
Well, today I come to bring you the best solutions for all those who want to modify any style of their website without having a clue. I am going to tell you about the CSS Hero plugin , a tool with which you can modify any style of your website without touching a single line of code.
CSS Hero, the best plugin to modify CSS in WordPress
CSS Hero is a good and practical plugin that allows you to modify any style of your website made with WordPress, in a very visual and simple way.
You can change fonts, colors, margins and padding, borders, lists, sizes, button styles, add shadows, filters to images, dividers to sections, icons, mouseover effects, page load effects, etc. etc.
Come on, it comes with a very complete set of style options that you can assign to any element of your website.
As if that were not enough, you can modify these styles for different sizes of devices : for computers, for tablets and for mobiles, both vertically and horizontally.
Another advantage of CSS Hero is that you can choose whether to modify an element for the entire web, only for the page you are editing, or only for the element you have selected.
So that you understand the latter better, I am going to give you an example.
Imagine that you select the title of a page. By default, when you modify the CSS of the page title, you edit it for all the pages of the web. That is, the changes you make in that title will apply to all the titles on the web.
But, if on the contrary, you only want to modify that title of that page, you can do it without affecting the rest of the titles. And the same in the event that you only want to modify it throughout that page that you are editing.
How CSS Hero works
Once CSS Hero is installed and activated on your website, you only have to go to the page you want to edit (if what you want to edit is a structural element of the website, such as the header, menu, logo, etc., it is enough to go to any page) and click on the “CSS HERO” button that appears on the top bar of the web.
As you move the mouse over each of the web elements, a box appears that delimits the area of the elements.
In the left column, all the style options that you can modify appear. If you have used Elementor , the look and feel will be familiar to you.
Let’s imagine that I want to change the CSS of the title of each post on the blog page. I would click on the title that appears in the screenshot, and select “Typography” in the CSS Hero options.
As I am modifying the styles, I am seeing live how the title changes on the page. If you look at the bottom left, a code editor appears with the CSS code that will be generated once you publish the changes you make.
Although you are editing the styles visually, what the plugin does is generate the necessary CSS so that those styles are reflected on the web.
In the same way that I have changed the font, I could add a background, margins, shadows, and the long etcetera that CSS Hero allows. I could explain each of the options it has, but the post would be endless, and it is better that you try it yourself from here so you can see all its possibilities.
At the top, there is a sidebar from which you can select the device size you want to make changes for.
In this way, you can assign some styles for computer, and other different styles for mobile, for example. This is ideal for adapting the sizes of the elements and getting a good design for smartphones.
Before and after example with CSS Hero
To give you an example of what CSS Hero can be useful for , I’ve put together a quick example of a style change for the WooCommerce “Cart” page.
Many themes allow some customization for the display of the products and for the product page, but almost none let you customize each and every style of the WooCommerce elements.
With this plugin, you can do amazing things in a matter of a few minutes and a few clicks. As an example, I show you how I have modified the cart in five minutes.
This would be the starting point, as it comes by default with the theme:
CSS Hero Pricing
Surely you were wondering, and yes, CSS Hero is a paid plugin . It would be rare for such a complete plugin to be free, but the good thing is that it has a very affordable price for any pocket.
As usual, it has several price plans, so depending on your needs, it will be convenient for you to buy one or the other.
It is worth mentioning that this plugin cannot be used without having the active license , so it is not worth buying the license for one website and installing it on several. If you need to use it on several websites, you will have to buy a multisite license.
These are the prices:
- Starter : $29 per year for one site.
- Personal : $59 per year for five sites.
- Pro : $199 per year for 999 sites.
- Lifetime Pro : $599 one-time payment for 999 sites.
[…] Also Read: How to customize your WordPress website without knowing CSS […]