An infinitely looping logo slider is a common need on many WordPress websites. These elements are especially helpful in building trust with your visitor by showcasing clients you’ve worked with previously. In this video, learn how to add this super effective element to your site with absolutely no JavaScript. This slider uses only the power of CSS animations and...

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 ...

This tutorial video demonstrates how to use Oxygen’s Advanced Query builder, which allows you to create queries based on WP_QUERY parameters and dynamic data. Advanced Query can be used in conjunction with Oxygen’s Repeater and Easy Post elements. You can learn about WP_Query on the Bill Erickson site: https://www.billerickson.net/code/wp_query-arguments/ ...

Directorist have an Oxygen add-on that allows you to add their elements into Oxygen and customize them. In this video, see how to easily build a directory site using Oxygen and Directorist. Directorist: https://wordpress.org/plugins/directorist/ Directorist Oxygen Add-On: https://directorist.com/product/directorist-oxygen-integration/ ...

We are continuing our How to Build A Responsive WordPress Site series with part 3. This part of the build follows on from part 2 and covers: Setting up a catch-all template Moving the header & footer into that template Making a reusable Hero Section Setting the home & blog pages in the WordPress settings Creating a dynamic, responsive blog archive template us...

The second part of this tutorial will walk you through adding a shape divider to create a beautiful transition between two sections, using CSS Grid to create a responsive card layout, using classes to style items with ease, creating an opposing column layout, and finally, creating a Call to Action Section. You can find part 1 of the series here. ...

Check out this video to see how to use Clamp to create responsive headings in Oxygen. You can also see how to set up colors and a color palette via Oxygen’s Global Colors. You can then learn how to create a Hero section with a background image and content, and you’ll also see how to adjust the size of your  content according to the device size so the image...

In this tutorial video, learn the basics of adding a dark mode toggle to your site using Alpine.js along with a Code Block in Oxygen. You can find the code from the video here: https://gist.github.com/Spellhammer/e2e10505bae92e885aa5e43abf1c4ba2. ...

In this video, see how to easily decrease the height of your shape dividers on scroll using a few lines of JavaScript. You can find the code used in the video here: https://gist.github.com/KittenCodes/5ce62c1455ebd5728eaea489b517de28. ...

In this video, see how to utilise classes in Oxygen to easily style multiple elements at the same time.