This tutorial explains how to add and customize a login form with the Divi Visual Builder.  This module allows you to add a login for your clients, customers, or employees so they can have access to important information that you would want to keep hidden from the general public.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

Hello, this is Jimi Blevins, and today I’d like to walk you through: “Adding A Login To A Web Page Using The Divi Visual Builder.

Now, I’ve already got my login module loaded up, and the first thing you’re going to notice about this is, using the Visual Builder isn’t going to be as easy with this particular module. If you’re logged into your website, it’s not going to show you the login screen, but I’ll show you a way to get around that in just a second.

HowToAddALogin

So, first off let’s just add our “Title,” and then the next option is “Redirect To The Current Page.” What this allows you to do is, the default is going to go to your WordPress dashboard. So, anybody that logs in, it’s going to go to the backend of the WordPress website.

HowToAddALogin2

If you want them to come back to this page after they’re logged in, if you have some content that they can view once they’re logged into their account, you just click the “Redirect To The Current Page” button and then it’ll send them right back to this page instead of dropping them into the WordPress admin area.

HowToAddALogin3

Of course, in the admin area, they only have access to the things that they have privileges to.

Next, we can use a “Background Color,” we can turn that on and off. I’m going to change it to this blue.

HowToAddALogin4

Then, we can also add just a little bit of text in the “Content” section.

HowToAddALogin5

The “Design” elements are pretty standard for what we’ve seen on all the other modules. We can have a specific “Background Color.”

HowToAddALogin6

Focus Color.” I’ll just put in a gray for the focus color. Then, change our “Text Color,” I’ll do like a black.

HowToAddALogin7

We can “Use Border” around our field elements. Change the “Header Font, Header Font Size.”

Change the “Header Text Color,” change the “Body Font,” and settings.

HowToAddALogin8

You can also “Use Border” around the element.

We’ve also got our “Custom Margins” and “Custom Padding.

HowToAddALogin9

Then, of course, with the login button, we can “Use Custom Styles For Buttons.”

Again, these are most of the same options that were used to in the other modules.

So to show you how this is going to look, I’m going to “Save” this.

HowToAddALogin10

 

Then I’m going to grab the link to this page. (Which is pretty much everything in the address bar in front of this edit variable that they add.)

HowToAddALogin11

I’m just going to come to a proxy server I use, and what this will do is, it’ll hide me from the website. So, when I go to this page, I won’t be logged in to my admin and I can see how the websites going to look.

HowToAddALogin12

So, I’ve got my login, it’s pretty good. My login button looks AMAZING! 🙂

So, that’s just a way that you can take a look at what you’re doing. You can also use a different web browser if you want to have Firefox or Safari loaded up, and then you can just paste the URL into there if you’re not logged into the website in a different web browser.

HowToAddALogin13

So, that just about covers everything with the: “Login Module.”
My name is Jimi Blevins and thank you so much for watching.

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!