How to Create a Login Form Popup in Divi

Looking to add a login form popup in Divi? It’s a great and dynamic way to add a log-in opportunity for users to access premium information.

Moreover, a login popup on the page where the premium content can be discovered is a great way to keep readers on the page, instead of redirecting them to another login page.

In this tutorial, we’ll show you how to create a login form popup in Divi, step-by-step, so you can improve the engagement and user experience on your Divi website. Let’s get started.

Table of Contents

How Can You Use a Login Popup on Your Divi Website?

Providing a login popup form on your Divi website is different than using other types of popups.

A custom login screen in the form of a popup removes the need for readers to be redirected to another login page before attempting to access the premium ‘hidden’ content.

Thus, displaying a popup as a login option allows website visitors to quickly access their profile and the additional information without hindering their user experience.

With that in mind, without further ado, let’s start creating a login popup for your Divi website, step-by-step, together.

Creating a Login Form Popup with Divi’s Login Module

The Divi Login Module can help you display a login form anywhere on your Divi website. If you are using membership on your website, then adding a login form can be beneficial for keeping users on the page, instead of redirecting then to another page or website.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

With the Divi Login Module, you can establish a smooth login experience and enable visitors to log in and log out without effortlessly within the same page.

If you want to create a login form popup with Divi’s Login Module such as the one below, then the following tutorial from Elegant Themes is for you.

For the full steps and template that you can download for your Divi website, make sure to watch the full video tutorial as well.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

Using Divi Areas Pro to Create a Login Form Popup

Divi Areas Pro is the best Divi popup builder based on the Divi Builder and our free, Popups for Divi plugin.

This plugin helps you create popups that convert visitors into leads or customers by building popups, fly-ins, hover areas, and inline areas without having to add any additional code or customized CSS.  

Divi Areas Pro also provides you with plenty of pre-built popup layouts. All you have to do is enable the layout library, activate a layout, customize it, and you’re all set!

The Divi Areas Pro Layout Library

If you’re already familiar with the Divi Areas Pro plugin, you probably know how easy it is to create super-cool and mobile-responsive popups. If not, we invite you to subscribe for a yearly plan right away and get started, for only $67!

Now, without further ado, let’s go over some quick steps to help you prepare a login form popup in Divi Areas Pro.

Head to the Divi Areas Pro dashboard, add a new Divi Area, and name it accordingly. At this stage, the first thing that you’ll need to do is create the popup content. Inside the row of your first section, once you locate the Login Module, add it to your page

Adding a login form module to the Divi popup

Once you add the module, you will be presented with the module’s list of options, separated in Content, Design and Advanced that you can use to create a unique login form for your popup. 

As soon as you enter the title and the description of the login form, make sure to enable the ‘Redirect to the Current Page’ button. 

Login form module Divi settings

Within the Design options, set up the preferred colors and background that fit with the page’s context and your brand’s color themes. The following is just an example of a simple login form:

Now, to use the login form popup correctly, you’ll need to configure the Divi Area’s trigger that would display the popup menu after a certain action on the users’ end (conditional content). 

Inside your Divi Area dashboard, scroll down to the settings, and designate the Area as a Popup.

Setting up the login form popup layout type in Divi Areas Pro

Next, navigate to the ‘Trigger’ options and choose the desired trigger and designate on which user action you want the popup menu to appear. In most cases with conditional and limited content, this trigger would be the On-Scroll trigger

Now, you’re all set and ready to publish the Area and use the popup menu. As soon as you click on the ‘Publish’ button, you can immediately test the login form popup on your Divi pages.

Setting up the trigger for the login form popup

Creating a responsive popup menu with Divi Areas Pro is effortless. All you have to do is customize the content and the popup settings within the plugin, and you’re good to go.

Over to You

With Divi Areas Pro, you can add login form popups on your Divi website effortlessly, only with several clicks and within minutes. We hope you found this short tutorial useful.

Now that you know how to create great-looking login form popups, you can use Divi’s Login Module and Divi Areas Pro to boost website interactions with a mobile-ready popup menu. 

Start creating unique login experiences for your website visitors today! 

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details