How to Use the Icon Box Widget on Elementor Page Builder Plugin

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 colorfor 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 widith

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