BreldigitalBreldigital
  • Web Stories
  • Case Study
  • Health
  • Finance
  • Lifestyle
  • Sports
  • Technology
  • Contact Us
Search
Reading: How to design an online form for a personalised global header in Divi
Share
Notification Show More
Latest News
What goes up but never comes down?
August 8, 2022
What doesn t exist but has a name
August 8, 2022
What has streets but no car
August 8, 2022
What word has 3 consecutive double letters
August 8, 2022
What runs around the house but never moves
August 8, 2022
Aa
BreldigitalBreldigital
Aa
  • Web Stories
  • Travel
  • Entertainment
  • Science
  • Technology
  • Case Study
  • Finance
  • Health
  • How to
  • Lifestyle
  • Sports
  • Technology
Search
  • Home
  • Web stories
  • Blog
  • Case Study
  • Entertainment
  • Finance
  • Health
  • How to
  • Lifestyle
  • Review
  • Science
  • Social Media
  • Sports
  • Technology
  • Travel
  • Privacy Policy
  • DMCA
  • Terms and Conditions
  • Contact
Follow US
Breldigital > Divi > How to design an online form for a personalised global header in Divi
Divi

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

Rebecca
Rebecca Published October 5, 2021
Last updated: 2021/12/13 at 11:53 PM
Share
8 Min Read
online login form
SHARE

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.

online login form

Trending
How is Blockchain Technology Impacting the Real Estate Industry

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

  • How is Blockchain Technology Impacting the Real Estate Industry
  • The man who built it doesn’t want it
  • What has a tongue but cannot talk and gets around a lot
  • What kind of room has no doors and no windows

You Might Also Like

Create a floating contact section with scrolling effect on Divi

How to easily navigate between layers on Divi

Transform the Divi shop module into dynamic product maps on mobile

How to add animated counter to scrolling on Divi

How to create animated drawers on Divi

TAGGED: divi, divi online login form global header
Rebecca October 5, 2021
Share this Article
Facebook Twitter Whatsapp Whatsapp Email Copy Link Print
Posted by Rebecca
Follow:
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it
Leave a comment

Leave a Reply Cancel reply

You must be logged in to post a comment.

You Might Also Like

floation contact section
Divi

Create a floating contact section with scrolling effect on Divi

October 6, 2021
navigate between layers
Divi

How to easily navigate between layers on Divi

October 6, 2021
Divi shop module
Divi

Transform the Divi shop module into dynamic product maps on mobile

October 6, 2021
animated counters
Divi

How to add animated counter to scrolling on Divi

October 6, 2021
Get in touch with us
Contact Us

Follow Us For Latest Update

Facebook Twitter Instagram
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditon
  • DMCA

Brel Digital © 2022. breldigital.com is not responsible for the content of external sites.

Removed from reading list

Undo
Go to mobile version
Welcome Back!

Sign in to your account

Lost your password?