Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Posted on January 1, 2023

Tutorial: Oxygen Basics: Creating Headers with Oxygen

hello world!

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: 

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram