global header

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.

global header

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.

Leave a comment

echo "";