When you create membership websites, it’s important to have a specific page that everyone sees when they log in so that they’re redirected to any other parts of your membership website. I usually call this page the “dashboard.” Of course, you can call this page whatever you want.
So, in this video, we’re going to be creating that page. Coming up!
Learn how to build your membership site step-by-step here.
Hello everyone, and welcome in today’s video. I’m going to show you how to create a specific page that your members land on after they log in. so, as I mentioned earlier, this page, I mean, I usually call it the “dashboard page,” but you can call it whatever you want.
So let’s go ahead and create this now. Before I go ahead and create it, I’d like to also say the reason why it’s important is because this page works as a hub, which then redirects people to anywhere they want to go on your website.
All right, so let’s dive in, and let’s create this page. so what I’m going to do here is to come to “pages” here and click on “add new.”
Right, so this page here, I’m just going to name it “dashboard.” and then click on “use Divi builder.” so we’re going to build this page from scratch. so I’m going to click here on “start building.”
And then we’re going to start adding our column structure. So over here now, I’m going to go with a two-thirds, one-third view. so I’m going to go ahead and select this.
All right, so now that I’ve added my column structure, the next step now is to go and find my shortcodes that I need to customize this page. So I’m going to come back over here. Now what I’ve done is I’ve just gone in, and I’ve just created a, you know, standard page.
So what you want to do to get these shortcodes is to add the classic editor. So I’m going to search for “classic” and select it. So with this selected now, if I click anywhere in here, you’re going to notice that we have WishList Member here. And if I click on this drop-down, you’re going to see all these merge codes.
Okay, so we can really do some really cool things here. So let’s say you want to have a shortcode here which greets the user by their first name. You can just click here on “first name,” and this is our shortcode.
So I’m going to copy that, come over here, and then let’s add our text module. So I’m going to click here on this “plus” button, and I am going to add my text module.
So the greeting here is just going to be “welcome” such and such. So I’m gonna highlight all this and delete it. There we go. so that’s my first part.
So, this is the part where the user comes, and they get greeted with their first name here on this dashboard. And this is a really cool thing to do on your site, and it’s quite impressive. so I’m going to highlight this and set this to a “heading.”
So let’s set this to “heading 2,” and then what I’m going to do is I’m going to come over here to “design,” and then go to my heading text here, go to “heading 2,” and we’re just going to give this font, and I’m going to go with “pop in.” so I’m just going to search for it, and select it.
Next, I’m going to make this “bold.” So I’m going to come over here and set this to “bold.” there we go. and then just coming back over here, I just want to make sure my shortcode is in there.
And yes, it is. So now, let’s save. There we go. so, this is where the name will show. So, the next thing you may want to add here is, perhaps, maybe a welcome video.
So let’s add our video module here. So, I’m going to add it now. What I usually do here on this dashboard page is to give this video an overlay image.
So, I’m going to come over here to “overlay,” and then I’m just going to click on this “plus button” and add my overlay image. So this image here could be whatever image you want. So, in this case, we are just going to use an image here, which is to do with our membership.
So, there we go. but this also could be a welcome image which has an image of yourself introducing your members to the website.
Now, what you could also do here, in this case, is to have a message each time your users log in. so you can keep updating this video and make sure it’s not the same video all the time.
All right, so now, this is how this image overlay looks like. So, if I come over here to “design,” I can make further customizations by, maybe perhaps reducing the icon size. So, I can come over here to “custom icon size” and drag this down a little bit. And pretty much I think that looks great, and save.
Okay, now over here on the right, what you could do is you could add all your important links. So, these could be links to say “support,” it could be linked to, let’s say, specific articles that are protected in the membership, and so on.
So, what I’m going to do here is I’m going to add a button. And then here, I’m just going to call this “get support.” so, this is our support, and then here is where you want to add your link URL.
So, you want to come over here and add your URL. in this case, I’m just going to add a blank one. I’m going to save that.
Now, you can also add multiple buttons here. So we can just duplicate this a few times. So, the second one here could be perhaps, maybe “start learning.” and maybe this last one here could be your main resources.
Right, so above, here is where you may want to add, say, a title for that particular section. so, I’m just going to duplicate this, and then drag it over here to the right side, and then I’m just going to go in here and rename this, and call this “important links.” and then, we’re going to “save changes.”
Next, we’re going to give this a bit of padding. So, I’m just going to drag this to about 160. apply this to the bottom as well.
Now, what you may also want to do here is to add a welcome message. So I’m going to click here on this “plus button,” and add another text module, and select it. So, the text I’m going to use here is just dummy text. So, I’m going to go in here and just paste it in here. There we go.
Now, we need to stylize this text by coming over here to “design,” and then click on “text,” change our font to “pop in,” so that everything is all consistent.
We’re going to increase the size a little bit here by just nudging it up a little bit to about, say 17. and then increasing our line-height, so that looks okay. I’m going to save this, so you can see now that this dashboard page is looking all really nice.
Because your users can come onto this page, play this video, and listen to the message that you’ve recorded for them. And there’s also some text here that they can read.
It can be any message that you want to add on there. And over here, you have all your buttons that can link them to different parts of the website.
So you may be thinking, ‘well, what else can I do with this?’ well, if we come back over here to the shortcodes, this can also show you further shortcodes that you can apply onto our dashboard. so let’s click here and go to “merge codes.”
So, let’s say you want to show their membership level when they come onto this page. This is where you can say, ‘okay membership levels,’ and then you can highlight this.
I’m going to copy that, come back over here, and then you can add the shortcode here. So, let’s duplicate this, and then we’re just going to go in and say your membership level is. So, now you can see we’ve added our shortcode.
So, what you can do here is to, perhaps, maybe drag this over to the left and then stylize it. It’s going to bring it here, and then I’m going to go in and make it a bit smaller by coming over here to “design heading text.” we’re going to go to heading 2 and then just reduce the size a little bit. And perhaps maybe even change the color.
So, now you can see it’s showing your membership level is “gold membership.” so it’s pulled all that information from that shortcode. And it’s showing nowhere on this membership level. So, this is really cool, so there’s a lot that you can do here.
You can highly customize this page. There are more shortcodes here. So, if I come over here to “merge shortcodes,” you can see we can add a login form, we can add a login URL, there’s a lot we can do here.
You can also show your join date. So, let’s say you want to show them when they joined the membership. This is the information you can pull, and the expiration as well. You can add when the membership is going to expire.
So, as you can see, we have quite a lot of information that we can add to our members’ dashboard. Alright, so all I have to do now is to save this page and exit the visual builder.
Alright, so this is what your dashboard page could look like. So here, we say we have the welcome message; we also have the message telling us what membership level your user is. We also have a video here to introduce or even give a message to your members.
We also have some text on the bottom here, and then finally, we have some important links that all your members can link to from this dashboard.
So, as you can see, there are many ways to stylize your main dashboard page. So, go ahead, try it out, and see how it works for your membership website.
Alright, guys, that’s all I have for you in today’s video. Thank you very much for watching. See you in the next video. Take care!
