Design Beautiful WordPress Login & Signup Page with Elementor

we will create a beautiful login and signup page using free version of the Elementor so let's get started and make sure to subscribe to our Channel we are using Astra theme with free version of the Elementor you can use any theme you like we will install theme my login for login and signup forms create a new page for login and sign up [Music] edit the page with Elementor we will use the element or canvas template add a new section with two columns [Music] [Music] [Music] let's find a background image for the left column that looks nice [Music] let's modify it for our column I will provide the modified file in the project folder [Music] [Music] [Music] [Music] let's add some text to the left column [Music] [Music] and a button [Music] [Music] [Music] [Music] let's find some illustrations you can specify a color for illustrations [Music] add a tabs widget you [Music] now we need two templates for login and signup forms we will use those templates in each tab we will use theme my login shortcode I will drop the link to the website in the video description copy the shortcode [Music] use the action attribute to define which form you need let's give this widget a custom class so we can style the form later [Music] [Music] [Music] [Music] [Music] to use these templates in tabs widget we need a plug in anywhere Elementor [Music] you need the template ID you can find it in the URL when editing a template [Music] [Music] let's have a look at the page of course you need to open the page in the browser where you are not logged in to see the forms I am using the incognito tab okay so far so good [Music] [Music] [Music] let's hide these links with CSS [Music] prefix it with the custom class we said earlier looks like there is something wrong in the signup form widget some spell mistakes [Music] okay nice let's use background illustration [Music] I provide the edited image in the project folder [Music] you [Music] [Music] [Music] [Music] [Music] [Music] let's style the form in the tabs [Music] a long road and the man is gone all the games where you played your part from the very start just to come this far [Music] [Music] and you knock it down you're all setting up to rock this town you don't even need to play just get up and go [Music] [Music] use desktop-class because we don't want to mess with the mobile styling of the tabs widget [Music] baby oops we prefixed it with the wrong class [Music] I need you closer than ever everything before my life is wasted if I can't spend it all with you I've lived in total darkness now you're my only light when you're away I feel like a shadow homie homie and look into my eyes you'll be saying Oh [Music] [Applause] [Music] no I'll never let you go you stay with me let's add forgot password link to the forms [Music] [Music] [Music] I used to look to the sky and all I saw was rain I spent my lonely nights trying not to feel the pain with you I'm like a flower that sees a break of day I loves like sunshine now let in a buffet [Applause] [Music] and look into my eyes you'll be saying always [Music] no now let's fix the form for mobile screens [Music] [Music] [Music] I'll never let you go no I [Music] I'll never let you [Music] [Music] you you can download this complete design with templates graphics and CSS code the link is available in the video description [Music] [Music] [Music] [Music] I'm giving it [Music] thank you for watching hit the like button and subscribe to our Channel if you liked the tutorial by themes plugins and services from the video description to support this channel [Music]

Channel: WP Academy

Views: 181,533

Keywords: urdu tutorials, hindi tutorials, wpacademy, elementor, elementor tutorial, elementor design ideas, elementor design, wordpress login page design, wordpress sign up

Id: fjAzcq3SJOs

Length: 27min 37sec (1657 seconds)

Published: Sun Mar 29 2020