In this Oxygen Basics tutorial, we’re creating hero sections for your WordPress website with Oxygen Builder. To begin, we will try to understand what a hero is and what it will contribute to your site. In general, this will be any content that is visible above the fold and below the site’s header. We’ll also look at some great examples online for som...

In this tutorial, we’re going back to the basics and discussing creating headers and designing them with Oxygen. First, we will discuss what defines a header by seeing what the Mozilla Developer Network (MDN) defines as a header, and look at a few examples across the web. There are two primary ways to add a header in Oxygen. The first method is to use OxygenR...

In this tutorial, we’ll use the native WordPress Password Protection in Oxygen to hide or show content on pages or templates. We’ll begin by installing a code snippets plugin on our site, and add a custom condition for Oxygen via Oxygen’s Conditions API. Then, we’ll add a Div element to our page or template and use our newly created condition t...

In this WordPress tutorial, we’re creating a sticky timeline effect using Oxygen. We’ll start by creating several classes specific to the timeline, that we’ll use to design our timeline cards and other various timeline parts. Within each of these classes we’ll use several CSS properties, such as pseudo-classes, gap, negative-margin, and z-index...

In this tutorial, we explain how to find and use Lottie Animations on your WordPress website in Oxygen. We’ll use Lottie Files to find an animation to add to our site. Please note that you’ll need to create an account for Lottie Files if you haven’t already. Once we find our animation, we’ll copy it and go to the Lottie Web Player, where we mod...

In this video tutorial, we’ll explore beyond Oxygen’s built-in gradient background tool. Instead, we will use the Gradient Generator Tool from Learn UI Design to create a more advanced and beautiful gradient for your WordPress website with Oxygen. Once we have our gradient, we’ll add it to a Section using the Custom CSS tab. Next, we’ll create ...

In this tutorial, we’re testing out the top 6 free form plugins from the WordPress Plugin Directory and seeing how they work in Oxygen. With each form plugin, we’re going to create a basic form, copy the form’s shortcode, and then use the Shortcode element to display the form on a page in Oxygen. We’ll also attempt to stylize each form in Oxyge...

In this video, we’re going to convert an AI-generated web page design into a WordPress landing page using Oxygen. We’ll be using an AI art generator tool called Midjourney to create the AI-generated web page design and associated artwork used in this tutorial. As we design our WordPress landing page, we’ll create utility classes to apply styles to mu...

In this video, learn how to use JavaScript to create a scroll-activated Sliding Image Gallery effect with Oxygen. This video also discusses how to create a throttle utility function in JavaScript, which uses a callback and setTimeout, to limit how frequently the effect runs since we’re monitoring when a page is scrolled. JavaScript used in this video: https://gi...

In this video, learn about the backdrop-filter CSS property and how to apply it via custom CSS to a Header Builder element in Oxygen. This video also covers briefly how to design and layout your header, as well as how to make your header sticky. To learn more about back-drop filter, check out the MDN entry at https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-f...