Published on January 22, 2023

Tutorial: Oxygen Basics: Creating Hero Sections with Oxygen

In this Oxygen Basics tutorial, we’re creating hero sections for your WordPress website with Oxygen Builder. To begin, we will try to understand what a hero is and what it will contribute to your site. In general, this will be any content that is visible above the fold and below the site’s header. We’ll also look at some great examples online for some inspiration.

After we have some ideas, we’ll create a basic hero section in Oxygen using a Header element, a Text element, and a Button element for our Call to Action (CTA) in the hero.

We’ll then look at how to create an overlapping effect in our hero, which can help to influence visitors to scroll further down the page.

Lastly, we’ll align all the contents in our hero to one side and use some background styles, such as a background image and a background gradient, to make the content of our hero still stand out over the image to visitors.

Video Chapters:

  • Introduction: 0:00
  • Understanding what a hero is: 0:25
  • Hero section examples: 1:00
  • Building a basic hero in Oxygen: 4:29
  • Adding an overlapping hero effect: 9:39
  • Aligning the hero and using background effects: 15:08
  • Final Thoughts: 19:39

The Oxygen Team
Updated on: January 22, 2023

You'll build incredible websites with Oxygen

Get started with Oxygen today and unlock incredible value.

Get Oxygen

30-day money back gurantee

Try Oxygen risk-free. If youโ€™re not satisfied, get a full refund within 30 days.

Unlimited site license

Use Oxygen on as many personal or client projects as you want โ€” no limits.

Fast, world-class support

Our experienced team is eager to assist you with technical questions.

Use on client websites

Build and deliver professional-grade websites for your clients with no extra fees.