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.
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.
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”.
Add New Global Header
A dropdown menu will appear. To start building from scratch, continue by selecting “Build Global Header”.
2. Build Header Design
Add Section #1
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.
Move on to the section’s design tab and modify the top and bottom padding next.
Add Row to Section
Continue by adding a new row using the following column structure:
Modify the padding values next.
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:
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.
Change Background Color of Each Social Network Individually
Then, change each social network’s background color individually to white.
Icon Settings
Go back to the general module settings and change the icon color in the design tab.
Apply some rounded corner settings in the border settings next.
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.
Button Alignment
Change the module’s alignment next.
Button Settings
Then, style the button.
And complete the button settings by applying the following padding values to the spacing settings:
Add another section right below the previous one and use the following background color for it:
Remove all default top and bottom padding in the design tab next.
Continue by adding a new row using the following column structure:
Modify the padding values in the spacing settings too.
Then, open the column 2 settings and apply a background color on tablet and phone only.
We’re adding some top and bottom padding on smaller screen sizes as well.
Add Menu Module to Column 1
Select Menu
Next, we’ll add a Menu Module to the row. Select a menu of your choice.
Upload Logo
Upload a logo to your Menu Module.
Remove Background Color
Then, remove the background color of the menu.
Menu Text Settings
Move on to the module’s design tab and style the menu text as follows:
Dropdown Menu Settings
Change the dropdown menu settings too.
Icons Settings
Then, change the icon colors in the icons settings.
And complete the module settings by applying the following sizing settings:
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.
Select Icon
Next, we’ll select an icon.
Move on to the module’s design tab and change the icon settings as follows:
Title Text Settings
Then, style the title text.
We’re also removing the default animation of this module in the animation settings.
Blurb Title CSS
And we’ll add some top margin to the blurb title in the advanced tab.
Last but not least, we’ll reposition the module in the position settings.
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:
Modify the padding values too.
Add Login Module to Column 2
Remove Content
Add a Login Module to column 2. Make sure the content boxes are empty.
Background Color
Change the background color next.
Fields Settings
Move on to the design tab and style the fields.
Button Settings
Then, modify the button settings as follows:
Make sure the width is “100%” too.
Login Button CSS
Apply some top margin to the login button CSS box in the advanced tab.
And reposition the module accordingly:
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:
Add CSS ID to Login Module in Row #2
Open the Login Module next and apply the following CSS ID:
Add Code Module Below Login Module
Then, add a Code Module right below the Login Module.
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).
Insert CSS Code Between Style Tags
Place the following lines of CSS code between the style tags:
Insert JQuery Between Script Tags
And the following code between the script tags:
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!
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.
This content was originally published here.