Get ready to learn from Kori Ashton all about a WordPress plugin that writes CSS for you! Stop stressing about learning to write code. This plugin even gives you access to change mobile CSS/spacing.
Get CSS Hero (affiliate link) – https://www.csshero.org/?rid=21874
Thanks for using that one 🙂
Full Written Tutorial
Hey y’all, it’s that time again, another WordPress Wednesday. My name is Kori Ashton and this is sponsored by Pressable, all things WordPress. These guys know hosting, they know support, they know security, they know how to optimize your website. You’ve gotta check them out if you’re looking for an all-in-one type of solution for your hosting environment for your WordPress website. It is Pressable. I’ll put a link to them in the description box below. Be sure to tell them that Kori Ashton sent you their way. They have phenomenal prices, too, check them out.
Well you guys, you’re obviously looking for a solution to help you write CSS inside of your website. Or maybe you’re looking for a solution that’s more like a drag and drop environment. Well, I’m about to blow your mind with this really cool solution called CSS Hero. I’m so excited about it because it truly is kind of that what-you-see-is-what-you-get page builder environment. You go to the front side of your website and everything can drag and drop, resize easily, it writes all of the code for you, you don’t have to know any CSS or HTML, you don’t have to inspect elements, you don’t have to figure out what the author named the DIV class.
This is all done with one simple plugin and get this, you guys, get this, it also writes the code for responsive mobile devices, depending upon what device. You can shrink the screen down with one click and adjust all your positioning, and it will write the media queries for that mobile device. Oh, it’s so cool! All right, if you’d like to see how this works, stick around, I’m gonna show you right now.
Sign Up
So what you’ll do is come over here to CSSHero.org. I’ll put the link, of course, in the description box below so you can get to it easily and quickly. And you’re just gonna choose Get it now. That’s all you’re gonna do here. And basically, you’re just gonna choose the plan that’s right for you. So if you only need one site, then $19 a year is your fee. If you need five sites, 999 sites, if you’re a developer this is a phenomenal, phenomenal value for you. But remember, these are per year, so you’ll probably have to repurchase or at least renew your license. And also remember that these prices might go away. This is showing a sale right now, so they might jump back up so act quickly on this, as of today these are the prices right now.
Click Sign up and buy. When you do that, you’re gonna fill out all your information here, accept the terms, and proceed and choose a plan. That’s where here, you’ll go over, choose your plan, pay with PayPal, and you’re off and running.
Upload the Plugin
So that’s easy to do. Once you actually have your account, you’re gonna come in here and you’ll have your dashboard now, it’ll open it up in here. And then you’ll come over here to the right side, click download, and it’s gonna download to your downloads folder more than likely if that’s where you have it set. And this is the exact zip folder that you’ll need to go install in your WordPress website.
So now that you have that, you’re gonna come back over into your plugins area on your website. You’re gonna click Add new, of course. And you’re gonna upload the plugin. Because it’s a premium plugin you purchased the license for it, that’s the route you have to go. So we’re gonna choose file, and of course, this is gonna live in our downloads area, right? So we go to our downloads area. And you wanna be sure that you’re clicking on the zipped file, you do not have to open that up, this is the exact file, the one you downloaded is the one you need to upload and install. And we’re gonna click Activate plugin. Super exciting!
Go Get Your Key
So now the next step is to go get your key. So you’ve gotta do that, you’re gonna click on that. It’s gonna bounce you over back to your dashboard at CSS Hero, you’re gonna grab your key, and get moving! So let’s go do that. Get my key now. Here is your license. Click key. Click there. Get license. Got it, let’s go. Love it. It’s activated, that’s it. I didn’t have to copy and paste anything, I didn’t have to jump through any hoops. It is ready for me to engage. So I’m gonna go back to the front side of my website, click refresh, and now I can come up here and say Click with CSS Hero. Let me zoom in just a little bit so you can kinda see what’s going on.
Time to Tinker
I’m gonna click Customize with CSS Hero. And now it’s gonna give me my panel. And this still keeps me on the front side of my website, so I can do anything I want to do. I’m gonna click here, I wanna increase that font just a little bit. I’m gonna go to typography over here on the left side, and these are all of my different options.
The color, the font family, the weight of the font, which is the boldness, how big you want the boldness to be. So I’m gonna just go ahead and move this, really large so you can kinda see me playing around in it. I like it. The line height you can adjust. If you want it in all caps you can do that. Or, actually, this is the first letter being all caps, that’s upper case there. So super cool options, you can click through all of these and just kind of tinker around and play. When you’re done with that area, you’re moving on to the next area.
If you wanted to change the color of something, you can do that as well, going into the typography, completely changing the color. Notice that I’m not having to do anything other than tinker and play. I’m not writing any code at all. And it’s all giving it to me in real time. You know what’s interesting about this, you guys, is you could actually use this tool to actually learn CSS, basically, is what you could do. Because, see, it’s writing it all here for you, it’s revealing to you what it’s doing. And it’s so super cool that it would give you that.
The other thing that’s really just incredible and very generous of these guys to throw in here for us, is the different editing modes. So up here in the right-hand corner of your screen, you can choose the different device that you wanna tinker around and play with on this spacing. So this is where I was talking to you earlier about seeing on a mobile device, I can click that. And if this home is gonna be just way too large on that screen, well, let’s go ahead and shrink it back down to a size that seems right on a smaller screen. So something like that seems doable. But what’s cool is, if I were to go back to my all devices mode, it’s still really large there.
What they’re doing for me, is they’re writing the code for a mobile query, to show that on a mobile device, be sure to make this a smaller font size. You can adjust padding and everything like that. They have all sorts of different views, too. Landscape and portrait, for iPads or tablet size.
So really cool options there, these guys kinda go all out for, again, if you’re wanting to adjust background areas. All sorts of cool options here. They’ve go borders that you can put on, so if we wanted to do a border on this particular image, we could do that. Change the border color. And again, I’m just not having to write any CSS whatsoever. There are all sorts of cool options. One of the other areas that’s a little bit tricky to change on a website sometimes is the widget boxes because those are really kind of hidden down into the CSS code. It’s really tricky to figure out what an author named these different things. But not with this plugin. Again, I’m just gonna click on the widget title over here. I’m gonna go into typography, and I want to adjust, again, the size of that. And of course, now, this is affecting my Title 3, if you look over here in the CSS. It’s gonna affect all of my different widget boxes that are named the same Title 3. Right? But that helps because then I don’t have to do it in every single box. It makes it super easy, user-friendly.
Testing Compatibility
So here’s the other exciting thing. What if you’re wondering, well, will it work with my theme? Well, on their website, they have theme demos over here. This was them just really stepping up their game, showing you, you can basically do a search for your theme and see if they have it in here. Typically, I use Divi. So I can come in here and tinker around and try to see if their solution is compatible with the Divi theme or even the Divi builder. And it completely is. You can see that you can come in here and make all the changes that you would normally make to the theme here, just there. It works completely perfectly. Ah, just so super cool. What a cool solution for this. You would click save and publish, and of course, it goes live, your website. So come here and do a search for the different themes.
If you’re wondering, well, I’m already using a specific plugin. Maybe you’re already using Beaver Builder, maybe you’re using WooCommerce, and you’re trying to figure out, well, will it work with Elementor. You guys, they have free demos here for you to tinker around with and see. They tell you the compatibility is 100%, 99%. So they’re being very transparent with what it already works with, with what they’ve already tested. Really, really exciting stuff. I wanna show you one that I think is very impressive.
Now, this is 90% compatible as of today, as of this video. But Gravity Forms is a premium plugin that I brag about a lot, I have a really extensive playlist here on my youtube channel. You guys, it is very difficult to customize Gravity Forms. But not anymore. Look at this. It’s gonna let me adjust every single field. I mean, it’s totally frustrating to want to hide the little-required field and not be able to. But if you click on it, come over here into Extra, and go to Hidden, it can hide. If you wanna hide those darn little labels that you can’t hide any more out of the box, I’m gonna hide them. It’s just one simple click and they’re helping you write all the code to do this. That just gets me super, super excited.
Let’s look at the different spacing and padding around. It’s gonna let you tinker and play with all of that. If you wanna change your font, you can do that. If you wanna change the background of the whole section, you can do that. So easily, so quickly. And of course, there’s a bunch of other plugins that you can come over here and check out. They have it also for Contact Form 7. Just some really cool, cool compatibility features here with CSS Hero.
Giveaway
Well, what do y’all think? Would you use something like this on your WordPress website? I tell you what. I’m gonna give away five licenses. They’re all gonna have one year of one website each. They’ve given me five licenses to give out. So over the next two days, if you comment on this video right now, I’m gonna select randomly five winners that are gonna get a license sent to them to use on their WordPress website.
Be sure that you’re using the WordPress.org version so that you can install this plugin, because it is a premium plugin that you have to install. But I’m excited to give this away. I hope you’re having a great one. Be sure to subscribe so you don’t ever miss any opportunities to get free stuff and learn all about WordPress. I’ll see you next week. Bye y’all.
