The Icon Box widget is a great way to add icon boxes to your WordPress pages. In this video, we show exactly how to add this widget, using the free Elementor page builder.
hey again youtubers this is Noah from
Elementor have you ever wanted to
creatively display an icon along with a
heading and caption well today I’ll show
you how with the icon box widget so
first I’ll search for the widget and
drag it in and once it’s dragged into
place you will see the content and style
tabs in the content area you have full
control over the widgets content here
you have view where you could set the
view of the icon as default stacked or
framed stacked is with a background and
framed is with a frame surrounding the
icon next you could choose an icon here
you have a list from the fun awesome
website it’s a rather long list and you
could choose whichever icon you want
then you have the title and description
where you could insert the title and
description that will go along with your
icon
you could also insert a link and you
have an option to open the link in a new
tab by clicking here next you have the
icon position where you could set the
position of the icon on the Left top or
right and you have the title HTML tag
where you could choose the titles tag as
heading div span or paragraph moving on
to the style tab here you have full
control over the styles of the widgets
icon I can hover and contents in the
icon style options you have the primary
color which note that if you choose a
stacked or frames icon then you will
also have a secondary color so here for
the primary color you could choose the
color of the icon say pink and you have
the icon spacing where you could choose
a space between the icon and the
contents you have the icon size which as
it sounds is the size of the icon and
you have icon rotate where you could
completely rotate the icon
next we have the icon over style options
where you could choose the primary color
for the hover for instance if I set it
as pink so you can see it turns to pink
and I have the animation for the icon
offer I could choose from this long list
of animations such as shrink or pop see
that next we’ll move on to the contents
style options here I have the alignment
as left center right or justified now
note that the alignment is also for the
icon and not only for the contents then
I have the vertical alignment as top
middle or bottom next I have the style
options for the title and the district
and the description of the contents so
first I have the title spacing where I
could set the space between the title
and the description and I have the title
color of the title and typography which
I could choose as default or customize
it where it opens many options for
typography such as size to choose the
size of the title family wait transform
style line height and letter spacing
all right next add the description style
options here I have the description
color where I could choose the color and
typography same as the options that we
had for the title now I’ll show you a
few features that will emphasize how
cool this widget is as you can see this
icon box its icon is displayed as
stacked meaning it has the backgrounds
now to give this neat inner space
between the icon and the edge of the
backgrounds I headed over to the style
tab the icon style options and icon size
an icon padding so you see as I change
the icon size and its padding it gives a
really neat space between the two of
them next I’ll show you this icon box
which is also a stacked icon meaning
with a background however note how its
border the icons border is a bit rounded
here I shaped it as a square I’ll show
you
you see it’s shaped as a square and then
it went over to the style tab icon style
options and in the border radius I set
it as 6 say if I give it 50 it’s
completely rounded or 10 so I give it 6
and now that we’re already talking about
this layout for the icon box witih
now I’ll show you the vertical alignment
feature that we went over before in the
content style options so we head over to
the cons and style options over here
and here as you can see we have the
vertical alignment feature and now watch
what it does when I choose middle or
bottom or top
so then I could do this set it as middle
alignment then head over to the icon
style options up here set the icon
spacing a bit say 35 and give it an icon
size see 65 see that alright so with
this widget you could add many
interesting icon boxes to your page
without too many adjustments I hope you
enjoyed this video for more videos and
tutorials subscribe our youtube channel
or visit us at Doc’s element or com
