How to design an online login form for a custom global header in Divi

The creation of a online form Inline login for your header can be a tremendous boost to the user experience. They are perfect for membership sites and online stores because they allow users to log in anytime and on any page of the site.

In this tutorial, we will show you how to design a online form online using a custom header on Divi Theme Builder. To do this, we'll create a simple responsive global header and then design a online form compact online login at the top right of the header using Divi's login module. The build requires a bit of custom CSS code, but once everything is in place, it will be easy to customize the online login form to easily match any header design using the design options Divi's integrated services.

Result overview

Here is a quick overview of the custom header with the online login form that we will be creating in this tutorial.

And here is the online login form on the screen of the tablet and phone.

Here is the logout message and link that will be displayed when users are logged in.

What you need to get started

If you haven't already, install and activate the Divi theme . That's pretty much all you need to get started. We're going to create a new header template layout from scratch with the Divi Theme Builder.

Adding a new global header

To get things going, we need to create a new global header for our Website. To do this, go to the WordPress dashboard and navigate to Divi > Theme Builder.

On the website template by default, click “Add Global Header” and then “Create Global Header”.

Then select the Build from scratch option.

Design the Divi global header with an online login form

Section customization

From the Global Header Layout Editor, you will be able to completely create your site's custom header. To get started, open the regular section settings and update the following:

Left color background gradient:
Right background gradient:
Gradient direction: 48 degrees
Padding: 10 pixels at the top, 10 pixels at the bottom, 20 pixels at the left, 20 pixels at the right

In order to make our custom header more responsive, we'll add the following custom CSS to the main element of the section.

display:flex;justify-content:center;align-items:center;

Adding header logo to the first line

Now that the section is ready, we can add the first line.

Add a row

Add a row to a column in the section.

Add an image module with a logo image

In the single column row, add an image module. This will be where we will add the logo for the header.

Update Image and Image Module Margin

Update the image settings as follows:

Image: [add logo (approximately 64 pixels by 64 pixels)]

Margin: 20px right

Update line parameters

Before going any further, open the row settings and update the following:

Use a custom gutter width: YES
Gutter width: 1
Width: 25%
Row alignment: left
Padding: 0px high, 0px low

Adding the online login form to the second line

Add a row

Now that the first row is ready, you will notice in the editor that the first row will occupy 25% of the left section. This will basically be the designated line for our header logo. We need to create a section line for the form and the online login menu on the right side.

Add a second row with structure to a column in the section.

Add a login form

In the row of a column, add a login module.

Remove default content

Under login settings, delete the fake title and body content.

Add a login form and a custom CSS class

Before we go too far into designing the online login form, let's add the custom CSS and CSS classes to the login module first. This will allow us to set up the basic online structure of the form before putting the final design touch on the form with Divi's built-in options.

On the Advanced tab, add the following CSS class:

CSS class: header-login-form

Add the following custom CSS in the connection description CSS area:

margin-bottom: 0px !important

Then add the following custom CSS in the CSS area of the login form:

width: 100%;

Add the following custom CSS to the Connection Fields CSS box:

padding: 5px 4% !important

Add custom CSS to header layout settings

Since we have our custom CSS class added to the login form module, we can add our custom CSS which will only target this particular login form.

Open the header layout setting and add the following custom CSS:

.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}

This CSS will cause the login fields and the button to display inline (horizontally), hide the "Forgot your password?" Link. »And add a small margin between the fields.

Line settings

Before putting the finishing touches on the online login form, let's update the line parameters as follows:

Use a custom gutter width: YES
Gutter width: 1
Line alignment: straight
Padding: 0px high, 0px low

Design settings for the login form

We are now ready to update the login form settings. Open the settings of the login form module and update the following:

Use background color: NO

Button design

Button text size: 15px
Button Background Color: # ff3190
Width of the button border: 0px
Button font: Lato
Button padding: 2px at the top, 2px at the bottom
Margin: 15px low
Padding: 0px at the top, 0px at the bottom, 0px at the left, 0px at the right

Adding the menu to the second line

Menu module

With our online login form in place, we can add the menu directly below.

Add a menu module under the login form module.

Menu module settings

Update the menu settings as follows:

Background color: rgba (0,0,0,0)
Menu font: Lato
Menu font weight: bold
Menu text color: #ffffff
Menu text size: 16px
Text alignment: right
Drop-down menu background color: #ffffff
Color of the line in the drop-down menu: rgba (0,0,0,0)
Text color of drop-down menu: # 000000
Mobile menu background color: #ffffff
Mobile menu text color: # 000000
Cart Icon Color: #ffffff
Search icon color: #ffffff
Hamburger menu icon color: #ffffff

Saving the header of the login form

Be sure to save the layout before exiting the Header Layout Editor.

Then also save the theme generator settings.

Save the modifications divi creation header

Final results

That's it!

Now let's see the final result. To see the final result, simply visit a page of your Website.

Here is the header on the desktop screen.

Final result menu with divi connection forum

Here is the header of the online login form on the tablet screen.

And here is the online login form on the phone screen. Also note the mobile menu.

And this is what the user will see when logged in.

What is visible when the user is logged in divi

Latest Thoughts

This custom global header with an online login form will definitely be useful for any membership site or online store. With just a bit of custom CSS, we were able to convert Divi's login module into an elegant online login form that would look good in the header of any Website. I hope this is helpful for your next project.

I look forward to hearing from you in the comments.

Cheers!

How to design an online login form for a custom global header in Divi

Result overview

What you need to get started

Adding a new global header