- Hey, y'all.
My name is Korey Ashton
and you have found a YouTube channel
dedicated to all things WordPress.
Hey, this week I'm gonna show you
very easily and quickly how to take a full colored image
and turn it into gray scale.
Maybe you have a whole line of logos
and you would like to bring some uniformity there
by taking them to gray scale.
I'm gonna show you how to do that
without any other tools other than WordPress.
So I'll show you two different ways
of doing it inside of Google Blocks.
I'll show you how to do it inside of the Divi theme.
And I'll also give you the simple code
that you can use anywhere on any theme at any time.
(Bright upbeat music)
Of course, this is brought to you by LearnDash,
y'all when you're ready to get your courses
into your WordPress website
be sure to check out their great resources.
You could be selling your incredible courses today.
Offer certifications, have a step by step process
for folks to learn your incredible content.
I'll put a link in the description box below
so you can go check them out.
All right, let's get to the tutorial.
So again, I'm gonna show you four different examples
of how to actually use the gray scale option.
I'm gonna show you two different versions using blocks
and I will show you third version using Divi Builder.
And then I'll show you this
the straightforward CSS version.
So first things first, I'm gonna take us
to the photo example that I gave you
which is just a straight up image block
living here inside of a page or a post.
This works either way you go,
if you double click on the image,
you're gonna bring up another menu area
see right up here at the top up here,
I want you to click on the little tiny circle, right?
We're looking for the ability to add a filter to this image.
So we wanna apply a filter,
and from here you can choose
multiple different types of filters.
And really we're looking for
this gray scale option right here
clicking on that immediately
takes your image saturation into gray scale.
It is literally that easy.
And of course the other example that I gave you
was really where I use this a lot of times,
if I want a beautiful gallery area set up
maybe of logos like this
where I really want some uniformity
and I don't want a whole collage of different colors
from other brands kind of mixed here on the page,
I really love taking them to that gray scale tone.
So this particular module here
this block is the gallery block,
and I'm gonna go into the actual image itself
once you've highlighted which one, right?
You can highlight whichever image
you're going to try to effect
and you are gonna look for image style.
And again, you're looking for the option over here
to add a filter.
We're gonna choose gray scale and instantly again
without having to take any of these into photoshop
we're going to take that image to gray scale.
This works on PNG files, JPEG files
perfectly and easily right there.
You just click update and you're off to the races.
By the way if you like this
really cool layout that I have here,
this is from the free theme called Kadence.
And I will give that to you in the link below.
This is really cool child theme.
With one click you can get this fantastic E-commerce layout
totally in the budget of free.
Next, we're gonna take a look
at applying this effect inside the Divi Builder.
So I'm gonna enable the builder.
And again, this works on any image
that you've already uploaded to your media library.
You can use it in any module.
Anytime there's an image
you're gonna click on the little gear icon,
open that app go into the design tab, go down to filters,
and then here you're just gonna take that saturation
and take it all the way down.
Let me move this little module out of the way here,
so you can see, there you go.
There's a little guy right there, beautiful gray scale.
Again I'll click reset,
so you can see what that originally was,
there it is in full color.
And then here it is
as I take the saturation out
and take it into that gray scale tone
that simple, click the check box.
And you've got a great, beautiful image.
Of course, that would work on a logo as well.
So let me actually show you what these two different systems
are writing for you behind the scenes.
They're just applying some very basic CSS.
I'm gonna show you that code right now,
in case you're not using blocks
or you're not using the Divi Builder
and you would be able to apply,
this very easy little snippet of code
into your WordPress website.
Again, I'll put this link in the description box below
but this is really all it's applying,
this little item right here
filter gray scale a hundred percent.
And of course you can apply this to a section,
to a row, to an entire page.
This particular CSS is applying it to an image.
So you can just tinker and play around with this.
It's really cool to try it for yourself.
If you click on the button that says, "Try It Yourself".
You can come over here and effect this by checking this out,
go to 50% gray scale and click run,
and then it's a little bit toned down.
You see that there, you take that down
a zero gray scale run,
it's gonna be full color, but that's in the sense
what you're doing
and what those systems are writing for you.
That very quick, easy little piece of CSS.
Ya'll I hope that was helpful for you.
I have nearly 500 videos here on this YouTube channel.
So be sure to click like and subscribe
hang out with me every single week.
If you're interested in learning more about WordPress,
about the Divi theme,
about Search Engine Optimization or social media marketing
I have all sorts of playlists right here for you.
I hope you enjoy and if you have any questions
be sure to gimme a tweet or reach me over on my website.
I'd love to hear from you.
I'll see you next week everyone.
Bye bye.