{"id":1988,"date":"2021-06-20T16:03:37","date_gmt":"2021-06-20T16:03:37","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1988"},"modified":"2023-02-22T09:32:17","modified_gmt":"2023-02-22T09:32:17","slug":"advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/","title":{"rendered":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1988\" class=\"elementor elementor-1988\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-29b212fe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"29b212fe\" 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-50414ef5\" data-id=\"50414ef5\" 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-7f1fdf5b elementor-widget elementor-widget-video\" data-id=\"7f1fdf5b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=QaM6E5Jkhe8&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-1d9e409e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d9e409e\" 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-3c1f8bd8\" data-id=\"3c1f8bd8\" 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-1f71ed5c elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"1f71ed5c\" 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-5271\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5271\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5272\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5272\" 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-5271\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5271\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5271\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, you\u2019ll learn how to use the Dynamic User Profile Picture and Dynamic Number features, which can be used to create advanced personalized project overview pages for your clients.<\/p><p>You&#8217;ll learn how to:<br \/>\u2714\ufe0e Set up a dynamic user profile image for your landing page or WordPress website<br \/>\u2714\ufe0e Add dynamic numbers to your counter widget &amp; progress bars<br \/>\u2714\ufe0e And more!<\/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-5272\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5272\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5272\" tabindex=\"0\" hidden=\"hidden\"><p>hile its zip from elemental today I&#8217;ll<br \/>show you how the dynamic user profile<br \/>picture and dynamic number features can<br \/>be used to create a personalized project<br \/>overview page for clients to keep track<br \/>of progress in this example a web design<br \/>agency provides their clients with the<br \/>user account that gives them access to<br \/>follow their websites progress before<br \/>launch each user as its own profile<br \/>picture appear dynamically upon login<br \/>followed by a personal greeting they can<br \/>see the overall progress as well as the<br \/>percentage completed per department<br \/>providing them with a clear overview of<br \/>their website status let&#8217;s dive in and<br \/>see how it works first I&#8217;ll create a new<br \/>user account for the client fill in the<br \/>details and make sure to add a profile<br \/>picture by a Gravatar next a login page<br \/>which will be sent to the client<br \/>together with their login details after<br \/>logging in they&#8217;ll be redirected to<br \/>their own project overview page so first<br \/>we need to create one as you can see<br \/>I&#8217;ve pre-built this page so we can focus<br \/>on setting up the dynamic elements let&#8217;s<br \/>start with the dynamic user profile<br \/>picture in the left column drag in an<br \/>image widget and click dynamic next to<br \/>choose image under author<br \/>select user profile picture ok great<br \/>now your clients profile picture in<br \/>Gravatar will appear here dynamically<br \/>once they log in next the personal<br \/>message for this I&#8217;ve used the heading<br \/>widget next to title click dynamic and<br \/>under site choose user info enter its<br \/>settings and set the field to first name<br \/>in the Advanced drop-down settings add<br \/>your before and after text you can add<br \/>some fullback text as well in case you<br \/>forgot to add a first name when setting<br \/>up your clients login for overall<br \/>progress I&#8217;ve used the counter widget<br \/>this number is based on the progress of<br \/>all of the departments combined so let&#8217;s<br \/>set those up first<br \/>I have used progress bar widgets each<br \/>representing a department in the<br \/>progress bar settings next to percentage<br \/>click dynamic<br \/>choose a CF number field then click on<br \/>the wrench to enter it settings and as<br \/>you can see next to key I&#8217;ve already<br \/>created custom fields per department you<br \/>can see here in ACF that have set each<br \/>field type to number I&#8217;ll go ahead and<br \/>link up the ACF fields with the<br \/>corresponding departments accordingly so<br \/>now when each department leader updates<br \/>the progress let&#8217;s say on a daily basis<br \/>it will appear dynamically for the<br \/>client to see this can be achieved by<br \/>having ACF import the data via a<br \/>third-party plug-in or custom code the<br \/>counter widget that shows the overall<br \/>progress is also set to show a dynamic<br \/>number via ACF and is updated<br \/>automatically via a script that combines<br \/>the progress per department cool now all<br \/>that&#8217;s left is to set the redirect after<br \/>login to this page so in the login page<br \/>under additional options switch on the<br \/>redirect and paste the URL let&#8217;s see it<br \/>in action awesome well that&#8217;s it now you<br \/>know how the dynamic user profile<br \/>picture and dynamic Nambu features can<br \/>be used to create your own advanced<br \/>project overview page for your clients<br \/>have fun playing around and don&#8217;t forget<br \/>to subscribe to our youtube channel for<br \/>more tips and tutorials ciao for now<\/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 In this tutorial, you\u2019ll learn how to use the Dynamic User Profile Picture and Dynamic Number features, which can be used to create advanced personalized project overview pages for your clients. You\u2019ll learn how to: \u2714\ufe0e Set up a dynamic user profile image for your landing page or WordPress website \u2714\ufe0e Add [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4121,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[41],"class_list":["post-1988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","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>Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor - 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\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, you\u2019ll learn how to use the Dynamic User Profile Picture and Dynamic Number features, which can be used to create advanced personalized project overview pages for your clients. You\u2019ll learn how to: \u2714\ufe0e Set up a dynamic user profile image for your landing page or WordPress website \u2714\ufe0e Add [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T16:03:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:32:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\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<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor - 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\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial, you\u2019ll learn how to use the Dynamic User Profile Picture and Dynamic Number features, which can be used to create advanced personalized project overview pages for your clients. You\u2019ll learn how to: \u2714\ufe0e Set up a dynamic user profile image for your landing page or WordPress website \u2714\ufe0e Add [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-20T16:03:37+00:00","article_modified_time":"2023-02-22T09:32:17+00:00","og_image":[{"width":1921,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor","datePublished":"2021-06-20T16:03:37+00:00","dateModified":"2023-02-22T09:32:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/"},"wordCount":670,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/","url":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/","name":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg","datePublished":"2021-06-20T16:03:37+00:00","dateModified":"2023-02-22T09:32:17+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Dynamic-User-Profile-Pictures-Numbers-1.jpg","width":1921,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/advanced-tutorial-how-to-use-dynamic-user-profile-pictures-dynamic-numbers-in-elementor\/#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":"Dynamic Design","item":"https:\/\/elementor.com\/academy\/dynamic-design\/"},{"@type":"ListItem","position":4,"name":"Advanced Tutorial: How to Use Dynamic User Profile Pictures &amp; Dynamic Numbers in Elementor"}]},{"@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\/1988","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=1988"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1988\/revisions"}],"predecessor-version":[{"id":9537,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1988\/revisions\/9537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4121"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}