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

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.

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.

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;

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

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.

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

Remove default content

Under the connection settings, remove the fake title and body content.

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

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

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

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

Add a menu module under the login form module.

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

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