Oxygen Review 2.0: Edificio de sitios visual flexible para WordPress

¿Alguna vez has querido poder construir todo tu tema de WordPress con un editor visual de arrastrar y soltar? Lo que una vez fue un sueño ahora se vuelve más accesible debido a herramientas como Beaver Themer, Elementor Pro 2.0 y, la revisión de hoy – Oxygen 2.0. Oxygen 2.0 es un constructor visual de sitios de Dra-and Drop para su sitio web de WordPress. A través de su poderoso editor y sistema de plantilla, le brinda el poder de construir literalmente el 100% de su sitio de WordPress utilizando el diseño visual. De hecho, hemos analizado previamente Oxygen 1.0 en junio de 2017, pero ahora los desarrolladores regresaron con una actualización masiva en forma de oxígeno 2.0. Continúe leyendo mi revisión de Oxygen 2.0 para ver qué puede hacer esta herramienta renovada.
Revisión de Oxygen 2.0: cómo funciona, verá esto mucho más detallado en las siguientes secciones, pero aquí hay un resumen rápido de la funcionalidad básica del oxígeno 2.0. Puedes…
Cree plantillas para controlar el aspecto de todo el sitio utilizando un editor visual de deslizamiento y colocación
Crear páginas individuales o piezas reutilizables usando el mismo editor
Aplicar fácilmente los selectores CSS a los artículos y trabajar directamente con sus propias hojas de estilo
Use comprobaciones receptivas para establecer diferentes estilos para diferentes dispositivos
Traiga contenido de los complementos – tales
Controlar los aspectos usando columnas simples sin columnas y con espacio deslizante
¿Qué es diferente Oxygen 2.0 a un constructor de páginas? Edición deslizándose y arreglando … Diseño visual … El oxígeno es solo un constructor de páginas, ¿verdad?
Algo como eso. Sin embargo, hay algunas diferencias importantes. El primero: reemplaza completamente su tema. No conozco a ninguna otra página de constructor para hacer esto. Incluso si usa Beaver Themer o Elementor Pro 2.0, su tema de WordPress continúa desempeñando un papel y lo verá en su código de sitio, pero el oxígeno incluso elimina por completo el tema de WordPress de la ecuación. Incluso si tiene que tener técnicamente un tema activo, no verá ningún rastro de ese tema en el código frontal de su sitio: en segundo lugar, el sistema de modelado de oxígeno es mucho más detallado de lo que obtendrá con un constructor de páginas. Verá esto más en la sección práctica.

También hay muchas diferencias más pequeñas, pero estas son las dos que me destacan. De hecho, puede continuar utilizando el generador de páginas de oxígeno favorito: los dos no son herramientas que se excluyan entre sí. Por ejemplo, puede usar un generador de página para diseñar el contenido que ingresa a la plantilla de página que crea con Oxygen. Cómo funcionan las plantillas Oxygen 2.0 para controlar cómo se ve el contenido diferente de su sitio, use plantillas. Si está familiarizado con cómo funcionan los temas de WordPress, debe comprender este concepto con bastante rapidez. Pero si no lo es, puede tomar un poco para alcanzar la velocidad.
Una plantilla dicta cómo se ve el contenido específico. Por ejemplo, si crea una plantilla para una sola publicación de blog (como la publicación que lee ahora), usará Oxygen para especificar:
¿A dónde va el título de publicación en el blog?
¿Qué autor de Meta Information incluye y dónde
¿A dónde va el contenido del blog?
Y también agregarás estilo para todos esos elementos. Luego puede elegir exactamente qué publicaciones aplicar la plantilla. Por ejemplo, puede crear una sola plantilla para todas las publicaciones. O puede crear una plantilla especial para una determinada categoría de publicaciones: bastante simple hasta ahora, ¿verdad? Sin embargo, aquí, el sistema de modelado de oxígeno se vuelve bastante genial, sin embargo: primero la herencia de la plantilla, puede tener plantillas heredadas de otras plantillas. Esto abre mucha flexibilidad. Por ejemplo, puede crear una plantilla que incluya el encabezado y el sótano de su sitio. Y sótano. Esencialmente, esto le permite usar estas plantillas posteriores para diseñar solo el contenido entre el encabezado y el sótano.
Esto no solo lo guarda en la actualidad, sino que también significa que si desea cambiar su encabezado en el futuro, debe editar su encabezado / sótano solo una vez:

Prioridad de la plantilla En el ejemplo anterior, dije que podría tener:
Una plantilla para todas las publicaciones

Una plantilla para una determinada categoría de publicaciones: digamos la categoría de “fotografía”
Pero hay un problema con eso, ¿verdad? Si lo configura de esta manera, las publicaciones de la categoría de fotografía tendrían dos plantillas que se aplican a ellas (porque todas las publicaciones se aplicarían) para evitar este conflicto, Oxygen 2.0 le permite configurar la prioridad de la plantilla. Esencialmente, esto le permite dictar qué plantilla debería “ganar” en tal situación:
Nuevamente, esta es otra forma en que el oxígeno hace las cosas bastante flexibles. Usando el editor de oxígeno para construir una plantilla para construir sus plantillas, utilizará el editor visual de Oxygen, que ha ganado una revisión completa en Oxygen 2.0. Cuando cree una plantilla desde cero, verá un editor vacío para comenzar. Pero si heredas de otra plantilla, verás la plantilla heredada alrededor del área edificable. A la izquierda, puede usar la barra lateral para agregar elementos al diseño: estos elementos se dividen en cinco secciones diferentes:
Nociones básicas: elementos simples como secciones, texto, imágenes, etc.

Ayudantes: bloques de construcción más avanzados, así como herramientas que lo ayudan a construir su encabezado, publicar cuadrículas y más.

WordPress: estos le permiten insertar elementos específicos de WordPress. Por ejemplo, puede ingresar a menús o barras laterales. O bien, puede insertar cualquier información de la base de datos de WordPress, como el título de una publicación, información sobre el autor, etc.
La biblioteca Oxygen 2.0 incluye conjuntos de diseño preconstruidos de los cuales puede importar modelos para ahorrar tiempo.
Reutilizable: también puede guardar sus propios modelos como piezas reutilizables y luego acceder a ellos aquí.
Si es necesario, también puede traer contenido de otros complementos que usa.
Construir aspectos con oxígeno Una de las áreas en las que se destaca Oxygen 2.0 es su motor de diseño basado en Flexbox. Tiene algunas funciones que hacen que los esquemas sean más ligeros que su constructor de páginas promedio. En primer lugar, cada sección tiene estas configuraciones para la aparición del elemento infantil y la alineación horizontal de los elementos. Estos le permiten hacer dos cosas interesantes: puede crear planes horizontales sin tener que configurar columnas (aunque hay un elemento de columna si lo desea).
Puede establecer la alineación de todos los elementos en una sección sin tener que editar cada elemento individual
Para demostrar esto, agregué tres elementos a mi diseño. Mira lo fácil que es manejarlos:

¡Suficientemente simple! Pero todavía existe el espacio extraño en el que cada elemento se mezcla con el otro. Y esto me lleva a otra parte del sistema de diseño del diseño 2.0 que me gusta … en lugar de tener que ajustar manualmente el relleno y los bordes *, puede hacer clic y tirar para ajustar el espacio. Reloj:
Esta es otra forma muy conveniente de acelerar su flujo de trabajo. Y no es solo para espaciar. También puede, por ejemplo, ajustar el tamaño de un botón:
* Puede, por supuesto, ir directamente a los bordes / modos, si lo desea. Reorganizar elementos en sus aspectos si necesita reorganizar los elementos en sus modelos, Oxygen 2.0 ahora tiene edición de arrastre y gota. Entonces, una forma de reorganizarlos es simplemente hacer clic y tirar.
Otra forma es abrir la pestaña Estructura, que muestra un árbol DOM completo para su diseño, incluida la desesco:

Me parece muy conveniente tener acceso al árbol DOM.El Builder Thrive Architect Page incluye un concepto similar y me encuentro usándolo todo el tiempo para cambiar entre elementos y sus contenedores.Elementos de estilo y secciones Como ha visto en las capturas de pantalla anteriores, estilice sus artículos con la barra lateral.En la pestaña principal, puede configurar todos los detalles básicos para un elemento: y luego la pestaña Avanzada le brinda muchas más configuraciones:

Y una cosa que a los desarrolladores le encantará es cómo el accesible Oxygen 2.0 hace CSS.Puede usar los comandos en la parte superior para seleccionar diferentes consultas de medios y aplicar selectores CSS.Y luego puede trabajar directamente con CSS usando el editor completo:

Todo su código se aplica en tiempo real:
También puede editar y crear sus propias hojas de estilo:

Y aquí está: ¡un torbellino de la nueva experiencia Oxygen 2.0!