(bright upbeat music)
- All right, y'all get ready to learn
how to drop in an image into your WordPress menu.
See my example here?
I've got the standard menu with a dropdown option here
and then there's a really cool image that you can have
and it can be linked or not linked.
I'll show you another quick example
where I brought in some of their branding
into the menu there.
So you've got all the menu items
and then a really cool little branding piece
or element into that menu.
I'm gonna show you how to do that all in the budget of free
and you don't even have to really know nerd code.
I'll show you exactly what you can copy and paste
to drop in your image.
I'll also show you some premium options if you want
that I would recommend if you need to go really advanced
with column structure and all that kind of extra style.
But for the sake of right now,
I will show you how to get this done.
Welcome to my YouTube channel.
Every single Wednesday I'm right here
helping you improve your online marketing
inside the world of WordPress.
So please be sure to click like and subscribe,
come back here with me every single Wednesday and hang out,
and learn how to improve your WordPress website.
All right, let's get to the tutorial.
So first things first
after you've logged into your WordPress website,
you'll wanna be certain
that the image that you're trying to use,
whether it's an icon or whether it's a logo,
or whatever you'd like to add into that menu
is already uploaded to your media library.
So once you drop it in here,
you'll wanna copy the URL onto your clipboard.
And the example that I showed you was using this logo.
So I'm gonna go down here and copy the URL to my clipboard.
Now that I've got that copy to my clipboard,
I'm gonna exit out of that screen.
I'm gonna go into Appearance and Menus.
And if your theme has multiple menus,
you might want to navigate to the correct one.
I'm working on my main primary menu
and I want to add this into my Learn dropdown options here.
So I want it to live just below this
in my dropdown navigation.
So I'm gonna go over here to Custom Links.
If by some chance you do not see this option over here,
I want you to come up to the very top
of your WordPress website,
go right up here in the corner to Screen Options,
open up that little drawer,
and be certain that Custom Links lives here, okay?
You wanna be certain that box is checked.
And then we're gonna close that little drawer up
and now it should live right here in your options.
Open up that little drawer.
If you want the image to be linked somewhere,
you can drop in the URL right here.
So I'm gonna say
press happy, all right.
Now, instead of dropping in text to link,
we're going to paste in our URL for our image.
But first I need you to do an angle bracket
and then type in img space src=,
open quotes,
and then paste in your URL
that you have on your clipboard, right?
So Ctrl + V or Command + V.
And then we're going to do end quotes and end angle bracket.
Now, if you're wondering, "Wait, wait, wait, Kori.
I thought you said no code,"
I've got a link in the description box below,
below this video,
that'll help you get the exact code
that you can just copy and paste in.
We're gonna click Add to Menu.
And by default WordPress always puts that
at the very bottom.
And of course, it looks a little odd right now,
but no worries.
We're gonna drag it up to where we want it to live,
drop it in there, and click Save Menu.
And now we're gonna go back to the front side of our website
and click refresh
and check out underneath Learn.
There's our nice little logo.
Let's click on it
and be certain that it functions correctly.
And yep, it jumped right over into the website
that I wanted it to point to.
So that's how you drop in an image totally for free
into your WordPress website.
What if maybe you wanted an icon
comparable to this little example that I was showing here?
What if you want an icon next to the actual text?
So let me show you how to do that,
again, in the budget of free.
All right, to create that example in the budget of free,
we're going to use a free plugin.
So you'll go to Plugins and say Add New.
And we wanna search for font.
Awesome.
Here it is right here.
And we'll go ahead and click Install Now
and we will click Activate.
Of course, you always wanna be certain
that you're running backups of your website
in case anything goes wonky or weird
while you're building this out,
especially if you're working on a live site.
Now that that's inside here,
we can actually call those icons
to appear anywhere we want in the website.
I'll put a link over to this website
where you can see all the different free icons
that you can use.
For the sake of this tutorial,
I'm going to use a little arrow icon.
I think I wanna use this one.
So I'm gonna copy this little i,
which stands for icon, class.
I'm gonna copy that just by clicking it once
and it copies it onto my clipboard.
Now I'm gonna go back over to my WordPress website.
Let's go back to my menu area.
And now we're gonna use again that Custom Links area.
We are going to add in the URL
of wherever we want it to go, right?
So,
there you go.
And now we're going to pace in that little bit of code
that we had on our clipboard.
We're gonna add a space
and we're gonna say
whatever we want the text to appear next to it
and click Add to Menu.
Now it's gonna look a little funky again.
No worries.
Let's drag it up.
I'm gonna drop it ahead of my logo from earlier
and click Save Menu.
Let's go back to the front side of our website.
I'm gonna go ahead and click refresh.
And now under Learn,
you're gonna see a nice little icon next to Press Happy.
And of course, you can add that to all of these options
that you'd like.
If you already have options that are living here,
most of these are gonna be actual pages
or posts or categories.
So you'd have to have this as a manual process
if you wanted to stay in that budget of free.
There's also this budget that you can work with.
This falls in the budget of free, Max Mega Menu.
As of today,
it has 400,000 plus active installs.
And I always tell you to double check that
and be certain that it's got really great reviews, right?
We always wanna be certain
that it has really strong reviews.
Everybody's liking it, it's working well,
and then you can test it on your WordPress website.
But this is a really cool tool
if you wanna get advanced
and maybe add in some column structure to your Mega Menu.
Of course, if you're running on Divi,
I highly recommend Divi Life and their Mega Menu Pro.
This thing is just a beast
and it really gives you some cool ideas
on how to build out some really dynamic menus.
They've even got the option
of doing these really cool little tabs inside of here,
adding in a photo, adding in extra text.
Look at that.
You've got a whole popup that happens
all inside of your menu.
And of course, that's running on the Divi WordPress theme.
(bright upbeat music)
All right y'all, I know those were a lot of cool options,
but you can always rewind the video, press pause,
and check it out, slow it down, step by step.
Be sure to click the link in the description box below
so that you can get over to my website and copy that code.
You don't have to write any nerd code yourself.
I hope this has been helpful for you.
If you like this video,
would you consider subscribing to my YouTube channel?
Come back here every single Wednesday and hang out with me.
I'm helping you improve your online marketing
inside the world of WordPress.
I'll see you next week y'all.
Bye-bye.
(gentle music)