{"id":3058,"date":"2021-06-23T08:31:14","date_gmt":"2021-06-23T08:31:14","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3058"},"modified":"2023-02-21T10:44:02","modified_gmt":"2023-02-21T10:44:02","slug":"how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/","title":{"rendered":"How to Use the Icon Box Widget on Elementor Page Builder Plugin"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3058\" class=\"elementor elementor-3058\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-246df492 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"246df492\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-88d17f3\" data-id=\"88d17f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b63244d elementor-widget elementor-widget-video\" data-id=\"b63244d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=VoMGDZ3Txpc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-71c1fb24 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"71c1fb24\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3991ba5a\" data-id=\"3991ba5a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5b2e60eb elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5b2e60eb\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1521\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1521\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1522\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1522\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1521\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1521\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1521\" tabindex=\"0\" hidden=\"false\"><p>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. <\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1522\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1522\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1522\" tabindex=\"0\" hidden=\"hidden\"><p>hey again youtubers this is Noah from<br \/>Elementor have you ever wanted to<br \/>creatively display an icon along with a<br \/>heading and caption well today I&#8217;ll show<br \/>you how with the icon box widget so<br \/>first I&#8217;ll search for the widget and<br \/>drag it in and once it&#8217;s dragged into<br \/>place you will see the content and style<br \/>tabs in the content area you have full<br \/>control over the widgets content here<br \/>you have view where you could set the<br \/>view of the icon as default stacked or<br \/>framed stacked is with a background and<br \/>framed is with a frame surrounding the<br \/>icon next you could choose an icon here<br \/>you have a list from the fun awesome<br \/>website it&#8217;s a rather long list and you<br \/>could choose whichever icon you want<br \/>then you have the title and description<br \/>where you could insert the title and<br \/>description that will go along with your<br \/>icon<br \/>you could also insert a link and you<br \/>have an option to open the link in a new<br \/>tab by clicking here next you have the<br \/>icon position where you could set the<br \/>position of the icon on the Left top or<br \/>right and you have the title HTML tag<br \/>where you could choose the titles tag as<br \/>heading div span or paragraph moving on<br \/>to the style tab here you have full<br \/>control over the styles of the widgets<br \/>icon I can hover and contents in the<br \/>icon style options you have the primary<br \/>color which note that if you choose a<br \/>stacked or frames icon then you will<br \/>also have a secondary color so here for<br \/>the primary color you could choose the<br \/>color of the icon say pink and you have<br \/>the icon spacing where you could choose<br \/>a space between the icon and the<br \/>contents you have the icon size which as<br \/>it sounds is the size of the icon and<br \/>you have icon rotate where you could<br \/>completely rotate the icon<br \/>next we have the icon over style options<br \/>where you could choose the primary color<br \/>for the hover for instance if I set it<br \/>as pink so you can see it turns to pink<br \/>and I have the animation for the icon<br \/>offer I could choose from this long list<br \/>of animations such as shrink or pop see<br \/>that next we&#8217;ll move on to the contents<br \/>style options here I have the alignment<br \/>as left center right or justified now<br \/>note that the alignment is also for the<br \/>icon and not only for the contents then<br \/>I have the vertical alignment as top<br \/>middle or bottom next I have the style<br \/>options for the title and the district<br \/>and the description of the contents so<br \/>first I have the title spacing where I<br \/>could set the space between the title<br \/>and the description and I have the title<br \/>color of the title and typography which<br \/>I could choose as default or customize<br \/>it where it opens many options for<br \/>typography such as size to choose the<br \/>size of the title family wait transform<br \/>style line height and letter spacing<br \/>all right next add the description style<br \/>options here I have the description<br \/>color where I could choose the color and<br \/>typography same as the options that we<br \/>had for the title now I&#8217;ll show you a<br \/>few features that will emphasize how<br \/>cool this widget is as you can see this<br \/>icon box its icon is displayed as<br \/>stacked meaning it has the backgrounds<br \/>now to give this neat inner space<br \/>between the icon and the edge of the<br \/>backgrounds I headed over to the style<br \/>tab the icon style options and icon size<br \/>an icon padding so you see as I change<br \/>the icon size and its padding it gives a<br \/>really neat space between the two of<br \/>them next I&#8217;ll show you this icon box<br \/>which is also a stacked icon meaning<br \/>with a background however note how its<br \/>border the icons border is a bit rounded<br \/>here I shaped it as a square I&#8217;ll show<br \/>you<br \/>you see it&#8217;s shaped as a square and then<br \/>it went over to the style tab icon style<br \/>options and in the border radius I set<br \/>it as 6 say if I give it 50 it&#8217;s<br \/>completely rounded or 10 so I give it 6<br \/>and now that we&#8217;re already talking about<br \/>this layout for the icon box witih<br \/>now I&#8217;ll show you the vertical alignment<br \/>feature that we went over before in the<br \/>content style options so we head over to<br \/>the cons and style options over here<br \/>and here as you can see we have the<br \/>vertical alignment feature and now watch<br \/>what it does when I choose middle or<br \/>bottom or top<br \/>so then I could do this set it as middle<br \/>alignment then head over to the icon<br \/>style options up here set the icon<br \/>spacing a bit say 35 and give it an icon<br \/>size see 65 see that alright so with<br \/>this widget you could add many<br \/>interesting icon boxes to your page<br \/>without too many adjustments I hope you<br \/>enjoyed this video for more videos and<br \/>tutorials subscribe our youtube channel<br \/>or visit us at Doc&#8217;s element or com<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview 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. Transcript hey again youtubers this is Noah from Elementor have you ever wanted to creatively display an icon along [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3386,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Icon Box Widget on Elementor Page Builder Plugin - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Icon Box Widget on Elementor Page Builder Plugin - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview 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. Transcript hey again youtubers this is Noah from Elementor have you ever wanted to creatively display an icon along [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:31:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:44:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Icon Box Widget on Elementor Page Builder Plugin - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Icon Box Widget on Elementor Page Builder Plugin - Academy","og_description":"Overview Transcript Overview 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. Transcript hey again youtubers this is Noah from Elementor have you ever wanted to creatively display an icon along [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:31:14+00:00","article_modified_time":"2023-02-21T10:44:02+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Icon Box Widget on Elementor Page Builder Plugin","datePublished":"2021-06-23T08:31:14+00:00","dateModified":"2023-02-21T10:44:02+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/"},"wordCount":939,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/","name":"How to Use the Icon Box Widget on Elementor Page Builder Plugin - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg","datePublished":"2021-06-23T08:31:14+00:00","dateModified":"2023-02-21T10:44:02+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Icon-Box-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-icon-box-widget-on-elementor-page-builder-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Icon Box Widget on Elementor Page Builder Plugin"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3058"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3058\/revisions"}],"predecessor-version":[{"id":9387,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3058\/revisions\/9387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3386"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}