Oxygen Builder: maquetador visual de páginas web para WordPress

  • Última modificación de la entrada:21 julio, 2021
  • Autor de la entrada:
  • Categoría de la entrada:Diseño Web
  • Comentarios de la entrada:3 comentarios
  • Tiempo de lectura:12 minutos de lectura

Hace ya un tiempo que se viene comentando en los círculos del mundillo del diseño web la existencia de un nuevo maquetador visual de páginas web, Oxygen Builder, el cual podría hacer frente a otros maquetadores ya existentes en el mercado.

Muchos diseñadores web ya han mostrado su interés en Oxygen e incluso la intención de dejar de lado el gran buque insignia de los page builders más utilizado hoy en día, Elementor.

Es por ello que he creído conveniente ver en primera persona qué es lo que ofrece Oxygen para que les esté haciendo tilín a algunos compañeros del sector y estén pensando en ser infieles a Elementor.

¿Será tan bueno Oxygen como dicen?

¿Tendrá potencial para auparse al número 1 de los page builders?

¿Es más fácil de manejar que Elementor?

Vamos a verlo…

Qué es Oxygen Builder

Oxygen Builder es un plugin para maquetar páginas web en WordPress que funciona con el sistema de Drag and Drop (Arrastrar y Soltar) y permite crear webs atractivas de una manera «relativamente sencilla».

Así como Elementor revolucionó el mercado del diseño web por su interfaz amigable y un sistema de diseño apto para cualquier diseñador sin conocimientos de código, Oxygen está un poco más pensado para un perfil diseñador-desarrollador al 50%.

oxygen page builder

Cómo funciona Oxygen Builder

Como te decía, Oxygen funciona con el archi-conocido sistema de arrastrar y soltar objetos en una mesa de trabajo.

Si bien el sistema es utilizado por casi todas las herramientas actuales que requieren algo de maquetación, en el caso de Oxygen es bastante más complicado que otros, pues requiere más conocimientos de código para sacarle todo el jugo a los widgets.

Dispone de 3 elementos principales para maquetar las páginas:

  • Secciones: para añadir el contenido de los diferentes apartados del diseño.
  • Columnas: para organizar el contenido «verticalmente».
  • Divs: contenedores para añadir los widgets en secciones y/o columnas.

Oxygen no necesita ningún tema de WordPress

Una de las funciones principales de un tema WordPress es la de hacer la función de «esqueleto» en el cual se van añadiendo funcionalidades, plugins, widgets, etc. que lo llenan de contenido.

De hecho, las partes fundamentales de las que se ocupa un tema son el header, el footer, el sidebar, páginas de archivo, single posts, etc. Pero ahora con algunos maquetadores esto ya no es necesario.

Te cuento…

Cuando Elementor lanzó su tema Hello, mucha gente clamó al cielo porque realmente el tema no ofrece apenas opciones de personalización ni de estructuración, sino que depende al 100% de Elementor, incluso para crear headers, footers, etc.

Pues Oxygen viene haciendo algo parecido, solo que no te ofrece ningún tema propio.

Técnicamente hablando, para poder trabajar en WordPress vas a necesitar tener un tema instalado obligatoriamente, pero teniendo Oxygen podrás «pasar olímpicamente» del tema y crear todo lo necesario desde el maquetador visual. Con poner un tema básico ligero, tendrás suficiente.

Plugins de traducción web

Aparte de muchas otras herramientas no integradas, hay que destacar que Oxygen no está integrado con plugins de uso muy común, como los plugins para crear webs multi-idioma Polylang o WPML; un problema bastante gordo.

Área de trabajo de Oxygen

El área de trabajo de Oxygen es muy similar en aspecto a otros maquetadores visuales, pero tiene su propia chicha. Veamos…

oxygen mesa trabajo

#1. Mesa de diseño

En la parte central está el lugar donde iremos añadiendo los diferentes objetos para maquetar la web: secciones, columnas, textos, botones…

#2. Panel de herramientas

En la parte izquierda tendremos acceso a todos los widgets disponibles para diseñar.

Tendremos acceso a widgets ya de sobra conocidos, como encabezados, botones, imágenes, menús, testimonios, etc. y también a opciones propias de WordPress, bloques y diseños completos prediseñados por Oxygen para utilizar y un apartado llamado ‘Reusable’, donde podremos añadir lo que en Elementor se llaman ‘Widgets Globales’.

Además, en la parte superior del panel de widgets podremos mostrar y ocultar el propio panel, para tener más espacio para trabajar.

#3. Opciones generales

En la parte superior derecha tendremos acceso a algunas opciones generales:

  • Structure: el panel de «estructura» es lo que en Elementor se llama Navigator y en Photoshop el panel de capas. En esta columna podremos ver todos los elementos de nuestra maquetación anidados en capas, para saber en qué posición se encuentra cada uno y si depende o no de un elemento superior en la jerarquía.
  • History: se muestra el histórico de cambios, para que puedas ir a un estado anterior o posterior del diseño.
  • Deshacer/Rehacer: pues son un par de botones para ir hacia adelante o hacia atrás en los cambios que hemos hecho.
  • Manage: en este apartado están los subapartados Settings (Ajustes), Stylesheets (hojas CSS) y Selectors (Selectores CSS), donde podrás hacer ajustes globales en el diseño: colores, tipografías, encabezados y otros elementos.
  • Back to WP: en este botón podrás acceder al backend o al frontend de tu web.
  • Save: botón de guardado del diseño.

Uso de plantillas en Oxygen Builder

Al igual que pasa por ejemplo en Elementor con su Theme Builder, Oxygen te va a permitir controlar todos los aspectos de maquetación de tu web gracias a la creación de todo tipo de plantillas. Para ello solo tienes que ir a la opción de Oxygen en tu dashboard de WordPress y entrar en Templates.

Una vez dentro, podrás crear cualquier tipo de plantilla que necesites: posts, páginas, custom post types, footer…

oxygen builder plantillas

Integraciones de Oxygen Builder

En términos generales, he de decirte que de momento la integración de Oxygen con otras herramientas de WordPress es muy escasa. Las integraciones más destacadas y potentes están relacionadas con WooCommerce y Gutenberg solo están disponibles en algunos planes de precios.

Esperemos que con el tiempo esto vaya cambiando si quieren ser un competidor a la altura de Elementor, que está integrado con cientos de plugins y herramientas de terceros.

WooCommerce

Oxygen es compatible con WooCommerce y te permitirá personalizar bastante tu tienda online, desde los productos, como páginas específicas (mi cuenta, carrito, checkout…).

Gutenberg

Oxygen dispone de bloques propios para Gutenberg y una opción muy chula que te permite generar bloques reutilizables dentro de Oxygen y luego utilizarlos en Gutenberg. WOW!

ACF y Toolset

Y como ya te comenté arriba, también se integra con ACF y Toolset, con los que podrás añadir Custom Post Types y campos personalizados prácticamente donde desees.

El punto más fuerte de Oxygen es…

Sin duda el punto más fuerte de Oxygen es la gestión de datos dinámicos.

oxygen condicional1

Si sabes cómo sacarle partido a los datos incluidos en una base de datos de WordPress, vas a disfrutar de lo lindo con las opciones que te ofrece Oxygen, desde la opción de Condicional hasta la integración con ACF o Toolset. La opción Conditional te va a permitir mostrar/ocultar objetos según condiciones, ¡¡¡brutal!!!

oxygen condicional2

Incluso es posible crear una web de membresía sin necesidad de otros plugins; podrás mostrar/ocultar objetos dependiendo del rol de usuario y otras opciones. ¡¡¡Esto es muy, muy TOP!!!

oxygen condicional3

Estos son los datos con los que vas a poder trabajar dinámicamente… ¡no es moco de pavo, eh!

oxygen datos dinamicos

Pros y Contras de Oxygen Builder

Te voy a contar ahora algunas cosas buenas y malas que según mi criterio totalmente subjetivo, tiene Oxygen:

Pros

  • Sistema Drag and Drop (¡solo faltaría!)
  • Es un tema muy ligero, lo que hará que tu web vuele. Además, según dicen los que entienden más que yo, genera un código muy limpio. Ellos presumen de todo esto aquí.
  • Todos los planes de precios son Lifetime Unlimited, (abajo en ‘Planes de Precios’ te cuento más…).

Contras

  • La curva de aprendizaje es bastante alta para un usuario sin conocimientos suficientes de código.
  • No tiene una opción de guardar en modo Borrador, por lo que los cambios que realices se verán reflejados en la parte frontal de la web en tiempo real.
  • Todavía está poco integrado con otras herramientas WordPress del mercado.
  • No tiene opción gratuita en el repositorio oficial de WordPress.
  • No tiene disponible ningún widget para crear formularios :O ¡Increíble!

Lo que más y menos me gusta de Oxygen

Tras haber probado el maquetador durante unas horas, he detectado algunas cosas que me gustan y otras que no… pero ya te digo, no he profundizado como para darte detalles muy detallados al detalle.

¿Me se entiende?

Lo que MÁS me ha gustado

  1. La opciones de alineación (Flexbox), que te permiten alinear tanto vertical como horizontalmente objetos sin tener que crear secciones o columnas interiores, como en Elementor, algo que aligera el uso de código. Con tirar de los objetos, se alinean solos.
  2. Es posible distribuir manualmente el espacio entre widgets dentro de un DIV, estirándolos, sin tener que introducir margen y/o padding.
  3. El panel Structure, que viene siendo el Navigator de Elementor, porque es muy intuitivo gracias a la diferenciación por colores de los diferentes niveles jerárquicos.
  4. Podrás añadir efectos de transformación a objetos: rotación, zoom, 3D…
  5. La potencia de la opción de crear Headers personalizados, sticky, transparentes y responsive. Incluso dispone de headers prediseñados. 

oxygen structure

Lo que MENOS me ha gustado

  1. El manejo de los widgets en el área de trabajo es muy poco intuitivo.
  2. Para conseguir personalizar un widget hay que dar muchas vueltas o, lo que es lo mismo, hacer muchos clics.
  3. La herramienta solo está disponible en Inglés, por lo que si no dominas el idioma, bye, bye!
  4. No existen menú contextual haciendo clic en los widgets con el botón derecho del ratón.

Oxygen Builder vs Elementor, ¿cuál es mejor?

Venga, reconoce que estabas deseando que llegara a este punto en el que voy a poner a Myke Tyson frente a Muhammad Ali, ¿a que sí?

¡Si ya sé yo que te va la marcha!

Bueno, pues llegados a este punto he de decir que no he probado Oxygen a fondo como para darte una opinión totalmente objetiva sobre su poder.

OceanWP y Elementor

Oxygen es una herramienta mucho más pensada para desarrolladores que Elementor, que tiene un perfil mucho más cercano al diseñador e incluso es totalmente apto para usuarios principiantes o intermedios que no son siquiera diseñadores web.

La primera vez que yo utilicé Elementor recuerdo que me sentí cómodo a los pocos minutos y las opciones básicas de manejo de los widgets estaban muy bien organizadas, facilitando el avance en el diseño y la maquetación.

Con Oxygen las opciones están como más escondidas y hay que dedicar tiempo a familiarizarse con toda la interfaz; ten en cuenta también que cuando estás acostumbrado a una herramienta es muy difícil cambiar el chip para meterse de cabeza en otra… Es como si a un piloto de rallies le ponen el coche de otro…

Resumiendo…

Elementor ha crecido mucho en estos años y ahora ya no es solo un maquetador más, sino que es una plataforma multitarea, por decirlo de alguna forma.

No puedo decir si uno es mejor que otro, porque cada uno puede verlo de diferente manera, aunque sí es cierto que si buscas una herramienta intuitiva en la que no te tengas que pelear con código ni con la base de datos de WP, quédate con Elementor.

Si deseas ir un paso más allá y sabes navegar entre los tiburones del CSS, el PHP, el HTML, etc. puedes darle una oportunidad a Oxygen.

Te dejo una comparativa que aparece en la propia web de Oxygen, en la que ellos mismos se comparan con Elementor, Beaver y Divi.

Planes de precios de Oxygen Builder

Como ya te adelanté arriba, todos los planes de precios de Oxygen son Lifetime Unlimited, lo que significa que no tienes que pagar renovaciones anuales y puedes utilizarlo en todas las webs que quieras.

Si deseas adquirirlo, hazlo cuanto antes, pues cada vez quedan menos herramientas que ofrezcan esta opción.

Yo te recomiendo que cojas o el plan Agency o Ultimate, pues ambos son compatibles con WooCommerce y Gutenberg. Piensa que es un único pago y con que lo utilices en un par de webs de clientes, si eres diseñador web, ya lo tienes amortizado.

Aquí te dejo los precios:

oxygen page builder condicional precios

Vídeo de Oxygen Builder

Para finalizar, te dejo aquí un vídeo creado por el propio desarrollador del maquetador (en Inglés anglosajón) donde puedes ver cómo funciona aunque no entiendas ni papa de lo que dicen:

Conclusión y opinión personal

Llegados a este punto, he de decir que a Oxygen aún le queda bastante recorrido para poder competir de tú a tú con Elementor.

Le faltan integraciones, opciones muy necesarias y más facilidad de uso. Aunque si lo que buscan es un tipo de público más profesionalizado, no van mal encaminados.

Creo realmente que Oxygen y Elementor no van a llegar a ser competidores directos, pero sí le puede quitar la porción del pastel del mercado que está descontenta con el tipo de código que genera Elementor o el supuesto perjuicio en la velocidad de carga de su herramienta.

Todo se verá con el paso del tiempo…

 

Y hasta aquí esta review que tenía muchas ganas de hacer. Espero que te haya gustado lo que has leído y me dejes 5 estrellitas, un comentario, lo compartas, lo imprimas y lo lleves contigo a la playa o a la montaña para acordarte siempre de mí 😛

¡Haz clic para valorar esta entrada!
(Votos: 2 Promedio: 5)

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress . Mi misión es ayudar a emprendedores y pequeños negocios a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene 3 comentarios

  1. Muy buenas, Edu,

    Llevo un tiempo usando Oxygen y puedo asegurarte que se puede establecer un set global de tipografías (con tamaños, peso y colores) de forma más amplia que en Elementor y Divi. El resto de constructores no los conozco.

    Para ello, debes ir a editar cualquier página y dentro del menú “Manage”, vas a “Settings” >>> “Global Styles” >>> “Fonts”. Una vez añadidas las tipografías, vas a “Manage” >>> “Settings” >>> “Headings” / “Body Text”.
    Como puedes ver, lo tenías al lado. Si es un perro, te muerde 😀

    También puedes configurar un footer global y diseños de posts, páginas individuales y páginas de archivo.
    Para ello debes ir al menú “Oxygen” >>> “Add New Template”. Creas la plantilla y especificas –dónde– deberá mostrarse esa plantilla (la página “sobre mí”, una landing, el footer de toda la web, la página 404, etc.). Las posibilidades son ilimitadas.

    Yo estoy empezando a usarlo ya para clientes y creo que no habrá vuelta atrás.

    Un saludo,

    Manolo

    1. Edu Rubianes

      Hola Manolo,

      Pues mira, tienes toda la razón del mundo mundial, así que nada que decirte más que gracias!!!

      Las tipografías pues sí, es lo que tu dices… estuve mirando ese desplegable y no sé qué coño pasó que no vi lo que tenía delante de mis ojos. No te voy a negar que me extrañó bastante ver que sí se podían configurar los colores globales y no las tipografías y otros aspectos…

      Y sobre las plantillas, más de lo mismo… Fui a trastear con el maquetador, pero ni siquiera se me ocurrió mirar en el panel de WordPress las opciones disponibles.

      Lo dicho, un desastre y tienes todo el derecho a echarme a los leones, jajaja!!!

      Mil gracias por las apreciaciones 😉

      PD: queda ya corregido!!!

  2. JAJAJA! 😀
    No es cuestión de echar a nadie a los leones 😀
    Es cierto que la curva de aprendizaje es más empinada que con otros constructores.
    Y que aún le faltan integraciones, pero creo que es el camino a seguir.
    A ver qué pasa entre Oxygen y Gutenberg, que estamos en plena época de cambios.

    Un saludo,

    Manolo

Deja una respuesta

Ver más

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.