A WordPress Plugin that Writes CSS for You 😍😃
Articles Blog

A WordPress Plugin that Writes CSS for You 😍😃

August 17, 2019


– 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 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. (light music) (bell rings)

Only registered users can comment.

  1. Ualll this is amazing and it will certainly help those users who do not know CSS just like me .. thanks a lot for your tutorials.

  2. Hi mam,
    I am Mansoor how are you,
    Mam i am wordpress user and for now i am using elemeter plugin for my design customization.
    I love the CSS Hero and it's live code showing.
    Please select me for this ., I need this very hardly please

  3. Hi Kori, I am absolutely loving your video's. I nearly purchased Divi but now I would also like to try CSS Hero…

  4. Hi Kori, again very instructive (and enrolling!). I used CSS Hero some time ago but stopped. The interface was too complicated. It seems to me they have redesigned it completely! What if you change themes? I believe all your codes go away too, is that correct? It looks an amazing plugin anyway.

  5. Thanks Kori. This is very helpful and great to know it works with divi and the themepunch plugins. Would love to try this out!

  6. Hey Kori awesome video as always. I have used CSS hero for awhile. I am using Divi for a site right now but there are a few tweaks I want to try with CSS hero. How do you handle the legal pages?

  7. Hey Kori, thanks for this vid. I have questions:
    Where all that css is written, on the plugin? can I see all the css written?
    How is the WP process with that plugin?
    Thank u again!

  8. Hi Kori, Love your videos. currently looking to redesign my website in wordpress with gravity plugin and using Hero CSS. Let me know if you already gave away 5 free plugins… Also, are you taking any projects for clients to design/redesign websites?

  9. What if the output is generated by different plugins, or you'd like to modify an element of the theme – I'm skeptical that it would work to update inside another plugin, but what about the elements of a theme? What I'm trying to figure out is how to change the background of the table in the menu of the Twenty Seventeen theme, but not sure if it'll work. Thank you!

Leave a Reply

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