Elementor Pro Login Popup

in this tutorial i'm going to teach you how you can create a beautiful premium login pop-up in just a few minutes using elementor pro so when visitors with an account land on your website they can trigger the login pop-up by clicking on the call to action then they can log in and automatically they will be redirected to the page of your choice in my case i redirected to the dashboard but now as you can see the call to action has changed to my account so let's go to our homes page for example let's say we just want to go back to our dashboard we can just click on my account but now if we log out so let me log out as you can see the call to action has reverted back to login and if we click we're back at stage one now of course this also works on the mobile so if i click on login then i can just log in and i'm redirected to the page of my choice and same thing i can go to any page on the website so let's go to about us if i click back on the navigation now i can click on my account and i'm back where i want it to be and if i log out i'm redirected to the home page now one thing we will not be covering in this tutorial is how to create a fully functional customer dashboard as you can see here because that would be a pretty lengthy tutorial with a tool like jet engine but hey if you're interested in this type of tutorials please let me know and maybe i'll do one in the future so in case you didn't know i'm your host casino from casino.com i'm the digital alchemist so let's get started with this tutorial okay so this is what we're going to start with and even though it looks exactly like what i've shown you as you can see here i have a call to action but when i click nothing happens and we need to make all the magic happen prerequisites so apart from a fresh wordpress install and a wordpress theme and in my case i'm using the free astra theme which is very lightweight what you really need is the elementor plugin as well as elementor pro now if you don't have elementor pro yet you find the link in the description below it's an affiliate link so it means that i do get a commission if you purchase after clicking on one of my links but i only recommend elementor pro because i absolutely love the product i use it in all my projects and this is the kind of tool that i recommend to my friends and family and on top of that it doesn't cost you anything extra and it gives a little kick back to the channel and that allows me to keep on creating free content now we'll need another plugin which is completely free but we'll see that a little bit later on in this video creating the pop-up so first of all you want to go to templates then click on pop-ups then click on add new and i'm going to call it pop-up login then click on create template now we don't want to use a pre-made pop-up so i'm just going to close this and i'm gonna click on the plus and select one column and right away i want to edit the pop-up settings so for that i need to click on the gear icon at the bottom left corner of this window so click on the gear icon and next i want to select a width of 100 vw so click on vw and 100 and now for the height we want to select custom vh and i'm just going to make it blank for the time being content position should be on top the position horizontally should be in the center and vertically it should be at the top next i want to deactivate the overlay as well as the close button and for the entrance animation i want a fading down and for the exit animation i want to fade out up and i want to change the animation duration to 0.2 and for the general settings we don't need to change anything so i'm just going to click on publish and it's going to ask me where do i want to display my template so i'm just going to add a condition and by default it says include on the entire website and that's exactly what i want so i'm just going to click on next next save and close okay so now that we've done this i want to go to style so still in the pop-up settings then i select the background type classic and i'm going to select the white color here with the color picker next where you see box shadow here i'm just going to click on the back to default icon so that i can remove that ugly shadow next i want to click on the advanced tab and i want to activate prevent closing on overlay and prevent closing on the escape key because that's really annoying if people are actually entering their details in the login pop-up and inadvertently they click in the overlay or they just click on the escape key then they have to start all over again so once you're happy with it click on updates but for the moment it still doesn't really look like what we want okay so you want to open the navigator mine is already open but in case you're wondering here at the bottom left corner you have the navigator icon here or you can just use the keyboard shortcut command plus i on the mac and i guess control plus i on a pc okay so with my navigator open i'm going to select my section okay now with my section selected i can start working on the layout tab so i want the content width to be full width i want the height to be a minimum height of 60 vh and now you can see it's bigger it's taking 60 of the viewport next i want the column position to be stretch vertical align should be space between the overflow i leave it like this html tag i leave it like this and same thing for the structure so once again let's save our work next i want to select the column inside my section so once again i'm going to use the navigator i'm just going to toggle it and as you can see here i have a column i only have one column in this section actually so let me select the column and then i want to go to advanced with my column selected and i want to give it a padding of 50 pixels all around so it's just gonna give some space for the content okay so now i can start dragging widgets inside my column and for that i'm going to click on the widgets i can here at the top left and the first widget i want to add is an image so let me drag this here and i'm going to select an image that i already added in my media library so let me add that one here and in case you're wondering i created that image myself you can use photoshop affinity photo or if you want to use free tools you can use the or photo p which is a kind of photoshop in the browser and basically these are just two lines so this is a 512 pixels by 5 12 pixels file with a transparent background and i just added a couple of diagonal lines and i saved it as a png so that it keeps the transparent background okay with my image selected i'm just going to go to the style tab and i'm going to give it a size of 50 pixels then back to the content tab and i'm going to align it on the right hand side now as you may imagine the purpose of that image is to close the pop-up so for that we want to go back to the content tab with our image selected then where it says link you want to select custom url then click on the dynamic tags icon and then look for the actions click on pop-up then click on the wrench icon and in the action drop down select close popup and once you're happy just click on update okay next we can add another widget so once again click on the widgets icon here and this time i'm going to add an inner section just below the image we just added but we'll fill that in a little bit later so let's add a third widget once again click on the widgets icon and this time we want to add an icon box or you could use other widgets but i'm just going to use this one now as you can see all the elements are spaced evenly vertically and that's because initially we set the vertical alignment of the section to be spaced between if you recall so now let's style it and then we'll take care of the inner section so with our icon box selected let's remove the icon and let's change the text to close and i'm going to remove the description and same thing we want to do the same thing we did previously for the image so where it says link we're going to select the dynamic tags icon then look for actions pop up click on the wrench icon and then select the close pop-up behavior and next we just want to change the way it looks so for the html tag let's select span then in my case i'm just going to style it to my liking so next i'm going to click on update to save my work and now we can really take care of what you came here for so the login pop-up so first of all i'm just going to delete the first column because by default it has two columns then i'm going to select my inner section here by clicking on the six dots and i want the content width to be boxed and i'm going to give it a content width of 600 pixels because i don't want this to be too wide next i'm going to click on the widgets icon once again and this time i want to look for the login widget so i'm just gonna drag it here and actually i want to spice this up so i'm just going to add another image so once again let me click on the widgets icon and i'm just going to drag an image icon here so for our image i'm going to select the logo i'm going to pick this one here and then i'm going to go to style and in my case i'm going to give it a width of 36 percent but it really depends on the size on the shape of your logo so you need to play with those values okay next let's start styling our login widget so first of all on the content tab in my case i don't want to show the label and the input size should be large now for the button it should say login so that's good and the size should be medium and for the alignment i want it to be full width next let's click on the additional options and i want to add a redirect after login here so let me toggle that option and then i'm just going to look for the page that i want to redirect to in my case it's my account next you want to click on the style tab so the rows gap i'm going to leave it at 10 links color is fine for me once again make sure it matches your website style okay so that's starting to look good once you're happy just click on update and as you can see this is what we want to have just like in the final demo okay but now we need to add a trigger to open this pop-up triggering the login pop-up now i'm using elementor pro and i've created a custom header from elementor pro which is overriding the theme that i'm using on wordpress now if you don't know what i'm talking about i created more than 10 videos on the topic got more than 10 tutorials teaching you how to create a hybrid navigation so i'm not going to cover everything in this video but basically this is the custom header i've created one way to access it and to change things is to go to the dashboard then you want to go to templates theme builder and once you're in theme builder i got a few headers here now another way to do it is just to go to the front end and once you're in the front end where it says edit with elementor you just hover over it you don't click on it and then it's going to show you which header is being used and in our case it's header 0 2 design so let me click on this okay so this is our header and as you can see here in the navigator i got one for the tablet and mobile and one for the desktop sometimes i just have one but once again go and check the tutorial i've already created for this type of hybrid navigation so first of all we're going to take care of the desktop and we'll talk about tablet and mobile later so basically our header here is one section with three columns first column is the logo that links back to the homepage then i have a nav menu which is a pro widget from elementor pro basically it's our navigation for the website and then i have one column with a call to action and this is what we're going to use today so with our call to action selected the first thing i want to do is change the text so initially the text is going to say login so i've just changed that here and next i want to link it to the pop-up so if you recall when we closed the pop-up in the previous steps what basically is the same thing but this time we're going to open the pop-up so let me remove this and i'm just going to click on the dynamic tags where it says link and then i'm going to select pop-up in the actions as you can see here so click on pop-up then you want to click on the wrench icon and by default it says open pop-up now which pop-up is he going to use so for that click on the drop down here and i'm just going to type login because that's the name i gave to my popup so pop a plugin okay now click on update okay so now it should work okay so now we're back in the front end and this is the version where we haven't done anything yet as you can see if i click on call to action nothing happens so now let's refresh the page okay now it says login if i click there you go so this is my custom login and now if i click on the image here it closes it let's try one more time and this time let's click on the close button here and once again it works perfectly now one thing we did is that when we log in we want to be redirected to a page so let's try one more time and this time i'm just going to log in and there you go it works it redirected me to the my custom page and now if i log out okay i'm back at square one but one thing that should be different i don't know if you saw it so once again let me log back in once we've logged in now the button should change to my dashboard or my account so if i click back in now it just opens once again the login pop-up and it doesn't make sense we don't want that we're already logged in now of course we can just log out here but it makes more sense to actually allow the user to access their dashboard so for that we want to go back to the wordpress admin and we want to go back to our dashboard and then you want to go to plugins add new and then we're going to look for dynamic visibility for elementor so just type it here in the search field and that's the one here so all you have to do is first click on install i've already done it and then once it's installed you need to click a second time to activate the plugin so as mentioned is completely free and it's from a solid developer so let's go back and this time i'm just going to refresh the page and now let me select my call to action again and as you can see now i have a fourth tab which says visibility because by default in elementor and elementor pro you only have content style and then advanced and now with this plugin we have visibility so that's going to allow us to add some conditional statements if this happens do this if this happens do that okay so the first one is our login we already have it here so the first thing you want to do is click on enable visibility and then you want to select the display mode so we want to show this button login when people are not logged in makes sense right so where it says triggers i'm just going to delete everything because i find it easier and then i'm only going to select user and role next i want to click on the user and role tab so here by default it should be empty and then you're just going to type visitor and then select visitor non-log user so basically what we did is we gave a statement a conditional statement that says enable visibility for this button and show it when it's a visitor and a non logged in user let me click on update so let's check if it works so let's go to the front end and here i'm logged in as an administrator so i'm not a visitor so i'm just going to refresh the page and as you can see it disappeared because we're not a visitor so it's not showing the button okay so now all you need to do is right click on the button here and click on duplicate and then with my second call to action selected i'm just going to change the text to my account and next i want to change the link here so i'm just going to click on the little cross here to remove the previous behavior and then i'm just going to add the link to where i want to go so i'm going to click on the visibility tab this time i'm going to change the behavior so i still want to enable visibility but this time i want to hide i want to hide this call to action when the user role is visitor so let me click on update once again let's go back to our front end still logged in as an administrator and i'm just going to refresh the page and now you can see it's got the my account button okay so now let's try as a regular user so i'm here on the front end let me click on login i'm going to log in with jane doe okay and now it works my account now one slight detail if you recall the initial demo i had a different icon here so let me select my second call to action then i want to go to content icon and i'm just going to select a user icon and i'm going to place it before okay that looks better so let me update let me go back to the front end let's refresh and there you go so this is the behavior you wanted now if i click on log out okay i'm back at square one i can log back in okay and now it says my account so i can go to any page let's go to our homes page let's click on another page and oh i want to go back to my account okay works fine then i can log out and once again back to square one adding a log out link now there are many ways you can add a logout link there are some specific plugins or if you're already using a plugin like jet engine by default you can activate the option or you can find plugins on the wordpress repository but here it's actually much more simple than that so let me edit this page with elementor so basically all i did is i just dragged the login widget here so all i did is i looked for widgets i typed login and then i just dragged a login widget and what happens is when you're already logged in by default it's going to show you the logout link so let me remove this oh actually there is one more thing you need to do so if i select the login form here then if i go to additional option now i can redirect after logout so by default it would be like this so you can just say when people log out so toggle it on and then you can select where you want to redirect people so in my case i chose site url you could just type the url of your website or you can just click on dynamic tags and then scroll down to site url and there you go so now because i'm logged in it doesn't show the whole login form but just shows the logout link and if i click on it it's going to redirect me to where we said it should redirect me which is the homepage of this website now how does it work from a tablet or from a mobile if you remember earlier in this video i told you that i created this navigation from an earlier tutorial that i released on the channel actually several tutorials so basically i have two headers one is for tablet and mobile as you can see here and one is for the desktop you've already covered the desktop so now let's talk about the tablet and the mobile so here for the tablet and the mobile i have a section with two columns so the first column's got an image that redirects to the home page of the website and the second column's got a button that triggers another full screen pop-up and this time is the full screen navigation for tablet and mobile so i may imagine we can do the same thing we did here for the desktop header because here in the desktop header we have the buttons right here but in our case for the tablet and the mobile we actually need to open the full screen navigation where things happen so once again to access this pop-up you want to go to templates and then click on pop-ups and i got a few pop-ups here so if you only have one then that's going to be easy otherwise another way you can do it is just go to the front end of the website hover over where it says edit elementor but don't click on it and then look at the pop-ups that are loaded and here i have pop-up login this is not the one i want you just created it and i have pop-up full screen navigation so let me click on this one okay so this is our full screen navigation for our tablet and our mobile so let me go into tablet mode so as you can see i already have a call to action but instead of recreating everything i can just go back i can right click copy this button then i'm going to right click paste it here and i'm going to delete the first one then i need to make some adjustments so first of all with my button selected i'm just going to center it next i want to make sure that the behavior is the one i want so as you can see here the link should open a pop-up and the pop-up should be login templates so that's fine next i want to click on the visibility tab and make sure our settings are correct so i want to enable visibility i want the display mode to be show the trigger should be the user role and when i click on user role i just want to be sure that it only shows to non-logged-in users okay so let's go back to the front end and let me refresh and if i click on the navigation as you can see we can see our call to action here if i click on it it works fine it loaded our pop-up one thing i noticed here on the tablet and probably also on the mobile is that it would be better if it was full screen because right now we can still see the login button here and we don't want that so for that let's go back in elementor in our login pop-up and i want to click on the responsive icon here at the bottom left corner of the window okay let me click on it and now by default it switches to the mobile version let me select the tablet version and i'm going to select my section so let's select our section and with the section selected i want to go to the layout tab and this time i want it to be 100 vh so now it's full screen and next i want to click on the mobile icon and by default it's going to pick what came from the level above so that's going to be fine but i may want to change the size here of the image because that's a bit too big so let me go to style and i'm just going to change the width to something that looks good for me so you may want to change that on your hand okay so now let's go back let me refresh once again let's open click on login and now it's much better now we can focus on the task at hand which is logging in we can close it it works fine and with the image also okay great let's check our iphone version let's refresh once again it works let's open and it's looking beautiful it works when we click on the image so when we click on close it works fine also great now we still want to add that behavior that when we're logged in we want it to change because right now if i click on login and if i log in okay so it works fine but now if i click here the call to action has disappeared and i have no way to go back to the dashboard if i'm on an other page so let's go to about us as you can see there's no way i can go back to my dashboard so let's go back to wordpress so i'm just going to copy the my icon button from the desktop version then go back to the full screen pop-up and i'm going to paste it right after the first button once again i need to make some adjustments so i'm going to align it here next i want to click on the visibility icon and i want to check the conditions so i want to enable visibility and i want this to be hidden if the user role is visitor so let me click on update okay now let's go back to the front end let's refresh let's click and as you can see it works fine now we have my account so i can click on my account from any page on the website and i can get back to my dashboard and if i log out let's click again on the navigation and now i can log back in and now cherry on the cake if i zoom in you can see this beautiful custom pointer and if you're wondering how i do this and how it magically snaps to the elements in the navigation or on this call to action i invite you to check my previous tutorial on the topic because you can create this in just minutes without any additional plugin now of course you'll find the link in the description below and if you're interested in getting better at web design make sure you subscribe and smash the notification bell so that you don't miss anything now if you get any value out of this video i'd really appreciate if you could give it a thumbs up because it's only going to take you a split second but it's going to make a big difference for this channel and if you love web design and you want to be able to create and maybe sell premium websites make sure you watch any of the videos appearing on screen right now i'm trying to create the content that i wish i had when i got started so i'll see you in the next one and until then take care and stay safe

Channel: Kaycinho The Digital Alchemist

Views: 3,115

Keywords: elementor pro login popup, elementor pro login, elementor pro popups, login popup elementor, elementor login popup, login, elementor login register popup, elementor popup, elementor popups tutorial, elementor registration form, popup builder, popup login wordpress, wordpress custom login

Id: UhVmHaSWtY4

Length: 25min 33sec (1533 seconds)

Published: Thu May 27 2021