LESSON 7: Creating Custom Registration, Login Memberpress Pages. [How To Build A Membership Website]
HTML-код
- Опубликовано: 18 сен 2024
- Are you looking to learn how to build a membership site?
If so, welcome to this video series where I'll be showing you how to do just that.
In this lesson, we’re going to create custom login and registration pages using Memberhress shortcodes and Elementor builder.
------------------------------------------------------------------------------------------------------------------------------------------------
🙏 Thanks for watching this video.
✅ If you liked it - give it a thumbs up and let me know what you think in the comments area.
🔴 JOIN my free Facebook Group here 👉 / membershipwebsites
👨💻If you need someone to build you a Membership or LMS website - send your inquiry here: andriy.space/.
Peace.
![LESSON 5: Memberpress and Membership Configuration. [How To Build A Membership Website]](http://i.ytimg.com/vi/uPuK-P7ek1s/mqdefault.jpg)
![LESSON 8: Creating Single Post Template With Elementor. [How To Build A Membership Website]](/img/1.gif)
✅ CSS Code for Sign Up Page:
selector .mp-form-row {
margin-top: 20px;
margin-bottom: 20px;
}
selector .mp-form-label {
margin-bottom: 5px;
}
selector .mepr-submit {
padding: 20px 40px;
display: block;
width: 100%;
text-transform: uppercase;
background-color: #00a843;
margin-bottom: 10px;
border: none;
color: #ffffff;
}
selector .mepr-submit:hover {
background-color: #00822b;
}
selector .have-coupon-link {
color: #000;
}
✅ CSS Code for WordPress customizer:
a {
color: #00a843;
}
[type=button], [type=submit], button {
color: #fff;
background-color: #00a843;
border-color: #00a843;
}
[type=button]:hover,
[type=button]:focus,
[type=button]:active,
[type=submit]:hover,
[type=submit]:focus,
[type=submit]:active,
button:hover,
button:focus,
button:active {
background-color: #009349;
}
a:hover {
color: #009349;
}
.elementor-widget-text-editor {
color: #000;
}
✅ CSS CODE for Login Page:
selector .mp-form-row {
margin-top: 20px;
margin-bottom: 20px;
}
selector .mp-form-label {
margin-bottom: 5px;
}
selector input[type="submit"] {
padding: 20px 40px;
display: block;
width: 100%;
text-transform: uppercase;
background-color: #00a843;
margin-bottom: 10px;
color: #fff;
border: none;
}
selector input[type="submit"]:hover {
background-color: #009349;
}
this is one of the best WP tutorials I have seen. And I love, that you didnt cut out all situations you were searching for a solution. It also helped a lot.
You are a superstar!!! Thanks so much.
Thanks, I'm glad it helped
Brilliant - thanks so very much!
This was exactly what I was looking for! Thanks so much for sharing
Thank you for making it that simple.
Sure, no problem.
such a great tutorial, comprehensive and pays in end to end details
Thanks :)
Great useful tutorial
Muy buen video amigo!
Such a great tutorial. Wondering why this channel is so underrated. You deserve so much more...
Thank you, this is such a useful tutorial!! Really well explained and got me to doing exactly what I needed
Thanks, I appreciate your kind words. Feel free to share it with others if you think they may find it helpful :)
selector .mepr-submit {
padding: 20px 40px;
display: block;
width:100%;
text-transform: uppercase;
background-color: #495a98;
margin-bottom: 10px;
border: none;
color:#ffffff;
}
Thanks
Interesting that the password recovery page uses the same page as the Login page - I'm pretty sure I would have never figured that our (unless I read the Memberpress docs - and who does that? Well... you do... :) ). On a more serious note, I now have the memberpress docs bookmarked!
Again, thanks so much for putting this all together! Very much appreciated!!
haha, I don't read their docs that much, but it was easy to guess since the base URL for both login page and reset password page is the same, it's only the parameter after "?" that is different :)
@@andriyhaydash7496 - HaHa - I only go to the docs as a last resort. Probably should be the other way around... :)
Wait wut?! I'm trying to create the password recovery page in Elementor now and couldn't find the shortcode for it. Do I just use the rsame shortcode too?
this just shows how confusing the whole wp thing is, even for a pro like you. anyway, a great job! keep up with the good work!
It's only confusing sometimes :D . Thanks for the comment
@@andriyhaydash7496 I went through the whole series, it was really helpful. But I still encounter some bugs, what is your consulting fee?
@@count500 I'm sorry to hear that you still have bugs. You can see my consulting price & apply on my website in the application form - andriy.space
@@andriyhaydash7496 - I actually thought it was straight forward following you. There is a LOT of flexibility with WP and Elementor, so unless I work with it day-in and day-out, I forget how to do some of the things (not forget, per se, but forget where to find the options). This is a wonderful tutorial!!
@@kchapman3164 thanks
really appreciate it nice an easy to follow. how can i find selector name, like you change the "have coupon" link color to black but i'd like to also change the "privacy" link color as well. And with the colors of my site if the field text was white it would read better than the default black. Also, don't know if you notice but the text color if you forgot a field is still pinkish, i'd change that too.
Thanks for the kind words, Rob
Great content in all your videos. How do you do the request lost password form on this video though? Kinda got loss off screen etc...
Brother you do very good work. I like your videos but problem is your voice is low..
Thanks Ahsan. I'll try to fix that
I have pasted the code but it has not changed the look of the button. I am trying to change the sign up button, also using the divi builder. Any ideas? Thanks
For the forms, have you perchance tried the Elementor forms element? It looks like it could work. If it does, then that would have a little more point-and-click formatting capability without diving into CSS. I'll let you know how that works out.
I don't think that the registration form would work, because MP's registration form automatically processes payments and Elementor's doesn't
great video! can you please share the custom css for both pages you used
Thanks.
I don't have them at hand, but you can just re-write it from the screen.
@@andriyhaydash7496 thanks so much worked great! at 17:10 you mentioned changing the red error background colors. What would the css be for this? I've googled it a lot and cant find out how, your help would be appreciated so much!
@@lifstyle1734 You can try something like this:
.mepr-form label.mepr-checkbox-field.invalid {
background-color: transparent !important;
border: none !important;
color: red !important;
}
@@andriyhaydash7496 would I just add that under the other css at the bottom?
@@lifstyle1734 yes, you can add it at the bottom
Thanks, great videos. Quick question please if you may have a sec;
For multiple membership options, do you suggest I create multiple 'new registration' pages; one for each membership type? The memberpress manual (I only read briefly) seems to suggest this.
I'm wondering if you know of anyway to put like a tickbox on the one main registration page so new members can just select the tickbox for which membership type, and then enter their details, all from the same page. Without having to make 6 registration pages.
Please do let me know if you know :)
Thank you.
Unless you're using GravityForms & GravityPress or another 3rd party/custom solution, you won't be able to have a "tick box". You will have to create separate registration pages.
That's how memberpress works.
@@andriyhaydash7496 OK cool, thank you!
Also, I admit my stomach fell today when I heard the words 'custom css' but I found two excellent short videos from Hacksaw Academy that explained it really well, and I am no longer intimidated.
So unless you plan on making your own ones (or if you already have, I apologize; please disregard), then I recommend directing any of your subscribers who may feel similarly unsure about the CSS to quickly check those 2 x 10min videos out, because I am back onboard and reasonably confidently following along with you again after those two quick short videos.
@@BLEUsacreBLEU I guess you can just link to those videos here in the comments so that people will watch them.
Thank you for your tutorial. I actually sent a message to the support as i'm notsatisfied with the login status appearance of memberpress, I mean when you login as a member, it's not really clear that you're logged in. Usually, when you are logged in, you expect to see your username at the bottom right corner of the page just like it is the case on the majority of websites, you see your name on the top of the page and from there you can access to your account.
I find it confusing to have a seperate "account" page, I feel like its only usefull to see it when you're actually logged in as a member but this should not appear for the non-members.
Do you know how to change this ?
I just redirect users to a dashboard page when they're logged in. It's a clear indication that you're logged in.
" you expect to see your username at the bottom right corner of the page just like it is the case on the majority of websites" - not sure about bottom right corner, but typically there is a user name & avatar in the top right corner.
The reason why Memberpress doesn't have it is because the navigation style depends on the theme and/or pagebuilder you're using.
So it's not a Memberpress's feature.
You can probably find a plugin that adds this anyway.
"I find it confusing to have a seperate "account" page, I feel like its only usefull to see it when you're actually logged in as a member but this should not appear for the non-members." - what do you mean by "but this should not appear for the non-members" ? What's "this"?
@@andriyhaydash7496 I meant "top right corner" sorry! Your tutorials have been really useful so far! I just bought the he plugin 2 days ago and Im almost there! Do you have email where I can contact you to ask you a few specific questions that I have ?
@@boogie80_official Thanks.
You can find my website address in the description of this video or you can post them here, I will reply when I have time.
could you please tell me how can I add video or video links (from youtube/Vimeo) to my memberpress course?
I haven't user MemberPress's course feature yet, but I guess you can embed them in the curse content. Just google something like "how to embed a youtube video in WordPress".
The concepts are great, but it is very hard to follow along for those of us who aren't pros yet!
Hi Melissa.
Thanks for the comment.
I tried to make it easy to follow, but definitely, there is a learning curve.
But I'm sure you will figure it out.
Do have the shortcode for password reset? I'm not finding it on the memberpress site. Thanks!
The password reset form is the same shortcode as the login form.
@@andriyhaydash7496 Yep. I didn't realize it was that easy. I was overthinking it.
Dude why couldn't you share the css for the form? Whole point in the video is to make it look nice..
Dude, I don't have it at my hand right now. You can just rewrite it from the video.
Nice tutorial bro! Do you know how I could change the color of "REQUEST A PASSWORD RESET"?
Via CSS. I don't have the code at my hand at the moment.
HELP PLEASE! I have the same problem in 12:21. The credit card box is cut off. I hid the terms, and still no change. How do I get it to show with the MM/YY so people can finish checkout?
Hi. I've contacted you on Facebook regarding this.
@@andriyhaydash7496 Please i need help on this URGENTLY aswell. Many thanks
@@samhowe6001 Hi Sam. I'm not sure why this problem occurs. Have you tried contacting MemberPress' team?
@@andriyhaydash7496 Sent a ticket, guess have to wait to see what they say. Really annoying as I follow all your videos same but different result :) - great videos BTW, helped massively, just need to get a btter microphone!
@@samhowe6001 They usually reply on the same day. They're in US, so you may have to wait a bit.
Thanks for the compliment.
Yes, the mike needs to be better.
I just wasn't sure if I was going to be making a lot of youtube videos or not, so I didn't buy one :)