How was the talk "Meet Oxygen Builder"?

Index

What Oxygen is: Site Builder, not a page builder.
Characteristics
Advantages over other builders
A bit of context
Elements
Compatibility
Interesting plugins
How do I learn?

Not suitable for all types of professionals. More focused on implementers who know how to code or who want to go a step further and for designers.

It speeds up the process of scheming quite a bit if you come from creating themes from scratch.

Same principle as Full Site Editing

What is Oxygen

Site Builder, not a page builder.

Characteristics

Generate HTML5 code without chaff (examples with Elementor)
- Comparison of loading an H1 with Elementor and with Oxygen
- The depth of elements in the DOM.

Can handle conditional behaviour

Generate code from scratch (comparative examples with Elementor of what loads with blank page)

You can assign classes to the elements

Use variables in your inputs
A tip: create a naming system. For example, I use a prefix for the classes I assign myself.
oh-block
mo-block

Design and layout using the Atomic Design methodology.

One-time fee, lifetime upgrades and support

A wonderful support

Elements

Section, Div, Button, Link Wrapper, Text, Headers, etc...

Inner Content: rendering of the content that is filled in the conventional WordPress editor.

Repeat: Creates a base element as a template and from which a query is made to print the rest of the elements that meet that condition. It is used in archive pages or to call elements that are repeated, such as "related post or last comments", etc.

  • Filling of dynamic content: It is an option in the text and image elements (background and others) that allows you to fill that content from the database. It is compatible with the default data of WordPress and with Custom Fields plugins such as ACF or Metabox.
  • Elements already created
    • Composite Elements: Some are free and some are licensed separately. Complex menus, Accordions, etc...
    • External Design Sets: Complex elements that are sold separately or installed from another Oxygen installation.

Compatibility

WooCommerce -> You must install its own add-on to use elements already preconfigured by Oxygen. Also plugins like Oxygen Ultimate Woo add components to the builder with interesting options.

Gutenberg -> Adds the functionality to create blocks that can then be called from the editor.

It doesn't have to cause problems with any other plugin. If a plugin installs Custom Post Types you will be able to define its template by assigning it to be used as such.

(Trick to learn how to see which template a plugin uses)

How to build a site with Oxygen Builder

  • Templates: We can assign them to a single Custom Post Type or to your archive. Also to a specific page. It is the one that renders the appearance of the web
  • Parts of the template: You define design parts that you will use often in other templates. This is great so that if you need to change something, you can do it only in one place and it will be updated everywhere, for example the Header, the Footer, the Hero Parts, etc...
  • Blocks: Parts that you can then use with the WordPress editor.

Recommendations for working with clients

You must know your customer. If your client needs a simple but beautiful website, use Oxygen as if you were building a theme and clients only have access to the content part of WordPress. Never let them see or touch Oxygen. Therefore:

Block access to Oxygen by user roles and by user name in case your customer has the role of administrator.

Don't use full content made in Oxygen, but use Gutenberg blocks made with Oxygen or use more intuitive to use blocks like the Kadence Blocks that you can easily change the colours.

Pre-configure these default blocks from WordPress and other WordPress plugins using the Reusable Blocks section.

Interesting plugins that enhance it

Oxy Toolbox
Adds modules that make Oxygen more complete. The most interesting: The conditionals one (many more conditions like some based on WooCommerce, if you have a full cart, if you are on product page x, or if the body has the class you indicate).
👉 https://oxyplugins.com/downloads/oxy-toolbox/

Hydrogen
Vitamina Oxygen, making it almost a desktop application. It enables right-click on the design screen to copy elements between windows, save with control+S, and a few other things. Very convenient.
👉 https://www.cleanplugins.com/products/hydrogen-pack/

Motion.Page
You can create lightweight GSAP-based animations with this builder. A perfect companion for your adventures.
👉 https://motion.page/

How do I learn Oxygen?

Thanks to Bodhan Shila for discovering this tool and spreading the word.
Follow him on twitter, he has a lot of threads about Oxygen and also a course. I haven't done the course, but coming from Bodhan I'm sure it's spectacular.
👉 Bodhan's Twitter https://twitter.com/bohdanps
👉 Oxygen's Bodhan course: https://empresiona.com/curso-oxygen-builder/

The builder's own website publishes content about Oxygen, and has a lot of tutorials on how to make certain types of websites.
👉 Tutorials to get you started: https://oxygenbuilder.com/tutorials/
👉 Blog where they publish: https://oxygenbuilder.com/blog/

Permaslug's channel where he includes reviews of Oxygen's new products, as well as tutorials on how to make specific elements or websites.
👉 https://www.youtube.com/c/permaslug

The creator of the Permaslug channel has also created a tool to transfer your Figma design to Oxygen.
👉 https://xenonapp.com/

The video of the talk

Real examples!

https://basicasierradecadiz.com/
https://verdescristobal.com


Comments

Leave a reply

Your email address will not be published. Required fields are marked with *