Saltar al contenido

Tutorial Oxygen Builder

Oxygen Builder

Como verás, hoy no tenemos un theme propiamente dicho, sino que reseñaremos algo similar… Oxygen Builder.

¿Es Oxygen builder el constructor visual que viene a quitarle el podio a Elementor o Divi?

¿Por qué es tan potente? ¿Deberías usarlo en tus proyectos?

Todas esas preguntas y una guía introductoria para la instalación, configuración y primeros pasos con Oxygen Builder, las encontrarás aquí.

¡Comencemos!

¿Cuáles son las características de Oxygen?

Podrías pensar que Oxygen en un constructor similar a Elementor o Divi, pero no, tiene una particularidad, y es que, una vez lo instalas, TODO lo diseñas desde allí.

No necesitas theme

Puedes prescindir de un tema base. Lo explicamos:

Otros constructores visuales como Elementor, por ejemplo, adaptan su maquetador al diseño base del tema que tengas instalado.

Bien, en el caso de Oxygen, no.

Una vez lo activas, debes maquetar todo desde allí. Cabecera, footer, todo.

Lo cuál, lo vuelve personalizado hasta lo máximo que tu creatividad te deje.

¿Cómo funciona ésto exactamente?

Ni bien instalas y activas el plugin te encontrarás con la siguiente pantalla:

instalación oxygen builder

Aquí puedes seleccionar si quieres construir tu tema a partir de un theme pre diseñado, o iniciar desde cero y hacer todo por tu cuenta.

Si ya tienes experiencia como diseñador web, haz trabajado con otros maquetadores y sabes algo de HTML o CSS, dale a la versión en blanco. Sino, recomendamos que comiences del tema pre diseñado.

En el ejemplo, importaremos el theme por defecto que trae Oxygen, y quedará de la siguiente manera:

sitio web listo con oxygen

Como habrás notado, esto no es el típico contenido demo. Sino que es la cabecera y el footer maquetado. Como normalmente solemos encontrar cuando instalamos un tema de wordpress nuevo.

Asi que ahora, comencemos con la personalización, y exploremos las funcionalidades de Oxygen builder.

Diseño y personalización con Oxygen Builder

Para poder apreciar los cambios que oxygen ha hecho en nuestra web, debemos dirigirnos a la pestaña Oxygen > Templates:

oxygen templates

Allí podremos ver todos los templates añadidos a nuestra web, que no es más que el contenido básico, mínimo requerido para comenzar un sitio web.

todos los templates instalados de oxygen

Todos y cada uno de estos tempaltes, podemos editarlos utilizando, por fin, Oxigen Builder.

Por ejemplo, si editamos el template «main» podremos modificar la cabecera y el footer a nuestro gusto personal -esto ya lo sabemos porque hemos trabajado previamente con Oxygen.

Solo tienes que pulsar en editar > edit with oxygen y te encontrarás cara a cara con el maquetador visual de Oxygen Builder:

maquetador visual de oxygen builder

ARRIBA: La barra de elementos de navegación, dónde puedes ver el botón de +ADD que sirve para desplegar la barra izquierda de elementos.

La pestaña de «previewing» sirve para seleccionar el contenido que deseas visualizar en el template.

El botón Structure, muy útil para ver con qué elementos fue maquetado el template o la página.

Luego los botones de save, para guardar, y «back to wp» para volver a wordpress.

El botón de manage lo veremos más adelante.

IZQUIERDA: la barra de herramientas con todos los elementos disponibles de Oxygen.

No es «literalmente» Drag & Drop, sino que sólo tienes que pulsar sobre el elemento, y lo añadirá de forma automática -aunque luego podrás arrastrarlo a dónde quieras.

DERECHA: La estructura y maquetación de los elementos. Es como la navegación, en Elementor.

Continuamos…

Cabecera y footer

cabecera personalizada con oxygen builder

Como puedes ver, cambiamos toda la cabecera de nuestro theme utilizando las opciones que nos ofrece Oxygen.

Cambiamos los colores, subimos el logo de prueba, añadimos un texto en el menú superior y redondeamos los bordes del botón del menú principal.

Oxygen trabaja con flexbox, al igual que Elementor, lo que nos da un gran control sobre los espacios entra cada elemento del theme, por lo que todo se puede manejar mucho mejor.

Con respecto a la personalización de cada uno, Oxygen tiene unas opciones inmensas, en las que incluso, puedes añadir todo tipo de código que quieras.

opciones avanzadas de oxygen

Con el footer haremos lo mismo, sólo cambiaremos los colores para hacerlo rápido y pasar a las siguiente opciones.

Listo, ya tenemos nuestra cabecera y footer terminada, con el look black & white que solemos usar siempre:

imagen completa de sitio web en oxygen

Ahora bien, en este caso ejemplo, lo que estamos viendo es una entrada del blog, la que nos da por defecto wordpress, pero..

¿Qué pasa si no me gusta cómo se ve?

Muy bien, lo que toca hacer, es modificar el template que está destinado a los posts. Allá vamos:

Esto lo podemos hacer desde el escritorio, yendo a Oxygen > Templates, y seleccionar el que corresponde.

Pero Oxygen nos da una acceso rápido, y lo encontramos en la barra superior de herramientas:

edit with oxygen acceso rápido

Lo que encontramos al abrirlo es bastante claro:

  • Una sección que contiene el título de la entrada.
  • Una sección donde se encuentra el contenido del artículo.
  • Una sección de comentarios.
personalizando template blog de oxygen

Lo que haremos es:

  • En la primera sección, usaremos la imagen destacada en lugar de ese fondo de color.
  • En la sección de artículo, haremos más ancho el contenedor.
  • En la sección de comentarios, cambiaremos el color de fondo y del botón.

Maquetación de las entradas con Oxygen

Para la primera sección, colocamos el overlay de color negro y agregamos la imagen que la entrada usaba como imagen destacada.

Para ello, solo debes ir a avanzado, seleccionar la opción background, y clicar en el botón «data» para seleccionar «featured imagen».

Luego colocar el overlay del color que tu quieras (en el ejemplo lo ves como rgba (0,0,0,0.7))

modificar imagen destacada con oxygen

De esta forma, no tienes que preocuparte por maquetar esa sección cada vez que añadas una nueva entrada. Sólo escribes el contenido, subes la imagen destacada y lo publicas.

Oxygen te permite, practicamente, crear un theme que se adapte a tu gusto, son saber programar ni diseñar

Para la segunda sección (la del contenido), seleccionamos en la estructura «simple article» y en la pestaña «size & spacing» cambiamos el custom container width de 760 a 1000px.

No es que no nos guste como estaba, fue sólamente para hacerlo visual a modo de ejemplo.

Para la sección de los comentarios, la tarea se vuelve un poco más compleja, y es que se trata de un elemento de wordpress, al que no tienes acceso desde el builder. Enconces, debemos trabajar el CSS.

Para trabajar el CSS de manera correcta en Oxygen, lo que debes hacer es, habilitar el «detector de selectores» desde Oxygen > Settings > Enable Selector Detector, y habilitas la opción.

detector de selectores en oxygen

Una vez tengas habilitado el selector, encontrarás un nuevo botón en el menu de herramientas de Oxygen, como el siguiente:

selector de css oxygen builder

Pulsando en él, y luego en el elemento que quieras editar, podrás acceder a la customización de dicho elemento, desde la pestaña «advanced», y así, es como editamos el background, colocando el overlay violeta y una imagen de fondo.

Así quedó, entonces, la configuración para todas nuestras entradas del blog.

captura del sitio web terminado

Ampliamos la sección del contenedor a mil píxeles, agrandamos la tipografía, cambiamos la sección del título por una imagen destacada con un overlay, y le dimos un diseño, ridículo pero diseño al fin, a la caja de comentarios.

También agregamos un poco de contenido lorem ipsum para que se aprecien mejor los cambios.

¡Importante! Recuerda que estás trabajando como un diseñador profesional. Revisa cómo queda tu maquetación en TODOS los dispositivos. En el ejemplo, es un error trabajar con pixeles, sólo lo hicimos para el ejemplo. Lo correcto sería em o porcentajes

Podríamos hacer lo mismo para las páginas, secciones de archivos y demás, pero el proceso es el mismo.

Entonces, como este es un artículo informativo sobre las pobilidades que ofrece Oxygen Builder, finalizaremos la parte de diseño y maquetación aquí, para pasar a una de las que más nos cautivo: el rendimiento.

Rendimiento

La ventaja principal de Oxygen, es que solamente carga las peticiones de los bloques que se utilicen.

Oxygen consume el 12% de CPU y consume 49,25 MB de memoria RAM, a la altura del resto.

La web que estuvimos utilizando de ejemplo, estaba en local, por lo tanto, no podemos pasarla por pagespeed.

Sin embargo, te mostramos los resultados de otra web que usa Oxygen, y que sí esta en internet, y puedes pasarla tú mismo por la herramienta que quieras. Mira estos resultados:

oxygen pagespeed
oxygen gtmetrix
  • Carga en menos de un segundo.
  • Sólo 13 peticiones.
  • Menos de 200kb de peso.

RESULTADO: tienes el theme que quieres, con el diseño que quieres, en poco tiempo, y con una velocidad increíble.

¡Google y los usuarios te van a amar!

Entonces, ¿Cómo saber si Oxygen Builder es para tí?

No todo es color de rosa con Oxygen. Seguramente, no te servirá para todos los proyectos, pero si te salvará en algunos otros.

Para eso, elaboramos unos pros y contras, basado en el tiempo que venimos testeando el plugin:

PROS

  • Velocidad de carga inmejorable.
  • Practicamente diseñas tu propio theme.
  • Videos tutoriales disponibles para aprender a usarlo.
  • No necesitas un theme premium, con el twenty de wordpress, es suficiente.

CONTRAS

  • Necesitarás algo de conocimiento de diseño, o estar dispuest@ a aprender.
  • Es un plugin egoísta, puede presentar incompatibilidades con otros.
  • El soporte no es bueno. Rara vez contestan en su grupo de facebook.

¿Para quienes sí recomendamos Oxygen?

  • Webs de afiliación que requieran un diseño personalizado y, por sobre todo, una muy buena velocidad de carga.
  • Blogs.
  • Webs estáticas.
  • Webs para monetizar con publicidad.

¿Para quienes NO recomendamos Oxygen?

  • Webs de eCommerce. Aunque el plugin tiene un addon para woocommerce y para gutenberg, le encontramos algunas fallas.
  • Webs de membresía. Esto es estimativo. No lo testeamos, simplemente basamos el NO, en que muchos plugins son incompatibles con Oxygen.

Conclusión…

Esperamos que esta guía te haya servido para valorar si Oxygen es para tí, si te servirá o si podrás usarlo en tus proyectos web.

Si no estas de acuerdo con alguna de las conclusiones, o crees que nos equivocamos en algo, te invitamos a que nos dejes tu comentario y así corregirlo, o debatirlo.

¡Nos vemos en próximos tutoriales!

0/5 (0 Reviews)