This tutorial continues our Oxygen Basics series and discusses how to create a hero section for your WordPress website with Oxygen. Generally, the hero section will be the content above the website's fold, excluding the site's header. We'll also view some great examples online to find several ideas to use as inspiration for one of these sections.
We'll then create a basic hero section in Oxygen using a few basic Oxygen elements, such as the Header, Text, and Button elements, and include a simple Call to Action (CTA) for our visitors to interact with.
Next, we'll modify our hero by adding an overlapping effect that causes the content to go below the fold. This effect can encourage our visitors to scroll further down the page to see the rest of the website.
Finally, we'll use the alignment features in Oxygen to move all of our hero's content to one side of the screen. We'll then add some background styles to the section to add an image and an overlay gradient to the background image to ensure the content of the hero is still visible and easy to see.
Video Chapters:
