How to Make the Form Fields Inline in the Divi Login Module

One particular tool in the Divi Builder is the Login module. It makes it simple to include a login form on any page or section of your Divi-built website.

By default, the form fields in the Divi Login module are stacked vertically, which means they take up more vertical space and may not fit well with some header or footer design.

In this article, we will show you how to make the form fields inline in the Divi Login module.

Steps to Make the Form Fields Inline in the Divi Login Module

As we previously discussed, the Login module’s inline form fields will be quite helpful if we want to position the login form in the header and footer. We will demonstrate in this article how to make the form fields in the Divi Login module inline when they are positioned on your website’s header, which includes three elements inside the header; logo, login form, and menu.

We will start everything from scratch. So, go to the Divi -> Theme Builder on your WordPress dashboard then build a new global header, or you can add a new template and then build a custom header if you’ve already got a header template.

Start clicking a new global header using Divi Theme Builder.

Step 1: Customize the Section

Once you’ve entered the Global Header Layout editor, go to Section Settings by clicking the gear icon (⚙️) button.

We will apply some changes in this setting, as follows:

  • Content Tab
    • Background: Add your preferred background color.
  • Design Tab:
    • Spacing: Add the padding of 10px top, 10px bottom, 20px left, and 20px right.
  • Advanced Tab:
    • Custom CSS: Add the following CSS snippet below to the section’s Main Element input field.
display:flex;
justify-content:center;
align-items:center;

The section will appear like this:

Step 2: Add the Header Logo

Add the First Row

Next, we’re going to add the first row. The first row we’ll be using as a logo for the header.

Add a row with a single column to the section.

Here, we will apply some changes in the row settings, as follows:

  • Design Tab
    • Sizing
      • Use Custom Gutter Width: YES
      • Gutter Width: 1
      • Width: 10%
      • Row Alignment: Left
    • Spacing
      • Padding: 0px Top, 0px Bottom

Add the Image Module

Once you add and customize the row, add an Image module by clicking the Add New Module button.

Afterward, add your desired image by choosing from your media library or uploading a file.

You can see in the editor that the first row will occupy 10% of the left-hand section now that it is ready to go. This is the row where our header logo will appear.

Step 3: Add the Inline Login Form

The inline login form, which is the main topic of this article, will then be added to the second row. The menu item and login form will be located in the second row.

Add the Second Row

Well, inside the section, please add the second row with a single-column structure.

Here, we will apply some changes in the second-row settings, as follows:

  • Design Tab
    • Sizing
      • Use Custom Gutter Width: YES
      • Gutter Width: 1
      • Row Alignment: Right
    • Spacing
      • Padding: 0px Top, 0px Bottom

Add the Login Module

Once you add and customize the second row, add a Login module by clicking the Add New Module button.

  • Delete the Default Content

Once you add the Login module, the first thing you need to do is delete the default contents of the Login module; title and body content.

  • Add the Custom CSS Class

Next, please add the CSS class wpp-inline-login-form to the Login module settings (Advanced tab -> CSS ID & Classes -> CSS Class).

  • Add the Custom CSS

Now, we’re going to add a simple CSS snippet to several of the Login module elements, such as the login description, form, and field.

Login Description

margin-bottom: 0px !important;

Login Form

width: 100%;

Login Field

padding: 10px 5% !important;
  • Add the Custom CSS to the Header Layout Settings

Next, we will add the CSS snippet to your header template. You can add the CSS snippet to your header layout settings.

Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.

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

The Code Explanation:

This CSS code transforms the default layout of the Divi Login module from stacked fields to an inline layout. It achieves this by:

  • Using Flexbox to arrange the form field elements horizontally.
  • Aligning the elements horizontally to the right end and vertically to the center.
  • Removing unnecessary padding and adding spacing between form fields.
  • Hiding the “Forgot Password” link.

This code aims to create a more compact and visually aligned inline login form within the website’s header.

  • Tweak and Style up the Login Module

As you can see from the image above, the login form is inline once you add the CSS snippet to the page settings.

Now, you can tweak and style your login form as you prefer. For this example, we’ll apply a few changes to the settings, as follows:

  • Content Tab
    • Background
      • Use Background Color: NO
  • Design Tab
    • Fields
      • Fields Text Size: 15px
    • Button
      • Use Custom Styles for Button: YES
      • Button Text Size: 15px
      • Adding button background

Step 4: Add the Menu

Alright, now we’re going to add the last element to the header template.

In the second row, add a new column, then input the Menu module into the column.

Next, we will apply several changes to the Menu Settings, as follows:

  • Content Tab
    • Content
      • Select the preferred menu content you want to display on the header.
    • Background
      • Delete the background color
  • Design Tab
    • Menu Text
      • Menu Font Weight: Semi Bold
      • Menu Text Color: #000000
      • Menu Text Size: 15px
      • Text Alignment: Center
    • Spacing
      • Margin: 5px Top, 5px Bottom
      • Padding: 10px Left

Note: In this example, our menu has four items. So, if you have different items on your menu, you can adjust the settings accordingly.

And that is it. Click the Save button to save your header template. Save the theme builder settings after quitting the header template editor.

The Bottom Line

This article shows you how to make the form fields on the Divi Login module appear inline within the website header. By utilizing the built-in Divi features in combination with custom CSS, you have successfully transformed the login form’s default stacked layout into a more contemporary inline structure.

If you want more say over the form’s appearance, this is the way to go. It could make your site more user-friendly.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.