Revisión de oxígeno: un creador de sitios web visual WYSIWYG para WordPress

Revisión de oxígeno: un creador de sitios web visual WYSIWYG para WordPress

Con el lento desglose de Headway Themes, hubo un cierto vacío en el espacio de creación de sitios web visuales de WordPress. Por creador visual de sitios web, me refiero a una herramienta para ayudarlo a construir Todo su sitio de WordPress – Encabezado, pie de página, contenido … todo.

Afortunadamente, necesitamos un soplo de aire fresco de Oxygen, un nuevo creador de sitios web WYSIWYG WordPress de Soflyy, el mismo equipo detrás del popular complemento WP All Import.

Oxygen le ofrece una interfaz en el panel de control que le permite crear sitios web a partir de una combinación de componentes predefinidos y elementos HTML básicos. Además de los diseños estáticos, también puede crear rápidamente plantillas para archivos, tipos de publicaciones individuales, contenido de complementos y más.

Todo eso técnicamente puede hecho sin conocer ningún código, aunque saber CSS / HTML definitivamente le dará más flexibilidad. Y lo bueno es que tiene un editor de código en la interfaz de usuario de Oxygen para facilitar la edición de código.

En mi Prueba de oxígeno, te contaré un poco más sobre para quién es esta herramienta y qué puede hacer. Luego iré a la práctica y te daré un recorrido por la interfaz del editor visual de oxígeno.

Revisión de oxígeno: ¿Para quién es esta herramienta?

Oxygen se describe a sí mismo como «convirtiéndose rápidamente en la herramienta elegida por los diseñadores web de WordPress». Esta declaración le da una idea rápida de para quién construyó Soflyy Oxygen:

Personas que realmente crean sitios completos de WordPress.

Si es un diseñador de WordPress que trabaja con clientes, Oxygen quiere ayudarlo a acelerar su proceso de desarrollo. Y si es un usuario habitual de WordPress, Oxygen puede ayudarle a crear su propio sitio web.

Dicho esto, Oxygen no es realmente adecuado para principiantes absolutos. No es un creador de páginas de arrastrar y soltar centrado en principiantes como Visual Composer (ni siquiera intenta ser).

Un principiante podría cree un sitio web usted mismo. Pero a menos que solo esté utilizando componentes prediseñados (aprenderá más sobre ellos en un momento), debe tener al menos algunos conocimientos básicos de WordPress, HTML y CSS para poder cambiar las cosas.

¿Cómo funciona el oxígeno?

Oxygen es técnicamente un complemento de WordPress … pero en realidad funciona como un tema aquí. Dicho esto, el complemento Oxygen prácticamente sobrescribe su diseño y lo hace sin sentido.

El 99% del complemento es el editor visual. El otro 1% es una interfaz de backend que le permite configurar fácilmente plantillas para diferentes tipos de publicaciones.

Cubriré el editor visual con más detalle a continuación. Pero solo para darle una idea rápida de cómo funciona, la interfaz de usuario básica se ve así:

Descripción general del control de oxígeno

A la izquierda, puede elegir los elementos HTML básicos, las piezas de contenido específicas de WordPress o los componentes prefabricados. A la derecha obtendrá un Árbol DOM así como un acceso rápido a las hojas de estilo.

En el medio, puede apuntar y hacer clic en ciertos elementos para editar ciertos elementos (aunque la interfaz visual NO arrastrar y soltar). También hay una interfaz para agregar estilo rápidamente y saltar al código.

Esta interfaz es la que utilizará para construir visualmente todo su sitio de WordPress. Vayamos un poco más profundo …

Utilice el editor visual de oxígeno para construir su sitio

Cuando abre por primera vez el editor visual de oxígeno, está mirando un lienzo en blanco. Para cambiar eso tienes que hacer clic en el grande. AGREGAR Botón arriba a la izquierda.

A continuación, puede elegir entre varios elementos:

  • Lo esencial Esta pestaña contiene elementos HTML básicos que puede utilizar para crear su contenido. Por ejemplo, , Bloques de texto, enlaces, imágenes, símbolos, columnas … cosas tan básicas.
  • WordPress – Esta pestaña contiene una serie de funciones específicas de WordPress. Por ejemplo, si desea agregar un widget o un código corto de WordPress, puede hacerlo desde aquí.
  • Reutilizable – Esta pestaña comienza en blanco, pero puede guardar sus propios elementos en ella para poder reutilizar rápidamente elementos en varias plantillas. Un uso común sería guardar su encabezado y pie de página como elementos reutilizables para que no tenga que crearlos desde cero cada vez.
  • Componentes – Estos son artículos completos prefabricados que vienen con oxígeno. Por ejemplo, puede extraer rápidamente encabezados prefabricados, imágenes de héroes, listas de características de productos y mucho más. También hay componentes para elementos específicos de WordPress, como archivos, tiendas WooCommerce y más. Estos pueden ahorrarle mucho tiempo al crear sus diseños.
  • Conjuntos de diseño – estos son diseños temáticos. Por ejemplo, puede importar rápidamente páginas enteras. O simplemente puede explorar un montón de componentes temáticos.

Por ejemplo, puede agregar rápidamente componentes para encabezados prefabricados y secciones de héroe para crear un marco básico:

El diseño anterior me llevó unos 5 segundos …

Crea tus diseños con oxígeno

Ahora puede que te preguntes cómo usar Oxygen para construir tu sitio web. tu propio. Así que veamos cómo diseñar tus diseños.

Tienes pocas opciones. En primer lugar, Oxygen le ofrece una interfaz de editor en la que puede cambiar rápidamente cosas como:

  • antecedentes
  • Posicionamiento y tamaño (incluidos márgenes y relleno personalizados)
  • tipografía
  • Limites

Y luego siempre puede saltar directamente al código para agregar CSS personalizado para el elemento que seleccionó. Oxygen incluso pone el selector en la cola por ti:

La selección de ciertos elementos para estilizar es gracias a la Árbol DOM. Cuando mueve el puntero del mouse sobre un elemento en el árbol DOM, Oxygen resalta el elemento en el editor visual. Entonces todo lo que tiene que hacer es hacer clic para seleccionar este elemento:

También puede reorganizar la disposición básica y el posicionamiento de los elementos arrastrándolos en el árbol DOM.

Y también puede seleccionar hojas de estilo específicas o incluso crear una nueva hoja de estilo, todo sin salir de la interfaz de Oxygen Visual Editor.

Creación de archivos y plantillas individuales con Oxygen

Todo lo que les he mostrado hasta ahora se ha centrado bastante en el contenido estático. Pero Oxygen también puede ayudarte con el diseño:

  • Plantillas para solteros para sus diversos tipos de publicaciones (incluidos los productos WooCommerce)
  • Archivar páginas para todos sus tipos de publicaciones

en el Agregar una nueva plantilla La interfaz de usuario le permite elegir entre Archivos y Solteros (así como algunas otras opciones):

Cuando eliges una opción, básicamente ves un reemplazo visual para la jerarquía de plantillas de WordPress. Eso significa que puede seleccionar tipos de publicaciones, categorías, etiquetas, taxonomías o autores específicos a los que se debe aplicar el archivo.

Por ejemplo, puede crear una plantilla para publicaciones regulares y otra plantilla específicamente para productos WooCommerce:

También puede agregar un orden a sus plantillas para cubrir situaciones en las que se aplican varias plantillas al mismo contenido.

Luego puede editar su plantilla en la misma interfaz del Editor Visual. Por ejemplo, para crear una página de archivo de blog, todo lo que necesita hacer es usar el archivo Componente:

También puede crear su página de archivo pieza por pieza, utilizando componentes individuales para título, paginación, contenido y más.

Si necesita modificarlo, puede ir directamente al Editor de código sin salir de la interfaz:

Puedes ver el archivo Básicamente, el componente simplemente agrega «The Loop» a su página.

Para diseñar su archivo, puede agregar CSS personalizado o usar el mismo editor de estilo que le mostré anteriormente. Por ejemplo, para cambiar el color del título de cada publicación, todo lo que tienes que hacer es hacer clic y editar:

Vale la pena señalar que Oxygen también incluye componentes preconstruidos similares para WooCommerce. También puede crear rápidamente páginas y listas de productos de WooCommerce utilizando los mismos principios.

¿Cómo es la documentación de Oxygen?

Si bien la documentación es importante para cualquier complemento, creo que es especialmente importante para un complemento como Oxygen. Oxygen incluye una serie de series de videos para familiarizarlo con el complemento y sus diversas funciones.

Casi toda la documentación viene en forma de estos videos. En general, diría que la documentación es bastante buena. Sin embargo, si prefiere el texto sobre el video, tiene un poco de mala suerte.

¿Cuánto cuesta el oxígeno?

Actualmente, Oxygen tiene precios de lanzamiento a los que puede llegar actualizaciones ilimitadas y soporte ilimitado Por páginas ilimitadas por solo $ 99. Este es un maldito buen negocio.

Pero como dije, eso es todo Precio de lanzamiento. Así que no espere que este precio dure para siempre.

Reflexiones finales sobre el oxígeno

No soy desarrollador, pero Oxygen me parece intuitivo. Me gusta que combina el diseño visual WYSIWYG con un editor de código incorporado para que pueda ingresar rápidamente al código y agregar CSS, JavaScript o PHP si es necesario.

En un mundo perfecto, me encantaría ver formas más fáciles de diseñar páginas de archivo y sencillos. En este momento, debe agregar bastante CSS personalizado si, por ejemplo, desea crear una cuadrícula de publicaciones en lugar de una lista de publicaciones para su página de archivo.

Si bien esto es bastante trivial para un diseñador profesional, creo que Oxygen podría atrapar a usuarios avanzados como yo si esta parte fuera un poco más fácil. Aún así … reconozco que Oxygen se comercializa principalmente para los diseñadores de WordPress, por lo que no considero que esto sea una gran crítica.

En general, disfruté jugando con Oxygen.

Si ha estado buscando un creador de sitios web visual para WordPress, definitivamente échele un vistazo. Puede probar una demostración gratuita del editor visual, para que no tenga que pagar un centavo hasta que esté satisfecho con el funcionamiento del complemento.

Ir al oxigeno

También puede usar Oxygen con su creador de páginas favorito. Así como cualquier otro complemento que normalmente usaría, como. B. Complementos de formulario de contacto, complementos de galería de fotos y más.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad