How to Use Dynamic User Profile Pictures & Dynamic Numbers in Elementor

In this tutorial, we're going to show you how you can use Elementor's dynamic content integrations to create personalized project overview pages for your clients, complete with a custom login page.

One of the many powerful features that you get with Elementor Pro is the ability to incorporate dynamic information into your Elementor designs. Among other options, dynamic content lets you create unique, personalized pages from a single Elementor design.

In this tutorial, we’re going to show you how you can use Elementor’s dynamic content integrations to create personalized project overview pages for your clients, complete with a custom login page.

Your overview pages will be able to dynamically include clients’ user profiles, as well as dynamic numbers that clients can use to track the progress of their project. What’s more, you can do this all from a single Elementor page that automatically pulls in the information for each client:

To follow along, you can watch the video tutorial below or keep reading for the text version:

How to Use Dynamic User Profile Pictures & Dynamic Numbers in Elementor

1. Create a New User Account for Your Client

To get started, head to Users → Add New to create a WordPress user account for your client:

WordPress will automatically pull in a user’s profile picture from Gravatar and you’ll be able to use that profile picture on the project overview page.

2. Create a Custom Login Page

To create a more customized login experience and avoid the default WordPress login page, create a new page and use Elementor’s WordPress login widget to add your login form:

3. Create a Project Overview Page

Next, create the basic design for your project overview page in Elementor. Don’t worry about the dynamic content yet – instead, just set up the frame for how you want it to look.

Here’s our example:

To display the project’s progress, you can use Progress Bar or Counter widgets according to your preference.

4. Add Dynamic User Content

Once you’ve built your page’s basic design, you’re ready to make it personalized by adding dynamic content based on each user’s account.

To get started, drag in an Image widget to display a user’s profile picture. Then, click the Dynamic option next to Choose Image:

In the drop-down that appears, select User Profile Picture under the Author section.

Now, each client will dynamically see their own profile picture, pulled straight from Gravatar.

Next, edit the Heading widget and choose the Dynamic option. In the drop-down, find the Site section and select User Info. Then, edit its settings and set the field equal to First Name to display the user’s first name:

You can use the Advanced options to add static text before and after the client’s name.

5. Create Custom Fields to Track Progress

On the project overview page that we’re building, clients will be able to track the progress of their project by each department. 

Rather than manually adding this information to your Elementor design, your design will dynamically pull in this progress for each department.

But in order to do that, you’ll need to create custom fields to store the progress numbers using a plugin like Advanced Custom Fields.

Here’s what it should look like – you can see how there are six number fields – five for each department and one for the overall progress:

Once you’ve created your custom fields, go back to your Elementor design and edit the Progress Bar widget for each department.

Click Dynamic. Then, find the ACF Number Field option in the ACF section of the drop-down. Then, click on the wrench to enter its settings and choose the relevant number field from the drop-down:

Repeat the process for all the counters and progress bars.

To dynamically update the progress for each client, you can have ACF import the data via third-party plugin or custom code. Or, you can also manually update the ACF fields in the backend.

You can also use this custom script to have ACF automatically calculate the overall progress based on the progress for each department.

6. Redirect Users to Project Overview Page After Login

To finish things out, you can set it up so that your site automatically redirects clients to the project overview page after they log in using the custom login page that you created in Step 2.

To do this, edit your custom login page. Then, edit the Login widget and use the Redirect After Login setting under Additional Options to send people straight to the project overview page that you created:

And that’s it!

With the Dynamic feature in Elementor Pro, you can dynamically create custom project overview pages for each client from a single Elementor design.

Play around with this feature to create pages that match your business and help keep your clients in the loop.

About the Author

Colin Newcomer
Colin Newcomer
Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 840,076 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

8 Responses

  1. This is interesting but useless without a section that shows how the data actually gets updated..
    Would you then create the same sort of pages where the departments would have to log in and update per project? would they ?

    BUT if someone actually follows this as is, the bug in this would be that there is a missing var showing which custom field belongs to what project as that is not catered for.
    Surely an “agency” as such would have more than one project so this would make sense to be dynamic in the first place..

    Sorry if I sound “trollish”.. I really don’t mean to be .. this comes from a good place , I promise..

    I’m thankful this article is here in the first place, just wish it had more detail to have the complete cycle demonstrated ..

    I am really interested in implementing something on these lines as it would cut my dev time substantially .. Coding from scratch always takes long..

  2. “dynamically update the progress for each client, you can have ACF import the data via third-party plugin”

    Please suggest a plugin to achieve this. thanks

  3. How can I stop anyone not logged in from visiting this page? For example, if the visitor isn’t logged in they should be redirected to the login page. How can I do that?

  4. Hi guys, just one question.
    From this tutarial, I supposed there will be a unique page for each user (every user will have his own page), right?

    This is what I don’t understand: after click the button in the login pop-up, how do you send the user to his page?
    thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 840,076 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.