Índice
Qué es Oxygen: Site Builder, no un page builder.
Características
Ventajas sobre otros builders
Un poco de contexto
Elementos
Compatibilidad
Plugins interesantes
¿Cómo aprendo?
No sirve para todo tipo de profesionales. Más enfocado a implementadores que sepan código o que quieren dar un pasito más y para diseñadores.
Acelera bastante el proceso de maquinación si vienes de crear temas desde cero.
Mismo principio que Full Site Editing
Qué es Oxygen
Site Builder, no un page builder.
Características
Genera código HTML5 sin paja (ejemplos con Elementor)
– Comparativa de cargar un H1 con Elementor y con Oxygen
– La profundidad de elementos en el DOM.
Puede manejar comportamientos condicionales
Genera código desde cero (ejemplos comparativos con Elementor de lo que carga con la página en blanco)
Puedes asignarle clases a los elementos
Utilizar variables en sus inputs
Un consejo: crea un sistema de nomenclatura. Yo por ejemplo utilizo un prefijo para las clases que asigno yo
oh-block
mo-block
Diseñar y maquetar utilizando la metodología de Atomic Design.
Un solo pago, actualizaciones y soporte de por vida
Un soporte maravilloso
Elementos
Section, Div, Button, Link Wrapper, Texto, Encabezados, etc…
Inner Content: renderizado del contenido que se rellena en el editor de WordPress convencional.
Repeter: Crea un elemento base como plantilla y a partir de la cual se hace una query para imprimir el resto de elementos que cumplan esa condición. Se utiliza en páginas de archivo o para llamar elementos que se repiten tipo “post relacionados o últimos comentarios”, etc.
- Rellenado de contenido dinámico: Es una opción que tiene en los elementos de texto e imágenes (background y demás) que te permite rellenar ese contenido desde la base de datos. Es compatible con los datos por defecto de WordPress y con plugins de Custom Fields como ACF o Metabox.
- Elementos ya creados
- Composite Elements: Algunos gratuitos y otros con licencia aparte. Menús complejos, Acordeones, etc…
- Design Sets externos: Elementos complejos que se venden aparte o lo instalas de otra instalación de Oxygen.
Compatibilidad
WooCommerce -> Debes instalar su add-on propio para utilizar elementos ya preconfigurados por Oxygen. También plugins como Oxygen Ultimate Woo añaden componentes al constructor con opciones interesantes.
Gutenberg -> Añade la funcionalidad de poder crear bloques que luego pueden ser llamados desde el editor.
No tiene por qué dar problemas con ningún otro plugin. Si un plugin instala Custom Post Types podrás definir su template asignando que se utilice como tal.
(Truco para aprender a ver qué template usa un plugin)
Cómo construir un sitio con Oxygen Builder
- Templates: Podemos asignarlos a un Custom Post Type simple o a su archivo. También a una página determinada. Es quien renderiza el aspecto de la web
- Partes de plantilla: Defines partes de diseño que utilizarás a menudo en otras templates. Esto es buenísimo para que si necesitas cambiar una cosa, hacerlo solo en un sitio y se te actualiza en todos sitios, por ejemplo el Header, el Footer, los Hero Parts, etc…
- Bloques: Partes que luego puedes usar con el editor de WordPress.
Recomendaciones para trabajar con clientes
Debes conocer a tu cliente. Si tu cliente necesita una web sencilla pero vistosa, utiliza Oxygen como si construyeras un tema y los clientes solo tengan acceso a la parte del contenido de WordPress. Nunca dejarles que vean o toquen Oxygen. Por tanto:
Bloquea el acceso a Oxygen por roles de usuario y por nombre de usuario en caso de que tu cliente tenga el rol administrador.
No utilices contenido completo hecho en Oxygen, sino que utilices bloques para Gutenberg hechos con Oxygen o estila bloques más intuitivos de usar como los Kadence Blocks que además puedes fácilmente cambiar los colores.
Preconfigura esos bloques por defecto de WordPress y de otros plugins de WordPress utilizando el apartado de Bloques reutilizables.
Plugins interesantes que lo vitaminan
Oxy Toolbox
Añade módulos que hacen Oxygen más completo. Lo más interesantes: El de condicionales (muchas más condiciones como algunas basadas en WooCommerce, si tiene el carrito lleno, si está en la página del producto x, o si el body tiene la clase que le indiques.)
👉 https://oxyplugins.com/downloads/oxy-toolbox/
Hydrogen
Vitamina Oxygen convirtiéndolo ya casi en una aplicación de escritorio. Habilita el botón derecho en la pantalla de diseño para copiar elementos entre ventanas, guarda con control+S, y alguna que otra cosa más. Muy cómodo.
👉 https://www.cleanplugins.com/products/hydrogen-pack/
Motion.Page
Puedes crear animaciones ligeras basadas en GSAP con este builder. Un perfecto compañero de aventuras.
👉 https://motion.page/
¿Cómo aprendo Oxygen?
Gracias a Bodhan Shila por descubrirme esta herramienta y difundirla.
Síguelo en twitter que tiene un montón de hilos sobre Oxygen y además un curso. El curso no lo he hecho, pero viniendo de Bodhan seguro que es espectacular.
👉 Twitter de Bodhan https://twitter.com/bohdanps
👉 El curso de Bodhan de Oxygen: https://empresiona.com/curso-oxygen-builder/
La página web del propio builder va publicando contenido sobre Oxygen, tiene un montón de tutoriales de cómo se hace cierto tipo de webs.
👉 Tutoriales para empezar: https://oxygenbuilder.com/tutorials/
👉 Blog donde van publicando: https://oxygenbuilder.com/blog/
El canal de Permaslug donde incluye reviews de las novedades que va trayendo Oxygen, así como tutoriales de cómo hacer elementos o webs concretas.
👉 https://www.youtube.com/c/permaslug
El creador del canal de Permaslug también ha creado una herramienta para pasar tu diseño de Figma a Oxygen.
👉 https://xenonapp.com/
El vídeo de la charla
¡Ejemplos reales!
https://basicasierradecadiz.com/
https://verdescristobal.com
Deja una respuesta