Your aim should always be to give your visitors a pleasant experience, and that’s why it’s essential to know how to create a login form popup.
A popup allows your users to access the login page without leaving the page they are currently viewing.
WordPress does not provide this functionality by default. When users press the login link, they are redirected to the default WordPress login page. Once they feed in their details, they are again redirected to a different page.
This long process could make them lose interest, reducing your conversion rate. But you can change this using the Elementor plugin.
We choose Elementor due to its ease of use. It is beginner-friendly and provides excellent design features, such as animations.
You can choose from more than 125 popup templates. But if you want to get more creative, you can create one from scratch.
We will show you how to redesign a template to match your brand’s image.
Here’s a quick index to help you navigate this article:
So let’s dive in.
Create a Login Form Popup
In this tutorial, we will create a login form popup that appears on the screen after hitting a login button on our home page.
To create a login form popup you need to complete two main steps. First, create a popup, and then integrate this popup with the login button.
And, yes, you need the Elementor Pro subscription to make this popup, because in this tutorial we will be using the Elementor popup builder.
Before you get started you need to install Elementor pro on your website.
Let’s dive right in.
First, log in to your WordPress dashboard. Go to Templates > Popups. From here you need to click on the Add New button.
A popup will come up and prompt you to set some conditions.
- Select the type of template: Popup.
- Give your popup a name- Login Popup. (You can choose any name)
- Click on “Create Template”.
(An alternative way to do the same thing quickly: Press Ctrl + E to open Elementor finder, search for popups, choose Add New Popup, and give it a name)
After that, you will see the Elementor library. Here you will find a total of 125+ popup templates that you can choose from. Choose a popup template if you want, or close the library and design a popup from scratch.
We will insert a template and redesign that per our requirements. You can search by category here, such as bottom bar, classic, fly-in, full screen, and more.
When you move your cursor over a template you will see a “+” icon for previewing. Preview the template if needed. Next, click the Insert button to insert a template onto your website.
After choosing a popup template, let’s redesign the popup now.
Select the popup settings option in the left corner. Now hide the overlay. If you don’t hide it, the popup overlay will cover the button. If that happens, you can’t close the popup by clicking the button again.
The close button should be shown. It is an “X” icon that is in the top-right corner. Sometimes users may use this icon to close the popup instead of hitting the button.
Its entrance animation is “zoom in” and exit animation is “Rotate Out Down Right”.
This means that when the popup opens, it will be animated in zoom-in mode, and that when the popup closes, it will be rotated out in the bottom-right corner. These animations attract more users.
Next, head over to the Style tab. From here we will edit the close button, because this close icon’s (button’s) position is not correct.
Set the button size to 25. Next, change the vertical position to 9 and horizontal position to 18. Now it looks nice.
Completing this, go to the Advanced tab of the popup settings. Press the yes button under “Prevent closing on overlay”.
We won’t change anything in this section.
After changing all of the necessary popup settings, we will start editing the widgets.
Look at the popup. How many widgets does the popup contain?
Yes, you counted right. The popup contains three widgets: Two heading widgets and a form widget.
We don’t need two headings. Delete a heading widget.
Now edit the second heading. Change its text to “Log in to your account”. Next, set its alignment to center.
Select the form widget. Head over to the Submit Button area under the content tab. Change the button’s text to “Log in”. Set its alignment to center and delete the button icon.
Now go to the “Action after submit” location. Choose “Redirect”. Then go to the Redirect section next to it. Type the redirect page link here. Users will be sent automatically after login to this link.
Suppose we sell a course on our website. We want users to be sent to their personal dashboard after login. That means we have to paste the dashboard page link into the redirect section.
Have a look at this image:
After completing these steps, hit the publish button. There, a configuration popup form will appear to set a few conditions.
You don’t want to change anything from the conditions, triggers, or advanced rules, because we will set the login form popup to appear upon clicking the login button. For that reason, save and close the configuration popup.
Finished! We are done with the popup. It’s time to integrate the popup and the button.
How to Integrate the Popup With a Login Button
Type Ctrl + E from your keyboard to open the Elementor finder. Search for the Home page from here. Go to the home page and then edit the button from the menu to integrate the popup.
Select the button widget. Go to link > dynamic and under the actions choose popup.
Again click on the popup. Choose Toggle Popup as an action. Select your popup name next to the action.
Now let’s see the popup on a live web page. When you click on the login button, the popup will open. Close the popup, hitting the login button again.
Congratulations! You have successfully created a login form popup for your website.
Conclusion: How to Create a Login Form Popup With Elementor
If you are running an e-commerce website, an e-learning website or any other website that requires login details, a login form popup is the best choice. Your users can activate the login form popup at the press of a button.
You can customize the popup according to your taste and choose the page you would want them to visit after submitting their details.
The best part is that you do not have to be a tech expert or hire one to add this function to your website. Follow our easy step by step guide on how to create a login form popup, and if you have any questions, feel free to contact us.
If WPCITY‘s this post helped you, kindly share it on Facebook, Twitter, and LinkedIn.
Others Elementor Tutorials:
- How to Get Started With Elementor
- Elementor vs Elementor Pro
- Elementor Pro Discount
- Elementor vs Gutenberg
- How to Use the Elementor Free Page Builder
- How to Use the Elementor Theme Builder
- How to Add a Popup With Elementor
- How to Create a Countdown Popup Using Elementor
- Create a Cookie Consent Popup Using Elementor
- How to Create an Under Construction Website Using Elementor
- How to Create a Subscribe Form Popup With Elementor
- How to Create a Related Popup Using Elementor
- How to Create a Mega Menu WIth Elementor
- How to Create a WooCommerce Shop Page With Elementor
- How to Set Up Important WooCommerce Pages With Elementor
Leave a Reply