Oxygen Builder: Custom Hero Section Video Tutorial

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 custom hero section 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