{"id":3065,"date":"2021-06-23T08:51:43","date_gmt":"2021-06-23T08:51:43","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3065"},"modified":"2023-04-23T12:07:23","modified_gmt":"2023-04-23T12:07:23","slug":"how-to-use-the-progress-bar-widget-on-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/","title":{"rendered":"How to Use the Progress Bar Widget on Elementor Page Builder"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3065\" class=\"elementor elementor-3065\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b0da9a2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b0da9a2\" 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-168412a8\" data-id=\"168412a8\" 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-605247f7 elementor-widget elementor-widget-video\" data-id=\"605247f7\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=PFGpPDIUK3k&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-4bab754a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4bab754a\" 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-933ca9d\" data-id=\"933ca9d\" 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-3b9ccf8e elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"3b9ccf8e\" 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-1001\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1001\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1002\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1002\" 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-1001\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1001\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1001\" tabindex=\"0\" hidden=\"false\"><p>Display your progress or skills and add a beautiful progress bar to any WordPress website using 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-1002\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1002\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1002\" tabindex=\"0\" hidden=\"hidden\"><p>hey guys this is Noah from Elementor<br \/>today I&#8217;ll teach you about our progress<br \/>bar widget with which you could display<br \/>your progress or skills any creative and<br \/>colorful way check it out for this<br \/>resume I added for progress bars each<br \/>with its own colors and amount by<br \/>percentage with its sliding animation it<br \/>automatically adds an interesting touch<br \/>to the page now I&#8217;ll show you how to add<br \/>it by clicking on the edit with element<br \/>button okay so here as you can see I<br \/>already have three progress bars and I<br \/>would like to add a fourth one for the<br \/>visual design skills and set its color<br \/>as the light blue so first I&#8217;m going to<br \/>search for the widget here we go I&#8217;ll<br \/>drag it on top of there so once the<br \/>widgets in its place you will see the<br \/>content area and the style area in the<br \/>content area you have full control over<br \/>the progress bars contents so first of<br \/>all you have the title where you insert<br \/>the title of the progress bar let&#8217;s put<br \/>visual design alright and you have the<br \/>type where you could set the type of the<br \/>bar as info success seeing green warning<br \/>orange and danger red let&#8217;s leave it at<br \/>defaults here you have the percentage<br \/>you could choose the percentage in which<br \/>the bar will be displayed let&#8217;s pick 95<br \/>and here you can choose whether to<br \/>display the percentage inside the bar as<br \/>you can see here it&#8217;s displayed it&#8217;s on<br \/>show you could choose to hide it let&#8217;s<br \/>keep it on show<br \/>and you have the inner text which is the<br \/>text that&#8217;s displayed inside the bar<br \/>I&#8217;ll just erase it here we go and that<br \/>was the content area now let&#8217;s move over<br \/>to the style area of the widget here you<br \/>have the style options for the progress<br \/>bar and for the title under the progress<br \/>bar style options you have the bar color<br \/>here you could set the color of the bar<br \/>all right so I set it as blue and here<br \/>you have the bar background color which<br \/>is actually if I set it it&#8217;s the color<br \/>that&#8217;s beneath the bar as you can see<br \/>here I&#8217;ll just set it here we go and we<br \/>have the inner text color which sets the<br \/>color of the text that&#8217;s displayed<br \/>inside the bar including the percentage<br \/>and you have the title style options<br \/>which is the text color and we have<br \/>typography let&#8217;s customize it ok let&#8217;s<br \/>set the weight as bold transform<br \/>uppercase and letter spacing one now as<br \/>you can see right here I have a padding<br \/>so I&#8217;ll just give this one a padding as<br \/>well under advanced and I&#8217;ll give it a<br \/>bottom 50 all right with these bars you<br \/>could add an amazing touch to any page<br \/>on your website I hope you enjoyed this<br \/>video for more videos and tutorials<br \/>subscribe our youtube channel or visit<br \/>us at Doc&#8217;s Elementor 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 Display your progress or skills and add a beautiful progress bar to any WordPress website using Elementor Page Builder. Transcript hey guys this is Noah from Elementor today I\u2019ll teach you about our progress bar widget with which you could display your progress or skills any creative and colorful way check it [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9699,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3065","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 Progress Bar Widget on Elementor Page Builder - 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-progress-bar-widget-on-elementor-page-builder\/\" \/>\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 Progress Bar Widget on Elementor Page Builder - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Display your progress or skills and add a beautiful progress bar to any WordPress website using Elementor Page Builder. Transcript hey guys this is Noah from Elementor today I\u2019ll teach you about our progress bar widget with which you could display your progress or skills any creative and colorful way check it [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:51:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-23T12:07:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-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=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Progress Bar Widget on Elementor Page Builder - 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-progress-bar-widget-on-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Progress Bar Widget on Elementor Page Builder - Academy","og_description":"Overview Transcript Overview Display your progress or skills and add a beautiful progress bar to any WordPress website using Elementor Page Builder. Transcript hey guys this is Noah from Elementor today I\u2019ll teach you about our progress bar widget with which you could display your progress or skills any creative and colorful way check it [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:51:43+00:00","article_modified_time":"2023-04-23T12:07:23+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Progress Bar Widget on Elementor Page Builder","datePublished":"2021-06-23T08:51:43+00:00","dateModified":"2023-04-23T12:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/"},"wordCount":568,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/","name":"How to Use the Progress Bar Widget on Elementor Page Builder - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-Widget.jpg","datePublished":"2021-06-23T08:51:43+00:00","dateModified":"2023-04-23T12:07:23+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Progress-Bar-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-progress-bar-widget-on-elementor-page-builder\/#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 Progress Bar Widget on Elementor Page Builder"}]},{"@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\/3065","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=3065"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3065\/revisions"}],"predecessor-version":[{"id":9382,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3065\/revisions\/9382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9699"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}