How to create a user dashboard with our Elementor templates

In this tutorial we will be installing Elementor Page Builder (free version) and importing one of our Elementor user dashboard templates. This is the base template what we used too for you when you visit your Cart2WP members area.

I will assume you already have your website ready with Cart2WP installed and connected to your ThriveCart account. It is not necessary for this tutorial, but I would think we go in chronological order of your website setup.

To get started, we will need to install and activate Elementor. To do so, click on the Add new option in the Plugins menu.

How To Build A User Dashboard With Elementor 1

Next, Type in “Elementor” in the search field and hit Install for the page builder. When finished, hit the Activate button as well…

How To Build A User Dashboard With Elementor 2

After that, it will take us to the welcome page of Elementor. Hover over “Templates” and click on the saved templates option.

How To Build A User Dashboard With Elementor 3

This is the list of templates you have/will create. As it is empty right now, we will need to import a dashboard template to get started. To do so, click on the “Import Templates” button on the top.

How To Build A User Dashboard With Elementor 4

Next, click on the “Choose file” button and navigate to the dashboard template .zip file you downloaded from your members area. For this example, I will be importing the dark template by clicking on the “Import Now” button.

How To Build A User Dashboard With Elementor 5

Great, it is now imported and available to be used for a page 🙂 Let’s add a new page that will be used as dashboard.

How To Build A User Dashboard With Elementor 6

First, give a name/title to this page. Next, under the Page attributes dropdown choose the Elementor Canvas page template and hit the Edit with Elementor button. This will save the options and start up the page builder.

How To Build A User Dashboard With Elementor 7

When the page builder loaded up, we will need to hit the Folder icon to see the available templates.

How To Build A User Dashboard With Elementor 8

Click on the “My templates” tab to see the imported templates list.

How To Build A User Dashboard With Elementor 9

As you can see, the dark dashboard template will be available and all we have to do is hit the “Insert” button…

How To Build A User Dashboard With Elementor 10

Make sure to choose “Yes” so it will insert the actual page settings too, for example the background gradient I added to the template originally.

How To Build A User Dashboard With Elementor 11

Nice, we have a fully functional user dashboard that you can edit the way you will need it. To give you a head start, we will edit the first downloadable the same way I did. To get started, click on the little pencil icon at the corner of the widget you wish to edit. To see this, make sure to hover over the widget you wish to edit.

How To Build A User Dashboard With Elementor 12

This is an image box widget. You can change the image to represent what will the download be about, edit the title and description and also a link that should open if clicked. In our other tutorial about “How to add protected digital downloads” all downloadable files have a unique link. You can copy and paste that link here! 🙂

How To Build A User Dashboard With Elementor 13

If we scroll further down, I have added a information section that can help store related information for your customers. To edit this, simply hover over and click on the little pencil icon. In the left hand sidebar you can click on any of the toggles to edit the details inside as you need it. When all done, simply hit the publish button to make this available to your customers too.

How To Build A User Dashboard With Elementor 14

Of course, if you wish to add more content, shortcode of your LearnDash course grid, etc just carry on editing as you like.

Now that the dashboard page is ready, we need to make it the home page of our website. To do so, click on the Customise button in the admin bar.

How To Build A User Dashboard With Elementor 15

Click on the Homepage settings menu, set the static page option and use the dropdown for the homepage to find the Dashboard page. When done, hit the publish button and we are done 🙂

How To Build A User Dashboard With Elementor 16

From here on, when your customers log in or get logged in automatically with the fulfilment URL from Cart2WP used in the ThriveCart product, they will be greeted on this page if your settings are left blank for “Redirect after successful login (URL)”

How To Build A User Dashboard With Elementor 17

Hope you found this tutorial useful, have an awesome day!

share with others:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn