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
- Oxygen Builder 3.0 (Get it here)
- 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 into 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, the size of the button, and the 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 is coming soon. If you missed any of my other Oxygen Builder tutorials, check them out below.
