When you create a global header for your website, using Divi’s theme generator, you will find yourself looking for the perfect way to add an AAL (call to action). One way to do this is to add a drop-down contact form. This will help you keep the overall look of your header clean while providing the ability to get in touch with you without having to scroll down. In this tutorial, we’ll show you how to create a drop-down contact form using Divi and JQuery & CSS code.
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 Parameters
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 section’s default top and bottom padding.
- Top padding: 0px
- Bottom padding: 0px
Shadow box
Also apply a subtle box shadow.
- Box Shadow Blur Strength: 50px
- Shadow color: rgba (0,0,0,0,15)
Add a new row
Column structure
Continue by adding a new row to the section using the column structure.
Sizing
Without adding any modules yet, open the row settings and change the sizing settings as follows:
- Use custom gutter width: Yes
- Gutter width: 1
- Equalize Column Heights: Yes
- Width: 95%
- Max width: 100%
Spacing
Then add custom top and bottom padding.
- Top padding: 1vw
- Bottom padding: 1vw
Main element
And align all the content of the columns by adding a single line of CSS code to the main element of the row.
- align-items: center;
Column 2 Index Z
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 menu
In the second column, we will add a menu module.
Disposition
Switch to the module design tab and change the layout style.
- Style: Centered
Menu text settings
Then modify the text parameters of the module menu.
- Menu font: Open without
- Menu font-weight: Semibold
- 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 drop-down menu line.
- Drop-down menu line color: # 007dff
Icons
With hamburger menu icon color.
- Hamburger menu icon color: # 007dff
Add text module 1 to column 3
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
- Text font-weight: bold
- Text color: #ffffff
- Text size: 0.8vw (desktop), 2vw (tablet), 3vw (phone)
- Text alignment: center
Sizing
Then modify the module sizing parameters.
- Width: 33%
- Module alignment: center
Spacing
Then add custom top and bottom padding.
- Top padding: 0.8vw (desktop), 2vw (tablet and phone)
- Bottom padding: 0.8vw (desktop), 2vw (tablet and phone)
Frontier
And complete the module parameters by adding a border-radius.
- All corners: 100px
Add text module 2 to column 3
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
- Text line-height: 0em
- Text alignment: center
Z index
We also increase the z index of the module.
- Z index: 11
Add 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 the 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; - Telephone:
height: 6vw;
Read more: How to create a scrolling animation on Divi
Add CSS class to button and arrow
Next, we’ll 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 a 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 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;}
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.
For website maintenance service contact us.