Full library
40 tutorials
▶InteractionsEvery trigger and action explained, then a thumbnail gallery built without code.by Oxygen
▶ConditionsShow or hide elements by user, role, date, device or field value.by Oxygen
▶ACF and repeater fieldsShow ACF and Meta Box fields, and render repeater rows through a component.by Oxygen
▶Dynamic dataWire a template to post titles, fields and more with the dynamic data picker.by Oxygen
▶Term loopsLoop through categories or any taxonomy, each linked to its archive.by Oxygen
▶Post loopsDisplay posts with a Post Loop and a card component you design yourself.by Oxygen
▶Reusable componentsTurn a section into a component, choose what can be edited, and lock the rest.by Oxygen
▶Classes and variablesStyle with classes, build a variable system, and change the whole site from one place.by Oxygen
▶The complete tourEvery part of the builder, done by hand: elements, classes, data, components and motion.by Oxygen
▶Claude Design to WordPressRebuild a Claude Design mockup as a real, editable WordPress page with Oxygen.by Oxygen
▶Animated agency siteAn animated agency site with a portfolio post type, service toggles and a form.by Oxygen
▶Restaurant with a PDF menuA restaurant site plus a daily menu staff edit in WordPress that prints as a PDF.by Oxygen
▶Luxury resort siteA photo-heavy resort site with villas, dining and a reservation form.by Oxygen
▶Connect your AI agentInstall Agent Connector, pick your agent and build your first page over MCP.by Oxygen
▶Your first buildInstall Oxygen, connect your AI agent, build a site, then edit it by hand.by Oxygen
▶Set up locally with one commandRun npm create oxygen-wp and get WordPress, Oxygen and your agent running locally.by Oxygen
▶How to use Variables on Oxgen Builder 6 to get Global stylesWhat variables are in Oxygen 6 and how to build a global styling system with them, so colors, type and spacing update site-wide from one place.by OutWP
▶Building a WordPress Site with Oxygen 6 – Day 2Day 2: build a modern header, footer and main page template, and master global settings for full control over the design.by Lost in the Woods Digital
▶Building a WordPress Site with Oxygen 6 – Day 1Day 1 of a challenge to build and monetize a WordPress site from scratch with Oxygen: installing WordPress, setting up the project and laying the groundwork.by Lost in the Woods Digital
▶Build a Reusable Hero Section ComponentStructure a fully responsive hero section with CSS Grid, style it with classes and save it as a reusable component you can drop into any Oxygen site.by Lost in the Woods Digital
▶How to Use Components in Oxygen 6How Components work in Oxygen 6: create reusable elements once, apply them across pages, and edit them everywhere from a single source.by OutWP
▶Responsive Hero Section Design TutorialBuild a responsive, accessible hero section styled with utility classes — a design-inspiration walkthrough of what Oxygen 6 can do.by Van Marciano
▶How to Create Your Own Web Design BlueprintWhy a repeatable design blueprint speeds up every build, and how to create your own to use with Oxygen.by Van Marciano
▶Simple Fancy Card Design TutorialCreate a fancy, responsive, semantically correct card layout from plain Oxygen containers and a little custom CSS.by Van Marciano
▶Quick and Easy Way To Make Typography Fluid ResponsiveMake your typography fluidly responsive with the free Utopia type-scale calculator — set it up once and let text scale smoothly between breakpoints.by Van Marciano
▶Category Term Layout Using Oxygen 6Create an archive template that displays the posts for a specific term, reusing elements from other templates to speed up the design.by Bruce Young
▶Create a Single Post Layout Using Oxygen 6Build a single post template: a featured image at a 16:9 display ratio, the post content and the post meta.by Bruce Young
▶Archive Grid Layout with Pagination using Oxygen 6A desktop- and mobile-friendly post archive: build the loop, design the repeating card, wire up the post links and add pagination.by Bruce Young
▶Building a Basic Header in Oxygen 6Build a site header from scratch using Oxygen 6 and Breakdance elements for Oxygen.by Bruce Young
▶How to Use Multiple Headers in Oxygen 6Show different headers on different sections of your site, and style each one independently.by Bruce Young
▶Getting Started with Oxygen 6A complete tour for new Oxygen 6 users: every setting walked through, the full editor interface, and an honest pros-and-cons discussion at the end.by David McCan
▶Tutorial en Español – Cómo hacer un Ticker Infinito con GSAPAprende a crear un ticker infinito con GSAP: un script paso a paso para un movimiento continuo, fluido y totalmente personalizable.by Oxypage
▶Mobile Menu Styling in Oxygen 6Set up, select and style a user-friendly mobile menu — including a top bar with your logo and properly styled links.by Bruce Young
▶How to Build a WordPress Website in 15 MinutesThe fastest path from a fresh WordPress install to a real, live site: build the whole thing in about 15 minutes with Oxygen and its Design Library.by Oxygen
▶The core elementsThe few elements every Oxygen page is made of, and what each one can become.by Oxygen
▶AnimationsA sticky menu, entrance and scroll animations, all set in the animations tab.by Oxygen
▶Using Variable Override to Set Different BackgroundImages on the Same ClassNo styling by ID? No problem: use Variable Override to set a different background image per element on the same class — without creating a new class every time.by WinuSoft Web Development
▶How to Create a Sliding Mobile Menu Using Oxygen 6 InteractionsBuild a slick sliding mobile menu entirely with Oxygen 6 Interactions — structure, configuration and styling, no plugins or custom JavaScript.by WinuSoft Web Development
▶Oxygen Builder 6 Parallax Columns – Built In GSAP Scroll AnimationRecreate a smooth parallax column effect with Oxygen's built-in GSAP scroll animations — a scroll-triggered layout with no plugins and no custom code.by WinuSoft Web Development
▶How to Use Interactions to Create a Popup in Oxygen Builder 6Use Interactions to build a popup — and the same show/hide technique works for mobile menus, search forms and any custom interface element.by WinuSoft Web Development