Create Custom Login Page ✅ Custom Registration Page with Elementor in Wordpress

howdy today we're going to customize this screen to look like this screen or to whatever you would like your login and registration pages to look like you won't believe how easy and fast this is so let's jump in [Music] your website is your cyberspace for your customers or members and when it comes to online stores blogs and other membership websites customers may require to log into or register so that they can become users on your website along with logging in important call to actions like newsletter signups new or recommended product notifications or reminders can really help you gain repeat visitors or customers remember that your website is your virtual door to your company and having a wordpress branded login page doesn't do much for credibility so it's natural that you would want to brand your login and registration screens to suit your own brand or business what it comes down to is simple you want your customers employees subscribers and members all to have a door to walk through with your name on it this is an example of the website we'll be using today the theme that i'm using is the wp astra theme and i'm using demo content which i've imported as a bit of a template for our website it's an amazing theme and of course completely free with a massive amount of different demo content options just like this i'm leaving a link in the description so go check them out let's head to our dashboard i'm going to install a plugin that will change how this will work if you had elementor pro you'd have this feature already but let me show you how we can do this completely free using a plugin called essential add-ons for elementor let's go to plugins and select add new in our search box we'll type essential add-ons for elementor [Music] and we'll select the one by wp developer and activate [Music] this process involves us creating a login page and a register page then we will be using elementor page builder with these pages along with this we will be using our essential add-ons for elementor plugin and use a login registration widget that adds the login and registration functionality [Music] let's go to these pages then we'll add a new page [Music] as our login page we'll simply name it login then check and make sure that the permalink is login click publish and then edit with elementor [Music] there's a few ways how we can customize what our login page will look like i'm a huge fan of simplicity and i like to remove the header and footer sections when visitors arrive at the login or registration screen for this tutorial we'll be keeping things basic but i'm showcasing some clean and simple methods that does work and looks and feels seamless of course elementor is really powerful so if you felt like experimenting a bit feel free to do so okay so what we'll do is we'll just go to our settings it's this little gear icon at the left bottom of your elementor page and then we'll select page layout and we'll select elementor canvas i'm going to select update what we'll do is once once we've updated it we'll just refresh the page [Music] and now we have a blank page to work with i'm just going to jump straight to a widget that the essential add-ons for elementary is installed for us which is login and we'll just drag the login registration form so our login form type will be login then click on form header content and we'll go to our form header logo then select our website's logo you'll see our logo here but we'll adjust the size a little bit later now let's go to login form options and then click on redirect after login and we'll insert our url here which is the destination that we want our visitors to land on after they've logged in in this case i'd like to make it the account page [Music] next we'll go to style and i'm going to be editing the login form header in order to change that logo size and we'll go to the form logo [Music] i'm going to make it a percentage width of a hundred percent next let's go to login button and for the width we'll do the same and click percent and make it 100 so next i'd like to change the buttons color i'm using one of the greens in the logo and what i've done there is i've used the color picker tool in my graphics editor and placed it on one of the greens to get the hex color which i'll paste in here [Music] let's go back to content and select login form field then let's change the buttons text that says login to sign in [Music] so let's select the container and now finally we'd like to put the form in the middle of the page so we'll go to advanced and adjust the margins i'm going to select percentage and then just tick the unlink box and i'm going to go with 10 percent then click update and then we're done with the login page [Music] with the registration page it's generally the same procedure however this time around we would need to check a setting which allows users to be able to register on our wordpress website i'm going to skip this section until we receive the error and then we will activate that setting so let's go to pages [Music] then select add new the page name will be register then double check your permalink and click publish and then edit with elementor [Music] as before we'll select the little gear icon at the bottom left of the screen and for template we'll choose elementor canvas then click update and refresh your [Music] screen before we customize the register functions let's sort out that error first you will see that as soon as we change login widget to the register widget an error appears prompting us to activate registrations to our website so let's go and do that now within our dashboard we can go to settings click on general and find that anyone can register option ticket and then save the settings now let's go back to our page and then refresh the tab as with the login page we'll go to the widgets and search login it's the same widget but we'll use this one too so i'll just drag it over [Music] then take a look at default form type currently it says login we'll select that drop down and click on register quite importantly between the login and the registration screen they share the same widget so take note before you edit anything but you don't edit the login portion of the widget when you're trying to edit the register portion of the widget i've ran into this before and it can be a bit confusing [Music] as with the login form we're going to add the site logo again [Music] for the registration page let's get users to agree to our terms and conditions you can add any text you want here and you can also assign the terms and conditions page [Music] so again just to note previously we went into the login form header this time we're going to register form header then select form logo and again we'll resize it with a percentage width of a hundred percent then under form register options you can set what the default user role is as this is a e-commerce store i'm going to set it to customer then for the width of the register button i think it looks fine but let me show you how you can change the width of it if you want to do that so let's go to styles then click register button and scroll down to button width and again [Music] we'll select the percentage width and this time we'll make it 60 so it will be 60 of the column width and then by register form fields you can either add more fields if you like or you can leave it on default as it is [Music] what i would like to do here however is simplify the register form and take out the labels and only leave the placeholder info so i'll just take out the labels in each of these forms and then lastly we'd like to place the form in the middle of the page so we'll head to the advanced tab and adjust some margins and in this case i'm selecting percentage and we'll just set it to 10. then click update okay so now that both our forms are set up we'd like to add them to our menu so let's go back to our dashboard then select appearance and menus [Music] select your custom links tab first we'll add our login link the url will be your website slash login and the menu item name will be login click add new menu item and then for the register link will be your website url slash register then after adding your link text you can add to menu so next i'm moving the login and the register links and then just drag them in place to wherever you would like them to be displayed on your website i'm going to keep mine under the account menu item now currently everyone can see these menu items even if you're logged in or if you're logged out we obviously would like logged in users to see details appropriate to them and show new visitors or logged out users a different set of menu options again i'm keeping things basic but i will show you how you can easily assign these menu items based on user roles for example administrators customers or logged out users so let's save this menu and then let's go to plugins and click on add new plugins now let's search for user menus [Music] and then you'll see user menus there and we'll install this plugin [Music] and click activate now let's go back to appearance and menus now when you expand the menu item you will see that the plugin has added an extra feature that gives us the option to decide who can see this link we'll click on the drop down and select logged out users then we'll do the same for our register menu item [Music] now for the my account menu item i would like only for logged in users to see this option so we'll expand the menu item and click on the drop down and select logged in users [Music] now we can select who can see this link i will select administrators contributors shop managers and customers if you had a blogging website you would for example select editors for a similar menu item now for the cart assigning a user menu role isn't necessary as our customers can buy without creating an account however i'm going to do the same here [Music] when we are done we can select save menu [Music] then lastly i recommend you head to woocommerce endpoints and add the logout endpoint and reset password endpoint to your menu you don't need to assign menu roles here as logged out users will automatically not see the log out button and the reset password button is relevant to logged out and logged in users so let's add these to the menu drag them where you would like them to be and click save menu so now to test we can log out of our website and go to the menu items and log out log back in register and so on [Music] so to close off you can see this was a really easy simple and basic setup but you are free to play around a bit more add functions and styles or remove if you're comfortable doing so there are different ways and methods but this is by far the easiest method whilst avoiding coding even using some plugins will require you to be able to write some css or html to reach the desired effect but with essential add-ons for elementor this was really a breeze [Music] if you liked the video like and subscribe and i'll see you soon thanks for watching

Channel: Web Design Hub

Views: 13,320

Keywords: custom login page wordpress, custom registration form wordpress, wordpress tutorial, elementor tutorial, elementor woocommerce, elementor wordpress, essential addons for elementor wordpress, wp astra theme, wp astra woocommerce, user menu plugin, website design tutorial for beginners, wordpress registration plugin, wordpress custom login page, wordpress custom login

Id: 74abGWONOaU

Length: 15min 41sec (941 seconds)

Published: Fri Dec 18 2020