Advanced Tutorial: How to Use Dynamic User Profile Pictures & Dynamic Numbers in Elementor

hile its zip from elemental today I’ll
show you how the dynamic user profile
picture and dynamic number features can
be used to create a personalized project
overview page for clients to keep track
of progress in this example a web design
agency provides their clients with the
user account that gives them access to
follow their websites progress before
launch each user as its own profile
picture appear dynamically upon login
followed by a personal greeting they can
see the overall progress as well as the
percentage completed per department
providing them with a clear overview of
their website status let’s dive in and
see how it works first I’ll create a new
user account for the client fill in the
details and make sure to add a profile
picture by a Gravatar next a login page
which will be sent to the client
together with their login details after
logging in they’ll be redirected to
their own project overview page so first
we need to create one as you can see
I’ve pre-built this page so we can focus
on setting up the dynamic elements let’s
start with the dynamic user profile
picture in the left column drag in an
image widget and click dynamic next to
choose image under author
select user profile picture ok great
now your clients profile picture in
Gravatar will appear here dynamically
once they log in next the personal
message for this I’ve used the heading
widget next to title click dynamic and
under site choose user info enter its
settings and set the field to first name
in the Advanced drop-down settings add
your before and after text you can add
some fullback text as well in case you
forgot to add a first name when setting
up your clients login for overall
progress I’ve used the counter widget
this number is based on the progress of
all of the departments combined so let’s
set those up first
I have used progress bar widgets each
representing a department in the
progress bar settings next to percentage
click dynamic
choose a CF number field then click on
the wrench to enter it settings and as
you can see next to key I’ve already
created custom fields per department you
can see here in ACF that have set each
field type to number I’ll go ahead and
link up the ACF fields with the
corresponding departments accordingly so
now when each department leader updates
the progress let’s say on a daily basis
it will appear dynamically for the
client to see this can be achieved by
having ACF import the data via a
third-party plug-in or custom code the
counter widget that shows the overall
progress is also set to show a dynamic
number via ACF and is updated
automatically via a script that combines
the progress per department cool now all
that’s left is to set the redirect after
login to this page so in the login page
under additional options switch on the
redirect and paste the URL let’s see it
in action awesome well that’s it now you
know how the dynamic user profile
picture and dynamic Nambu features can
be used to create your own advanced
project overview page for your clients
have fun playing around and don’t forget
to subscribe to our youtube channel for
more tips and tutorials ciao for now