Oxygen 6: Full Page Hero Section Design Tutorial [Video 34:08]

Welcome to the very first Oxygen 6 design tutorial on Van Marciano Pro! We’re excited to kick off what we hope will be the start of many tutorials we’ll be adding to the library in the coming weeks, months, and throughout the next year (2026). Let’s dive in!

🔔 This tutorial was created using Oxygen 6 Beta 4 and is completely free to access. Once the official version of Oxygen 6 is released, new videos will be added to our premium tutorial library. If this content is helpful to you, please consider becoming a member to support my work.

In this video, we’re going to create a hero section taking up the full height of the screen or viewport for a fictional eBook we’re calling ‘The Loudmouth’s Guide to Marketing’. Here’s a screen shot of what we will create.

Of course, this is all made up, this eBook doesn’t actually exist. I have everything I need set up for this page. This is a WordPress install on my local server, with Oxygen 6 Beta 4 installed, and I’m also using a CSS framework for this tutorial added to WPCodeBox. That’s generally my workflow at the moment when working with page builders.

I’ve not completely finalized how I will work with Oxygen 6 in the future, I’m still putting together my own process and workflow, but you can rest assured, I will share this in a tutorial soon.

Continue this tutorial by watching the video below, or reading through the post –

OK, so I have all of my variables and some utility classes, although we actually don’t need to use this here, but as I said, this is a makeshift setup. Oxygen 6 actually has a variables manager that’s quite useful, and so we’re going to be using them both the framework and variables manager, so it really doesn’t matter.

In a separate video, in the not so distant future, I will share my Oxygen 6 Blueprint website setup.

OK, let’s finally get started with this –

Step 1 Creating the layout

We’re going to start by creating a simple 2-column grid layout for our eBook using a section and a container, then two divs inside the container. The left div will have a heading, text element, and a button container with 2 x buttons.

We’ll also add another small container and inside that, we’ll add an icon, and a text element. This container will have the class .ebook__icon-cont

Here is a list of the class names including some utility classes that I already have set up for this website:

Use these as a guide only. You can create your own if you wish.

/* Layout for eBook Landing Page */

.ebook .vh--100 {...} /* Section (Use css to align items) - Set VH to Auto @ 767px  */
   .ebook__cont .columns-2 .width--100 .gap--xs {...}
      .ebook__block-1 {...}
         .hd--light {...}
         .txt--light {...}
         .ebook__btn-cont {...}
            #button-primary #button-secondary
         .ebook__icon-cont {...}
            #icon-star .txt--light {...}
      .ebook__block-2 {...} /* 440px */
         .ebook__img {...}
   .ebook__logo-block {...}
      .ebook__logo-img {...}

Step 2 Styling

OK, so we have our layout complete, it’s time to start getting creative with some styles.

Continue this part of the tutorial by watching the video above.