Tutorial: Oxygen Basics: Creating Headers with Oxygen

In this tutorial, we’re going back to the basics and discussing creating headers and designing them with Oxygen.

First, we will discuss what defines a header by seeing what the Mozilla Developer Network (MDN) defines as a header, and look at a few examples across the web.

There are two primary ways to add a header in Oxygen. The first method is to use Oxygen’s Header Builder element. We’ll review some common use cases for this element and how to use the Sticky and Overlay features of the Header Builder element.

The second method to add a header in Oxygen is to use a Div element and create a header manually. When using this method, we recommend ensuring the HTML tag for the Div element is set to header.

Additionally, we’ll discuss using the new Site Navigation element, added in Oxygen 4.3, which displays WordPress Menus with a focus on easy-to-use features and is accessibility-friendly. The Site Navigation element also includes some built-in Call to Action, or CTA, functionality, making it easy to let users interact with your site.

Throughout this tutorial, we’ll use various tools and features in Oxygen, such as template creating and application, using classes, creating a custom navigation, and modifying CSS with a Code Block element.

Video Table of Contents: 

• Introduction: 0:00
• Header definition & examples: 0:16
• Creating the Main template for your header: 2:00
• How to create a header in Oxygen: 3:00
• Creating a header using the Header Builder element: 7:34
• Adding the Site Navigation element: 8:30
• Creating a header using a Div element: 16:02
• Adding a header overlay: 21:32

Resources: 

• Header element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
• Nav element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
• WordPress Menus: https://learn.wordpress.org/lesson-plan/managing-menus/