How To Create A Custom Log In Wix – Login Lightbox Tutorial – The Non Coding Founder’s Guide

you asked for it and I’m here to deliver Michael Stroud from which training academy comm and today I’m gonna teach you how to build a custom log in box or light box on your website in which now if you remember a couple weeks ago actually almost about a month ago now I taught you how to create a custom registration I understand that in that video I used some verbage that may have been a bit misleading or confusing to you by mentioning login as
well so what I showed you in that video was a custom registration box in this video it is the same and I mean same exact thing except it’s a login lightbox instead and when I tell you it’s the same exact thing I mean that it’s gonna be super simple to just simply copy over similar concepts from the registration and put it right into the lightbox for your login so let’s jump right into it but before we do that two things 1 hit that subscribe
button right down below and turn on notifications so that way you’re notified when all my new videos come out guys I just got back to college so I’m kind of regrouping here and getting adjusted to classes all that good stuff so I apologize for a late delay on this video and then the social network video is coming out either towards the end of this week beginning of next week that’s a promise and then the second thing is to access the code we’re
gonna use in today’s video head over to wicks training academy comm link in the description below and then once you get there click Academy and from there you can actually sign up and register using that same registration code that I showed you in the last video but instead today we’re gonna be logging in and I’ll show you where to access the code so I’m gonna go ahead and log in using the same exact login box that I’m gonna show you in the video
I’m gonna reference mine and show you how to make it work and then we click login redirects us based off of the back end Wix user information to the dashboard that I’ve created here for you guys and then once we’re in here you have access to this entire Wix training academy dashboard with loads of courses content webinars master mine’s a community feature all that good stuff but if you’re here just for the code you come down here to code snippets
and click code snippets just like that and then it’s gonna redirect us to this code snippet page from there you would simply press get code and copy and paste the login code into what I show you today which we’re gonna hop into right now so you just simply press get code and then this is the stripe code you’ve got change it over for you and it’s gonna pop up with the login code it’s gonna look just like this registration code except it’s gonna be
the same thing with login and embedded rather than registration embedded so we’re gonna X out of that and go to it first things first what you need to do is you need to create a lightbox to create a lightbox you go to ad and then what you can do is you come down here to lightbox in the menu and you simply select whatever one you want now I’m gonna show you the lightbox that I used for the login for the witch training academy because ultimately it
really does not matter what lightbox you have because you customize it so I’m gonna come in here menus and pages and I’m gonna scroll down to light boxes and I’m gonna go to my log in light box and I’m gonna click on it you can see I just took one of the light boxes and created a my own custom light box I put this picture here I put the text I did all that good stuff but what really matters in this case is these three elements right here so what
we have to do is we have to make sure our wicks code developer tools are on you can see it says turnoff here which means our developer tools are on now what we have to do once we have our lightbox and we’ve designed it the way we want is we need to go ahead and open up ad and then what you’re gonna do is you’re gonna come in here to user input and you’re gonna select one of these text input fields it doesn’t matter which one you select because
it’s ultimately preference and design to what you like and how you want it to look but we go ahead and add them when we add them which these are the result of adding them the first one is going to be email so we’re gonna come into settings and then we’re gonna choose the type up here it’s gonna be email and then you’re gonna have placeholder text here I put email for mine maybe you’ll show the format you want that login email to look it doesn’t
really matter just make sure it’s set to required that’s it for that input for our that input box next we have password so we either copy and paste this field and bring it down and then change the information or we go back to add and add it again we’ll come in here to password and we click settings and we’re gonna choose type password the reason we do password is because it’ll block it out with those little black dots rather than showing your
password each letter by letter in full it’s a protective scenario rather than just showing your entire password maybe have people looking over your shoulder something of the sorts but you change that to password and then you change your placeholder text again I chose password for mine and for general settings required and then the last component is your login Now button so this is gonna be whatever button you choose you simply come in here to add
once again and you go straight down to button and then you could select any button you would like it doesn’t matter you choose the design you choose its style button you choose the colors you choose all of that what matters is the function of the button which I’m about to get into so now that we have these three fields here what you’re gonna do is you’re gonna take the code from which training academy calm the code snippet region and you’re gonna
come in here and you’re gonna simply open our little code manager down here once you do that we have our login lightbox page code right here this is the same exact code from my website that I provided you – this which location I put back slash home for you as a placeholder I’ll get to that in just a second so what needs to happen is you need to copy and paste this code and if you want to make it really boobers simple for yourself use these same
variables that I used you the same field IDs so what I mean is if we go into tools here and we click property panels what we’re gonna do and I’m gonna go ahead and hide our other toolbar this right here is a field this ID is what correlates with the code as we did in the registration light box in the registration I did register register email in the login one I did login email so what you need to do is use the same ID as me as it’s gonna help you
just follow along and it’s already set to be pretty standard with a login box so you go log in capital e because it is case-sensitive for the second letter so whenever there’s a second word involved you always capitalized that second the first letter that second word so then you have login email right here and then you’re gonna have password and I did login password just like that and then finally the login now button login now so if you copy all
of these same exact IDs as I did you can literally copy and paste the code completely from which training academy code snippets and not change anything but there’s one thing which is this which location dot two so mine is dot – backslash Academy – dashboard because that’s the page extension so it’s whatever your website name is so blah blah blah com backslash and then that’s what page you need to send them to depending on whatever page that is
for you some of it it will be member profile pages some of it it will just be another page on the website some will be dynamic pages so you need to set that for whatever paid you’re sending them to but it’s that whatever dot-com backslash whatever that is that’s the page you send them to and that’s the words you put here if it’s two words like Academy dashboard make sure you put a dash in between those other than that guys you copy that code
straight into here you see either login now that’s our button here and we have an on click function set already done in the code for you that’s the one I copied and pasted for you on the West Shining Academy and then our login Now button says when this button is clicked this is what the code technically says let email login email right here as you can see in the code and let password login password right here as you can see in the code dot value
dot value and then it’ll login and then it has a redirect dot then after they’ve inputted this information and clicked the button send them to whatever that pages and it’s that simple and you saw it work right at the beginning of the video but just in case you didn’t I’m gonna go back and show you one more time how to do that if this video helped you guys out drop a like down below comment if you have any questions regarding this guys I’m here to
help you out that’s what I’m here to do and then don’t forget to subscribe hit that subscribe button below and click that Bell icon on and finally I’m gonna walk through this process one more time to show you one the login button in lightbox in action and also to show you one last time how to access that code snippet so we’re here at wicks training academy calm link in the description below we’re gonna click login unless you’re not a new member
if you are a new member coming to the wicks training academy you need to click academy and register before you can login obviously because if you don’t have an account registered in which on my website it’s not gonna let you login so then we’ll click login and then I’ll come in here I’ll put my email that I’m registering with and I’ll come in here just like that and then I will click login now and it will redirect me now to address some of those
important questions that I know people are gonna ask one how to reset a password great question and I’m working with Wix on how to get that password reset function out to you and I will make an updated video for that specifically or I will to you guys via that weekly email that I send and again you have to be registered for the witch training academy to get that email but I know that’s an important feature a lot of you want so we can go ahead and
stay tuned for that because it’s gonna be coming very very soon I’m in the process of doing it from my website right now so no need to worry about that I will get that out to you as soon as possible other than that guys once again once you’re in the Academy dashboard you simply come down here to code snippets and then you’ll see custom login lightbox and you’ll press get code copy the code paste it just like we did in this video and you are set
off to the races guys I hope this video helped you out once again drop a like down below head over to witch training academy comm and I will see you on our next video likely building a social network in Wix thank you guys catch you on the next one