Custom Global Header in Divi | How to Create header using The Divi Theme Builder in WordPress
In this blog we will learn How to Create Custom Global Header in Divi. After reading this blog you will know the easiest way to create Website Header using simple drag and drop option in divi.
Before we start with “How to create, edit or alter Custom Global Header in Divi Builder” make sure that you have WordPress installed with latest Divi Builder plugin or Divi Parent Theme installed.
You can Edit, Create or Alter Header in Divi Theme or Divi Builder just by drag and drop no source code or Development skils are required.
With the help of this blog you will be able to Develop awesome Global Header with The Divi Builder. You just have to follow few simple steps mentioned below and your Header is ready to go.
If you are searching for How to make custom header in Divi, Divi custom menu or Customize Div Header using Divi Theme Builder you are at right place.
Step 1 : Login to WordPress Dashboard and navigate to “Divi ->Theme builder “. Divi Theme builder will appear from here you can customize 3 most important element of Divi Theme builder. They are
-
- Global Header
- Global Body
- Global Footer
Changes done here will reflect on each and every page of the website
Note:- Custom Divi Global Header is only visible on page created using Divi Builder. If your header is not displayed on any of the page of your website check if it’s created in Divi or not.
Step 2 : In Theme builder Click on “Add Global Header -> Build Global Header” you will be redirected to another page. Here you can use all Theme Builder functionality to create Global Header.
Step 3 : Click on “Start Building” to create customized Header. “Insert row” Box will appear, here we have to add row with 3 columns layout as shown in image below. You can also change row layout as per your requirement.
Step 4 : Click on the section setting and navigate to Background as per your choice, you can assign color, image or gradient from “content -> Background” as shown below.
Step 5 : As you can see height of the header is more then we need. To reduce it open Section setting and go to “Design” tab and then select “Spacing” here set top & bottom padding to “0px”.
Step 6 : It time to place logo if you don’t have don’t worry we will create text logo here.
Click on “+” to add module and select “Text” module from the list after that “Heading 1” Option from dropdown and follow steps show below in image to create text logo.
Note :- We can also add Site Logo. We will discuss that in another tutorial.
Step 7 : Now let’s add Navigation Menu to our header.
To add menu again click on ‘+’ and select “Menu” module then select menu you want to display, remove background and apply other setting as shown below from “Design” tab.
Step 8 : Let’s add login button in 3rd column
To add button click on ‘+’ in 3rd column and select button then type our text in button text section and make it appear good by changing some styles as shown below.
This Tutorial is also Helpful if you are looking for
- How to Create a Custom Divi Global Header with The Divi Theme Builder in WordPress
- Create Divi header layouts using Theme Builder
- How do I create, edit or change a global header in Divi Theme Builder?
- How do I add a header in Divi theme
The Divi theme have millions of pre-made Themes that you can import to use on your site just in One Click. However, to take your website to the next level you need something extraordinary. To make your work more fast & easy check our Free Divi Themes. Here you will get themes for almost all type of websites. We provide free as well paid Divi Child Themes & Single Page Layouts.
You can also create sticky menu in divi. To transform existing or create new sticky / fixed header will also post tutorial soon stay tuned.
