Oxygen Builder para WordPress
Qué es Oxygen Builder
![Oxygen es una de las mejores alternativas a Elementor](https://cdn.raiolanetworks.com/blog/wp-content/uploads/01-oxygen-builder-para-wordpress.jpg)
Ventajas e inconvenientes de Oxygen Builder
Como cualquier constructor, Oxygen tiene sus puntos fuertes, pero también debilidades. Para que te hagas una idea general, te hago un listado. Ventajas:- Genera un código muy limpio, lo que se traduce en mejor rendimiento y velocidad de carga. Este aspecto es uno de sus puntos fuertes con respecto a Elementor.
- Puedes maquetar las plantillas de cualquier parte de tu web (cabecera, footer, listados de artículos o de cualquier CPT, página de error 404, etc.).
- Se integra a la perfección con ACF.
- Compatibilidad con WooCommerce.
- Posibilidad de usar datos dinámicos de manera nativa.
- Posibilidad de mostrar u ocultar cualquier componente de manera condicional, de manera nativa.
- Posibilidad de aplicar estilos a través de la interfaz visual a cualquier plugin externo.
- Permite dar estilos a pseudo clases de CSS como :hover, :active, etc. desde la inferfaz visual.
- Posibilidad de añadir código PHP mediante el bloque de código.
- Tiene licencia lifetime a un precio bastante competitivo.
- No tiene una versión gratis como pasa con Elementor.
- La curva de aprendizaje es algo mayor que alguno de sus competidores.
- No tiene integrado un sistema de formularios (como tiene Elementor Pro), por lo que tendrás que recurrir a algún plugin externo para ello.
- Aunque no es imprescindible, es muy recomendable tener conocimientos de, por lo menos, HTML y CSS para entender bien todas las opciones y sacarle partido.
Cómo instalar Oxygen Builder en WordPress
Si ya tienes WordPress instalado en tu hosting lo siguiente que tienes que hacer es instalar Oxygen para empezar a maquetar tu web. Como es un plugin exclusivamente de pago no lo encontrarás en el repositorio de WordPress. Primero deberás comprarlo a través de su página web https://oxygenbuilder.com/ y descargarte el plugin en formato zip. Una vez lo tengas descargado, tienes que abrir el panel de administración e ir a Plugins > Añadir nuevo > Subir plugin. Cuando lo tengas instalado, actívalo. Finalmente tienes que introducir la licencia del plugin. La encontrarás dentro de tu área de cliente de Oxygen. Para introducirla tienes que ir a los ajustes del plugin en Oxygen > Settings > License. Dale a Save Oxygen License y ya lo tendrás instalado y listo para empezar a usarlo.Cómo usar Oxygen Builder
Ahora que sabes de qué va y cómo se instala Oxygen, vamos a ver cómo se utiliza.Opciones y ajustes de Oxygen Builder
Antes de empezar voy a hacer un repaso a las opciones del plugin. Dentro del administrador de WordPress verás que Oxygen tiene 4 apartados de opciones:- Home: donde tienes accesos directos para crear una nuevas páginas, trabajar con plantillas prediseñadas de Oxygen, tutoriales y foros de soporte.
- Templates: aquí estarán todas las plantillas que creas con Oxygen.
- Export & import: para que puedas importar y/o exportar los ajustes globales del plugin.
- Settings: aquí están todos los ajustes de Oxygen ordenados por pestañas. Entre los más importantes están los ajustes de integración con otros servicios, permisos de usuario, apartado para subir tus propios sets de imágenes SVG, licencia, caché de CSS, etc.
![Opciones y ajustes del plugin](https://cdn.raiolanetworks.com/blog/wp-content/uploads/02-opciones-oxygen-builder.jpg)
Interfaz de Oxygen Builder
Como ya te dije antes, si estas acostumbrado a otros maquetadores como Elementor, la interfaz de Oxygen te va a resultar muy familiar. Si no es así, no te preocupes, te lo explico a continuación.![Interfaz y principales opciones de la herramienta](https://cdn.raiolanetworks.com/blog/wp-content/uploads/03-interfaz-de-oxygen-builder.jpg)
- Hide: sirve para ocultar la parte izquierda de la interfaz y tener una visión más clara y real de cómo está quedando tu diseño.
- Structure: despliega un panel a la derecha de la interfaz que te muestra la estructura de la página o plantilla que estás maquetando (es algo parecido al panel de capas en Photoshop). Desde este panel puedes reordenar componentes (arrastrándolos), borrarlos, ocultarlos (pero solo en la interfaz), duplicarlos, renombrarlos, marcarlos como reusables, etc. Personalmente este es un panel que me gusta tener siempre abierto. Es útil esas veces en las que quieres seleccionar un componente en la parte central, pero por temas de z-index, márgenes negativos o superposición de bloques, no puedes. Con el panel de "structure" desplegado siempre vas a tener acceso y vas a poder seleccionar cualquier componente que estés utilizando.
- History: despliega un panel con el historial de cambios. Puedes seleccionar cualquier instancia de las que aparece en este panel para volver al estado en el que tenías tu diseño en ese momento. También tienes un botón de "Clear all" para borrar todo este historial, pero ten en cuenta que esta acción no se puede deshacer.
- Botones "Undo" y "Redo": el clásico CTRL+Z y CTRL+Y. Sirven para ir un paso atrás (undo) o adelante (redo) en el historial de cambios.
- Manage: aquí tienes 3 tipos de ajustes
- Settings: para los ajustes de página y ajustes globales del sitio. Dentro de los ajustes globales puedes establecer unos estilos predefinidos para encabezados, cuerpos de texto, botones, enlaces, etc. También puedes configurar los puntos de ruptura (breakpoints) para el responsive. Además, puedes crear paletas de colores globales, las cuales podrás usar de manera rápida y cómoda en los componentes que utilices para maquetar.
- Stylesheets: para añadir hojas de estilo CSS personalizadas
- Selectors: para ver una lista de todas las clases CSS que se utilizan en tu página web. También puedes añadir más clases, deshabilitarlas, eliminarlas, etc.
- Back to WP: dos accesos directos, uno para ir al panel de administración de WordPress y otro para abrir la página que estamos editando.
- Save: para guardar los cambios. Ten en cuenta que este botón guarda y publica los cambios, no permite guardar en modo borrador (cosa que, la verdad, se echa en falta).
Opciones de los componentes de Oxygen Builder
Todos los componentes que utilices tendrán un panel de opciones que verás situado en la parte izquierda de la interfaz. Para mostrar las opciones de un componente tan solo tienes que clicarlo, bien en tu área de trabajo o en el panel de Structure. Para explicar las opciones de los componentes voy a dividirlas en 3 partes:Opciones comunes a todos los componentes
![Opciones comunes de los widgets de la herramienta](https://cdn.raiolanetworks.com/blog/wp-content/uploads/04-opciones-comunes-a-todos-los-componentes.jpg)
- Nombre del componente: puedes personalizar este nombre desde el panel de Structure. Es útil cuando tienes, por ejemplo, 30 secciones en tu página y quieres diferenciarlas.
- Ajustes condicionales: para mostrar u ocultar el componente en función de las condiciones que elijas. También puedes elegir cómo se encadenan las condiciones (AND u OR). Para establecer una condición tienes que pulsar el botón "Set conditions" e ir añadiendo las que te interesen. Puedes elegir todo tipo de condicionales: según la fecha, el rol del usuario, variables de sesión, cookies, etc.
- Opciones de enlace: para englobar todo el componente con un enlace. Parece algo muy simple, pero es una opción que Elementor, por ejemplo, no tiene. Gracias a esta opción puedes hacer que un texto, un div o incluso una sección entera sean un enlace.
- Duplicar componente: bastante intuitivo, sirve para hacer una copia exacta de un componente.
- Eliminar componente: para borrarlo de tu área de trabajo.
- Migas de pan: sirven para ver en qué lugar está colocado un componente dentro de la estructura de tu página.
- Opciones de responsive: con este botón puedes alternar entre los distintos anchos de pantalla para configurar el responsive de tu página. Todo las opciones de un componente que modifiques para el tamaño de pantalla que tengas seleccionado quedarán guardadas para ese tamaño.
- Opciones de clases CSS: uno de los puntos fuertes de Oxygen Builder. Cuando despliegues las opciones verás que el componente tiene ya un ID (Oxygen siempre asigna un ID interno a todos los componentes).
![Opción para dar estilos a pseudo clases de CSS](https://cdn.raiolanetworks.com/blog/wp-content/uploads/05-estilos-para-pseudo-clases.jpg)
Opciones de la pestaña Primary
Son las opciones específicas de cada componente. Por ejemplo, una imagen tendrá aquí las propiedades de fuente, ancho y alto o texto alternativo, mientras que un botón tendrá opciones de URL, color de fondo, etc.![Ejemplo de las opciones de la pestaña Primary del componente "Section"](https://cdn.raiolanetworks.com/blog/wp-content/uploads/06-ejemplo-de-opciones-primary-de-componente-seccion.jpg)
Opciones de la pestaña Advanced
Estas opciones son comunes a todos los componentes y están directamente relacionadas con propiedades de CSS. Aquí es donde vas a agradecer tener conocimientos previos de CSS, aunque no te preocupes si no los tienes, ya que es bastante intuitivo.![Opciones de la pestaña Advanced de un componente](https://cdn.raiolanetworks.com/blog/wp-content/uploads/07-opciones-pestana-advanced.jpg)
- Background: puedes establecer un color (plano o degradado) o imagen de fondo para el componente, así como ajustar sus propiedades (tamaño de la imagen, posición, ajustes de repetición, etc.). Una de las cosas que me gusta de Oxygen es que puedes crear un degradado de fondo con un número ilimitado de colores (en Elementor, por defecto, solo puedes crearlos de dos colores).
- Size & Spacing: para establecer ancho y alto (también mínimo y máximo) del componente, así como su margin y su padding.
- Layout: desde aquí puedes elegir cómo se distribuyen los elementos dentro del componente. Obviamente esta opción es útil si el componente es, por ejemplo, una sección o un div (ya que dentro van a llevar mas elementos). Es una opción muy potente, ya que te permite cambiar la propiedad display (flex, grid, block, none...), la propiedad position, la visibilidad del elemento, el z-index... Vamos, cualquier cosa que harías con CSS.
- Typography: todo lo relacionado con la tipografía: familia, grosor, tamaño, altura de línea, espacio entre caracteres, colores, etc.
- Borders: con esta opción puedes añadir bordes al componente en cuestión y ajustar su grosor, color o establecer que esos bordes sean redondeados.
- Effects: otra opción muy potente que te permite añadir efectos de CSS (opacidad, sombras, transformaciones o filtros, entre otros). Gracias a esta opción y a la posibilidad de editar los estilos :hover de un elemento, puedes hacer animaciones rápidamente y sin tener que escribir código a mano.
- Custom CSS: si por lo que sea todas las opciones anteriores se te quedan cortas y necesitas añadir CSS personalizado al componente que estas editando, puedes hacerlo aquí.
- Javascript: para poder añadir scripts personalizados de Javascript si lo necesitas.
- Attributes: desde esta opción puedes crear atributos de HTML personalizados para el componente.
- Lock Selector Styles: este botón es simplemente para bloquear todas las opciones anteriores (tanto las de la pestaña Primary como la de Advanced) para que no se puedan modificar.
Componentes de Oxygen
Oxygen te proporciona bastantes componentes para maquetar tus diseños. Son lo mismo que los widgets en Elementor, para que te hagas una idea. Voy a hacer un repaso de los más importantes.Algunos componentes solo están disponibles con el plan 'Ultimate' (Composite Elements).
Basics
Son los componentes más sencillos, pero los usarás mucho. Son los que te permiten crear el esqueleto de tu web y añadir elementos básicos como imágenes, botones o textos.![Algunos de los componentes de la categoría Basics](https://cdn.raiolanetworks.com/blog/wp-content/uploads/08-componentes-basics-de-oxygen.jpg)
- Contenedores (Section, Div y Columns): Te permiten estructurar el contenido y crear todo tipo de layouts. Con "section" crearás una sección que se ajuste al ancho de la página y con un "div" simplemente un contenedor genérico. Con "Columns" podrás crear rápidamente un sistema de columnas. Una de las ventajas de Oxygen es que te permite trabajar con los sistemas flex y grid de CSS desde las opciones de estos componentes.
- Text (Heading, Text y Rich Text): Elementos para incluir encabezados y párrafos de texto.
- Links (Text link, Link Wrapper, Button, Dropdown Button e Icon Button): Herramientas para crear enlaces. Desde un enlace simple hasta un botón con opciones desplegables.
- Visual (Image, Video, Icon, Horizontal divider, Icon list y Hover Scrolling Image): Para incluir elementos visuales como imágenes o vídeos. También hay componentes para añadir divisores entre secciones, iconos, listas con iconos, etc.
- Other (Code Block): Es un poco el elemento "comodín", ya que es un bloque que te permite añadir código HTML, CSS, PHP y Javascript.
Helpers
Realmente con los componentes anteriores y un poco de código podrías crear casi cualquier elemento que necesites en tu página. Pero para facilitarte un poco la vida, Oxygen tiene prediseñados una serie de elementos que se suelen usar mucho en maquetación web. Te menciono los más importantes.
- Header Builder: con él puedes construir rápidamente una cabecera responsive con varias columnas y con la posibilidad de que sea sticky.
- Easy posts: te permite sacar listados de entradas, páginas o custom post type. Puedes ajustar la consulta (query) según varios filtros y personalizar la estructura de cómo se verá en pantalla.
- Repeater: con este elemento puedes construir un bucle de datos. Imagina que tienes un CPT de recetas y uno de sus campos es "ingredientes". La cantidad de ingredientes es variable según la receta, así que te preguntarás: "¿Cómo hago para mostrarlos?". La respuesta es con un Repeater. En Oxygen puedes configurar la consulta y el layout de tu repeater y es completamente compatible con el plugin Advanced Custom Fields.
- Slider: puedes construir un pase de diapositivas con este componente.
- Accordion: también puedes integrar un "acordeón" de pestañas desplegables con Oxygen.
- Modal: y, por supuesto, también es posible crear ventanas emergenes o popups y ajustar sus condiciones de visualización.
WordPress
Oxygen también tiene componentes de elementos propios de WordPress como, por ejemplo:![Componentes de WordPress](https://cdn.raiolanetworks.com/blog/wp-content/uploads/10-componentes-de-wordpress-de-oxygen.jpg)
- Menú: tanto el widget "Menu" como el "Pro Menu" y el "Mega Menu" sirven para mostrar un menú que tengas creado dentro de WordPress.
- Comments list y Comment form: para mostrar una lista de comentarios de una entrada y el formulario para añadir nuevos comentarios.
- Login form: permite mostrar el formulario de acceso como usuario.
- Search form: para mostrar un formulario de búsqueda .
- Datos dinámicos: dentro de la pestaña Dynamic Data encontrarás componentes para mostrar dinámicamente el título, contenido, imagen destacada, autor, etc. de entradas o cualquier custom post type. Estos componentes se suelen utilizar cuando maquetas la plantilla de entradas (single.php), por ejemplo.
Si tienes WooCommerce instalado verás una nueva categoría con componentes específicos para los productos, checkout, carrito, etc.
Library
Si tienes poco tiempo o estás falto de ideas, en esta categoría encontrarás elementos e incluso secciones o páginas enteras ya prediseñadas. Una vez las elijas y añadas a tu lienzo las podrás modificar completamente según tus necesidades.![Componentes y secciones prediseñadas (Library)](https://cdn.raiolanetworks.com/blog/wp-content/uploads/11-componentes-library.jpg)
Sistema de plantillas de Oxygen Builder
Para poder crear un sitio web completo, necesitas poder crear ciertos elementos como una cabecera, un footer, un listado de artículos, el "single" de esos artículos, resultados de búsqueda, etc. Estos elementos forman la estructura básica de una página web y son bloques que se suelen repetir muchas veces a lo largo de la misma. No tendría sentido estar maquetándolos en todas las páginas por lo que, para facilitar esta labor, existe el sistema de plantillas que muchos constructores como Oxygen o Elementor tienen. Un detalle a tener en cuenta es que desde el sistema de plantillas de Oxygen puedes crear tanto una plantilla como un elemento reusable ("reusable part").Cómo crear una plantilla en Oxygen
Para crear una plantilla tienes que ir desde el panel de administración de WordPress, a Oxygen > Templates y darle a "Add New Template".![Cómo crear una plantilla](https://cdn.raiolanetworks.com/blog/wp-content/uploads/12-como-crear-plantilla-en-oxygen.jpg)
- Inherit design from other template: Imagínate que tienes una plantilla para cabecera y footer que se esta aplicando para toda la web. Ahora quieres crear una para las entradas, pero quieres que en ella también se incluyan la cabecera y footer que has preparado. Pues para eso sirve esta opción. En este supuesto caso, tendrías que seleccionar que la plantilla de las entradas herede la plantilla de cabecera y footer. Además, en la de cabecera y footer deberías incluir un componente "Inner content" entre las secciones de cabecera y de footer. En ese "Inner content" será donde se cargue el contenido de la página, bien sea un post, una página normal, un listado de artículos, etc.
- Where does this template apply?:
Aquí tienes que elegir dónde se va a aplicar la plantilla.
- Singular: en las entradas, páginas, productos (si tienes WooCommerce), custom post type... de manera individual.
- Archive: en los listados de entradas, custom post type, taxonomías, autores, listados de producto de WooCommerce, etc.
- Other: en la página de inicio, resultados de búsqueda, error 404, etc.
- Template priority: Cuando más de una plantilla afecte al mismo contenido, puedes establecer una prioridad mediante un número (el número más alto tiene más prioridad).
![Opciones disponibles a la hora de crear una plantilla](https://cdn.raiolanetworks.com/blog/wp-content/uploads/13-opciones-al-crear-una-plantilla.jpg)
Partes reusables en Oxygen
Cuando maquetas una página web, a veces hay bloques o secciones que se repiten varias veces a lo largo de la misma. Imagínate que tienes que incluir un bloque de contacto (con un texto y un formulario, por ejemplo) en varias páginas de tu web. Podrías maquetarlo desde cero en cada una de esas páginas, pero perderías tiempo y, si algún día tienes que hacer modificaciones, tendrías que hacerlo por separado en cada página. Por suerte, en Oxygen existen las "Reusable parts" o partes reusables y puedes crearlas de 2 maneras:- Crea una parte reusable desde cero en Oxygen > Templates > Add New Reusable Part.
- Convierte cualquier componente de Oxygen que ya tengas creado en parte reusable. Para hacerlo, localízalo en el panel de Structure, haz click en el lápiz y luego en "Make Re-Usable". Ponle un nombre y dale a aceptar.
![Cómo crear una parte reusable desde el panel de Structure](https://cdn.raiolanetworks.com/blog/wp-content/uploads/14-crear-parte-reusable-desde-panel-structure.jpg)
![Uso de los componentes reusables: modo single y modo editable](https://cdn.raiolanetworks.com/blog/wp-content/uploads/15-uso-de-componentes-reusables.jpg)
- Single: insertarás la parte reusable tal y como es y, si la editas, se editarán todas las instancias de ella en toda la web.
- Editable: insertarás una copia de la parte reusable, la cual podrás editar a tu gusto individualmente (sin que afecte al resto de instancias de ella misma). Cuando utilizas este modo la parte reusable se convierte en componentes normales de Oxygen.
![Edición de una parte reusable desde la interfaz de la herramienta](https://cdn.raiolanetworks.com/blog/wp-content/uploads/16-edicion-de-parte-reusable-desde-interfaz.jpg)
Datos dinámicos en Oxygen
A la hora de construir plantillas en Oxygen necesitarás utilizar datos dinámicos para extraer cierta información de la base de datos de WordPress. Por ejemplo, cuando creas la plantilla para las entradas de blog deberías mostrar el título de la entrada, el contenido, la imagen destacada, etc. Para ello tienes que utilizar los componentes que utilizarías normalmente para mostrar títulos, textos o imágenes. Ahora, en lugar de establecer un texto o imagen manualmente, harás que Oxygen recoja los datos de la entrada que tu elijas. Veamos cómo se hace. Para los componentes de texto (Heading y Text) tienes que hacer doble click en el texto del componente. Ahora verás en la barra superior un panel de opciones con un botón de "Insert data". Haz click en ese botón y elige una de las opciones.![Cómo insertar datos dinámicos en componentes de texto](https://cdn.raiolanetworks.com/blog/wp-content/uploads/17-insertar-datos-dinamicos-en-componentes-de-texto-1.jpg)
![Opciones de los datos dinámicos de los componentes de texto](https://cdn.raiolanetworks.com/blog/wp-content/uploads/18-opciones-datos-dinamicos-componentes-texto.jpg)
![Botón de datos de dinámicos para algunas propiedades de los componentes](https://cdn.raiolanetworks.com/blog/wp-content/uploads/19-boton-datos-dinamicos-en-propiedades-del-componente.jpg)
![Componentes específicos para mostrar algunos datos dinámicos](https://cdn.raiolanetworks.com/blog/wp-content/uploads/20-componentes-de-datos-dinamicos-de-wordpress.jpg)
Cómo dar estilos a un plugin con Oxygen
Uno de los problemas de algunos "page builder" como Elementor es que cuando integras un componente de un plugin en tu maquetación a veces no puedes darle estilos. Bueno, realmente sí puedes, pero tienes que hacerlo "a mano" escribiendo código CSS. Esto no es un problema en Oxygen, ya que permite dar estilo desde la interfaz visual a cualquier elemento, incluidos shortcodes. Te pongo un ejemplo con el plugin Contact Form 7. Lo primero que tienes que hacer es activar la opción "Enable Selector Detector" dentro de Oxygen > Settings > General![Cómo activar la opción "Enable Selector Detector" para poder dar estilos a elementos de plugins.](https://cdn.raiolanetworks.com/blog/wp-content/uploads/21-opcion-enable-selector-detector.jpg)
![Botón "Style Output" para poder dar estilos a un plugin desde la interfaz visual](https://cdn.raiolanetworks.com/blog/wp-content/uploads/22-opcion-style-output-para-dar-estilo-a-plugins.jpg)
![Opción "Style Output" para aplicar estilos a cualquier elemento desde la interfaz de la herramienta](https://cdn.raiolanetworks.com/blog/wp-content/uploads/23-como-aplicar-estilos-a-plugin-desde-la-interfaz.jpg)
sabrina
27/05/2022 a las 12:21Responder a sabrina
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *