Up next in 10
How to Add Images & Icons On Navigation Menus in WordPress For Free
4K views
Oct 31, 2023
In this informative video tutorial, you'll learn how to enhance your WordPress website's navigation menus by adding images and icons completely for free. Visual elements in navigation can significantly improve user experience and site aesthetics. Whether you're a web designer, site administrator, or simply looking to spruce up your WordPress site, this step-by-step guide will show you how to integrate images and icons seamlessly into your menu items, helping you create a more engaging and visually appealing website without any additional cost. Don't miss out on this valuable resource for elevating your WordPress site's navigation to the next level.
View Video Transcript
0:00
What's up guys here is Claudio from Visual Model WordPress themes and in today's video
0:04
gonna learn how to apply icons into our navigation menus or sub menus into our
0:09
WordPress website for free okay so before I can continue please take a
0:14
moment to hit the subscribe button like this video and share this content with a friend of yours you have no idea how much it help us because you bring daily
0:21
videos about WordPress SEO plugins optimizations and many more topics in order to use internet on your sites favor so let's get this started first of
0:29
all, please go to our WordPress dashboard. But before we can continue, let's understand
0:36
why icons are important for your navigation menus. Do you know amazon.com site nav menu
0:45
Can you see that the cart icon have the cart menu have the cart icon? So this is to grab
0:53
users attention to reduce the bounce rate, to drive the directions on your menus
0:59
For example, imagine this website menu, for example, as you can see, we have a blog right here
1:07
But what if we have an account menu right here? Would not be good to have the account icon next to it or only the icon instead of the
1:15
menu linking to the account. This is possible if you have a shop right here, the cart icon, the shopping icon, for
1:25
example, there is a lot of cases or even in submenus you can apply icons to make it easier
1:31
to identify, to understand and to make it more designer friendly, for example
1:37
So let's get this started now. Go to our WordPress dashboard, review the left sidebar of menus over our mouse over
1:43
plugins and click on add new into the upper right corner next to the field called keyword search
1:51
plugins we're gonna type menu image and why menu image because we can apply images instead of only
2:00
icons next to our menus i'm gonna show this later so no need to worry in my case it's click to
2:05
activate but in yours gonna be install okay install now click on install now and after this click on
2:10
activate This is going to redirects you to the page where the plugin asks you to collect the data you can alloy or skip it up to you and then the plugin gonna redirects you to this page this is the
2:29
setting page okay and what we can do we can change the menu image hover enable the image on hover
2:39
field it's possible okay keep it enabled so we can test now first menu image size we can change the
2:46
size of the menus okay icons or image second menu image size third menu image size okay
2:55
you can change this in the way that you want after this just make sure you click on save change
3:00
and if you do not do change nothing to do right here but now if you go to your wordpress dashboard
3:07
appearance and click on menus. If you hover your mouse over any menu eating right here
3:16
this is my primary menu, as you can see. OK, the menu that is present into this navigation at the top of the site
3:23
So if I hover my mouse over the home menu, I can see the menu image
3:29
link right here. Click on it. This is going to open this field that I can apply the icon
3:36
into the position that I want for example the below before after I prefer
3:43
the icons after okay and then I can choose the icons we have the dash icons
3:50
and the font awesome but to use font awesome icons we must install another
3:54
plugin so let's give this to another tutorial okay let's let me find I an
4:00
icon that reflects my home page okay that have some relation to home page
4:06
maybe a house icon or a home icon as you can see there is a lot of icons right here so you can choose from
4:22
Let me use this one as an example okay And click on save change This is all you have to do But this will not save the menu so click on save chance save menu once again yes to make sure now as you
4:44
can check we have a home menu and a home icon right here next to it okay does it
4:51
work in sub menus let me apply for example the cart under the home page for
4:57
example yes it works on the sub menus in the case that I need you can apply icons right here
5:04
if I click into this arrow it opens the cart and add image or icon this is gonna load the same
5:13
panel okay an important note okay if I add a new eating to my menu I must save the menu before
5:21
trying to add the icons okay so click on menu image now we can choose an image
5:29
okay we can select the image or set an image for hover we can select the image
5:33
size okay or icon okay let me choose something save chains let's save the menu just to make sure
5:55
and as you can see we have an icon on our submenu simple easy and fast but imagine the following
6:08
scenario instead of this cart icon you have for example an account page let me try to find my
6:17
account page from WooCommerce for example so my account let me add this to
6:24
the to the menu let me save the menu now I'm gonna be adding an icon to my
6:37
account page let me show this into the website navigation here is the my
6:42
account page next to the search icon now I gonna apply an icon to my new account
6:59
I think this one is good for this example. Now instead of letting this to be after my account, I'm going to set to hide, but let's
7:14
review what happens if we hide let me save the menu and let's do the chest can
7:25
you see there is no longer my account text into my menu dashboard whoever if I
7:32
take into this bottom right here I'm gonna be redirected to the account page
7:37
simple right so you can turn the icon into a clickable thing to any page that
7:43
want this is very useful in a lot of cases and a lot of sites so it's a hidden and good feature
7:50
and it is i hope you guys enjoyed this video feel free to use the comment section below in the case
7:55
that you have any question and don't forget to check out the visualmoto.com portfolio of amazing
8:00
wordpress team or borderless wordpress plugin in order to gain widgets elements templates and tools
8:05
to build your site up using elementor or block editor and even prep build up sites that you can
8:10
import with a single click and our in zoo WordPress team that is the best free
8:15
WordPress team that you can download to install this or borderless for example
8:19
for free you can go directly to our WordPress dashboard appearance teams and
8:24
new search for in zoo click on install and activate it same for borders but on
8:29
plugins add new okay and in the case that our needs of your website up and
8:34
running faster or full support premium icon libraries premium template library unlock access to our premium blocks design elements and many more pro features go to visual
8:47
model.com purchase a visual model pass that includes borderless pro and enzo pro licenses
8:52
and go premium and it is i hope you guys enjoyed this video and i see you tomorrow all the best
#Skins
# Themes & Wallpapers