How to create custom login page for WordPress | Divi Builder Tutorial | The WordPress Buddy

[Music] hello friends today i will show you how you can convert this simple wordpress boring login into this one so you can see this page has a is a custom login page i design and this has good video background and it's completely responsive so if we check this page on a mobile as you can see i have turned it in a mobile format so now if we refresh the page then the video will start playing again as you can see here so this is completely responsive it looks responsive on other landscape mode as well as you can see and it is in vertical portrait mode as well the video will is very lightweight it won't make your page heavy and it will load very fast because i am using very compressed version with great quality i will tell you where you can get a free videos like this which are not very big in size and they load very pretty well and they in mp4 form because i have made this page with the db builder so if you are using db builder then you can easily create this page and i will also tell you how i set this page as a login page because as you can see i am on the stylish login page this is my custom login page and i have designed it with db so for example if i go to wp admin then i will be automatically redirected to this login page so you can convert your boring wordpress page into this stylish login page and that's too without any plugin you won't have to download any plugin you won't have to write any code i will provide you everything from start to end how you can design it how you can set it as a login page even if you type the exact url for logging in wp hyphen login dot php even then the system will automatically log into your here so your user will never see that boring login page this login page will work for all kind of role users it will work for admin as well so you can also log into your admin account from this page the boring the wordpress native login page will be gone forever and if you want you can also bring it back with by disabling the code i will give you so let's start how we create this page and how i set this page as a custom login page for your wordpress site okay so first of all let's create our custom login page you can go to pages and click on add new you can name it your page anything you want for i am naming it is stylish login and you can just publish it you can publish it later after you finalize but i will publish it now so that we can see the changes on the front end now we click on use db builder so i am using db builder for this uh page but so i will post another tutorial where i will create the same custom login page with elementor okay one thing when we click start building actually first we will have to edit its page template actually for login page we don't need any header or footer so we will convert its template from default template to blank page the blank page template is default and comes with the dv theme built in so you just go to template and change it to blank page and click on update now when we edit with dv builder you won't see any header or footer and it will be a complete blank as you can see here it's completely blank there is no header folder so first of all uh we have to add a new single column row and we have to add a login module so this is not a custom module with db builder comes with this model built in so add a login module now it comes with this title and description but for this tutorial we are not using this one so we will just delete the title if you want to keep it you can change the contents the hide uh the title and the body but i won't use this because i will be using the logo or to put it at the top of the login form but this title and description shows on the left side so i won't be using it okay so i have removed the title and the description now i will remove its background go to background and turn this so we use background color okay so now we have our login module after adding the login module now we will add the background to our section the video background you can also add image a single color or gradient or a video but for this tutorial i will use video but first of all we will have to make it full height so that our section and our background covers the whole height of the window to do that we go to the section settings and we go to design tab and then we go to sizing and then in in the height property we set it to 100 vh the 100 ph means the 100 of the vertical height of the browser so we will click save as you can see the boundary the section boundary has been increased to use the 100 what vertical height of the browser now we will again go to it the section settings we go to the background section now first one is the color tab the second one is the gradient the third one is the image and fourth one is a video so we will click on the first icon under the video and i have already uploaded the video files now let me show you how i grabbed the video and how you can upload so to download videos free videos to use as a background you can open a new tab and go to paxels.com p e x c l s pexels.com now if your site is related to yoga then you can search for yoga as i shown in starting of the tutorial as you can see there are lots of images and videos to search only for video you have to click on this videos filter tab night will show only the videos these all are free there is no attribution required to use videos from this site and they are very high quality and professional so you don't have to worry about the quality and your your site will their login page will look absolutely professional so you can use any video from here but don't use any video which is very big in size because the video i downloaded one of them was very 45 mb in begin size so if we use that big much size video then it will slow down your login page and on slow connection it might take ages to load so always use a video which is under 5 mb because most of the internet connections are very high speed and they can easily load five mb's in few seconds so you can download and you just click on any video yeah for example we can use this one or we can use this one or let's use this one so click on this and then you click on the arrow next to freestyle free download and you can download any resolution and if we just download we click download and it will start downloading without asking for any login and we save it is you can see the video has downloaded we open the folder and i have already downloaded these videos this is the one i used in the project so if we hover over it then it will show the size and you can see the size is 5.46 mb and this is the video i downloaded which is very big in size it is 45.9 mb and this one this is another one which i downloaded and it was 1.78 mb but i like this one so uh for tutorial purpose i will show you how you can add a one because the recent video we just downloaded it is 8.90 mb but i will upload this one again so upload this double click on it sorry we are not playing from it we just go back to our db builder we click on video then we click on plus then we go to upload files and select files to and to upload video files to dv you don't have to do anything extra you just can download the video and just upload just like you upload an image and you select the video we click on video and then we click on open night will start downloading actually i have already uploaded the video but for the tutorial purpose i am uploading it again okay it's almost done okay the video has been completely uploaded to wordpress and now we just have to click on upload a video and now it will be set as a background video as you can see this will show the video we click on the save changes okay see how cool it looks for the first few seconds it might stuck because the page will load the video into the browser but after few seconds it will run very smoothly okay now if we save the page as in we click on save and now let's check how our page looks on the front end we copy the link and we open into another browser where we are not logged in really click on this new tab and open it as you can see here is our page so far now i will show you how you can match the styling of the one which i show you in the starting so we will create the page similar to this one so as you can see the fields are parallel to each other there in one line and i will tell you how i did that it is done with a bit of custom css and this logo at the top and the forgot password but if you see on this page is you see the forgot password is in the middle of the fields and the button and now let's check how i removed that from there and how i did added it at the bottom or after the login form okay let's jump back to our backend of the page okay here we are now we add the logo for the logo we add the image module we click on image and then we delete click this delete icon to delete the placeholder now we have to click this layer icon with the plus and and we click on site logo now whatever you have set as your site logo that will be shown here that will be added here automatically so if you add change your logo from the dv theme options then this page will also show the updated logo and now we set it settings we go to design tab we set the alignment we want to show it in the center and we want to reduce the width of the logo so we go to sizing and we set the width to 200 pixel you can see it has reduced now we move it to the top we just drag it to the top okay now we have our logo set it's in the center and if you want to upload a custom image instead of your logo you can do that as well you can just delete it click on add image and you can choose anything let's choose this aka and you can use this as well the customer but it's better to use the logo so it's look professional and consistent with our site content now let's finalize the this login form first of all we save this now we have to remove this forward password from this login form but before removing let's add this forward password after the login form to do that we add a button element click on this plus and search for button we click on button and we name it for go your password for god your password we type the same now where do we link it we go to the front end here we open the inspect let's go to this page our original page we open the inspector window which is you can open it by pressing ctrl shift i and we click on this arrow and the box and we hover over the forgot password element as you can see it has selected this forward password p tag and if we open it you can see the anchor link for this and this is the anchor link for lost password we right click on it and we then click on copy link address now we jump back to our backend we paste the link here and we set the target as is in the same window and we click save changes now we have created a new forgot your password and after finalizing it will look like this so let's make it look like this again open the settings we go to the design tab first we set the alignment we align it in the center now we go to the button settings we turn on the use custom styles for button toggle and we set the button size to 14 pixel you can keep it however you like now we remove the background from it if you want to keep it you can do that as well but we don't want to highlight this thing much so we will just remove the background by clicking on this transparent icon we also remove the border by default is 2 we enter 0 and you can see is now looking almost the same as this one but when we hover it we see a black background without any icon as you can see when we over it then it shows an icon you can keep it as is but uh let's remove i i can scroll down and you will see show button icon we just turn it off and now if you over it you won't see an icon now we have to give the background upon hover we click we go to button background we click this over moist pointer icon and we click this forward tab now whatever color we select here that will be shown on the hover so as we have clicked on the hover tab so it's already shown here but we if we save the changes and now we hover over it let's check it on the front end click on save changes have been saved so let's check on the front end this is a page we are making so refresh it okay we can see our logo and let's turn this off and if you hover it over it you can see forgot your password so we have our logo set we have a weird forgot your password and if you click on it you can see it will go to the lost password screen see let's go back okay now finally let's finalize our login form first of all we remove this item okay to remove this item we will have to use bit of css custom styling okay again we have opened the inspector by pressing ctrl shift i and we again click on this mouse selection selector icon and we hover over this forgot your password as you can see this item as a class eet and just for pv underscore forgot password so we apply the css on this class by clicking on the plus icon and applying the property display none you can see that item has been removed from the page but it's just on the front end we will have to add this here copy the css go to the back end and click on this settings icon for the page here you can give the page title the extract the featured image the background etc now click on the advanced tab click on the custom css here you paste your css and as you can see as soon as we paste the css that i item is removed from the page as well so save changes and say click the save icon to save the page okay our page changes are being saved and changes are complete now we refresh the page on the front end again to see if our css worked yeah so now the forgot your password has been removed or display hidden from the octane form okay now finally the login form is okay so let's finalize the login form first of all we have to finish the button changes so hover over the design icon for the login button and turn on this custom styles toggle on set the font size to 14 you can keep it according to your liking and remove the border by default is to set it to zero now to match its height with the fields we set its padding to 10 pixel for top and 10 pixel four bottom and you can make it uppercase as well just turn this capitalize icon on and you can see over over is showing transparent background and icon let's turn this off go to the icon settings and turn this off show button icon off and now go to the button background and click on the hover icon with mouse pointer icon and now again click on this forward tab and now select any color let's select black so now when we over the button it will turn black instead of the transparent you can also change its background on over to any gradient color as well or even picture as well by setting it here you can set the gradient here you can say the picture here but let's to keep it simple we will just use the in single color but if you can if you want to change it to something else you can do from these two tabs okay so now let's align these three fields into one row first let's save our changes and let's check it on the front end and refresh the page okay so our button changes are here now to align them into one line we will have to apply the property display flex to the parent element of these three elements let's open the inspector again by pressing ctrl shift i and let's hover over the entire element and okay so let's dive into it you can see these three elements one two three this third one is the forgot password which have a hidden with css and this fourth one is the button and these all elements are in this form tag so we have to apply that this display flex property to the first parent the most transparent is the form tag so and we apply the cs to this form but we also take this one doesn't have any class we have to wrap it with the class of its parent its parent is this one so we select this one and we add space and we type the form tag now we apply the css to this form by typing display flex as you can see they are already in line now but now let's increase their size and align them into center after this applying display flex add another property justify content center and also add a bit hundred percent it won't extend its weight to 100 yet because it's parent element this one this div is not 100 so we will handle that later but first now we write the css for this form tag this one now we have to add another property what and that is align items flex start flat start means all the items align vertically to the top this justify content center is to align the content horizontally and align items is to align the content vertically and we have aligned it start so align or push all the elements to the top where the form tag boundary starts and you can see there is a purple line so all the elements have been aligned to the top of that purple line okay now we copy this css and jump to the backend and we again open the page settings advanced tab custom css and now paste the css here okay as you can see the changes are applied on the back end we save the changes and we click on save now to increase the size of this whole div we click on this div class we are on the front end again and we click on plus icon it will automatically up select the classes of this tip now we set its width to 100 percent and we set the padding to zero and you can see if we have to set the important tag so the padding's 0 is now effective now we copy this css as well and paste into the back end again okay so we saved the changes save the page again okay now let's check the front end what changes are we refresh the page by pressing the f1 key okay so we have refreshed the page and as you can see our login form is not centered so let's check what is the mistake we open the inspector again by pressing ctrl shift i we again select the inspector icon and hover over this whole form now if we check this etp newsletter div which is the parent of our form and we if we scroll down and we check find our custom csn and here it is with hundred percent padding zero important and as you can see our width hundred percent is not active it doesn't strike line over it it means it's not working so to make it work to override the default db theme settings we will have to add exclamation and important to it as well and as you can see as soon as we are important then our css starts working and now the form is in the center now to make them look good and to give them a space between all three elements and increase their size we have to give them a width of 30 to each element because this is a flex element now so to increase the width of each of this child element we have to apply the flex basis property and and we want to give a equal width so we just click on this parent div and then we go into the form and then we go to the p so it means select the p elements inside the form which is in this div class and now we apply flex bases 30 as you can see now our fields have been extended to cover the 30 space of the whole div so now each field is 30 wide and now we get uh we have covered the 90 space and now we have to separate them by giving some margin in the middle of them we set the margin right five percent you can see they have been separated and we have give less and decrease the gap between them by reducing the margin and we give them margin of one percent and copy these css we jump to the back end again we go to the page settings and we go to the advanced we go to custom css we paste the csn in the end and as you remember we also made this setting with 100 important so we add exclamation important to this as well and as you can see now our form is in the center the fields are wide enough and the login button is also aligned to the input fields username and password now we have to decrease the gap between the form and this forgot password so we go to the settings of this obtained form we go to the design tab and then we scroll down to the spacing and we set the bottom margin to zero and as you can see now the forgot password is jumped up we click this if you want to decrease the size spacing between logo and opt-in form you can do that as well by going to the image setting go into the design tab and go to spacing and turn this off show space below the image you can turn it off but let's keep it on and click on save changes and save the page now let's jump to the front end to check we refresh the page by pressing the f5 icon f5 key on our keyboard and you can see our login form is now almost complete and you can see there's a much more gap between logo and opt-in form as compared to the gap between the opt-in form and the forgot password so you can play with these settings you can align your logo to the left and move the position over forgot your password you can you can play with the backend settings however you want so the next step is how we set this as your login page so whenever someone goes to the wp admin login screen then they get redirected to this page for example when i enter wp admin then i get the boring the wordpress native login page so now let's set our new custom login page as the default wordpress login page jump to the backend go to plugins and click on add new now search for the theme my login plugin just type the name and it will start searching automatically this one is a plugin we have to install click on activate i have already installed it so just activated it now click on three my login settings you have to enable you can keep enable attacks requests on or off by default it's off you can keep it off we just have to change one thing here which is the login slug by default it is login so now you have to replace it with your custom login page url our your login page is stylish login so this is the url of our custom login page you can match this url with this one default login but if you want to use our custom login page url then you can just copy the url and then paste it here and replace the login with this custom slug and now just click on save changes now let's check what happens on the front end okay on the front end now we again try to open the wordpress login page by typing wp hyphen admin now you will see it will be redirected to our new custom login page c and when we click on login then it will take us to the dashboard so this is how you set up you the custom login page as your home new default login page you can also skip this step if you you want to use the default login page for admin purposes and you want to use this new custom login page for your customers you can send the link directly in your email campaigns but if you think your customer will access your wp admin page login to their courses or login to their membership backend to access their content then you can keep this step you can implement this theme my login step so this is how you design a custom login page now there is endless possibilities your imagination is the limit you can play with this form however you want now let's check how our page looks on small screen let's open the inspector by control passing i again and click on this dots icon to align this on the right vertically as you can see you can drag it and you can check how our pages is looking on the small screens as well okay now we are on the mobile we click on this mobile toggle device toolbar icon and it will show how our page look on mobile as well okay sorry one thing i forgot actually the css we applied on our form we didn't include apply this yes only us larger screen actually we have to wrap our css in the media carry so our css runs only above 767 pixel so let's jump to the back end and we open the page settings again and go to rms tab go to custom css so here is our css display flex we wrap this css into media carry type at media screen and bracket min width 768 pixel start brackets and close brackets after the this css flex basis so go to expand it okay so wrap this entire css except the one we applied at the top just save it and now save it the page again now let's check our friend tag and again okay we refresh the page see now the elements are stacked upon each other and it looks fine on mobile so this is how you make it responsive just turn off the mobile mode and now we are back to our inline mode and this page is completely responsive now one another step is that for example on some devices on some um iphone devices or ios devices or some old devices this my video might not play so we have to add another version of this video which is called web bam we go to the background again and click on the video tab and as you can see there is another store to add background video webm so it asks for the webm version for the same video to do that you can go to the site called mp4 to webm converter this is called cloud convert we click on this and you can see the url is cloud convert dot com uh mp4 hyphen two hyphen two webm we just upload the file here select file and we upload this file the one we want to convert and now it we select just leave all settings as it just click on convert it will start converting now you can see we have selected mp4 to webm this is a free tool you don't have to pay any price to convert it is just converting now or 50 almost complete okay our video has been converted now this pop-up will open automatically we have to click on download and we save the video as you can see the video has extension web bam we already have it but let's just replace it now go to the page back and again and this is our on add background video upload files select files select the web bam this is the webm extension file double click on to upload directly okay our video actually the benefit of this this video will rema remain the same quality but its size will be lot less than the original mp4 version as you can see the mp4 file is 5 mb but the webm is only 678 kv which is less than even 1 mb so lots of saving almost 90 so just now just click on upload a video and as you can see it will start playing in this window click save and save changes you won't see any change on the front end it just for the fallback method so wherever mp4 video is not supported then this web and video will start playing now there is third scenario even if the browser is not able to or the device is not able to play the web version either note the not even the mp4 then you can also set a background image here so if none of the video play then you can just click on add background and you can select any one let's select this one for now and now just click save you won't see this image you will only see this image where your video is not able to play so this is how you create a custom login page and you apply a design to the opt-in form and how you set it as your default login page i have put all the css on a page and you can just uh visit that page i have given the link in my description you can visit that page and i'll post some written instructions about the tutorial as well so you can understand it more easily and you can just copy that css code from there the entire code and just go to the page settings and go to the remarks tab with custom css just copy the entire css from there and paste it here and you won't have to make any changes at all and your css changes will be applied instantly on this login form and this entire page and just save your changes and you will be ready to roll and your page will start looking like this which looks very awesome and professional and very attractive to your users and so and you can download any other video as well so if you are running your site on any other niche like gym or e-commerce or traveling so you can find lots of videos on this pixels.com p e x e l s i will provide the link in the description so just set travel search for travel filter out the videos you will see tons of videos there are travel section has 20.6k videos so just download it and please keep in mind the video should be less than 5 mb so it is doesn't load the page longer and your if you keep the video size as less as possible then your page will load pretty fast just like mine because i have used a very less size video and you can see the page loads in few seconds after refresh and it won't affect your user experience so if you like this template if you want me to make more videos like this where with the db or elementor then you can paste your comments and please subscribe to my channel so that i can make more videos like this thank you

Channel: WordPress Buddy

Views: 81

Keywords: wordpress custom login, wordpress custom login page, create custom login page, wordpress custom login form, create custom login page in wordpress, custom login page wordpress without plugin, wordpress custom admin login page, divi login module, divi builder tutorial, wordpress custom login page plugin, how to create custom login & register page in a wordpress site, how to create custom login page for wordpress site, how to create custom login and registration page in wordpress

Id: edZCKNDcGX8

Length: 41min 47sec (2507 seconds)

Published: Sun Sep 12 2021