Want to emphasize your elements by easily adding an animated GIF? It’s easy to do when using classes and a bit of CSS in Oxygen. Check out our video to see how!

In this video, we’re exploring images! See a real-world example of how Lazy Loading and SRCSET can help with the page size, both on load and when the page is viewed on smaller devices. Elijah also gives you an overview of the new Object Fit, Object Position and Aspect Ratio controls added in Oxygen v4.

In this video, follow along with Elijah and see how to build a checklist using an Advanced Custom Fields Repeater and Oxygen’s Repeater element.

Follow along with Elijah as he demonstrates how to rebuild the Culture Built My Brand landing page using Oxygen. The motion effects in the video are added with a few lines of JavaScript, which you can get here: https://gist.github.com/Spellhammer/e1e1881866598e831e3901963993f80d. You can also find the One Page Love site here: https://onepagelove.com/. ...

Check out this video to learn how to add hotspots to an image using Oxygen’s Attributes feature. Once your hotspots are working nicely, we’ll show you how to animate the hover effect using CSS Keyframes. Keeping accessibility in mind, you can also use keyboard navigation or screen readers to navigate the hotspots. CSS attribute selectors This can be really...

You can adjust the look of entire sections on your site just by adding one CSS class to the parent element. Check out this video to learn how to use CSS variables with Oxygen. CSS tricks have some good information on CSS variables: https://css-tricks.com/a-complete-guide-to-custom-properties/. ...

In this video, learn how to create a horizontally scrolling list of post cards. Each card is clickable to take you to the full post, and on hover, the card expands to display the full card. Inspired by CSS tricks: https://css-tricks.com/. Box Shadow generator: https://shadows.brumm.af/. ...

Would you like to easily create a responsive, dynamic image accordion? See how easy it can be by following along with the video tutorial below! This tutorial is inspired by Supa Mike at Oxygen4Fun: https://oxygen4fun.supadezign.com/tutorials/how-to-create-a-responsive-image-accordion/, as well as a CodePen by Zed Dash: https://codepen.io/z-/pen/OBPJKK. Code from the ...

In this video, see how to create a new element using Oxygen’s Elements API. This is a code-focused tutorial, using HTML, CSS, and PHP. Since Oxygen’s API is not yet publicly documented, this video will act as a quick guide on getting started developing elements for Oxygen. Boilerplate plugin: https://github.com/Spellhammer/example-oxygen-api-plugin ...