- 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)