A WordPress Plugin that Writes CSS for You

– 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 (upbeat music) – 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 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! 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 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 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 beaverbuilder, 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 any more 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 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 WordPressorg 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 (light music) (bell rings)

Free Email Updates
We respect your privacy.

wordpress plugins for gdpr

affiliate marketing