How to Create a custom Login and Registration page on Oxygen builder

hi guys so today i'm going to teach you how to create a custom login and registration form via model using a free plugin membership plugin named ultimate member plus uh oxygen builder so in a nutshell this is what we're going to achieve so someone when someone clicks you get a login screen as well as a register so this one since i'm already logged in this shows that we are already registered but i'm going to show you the front end later so we just need uh first we just need to install this plug-in ultimate member user profile registration so this is a free plug-in and this is very decent and then yeah and then oxygen builder so first and foremost we need to go to when you install and activated the ultimate member plugin you will see a tab here and you just go to forms and here you can see the different forms uh that can be used for the registration page so i just need to have the default registration and then as you can see here there are three default tabs the username email address and password so you can actually enter like how many like any details that you want first name last name so for now just go with the default one so and then afterwards uh i customized this registration form so that you will see some i mean you can customize some settings so user assign role this is customer this this depends on what you want the the good thing with this is that you can uh this is the only free plugin that you are able to control what is the user role upon registration so as you can see uh admin editor uh there's a lot of you can choose so this is really very decent plugin membership plugin that is free and then template default and maxed with this is actually the max read for the uh the form and then field icons show with label actually you can edit this field and put a icon here but we won't be doing that so this is really good it makes your form much more you know um intuitive and then the register button this here and then show secondary button the second bird secondary button is actually for logging in but we will be using another form for logging in so this is what we will see on the front end but i've customized some of this so yeah so the first thing we need to do is uh let's go ahead and create a model so this is a model as you can see and then for the model uh you can actually all right so first things first when creating a model uh we need to choose the trigger so you need to choose this one this actually really depends on what your website is but me i've triggered this model to a header on the desktop header that's why it's different here but more or less we are not concerned about that so i've actually already have this one um we're just going to edit this so what we're gonna use is we're gonna be using tab widget there you go so in the tabs widget um since we're going to use two tabs only we're going we're going to delete this third tab and also we're going to delete the third tab content all right so as you can see there's uh content one and content two tabs so what we just need to do is actually just uh we're just gonna drag this log in then delete and then let's just duplicate this one and then drag this on the other side hey so gonna this is register and then for the first tab i'm just going to drag this one there you go this is the content for the login so i'm just going to delete it so as you can see um if one switches to another uh tab so uh and then we're going to add another text for the forget password so we'll get password click here so just gonna with this forget password you actually need to know your forget password link and then we're just gonna style this a bit with this we need to change the class to the active since we're going to style some a bit for the active glass so that um here and so as you can see uh it is more clear as to what tab the user will click since we just changed the background a bit and then afterwards we're going back to the form to the this one and then we're just going to use the shortcode for the form this is really uh really easy since we're just going to um add a shortcode here shortcode paste then make sure to have the with 100 so that it will uh so oh i think got wrong sorry i actually created this one for preparation sorry for that you also need to change the background a bit sorry for this if you're lost but uh this one is actually just customizing but um the thought is uh you can really relate so for the registration tab on the content you just need to add a short code here from the one we've created we copied earlier and then we'll just create uh delete this one you need to make sure that the shortcode is on 100 width so that it will take up the whole um this one the whole length and then we just have set this to the left sorry and hit save right so what we're gonna do now is we will be logging out to see if so as you can see uh login this is the register here so this is the front end of the website so user can now register on the page so that's just how easy uh to have a custom login and registration page on our website if you learned uh a lot if you learned from this video kindly hit the like button or hit subscribe thank you

Channel: Marion Paolo

Views: 721

Keywords: oxygen builder, wordpress, oxygenbuilder, mpwebdesigns

Id: 576XpTs4kV8

Length: 10min 58sec (658 seconds)

Published: Thu Apr 29 2021