Gutenberg y/o visual composer

En este post explicaremos cuales son los máximos beneficios que te puede aportar el uso de un sistema de editor visual para tu web, y valorar si es necesario que tengamos uno instalado.

Además analizaremos el nuevo sistema gutenberg de wordpress, el “visual composer” que viene de serie en wordpress 5 para gestionar nuestro contenido a partir de ahora.

Que encontraras

  1. Editores visuales

    Ques són los editores visuales y para que sirven

  2. Como funcionan los editores visuales

    Explicaremos como funcionan técnicamente los visual composer

  3. Instalar un editor visual

    Sabremos cuando es necesario instalar un composer en WordPress

  4. Gutenberg

    ¿Es Gutenberg un visual composer?

  5. Gutenberg cómo editor visual único

    Ya tengo suficiente solo con Gutenberg

  6. Pros y contras de cada opción

    Analizaremos las características de cada opción

  7. Conclusiones

    Sacaremos las conclusiones del post

Editores visuales, ¿Qué son y para qué sirven?

Un editor visual, tal y como su nombre indica, es un editor que nos permite modificar el contenido html de nuestras páginas o entradas, visualmente. Normalmente con elementos drag&drop para hacer aún más visual nuestro cambios y nuevas secciones.

Es ideal para aquella gente que no tienen nada de conocimiento de html, siempre que sea necesario crear en nuestro contenido diferentes estructuras de elementos.

Son muchos los editores visuales disponibles para nuestro wordpress, visual composer, elementor, wp bakery,…  también muchas plantillas, traen predeterminada su propio sistema de edición visual.

¿Cómo funcionan los editores visuales técnicamente?

No debemos olvidar que una web es un documento plano escrito con una serie de caràcteres html, que los navegadores interpretan y aplican los estilos definidos en una hoja de estilos (css), entonces cómo funcionan realmente los composer?

Teniendo en cuenta lo anterior, cuando instalamos un composer en nuestra web, estamos aplicando una capa por encima, donde insertar los estilos y comportamientos definidos por nuestro plugin de editor visual.

Es decir, al editar nuestro contenido con uno de estos editores, ponemos toda una capa de elementos html y estilos externos a wordpress, que vienen definidos dentro de nuestro plugin.

Si disponéis de uno de estos composers en vuestro wordpress, podéis hacer el ejercicio de pasar el contenido de alguna de vuestras páginas a editor de código para poder comprobar realmente todo el código que el editor està introduciendo en nuestro contenido sin nosotros saberlo.

¿Necesito un editor visual para mi web?

No es obligatorio que tengamos un editor visual en nuestra web, seamos conscientes que uno de esto editores no deja de ser sobrecarga de información a nuestro proyecto, cargando un montón de archivos css y php, que acaban afectando al rendimiento de nuestra web, con lo que si no queremos hacer una gestión muy específica nuestro contenido, no es necesario que instalemos ninguno de estos editores.

Por otro lado, si queremos montar cada página de nuestra web con un estilo de estructura muy diferenciado, y no disponemos de conocimientos html y css, es una buena herramienta para poder trabajar visualmente, el contenido de nuestra web.

Pero el nuevo Gutenberg ya es un composer no?

Con wordpress 5, tenemos la opción de poder trabajar con Gutenberg, un editor visual que vienen incorporado en nuestro wordpress.

El editor Gutenberg, es una gran mejora para los usuarios de wordpress, ya que los que no trabajaran con un editor visual, han notado una gran mejoría para poder editar el contenido de sus páginas de una manera más clara.

Pero para aquellos usuarios que trabajen con un composer, veràn que se les queda un poco corto.. ya que las opciones que tiene , no son tantas como las que suelen incluir los editores visuales.

A grandes rasgos, la gran ventaja que se a ganado con Gutenberg, es que se pueden editar los contenidos por bloques y poder añadir columnas a los bloques. Con lo que a nivel de layout, podemos trabajar mucho más cómodamente. Pero a nivel de componentes, no contamos con demasiadas opciones, texto, título, elemento multimedia, …

Es muy recomendable el uso de gutenberg con bootstrap, ya que si contamos con un tema que funcione con bootstrap, podemos aplicar todo el juego de clases de bootstrap a nuestros contenidos introducidos con Gutenberg.

Entonces.. ¿con Gutenberg ya tengo suficiente?

Tal y como hemos comentado, dependiendo del tipo de gestión que hagas de tu contenido, con el nuevo sistema gutenberg puede que tengas más que suficiente, ya que permite declarar secciones, asignar clases y crear columnas dentro de las secciones.  

Pero si necesitamos de muchos componentes o declarar páginas con estructuras o comportamientos muy diferentes, si que es recomendable usar algún tipo de editor visual.

Pros y contras de cada opción

Gutenberg

Pros

  • Viene incluido con nuestro wordpress, esto asegura que se la a dar una continuidad.
  • Es gratis.
  • No es un código “intrusivo” dentro de nuestra plataforma.
  • Muy sencillo de usar.
  • No pone demasiadas capas de código, es bastante limpio.

Contras

  • A nivel de componentes se queda corto.
  • No permite controlar el comportamiento de los elementos responsive.

Editores visuales

Pros

  • Dan mucha agilidad de gestión y permiten tener una idea visual del resultado.
  • Permiten resultados bastante correctos y funcionales a nivel visual.
  • Da muchas opciones a usuarios experimentados

Contras

  • Uso complicado para usuarios no experimentados.
  • Es un sistema intrusivo, impone muchas clases y comportamientos que ralentizan nuestro rendimiento.
  • Su desinstalación y compatibilidad entre plugins es complicada.
  • Demasiadas opciones para usuarios no experimentados.
Conclusiones

En definitiva, el tipo de uso que hagas del contenido de tu web, será el que te indicará si necesitas o no de un editor visual.

Si vas a hacer un contenido bastante plano, sin demasiada estructura diferente, con el nuevo Gutenberg tendrás más que suficiente, pero si por otro lado, necesitas definir una estructura muy diferenciada, si que te vendrá bien el uso de uno de estos editores.

Para usar uno de estos editores visuales es recomendable tener un poco de conocimiento de wordpress o html, ya que si no son muchos conceptos que no entenderemos, un composer en manos de un usuario poco experimentado, es como dar dos pistolas a un mono, puede funcionar y ser divertido… pero normalmente suele acabar mal…

Ahora que tenemos la opción de poder trabajar de serie con gutenberg, es recomendable empezar con esta herramienta, y si vemos que se nos queda corta, podemos tirar de algún editor visual, siempre que nos sea necesario.