Quick Look at CSS Hero: Modify your WordPress theme CSS without knowing CSS
Articles Blog

Quick Look at CSS Hero: Modify your WordPress theme CSS without knowing CSS

August 9, 2019

Hi! This is Tim from RealWebsiteHints.com
and I just got an email this morning saying the CSSHero plugin is gonna be available for the Divi 2 Theme.
This plugin I found really intriguing when I first learned about it
a few months ago. It’s a frontend editor that allows you to modify the CSS of
your website in real-time without having a know any code, but
it’s compatible with only a specific set of themes and up until this point, it was a really compatible with a theme that I new to be interesting to me. So now its
compatible with the Divi Theme I thought just to sort of give you a quick look
at what it does and how you can use it with the Divi Theme. Lets go ahead and take a look! Alright, so this is the blog page that I created when I did the test of the Divi 2 Theme and I didn’t
really like the way that the Divi 2 Theme puts the image up on top and then your title and there text down
below, because I find that when you scroll down like this, its get a little bit confusing as to where the image goes, so what’s kinda cool is that with my just an initial test just
this afternoon at the CSS hero plugin, here’s the plugin up and
we’re loading it up right now. I was able to actually modify that to take a little bit of messing
around. It does definitely help with to know a little bit of CSS, you don’t have to
know any code to do the modifications in CSS Hero but does help to sort of understand how
CSS works even you don’t know CSS Mine’s will play around them and give it a shot. Just like this little widget here, and that lets you select the
elements. I want to select this image elements, and you just click on it here, so we can
see the name of that right there and click on it here and don’t remember exactly what I did in
my original test, but I think the first thing I did
was I change the size to make it smaller, just bring it down about like there, and then I changed the
float to float:left and there we go. Now we’ve
already instantly got a better-looking blog page
in my opinion. We’ve got the image on one side and then
the title and text on the other side and that
sort of goes along for the whole blog page here I only have two featured images on
this page, but if I had more featured images they’d automatically do that. Okay! So that was pretty neat One of the other things I didn’t like about the Divi 2 Theme was the spacing between some of the smaller sections I made
on the homepage. Okay! So here’s the homepage, one of the things I didn’t like about the styling of the Divi Theme, is that each sections have so much space between, specially when you got small sections like this that you’re trying to keep close together. So once again with the
CSS Hero, I was able to fairly easily fix this. OK! So now lets scroll down here back to where we were This little widget, click on the sections so we
can see the section here is called post 601 section. Click on that. Adjust the
padding, and then we’ll make the bottom padding a
little bit smaller top padding a little bit smaller and then
save that. Another neat thing that I discovered
when I was using this, is that if you make a mistake which I
made a lot of when I usually tried this just this afternoon, you can actually go back really easily.
Here we go we’ve got all the revisions on this page, you could even go back you now, you
know what time it was I thinking can actually preview it here, if you look at, basically you can go back to
any revisions I would still recommend, especially since
I haven’t done a full review of this, and setting a backup program, like iTheme’s backup buddy which I’ve got a video about before you use this plugin, just
because you know still a little bit hesitant to
say that it you know, works great and everything wonderfully, its always good to have some
great backups but being able to modify very easily, some of that problems that I had or some other things
that I didn’t like as much about the Divi Theme, using this
plugin is pretty phenomenal. Just let me know if you’d be interested in a Full Review of the CSS Hero Plugin Its actually really not that
expensive. Its only about thirty dollars if you want to use it on one website right now. So if you want
to give it a try, you can use my affiliate link below
and also if you use my affiliate link you will be able to see, all the
themes that are compatible with it and you can
actually give it a try yourself If you click on the try with CSS Hero, it will actually open up a view of the theme and you can do just what I
was doing without having to buy the theme at all. So that’s pretty neat. So there you go! Just a
quick look at the CSS Hero Plugin.

Only registered users can comment.

  1. This is a good one but it changes the main css . Better thing to do is work on a child css

  2. Looks good man. Is that posible to use it for a website, when you done, delete it and use it for third party? without damage the first website you made with  css-hero?

  3. Iam a bit unsure about you saying you couldnt control the spacing on some elements using Divi – Ive just been watching a designer explaining and showing how she now has complete control over spacing elements because of the update divi has add in its features. Is this video aimed at the latest Divi. Im looking at the price of CSS Hero plugin and thats not a cost I want to add to be honest.

Leave a Reply

Your email address will not be published. Required fields are marked *