Oxygen builder is an excellent WordPress page building plugin. Although Elementor Pro has taken most of the credit for page builder plugins, Oxygen is a great tool for beginners. It takes some time to get used to this new page builder, but once you do, it is quite simple to use.
If you would like to add a custom header using Oxygen builder, then I will guide you in this article. Beginners often find it difficult to add a header template to oxygen builder. Therefore, I will explain it in a manner that is as simple as possible.
Installing Oxygen Builder with or without Template
By default, Oxygen Builder disables themes. So customizing using the WordPress dashboard and theme settings is unavailable.
By using Oxygen Builder, you can easily create headers, footers, pop-ups, and main content without the need for any fancy theme.
During the installation process, Oxygen allows you to choose between a default installation and a blank installation. In the “Default install“, a template with a header and footer will be added, while in the “Blank installation“, the page builder will be installed without any headers, footers, or content.
Easy Ways: How to Add Header Template in Oxygen Builder?
If you wish, you may use a premade template or create your Oxygen header from scratch. It includes 18 sets of templates, including 18 sets of headers and footers. Depending on your website theme and target design, you may choose a header.
To add a Header from the template library, you need to go to the Oxygen menu from the left sidebar in the WordPress dashboard.
Go to Oxygen ⇒ Templates ⇒ Main ⇒ Edit ⇒ Edit with Oxygen. You will land on a page with a Header, Footer, and content or blank according to your installation.
To add a new header, click on the “Add Elements” button (“⊕”) then scroll and select Library. Click on “Design Set.”
Next, choose any templates from the list and click on “Section and Elements,” scroll down to Headers. Depending on the template, you will get 1 to 5 Header designs in each template.
Usually, the new elements tend to drop at the bottom of the page. You can drag the Header by using the pointer and drop it at the top of the page.
Here are some of the header designs you can get.
Building Header with Oxygen Header Builder
While there are many options available, you may wish to create a custom header. Oxygen header builder simplifies and enhances the process of creating headers. With just a few clicks, you can create a device-specific and responsive header.
Step 1: Creating a New Template
You can work on the default template on the Oxygen header. You can delete the default header from the Main template and create a new header or create a new template.
To add a new template, go to Templates under Oxygen. Click on “Add New Template,” name it as you like, and hit publish.
Now you will get the Edit with Oxygen button to create your header. You will get a blank page where you will make the header as you like.
Step 2: Creating Header Builder
Now click on “Add Elements,” click on Helpers, then select “Header Builder.” The header is incomplete without a logo and menu.
You can add the elements from the Add elements button. To add the Menu, you need to click on the add button and then WordPress ⇒ Menu.
From the settings, select Primary Menu if you have multiple menus on your website.
You can also add a button using the same method. The best feature of making a header in Oxygen, you can drag and drop items to adjust the position. You can place items in the right-align, center-align, and left-align positions.
Also, you can use the structure settings to adjust element position if you feel uncomfortable dragging directly on the header builder.
You can drag elements under Row Left, Row Center, and Row Right. Also, you can place any element in a new row from the structure sidebar.
Step 3: Multiple Rows for Header
You can add more rows to add information and links for your business. For example, you can add the business hours and social icons on a new row in the header. Double Click on “Header Builder” in the right bottom corner of the Main Header.
Click on “Add Another Row” in the left sidebar. I will add business hours and Social icons in this example on the new row. You can use your creativity in this method.
To add business hours, I will choose text from the elements tab, and for social icons, you can also search it on the elements library. Drag the secondary header to the top or bottom of the main header.
Here is my version of the Header with Oxygen Header Builder.
Step 4: Making the Header Reusable
When you are happy with the header template, you will have to make it usable for any page. You have to set that manually if you create a new template instead of editing the “Main” template.
First, Go to the template section in the Oxygen menu. Click on edit on the Template you created for the header. Now scroll down and click on “Other,” then tick (✔) “Catch All.”
Then click on Edit with Oxygen and open the Structure sidebar. Click the pen icon on the Header Builder and select Make Re-usable. Rename the elements as you prefer and click save.
Now you will find the newly created header in the Reusable tab in Oxygen Builder.
Making the Header Sticky
Using a sticky header is highly recommended when you are using a CTA on the header. Also, a sticky header gives your site a parallax view, making it more lively.
First, go to the “Main” template and activate your header from the “Reusable” option. Now you will see two settings, primary and advanced.
From the primary menu, select Enable Sticky Header, and then you can edit the scroll distance, Background color, device size, etc.
Making the Header Responsive
You can adjust the screen size and position the elements to the right, left, and center as needed. With a multirow header, you can also hide rows according to the device. Using a two-layered header, you can create a crowded screen on a smaller screen.
Depending on the screen size of the device, you can hide the secondary row. By hiding the secondary row under the 480px screen, users will have a much better experience.
FAQs
Can I use my Theme Header with Oxygen Builder?
Oxygen builder disables your theme totally, so there is no way to use the theme header. So, you can’t edit the theme header with Oxygen Header Builder.
Conclusion
Oxygen Builder is a unique WordPress builder. You can use the theme features and the builder’s WordPress editing functionality with most Page builders. Oxygen theme builder operates independently and does not interfere with other editing tools.
A complete beginner might find this task a bit confusing. Once they become familiar with the plugin, they can create almost anything. Additionally, the user interface is quite user-friendly for beginners.
It is my hope that you have learned something new about adding a header template to Oxygen builder. Through Oxygen Header Builder, you can create a custom header or use an existing header to create the design you desire.
