Oxygen Builder: Custom Hero Section Video Tutorial

Written by Fabrizio Van Marciano
Updated on 
October 1, 2019

In this Oxygen Builder video tutorial, I'll show you how to create a great looking page hero section using some simple elements, custom HTML and CSS. Let's dive straight in.

It's time for another Oxygen Builder tutorial. If you've been following the series, you can check the entire collection of posts here.

You can also subscribe to my YouTube channel for new videos each week.

The hero page-section is one of my favorite conversion features to work with as a designer.

Page hero-sections come in all shapes and sizes, and in this tutorial, we're going to create a cool hero using some basic elements for structure and some custom HTML for our button, and some CSS to style the button and hero background.

Let's go!

Tools used in this tutorial

  1. Oxygen Builder 3.0 (Get it here)
  2. Locally installed WordPress site using Local by Flywheel

Custom HTML and CSS for the button

Below are the full HTML and CSS code (via Codepen) you'll need to paste in your page.

First, you will need to use a "Rich Text" element to add the HTML part where you want your button to be placed. Watch the video above to see how and see the sample below.

The CSS part can go directly into your style sheet to style the HTML button.

See the Pen Custom CTA Button With Hover Effect by Fabrizio (@VanMarciano) on CodePen.

You can change the gradient color for the button background, size of the button, and roundness, all to match your website.

CSS for adding an "arrow" style border around your hero-section

Below is the clip-path CSS element you'll need to use if you want to add a similar arrow effect to the left and right borders as seen in the video.

Don't forget that you'll need to give your background section a custom class, in the video I used "header" as the custom class. Here is the CSS snippet.

.header {
     clip-path: polygon(97% 0%, 100% 50%, 97% 100%, 0% 100%, 3% 50%, 0% 0%);
 }

You can experiment with different polygons using the CSS clip-path maker here.

OK, that's it. I hope you enjoyed the tutorial, more coming soon. If you missed any of my other Oxygen Builder tutorials, check them out below.

More Oxygen Builder Tutorials

  1. Predefining Global Styles In Oxygen Builder And Why This Is Important.
  2. Building A Custom Homepage With Oxygen Builder For WordPress.
  3. How To Create A Custom Blog Archives Template With Oxygen

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
Fabrizio Van Marciano Web Design Services © 2019. A division of Van Marciano Media. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram