If you’re building a membership website, thinking through the login experience is highly needed. Sure, you can allow visitors to use the default WordPress login page, but you can also make it easier on them by including a login form in your header. In this case, you’ll want to trigger the login form on click so you can save space in your header. That’s exactly what we’ll show you in today’s Divi tutorial. We’ll build a global header from scratch and we’ll include a dropdown login form. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

dropdown login form

Mobile

dropdown login form

Download The Global Header Template for FREE

To lay your hands on the free global header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Create New Global Header Template

Go to Divi Theme Builder

Start by going to the Divi Theme Builder in the backend of your WordPress website. Once there, click on “Add Global Header”.

dropdown login form

Add New Global Header

A dropdown menu will appear. To start building from scratch, continue by selecting “Build Global Header”.

dropdown login form

2. Build Header Design

Add Section #1

Background Image

Once inside the template editor, you’ll notice a section there already. Open the section settings and upload a background image or use a background color.

dropdown login form

Spacing

Move on to the section’s design tab and modify the top and bottom padding next.

  • Top Padding: 10px
  • Bottom Padding: 10px

dropdown login form

Add Row to Section

Column Structure

Continue by adding a new row using the following column structure:

dropdown login form

Sizing

Without adding modules yet, open the row settings and modify the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width:
    • Desktop: 80%
    • Tablet & Phone: 95%
  • Max Width: 2580px

dropdown login form

Spacing

Modify the padding values next.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Left Padding: 1%
  • Right Padding: 1%

dropdown login form

Main Element CSS

To automatically align the columns vertically, we’ll add the following lines of CSS code to the row’s main element in the advanced tab:

display: flex;
justify-content: center;
align-items: center;

dropdown login form

Add Social Media Follow Module to Column 1

Add Social Networks

Time to add modules, starting with a Social Media Follow Module in column 1. Add the social networks of your choice.

dropdown login form

Change Background Color of Each Social Network Individually

Then, change each social network’s background color individually to white.

  • Background Color: #ffffff

dropdown login form

dropdown login form

Icon Settings

Go back to the general module settings and change the icon color in the design tab.

  • Icon Color: #141414

dropdown login form

Border

Apply some rounded corner settings in the border settings next.

  • All Corners: 100px

dropdown login form

Add Button Module to Column 2

Add Copy

In column 2, the only module we need is a Button Module. Add some copy of your choice.

dropdown login form

Button Alignment

Change the module’s alignment next.

  • Button Alignment: Right

dropdown login form

Button Settings

Then, style the button.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #ffffff
  • Button Background Color: #ff4700
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Letter Spacing: 2px

dropdown login form

  • Button Font: Prata
  • Button Font Style: Uppercase

dropdown login form

Spacing

And complete the button settings by applying the following padding values to the spacing settings:

  • Top Padding: 16px
  • Bottom Padding: 16px
  • Left Padding: 24px
  • Right Padding: 24px

dropdown login form

Add Section #2

Background Color

Add another section right below the previous one and use the following background color for it:

  • Background Color: #fff4ef

dropdown login form

Spacing

Remove all default top and bottom padding in the design tab next.

  • Top Padding: 0px
  • Bottom Padding: 0px

dropdown login form

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

dropdown login form

Sizing

Without adding modules yet, open the row settings and change the sizing settings as follows:

  • Equalize Column Heights: Yes
  • Width:
    • Desktop: 80%
    • Tablet & Phone: 95%
  • Max Width: 2580px

dropdown login form

Spacing

Modify the padding values in the spacing settings too.

  • Top Padding: 5px
  • Bottom Padding: 5px
  • Left Padding: 2%
  • Right Padding: 2%

dropdown login form

Column 2 Settings

Background Color

Then, open the column 2 settings and apply a background color on tablet and phone only.

  • Desktop: /
  • Tablet & Phone: #f2e8e3

dropdown login form

dropdown login form

Spacing

We’re adding some top and bottom padding on smaller screen sizes as well.

  • Top Padding:
    • Tablet & Phone: 25px
  • Bottom Padding:
    • Tablet & Phone: 25px

dropdown login form

Add Menu Module to Column 1

Select Menu

Next, we’ll add a Menu Module to the row. Select a menu of your choice.

dropdown login form

Upload Logo

Upload a logo to your Menu Module.

dropdown login form

Remove Background Color

Then, remove the background color of the menu.

dropdown login form

Menu Text Settings

Move on to the module’s design tab and style the menu text as follows:

  • Menu Font: Prata
  • Menu Text Color: #111821
  • Menu Text Size: 18px
  • Menu Line Height: 1.4em
  • Text Alignment: Right

dropdown login form

Dropdown Menu Settings

Change the dropdown menu settings too.

  • Dropdown Menu Background Color: #fff4ef
  • Dropdown Menu Line Color: #191919
  • Dropdown Menu Text Color: #191919
  • Mobile Menu Background Color: #fff4ef
  • Mobile Menu Text Color: #191919

dropdown login form

Icons Settings

Then, change the icon colors in the icons settings.

  • Shopping Cart Icon Color: #191919
  • Search Icon Color: #191919
  • Hamburger Menu Icon Color: #191919

dropdown login form

Sizing

And complete the module settings by applying the following sizing settings:

  • Logo Max Width: 50px
  • Width: 100%

dropdown login form

3. Add Dropdown Login Form & Click Functionality

Add Blurb Module to Column 2

Add Title

Now that the foundation of our header has been built, we can focus on creating the login dropdown trigger and form. The first thing we’ll need is a Blurb Module in column 2 of our row. Here, we’ll add a title.

dropdown login form

Select Icon

Next, we’ll select an icon.

dropdown login form

Icon Settings

Move on to the module’s design tab and change the icon settings as follows:

  • Icon Color: #ffffff
  • Circle Icon: Yes
  • Circle Color: #ff4700
  • Image/Icon Placement: Left

dropdown login form

Title Text Settings

Then, style the title text.

  • Title Font: Lato
  • Title Font Weight: Heavy
  • Title Font Style: Uppercase
  • Title Text Size: 12px
  • Title Letter Spacing: 3px

dropdown login form

Animation

We’re also removing the default animation of this module in the animation settings.

  • Image/Icon Animation: No Animation

dropdown login form

Blurb Title CSS

And we’ll add some top margin to the blurb title in the advanced tab.

margin-top: 10px;

dropdown login form

Position

Last but not least, we’ll reposition the module in the position settings.

  • Position: Absolute
  • Location: Center

dropdown login form

Add Row #2 to Section #2

Column Structure

To add the login form, we’re going to use a new row below the previous one, with the following column structure:

dropdown login form

Sizing

Without adding modules yet, open the row settings and change the sizing settings as follows:

  • Equalize Column Heights: Yes
  • Max Width: 2580px

dropdown login form

Spacing

Modify the padding values too.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Left Padding: 2%
  • Right Padding: 2%

dropdown login form

Add Login Module to Column 2

Remove Content

Add a Login Module to column 2. Make sure the content boxes are empty.

dropdown login form

Background Color

Change the background color next.

  • Background Color: #ff4700

dropdown login form

Fields Settings

Move on to the design tab and style the fields.

  • Fields Background Color: rgba(0,0,0,0)
  • Fields Text Color: rgba(255,255,255,0.73)
  • Fields Left Padding: 0px
  • Fields Right Padding: 0px
  • Fields Font: Lato
  • Fields Text Size: 16px

dropdown login form

  • Fields Line Height: 1.8em
  • All Corners: 0px
  • Fields Bottom Border Width: 1px
  • Fields Bottom Border Color: #ffffff

dropdown login form

Button Settings

Then, modify the button settings as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #ffffff
  • Button Background Color: #141414
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Letter Spacing: 2px
  • Button Font: Prata

dropdown login form

  • Button Font Style: Uppercase
  • Button Top Padding: 16px
  • Button Bottom Padding: 16px

dropdown login form

Sizing

Make sure the width is “100%” too.

  • Width: 100%

dropdown login form

Login Button CSS

Apply some top margin to the login button CSS box in the advanced tab.

margin-top: 30px;

dropdown login form

Position

And reposition the module accordingly:

  • Position: Absolute
  • Location: Top Right
  • Vertical Offset: 1px

dropdown login form

Add CSS ID to Blurb Module in Row #1

Now that we have all the elements we need, we can focus on the click functionality. First, open the Blurb Module and add the following CSS ID:

  • CSS ID: divi-login-toggle

dropdown login form

Add CSS ID to Login Module in Row #2

Open the Login Module next and apply the following CSS ID:

  • CSS ID: divi-login-form

dropdown login form

Add Code Module Below Login Module

Then, add a Code Module right below the Login Module.

dropdown login form

Add Style & Script Tags

To create the click functionality, we’ll use some CSS and JQuery code. To prepare for that code, we’ll add style tags (for the CSS code) and script tags (for the JQuery code).

dropdown login form

Insert CSS Code Between Style Tags

Place the following lines of CSS code between the style tags:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

dropdown login form

Insert JQuery Between Script Tags

And the following code between the script tags:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

dropdown login form

4. Save Divi Theme Builder Changes

Now that everything is in place, the only thing left to do is save all Divi Theme Builder changes and view the outcome!

dropdown login form

dropdown login form

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

dropdown login form

Mobile

dropdown login form

Final Thoughts

In this post, we’ve shown you how to get creative with your header when building a membership website. More specifically, we’ve shown you how to include a dropdown login form that allows your visitors to log in to their accounts without having to go to the WordPress login page. You were able to download the header template JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post How to Add a Dropdown Login Form to Your Divi Header appeared first on Elegant Themes Blog.

WordPress Web Design

[ continue ]