Creating an online login form for your header can be a huge boost to the user experience. They are great for membership sites and online stores as they allow users to log in anytime and on any page on the site.

In this tutorial, we will show you how to design an online login form using a custom header on Divi Theme Builder. To do this, we’ll create a simple responsive global header, then design a compact online login form at the top right of the header using the Divi 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. integrated Divi.

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 go to Divi> Theme Builder.

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

Then select the Build from scratch option.

Design the Divi global header with an online login form

Customization section

From the Global Header Layout Editor, you will be able to completely create the custom header for your site. 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 top, 10 pixels bottom, 20 pixels left, 20 pixels right

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 the header logo to the first line

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

Add row

Add a row to a column to 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 the image and margin of the image module

Update the image settings as follows:

• Image: [add a logo (approximately 64 pixels by 64 pixels)]
• Margin: 20px right

Update row settings

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

Added online login form to the second line

Add 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 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 a one-column structure to the section.

Add a login form

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

Remove default content

Under the connection settings, remove 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 Login 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 that will only target that 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 make the login fields and the button appear inline (horizontally), hide the “Forgot your password?” Link. »And add a small margin between the fields.

Line parameters

Before we put the finishing touches to the online login form, let’s update the row settings as follows:

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

Login form design parameters

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

Field and link text

• Fields background: Color: rgba (255,255,255,0.2)
• Field text color: #ffffff
• Field Police: Lato
• Field text size: 14px
• Text alignment: right
• Link font: Lato
• Link Font Style: Underline
• Link Text Color: # ff3190

Button design

• Button Text Size: 15px
• Button Background Color: # ff3190
• Button border width: 0px
• Button Font: Lato
• Button padding: 2px top, 2px bottom
• Margin: 15px bottom
• Padding: 0px top, 0px bottom, 0px left, 0px right

Adding the menu to the second line

Module menu

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

Add a menu module under the login form module.

Module parameters menu

Update the menu settings as follows:

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

Read more: How to add two buttons side by side to your Divi global header

Saving the header of the login form

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

Then also save the theme builder settings.

Final thoughts

This personalized global header with an online login form will come in handy for any membership site or online store. With just a bit of custom CSS, we were able to convert Divi’s login module into a stylish online login form that will sit nicely in the header of any website. Hope you find this useful for your next project.

 

For website maintenance service contact us