When you create a custom header for your Website, using Divi's theme builder, you'll find yourself looking for the perfect way to add an AAL (call to action). One way to do this is to add a Contact form scrolling. This will help you keep the overall look of your header clean while providing the ability to enter contact with you, without having to scroll down. In this tutorial, we will show you how to create a Contact form drop-down using Divi and JQuery & CSS code. You will also be able to download the JSON file for free!
Let's go.
Preview
Before we dive into the tutorial, let's take a look at the result on different screen sizes.
1. Go to Divi Theme Builder and start creating a global header
Go to Divi Theme Builder
Start by going to the Divi Theme Builder in the backend of your WordPress site.
Create a global header
Click "Add Global Header" and select "Create Global Header" to start creating a custom global header.
2. Build the header design
Section settings
Background color
Once inside the overall header template, you will notice a section. Open this section and use a white background color.
- Background Color: #FFFFFF
Spacing
Then remove the default upper and lower padding from the section.
- Upper padding: 0px
- Bottom padding: 0px
Shadow box
Also apply a subtle box shade.
- Box Shadow Blur Strength: 50px
- Shadow color: rgba (0,0,0,0,15)
Add a new line
Column structure
Continue adding a new line to the section using the following column structure:
sizing
Without adding more modules, open the line parameters and modify the sizing parameters as follows:
- Use a custom gutter width: Yes
- Gutter width: 1
- Equalize column heights: Yes
- Width: 95%
- Max width: 100%
Spacing
Then add custom upper and lower padding.
- Upper padding: 1vw
- Bottom padding: 1vw
Main element
And align all column content by adding a single line of CSS code to the main element of the row.
align-items: center;
Column 2 Z Index
We also make sure that the second column has a higher z-index value for reactive purposes.
- Z Index: 12
Add an image module to column 1
Download logo
It's time to start adding modules! Start with an image module in column 1. Upload a logo.
Alignment
Then change the alignment of the module.
- Image alignment: center
sizing
Also change the width.
- Width: 3vw (desktop), 5vw (tablet), 7vw (phone)
Add a menu module to column 2
Select the menu
In the second column, we will add a menu module.
Disposal
Switch to the module design tab and change the layout style.
- Style: Centered
Menu text settings
Then change the text settings in the module menu.
- Menu font: Open without
- Menu font weight: Semi bold
- Menu text color: # 000000
- Menu text size: 0.8vw (desktop), 2vw (tablet), 3vw (phone)
- Menu letter spacing: 1px
Drop-down menu text settings
Then change the color of the line in the drop-down menu.
- Color of the line of the drop-down menu: # 007dff
Icons
With hamburger menu icon color.
- Hamburger menu icon color: # 007dff
Add the 1 text module to the 3 column
Add a copy
Let's move on to the third module! Add a text module with a copy of your choice.
Background color
Then add a background color.
- Background Color: # 007dff
Text settings
Switch to the module design tab and change the text settings accordingly:
- Text font: Open Sans
- Font weight of the text: bold
- Text color: #ffffff
- Text size: 0.8vw (desktop), 2vw (tablet), 3vw (phone)
- Alignment of the text: center
sizing
Then modify the module sizing parameters.
- Width: 33%
- Alignment of the module: center
Spacing
Then add custom upper and lower padding.
- Upper padding: 0.8vw (desktop), 2vw (tablet and phone)
- Bottom padding: 0.8vw (desk), 2vw (tablet and phone)
Border
And complete the module parameters by adding a border radius.
- All corners: 100px
Add the 2 text module to the 3 column
Add a symbol to the content area
Let's move on to the next module, which is another text module. Add the following arrow in the content area: "▼".
Text settings
Switch to the module design tab and change the text settings accordingly:
- Text font: Open Sans
- Text color: # 007fff
- Text size: 3vw
- Height of the line of text: 0em
- Alignment of the text: center
Z Index
We also increase the z index of the module.
- Z Index: 11
Add the contact form module to column 3
You can now add a Contact form just at the bottom of the text module which contains the arrow. This module is quite simple to use, so you will need to customize which fields you want to make visible.
3. Customize the elements to create a contact form in one click
Add the height of column 3
Once all the mods are in place, it's time to create the effect. The first step towards achieving the desired result is to open the settings in column 3 and add responsive custom height in the advanced tab.
Office:
height: 3vw;
Tablet:
height: 5vw;
Phone:
height: 6vw;
Add a CSS class to the button and the arrow
Then we will add the same CSS class to the first two text modules in column 3.
- CSS class: show-contact
Add a CSS class to the contact form
We will also need a custom CSS class for the Contact Form module.
- CSS class: contact-form-module
Hide the Contact form module
Continue by adding an additional line of CSS code to the main element of the Contact Form module. This will allow us to hide the module before clicking.
display: none;
Add a code module to column 3 with JQuery and CSS code
And to create the click function, we will need some JQuery code. We will also use custom CSS code. Add a new code module to column 2 with the code. Make sure to place JQuery code between script tags and CSS code between style tags.
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});
.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}
Preview
Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.
Office
What you must remember
In this article, we've shown you how to add a drop-down contact form to your custom header. It's a great way to trigger action early on.
