Need to create global header with online form connection in DIVI?
The creation of a online form login on your header can be a great boost for the user experience.
They are ideal for subscription websites and online stores as they allow users to log in at any time on any page of the website.
In this tutorial, we will show you how to design a online form online login for users on a custom header. Let's get started!
Preview
Here is the quick preview of the custom header with the login form that we are going to create in this tutorial.
Here is the "logout" message and link that will display when users are logged in.
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", then click "Build Global Header".
Divi global header design with a horizontal login form
Customize the section
From the Global Header Layout editor, you can create the personalized header of your website Starting from nothing. To get started, open the settings in the normal section and update the following:
- Left background gradient color:
- Right background gradient color:
- Gradient direction: 48 degrees
- Inner Margin: 10px Top, 10px Bottom, 20px Left, 20px Right
In order to make our header more responsive, we will add the following custom CSS to the main section element.
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 line
Add a row to a column in the section.
Add an Image module with a logo image
In the one-column row, add an Image module. This will be where we add the header logo.
Update Image and Image Module Margin
Update the image settings as follows:
- Image: [add logo (approx. 64 x 64 px)]
- Margin: 20px right
Update the parameters of the line
Before going any further, open the line settings and update the following:
- Use custom gutter width: YES
- Column spacing: 1
- Maximum width: 25%
- Alignment: left
- Internal Margin: 0px Top, 0px Bottom
Added horizontal login form to second line
Add line
Now that the first row is ready, you will notice in the editor that the first row will take up 25% of the left section. This will basically be the line designated for our header logo. We need to create a section row for the login form and the menu on the right side.
Add a second row with structure to a column in the section.
Add a login form
Inside the one-column row, add a 'Connect' module.
Remove default content
Under the Login module settings, remove the fake title and body content.
Add custom class for login form and CSS
Before we go too far in designing the login form, let's first add the CSS class and custom CSS to the Login module. This will set up the basic online structure of the form before putting the finishing touches on the design of the form with Divi's built-in options.
See also our guide on How to create a sliding and responsive side menu in DIVI
Under the Advanced tab, add the following CSS class:
- CSS class: header-login-form
Add the following custom CSS to the connection description CSS box:
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 area:
padding: 5px 4% !important
Add custom CSS to header layout settings
Since we added our custom CSS class to the login form module, we can add our custom CSS that will only target that particular login form.
Also read our tutorial on How to create the blog page with the Blog module with DIVI
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 button to display inline (horizontally), the message "Forgot your password?" will be hidden, and a small margin between fields will be added.
Line settings
Before we put the finishing touches on the login form, let's update the line parameters as follows:
- Use Custom Gutter Width: YES
- Column spacing: 1
- Alignment: Right
- Internal Margin: 0px Top, 0px Bottom
Design settings for the login form
We are now ready to update the login form settings. Open the Connect module settings and update the following:
- Use background color: NO
Field and link text
- Background Color fields: rgba(255,255,255,0.2)
- Text Color Fields: #ffffff
- Fields Font: Lato
- Text Size Fields: 14px
- Text alignment: right
Button design
- Use custom styles for Button: NO
- Button Text Size: 15px
- Background button: #ff3190
- Border width button: 0 pixels
- Button Font: Lato
- Margin Button: 2px Top, 2px Bottom
- Padding Button: 15px Bottom
- Inner Margin: 0px Top, 0px Bottom, 0px Left, 0px Right
Adding the menu to the second line
Menu module
With our login form in place, we can add the menu directly below.
Add a Menu module under the Login module.
Menu module settings
Update the menu settings as follows:
- Background: rgba(0,0,0,0)
- Font Menu: Lato
- Soft Light Menu: Bold
- Menu text color: #ffffff
- Menu Text Size: 16px
- Text alignment: right
- Background color of the drop-down menu: #ffffff
- Dropdown row color: rgba(0,0,0,0)
- Dropdown 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
Saving the header of the login form
Be sure to save the layout before exiting the header editor.
Next, save the Theme Builder settings as well.
Final results
It is done !
Now let's see the final result. To see the end result, all you have to do is visit a page on your website.
And this is what the user will see when logged in.
Download DIVI Now!!!
Conclusion
This custom global header with a login form will definitely come in handy for any subscription website or online store.
With just a bit of custom CSS, we were able to convert Divi's Login module into an elegant login form that will fit perfectly into the header of any website.
Hope this will be useful for your next project. If you have any concerns or suggestions, find us in the comments section to talk about it.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
