Editores visuales en WordPress

Editores visuales en WordPress

Para realizar vuestro diseño y añadir contenidos, los editores visuales de WordPress son imprescindibles. En esta clase os presentamos los principales y hacemos una comparativa para que veáis los pros y los contras de cada uno.

¡Importante! Algunos de los editores visuales que presentamos son modelo freemium o de pago. Esta clase no ha sido patrocinada por ninguno de ellos.

Qué son los editores visuales de WordPress y para qué sirven

Un editor visual es una funcionalidad que viene por defecto en WordPress (Gutenberg, por ejemplo) o que se puede añadir instalando un plugin (Editor clásico, Elementor, WPBakery page builder, Fusion page builder) para facilitar el diseño de las páginas de nuestra web.

Desde que WordPress sacó Gutenberg, para nosotros los editores visuales han dejado de tener sentido. Tras haberlo probado en varios proyectos nos hemos dado cuenta de que mejora la velocidad de la web, es fácil de manejar y es lo suficientemente completo como para añadir cualquier elemento que nos interese: Textos, imágenes, botones, vídeos, etc.

¿Por qué utilizar entonces un editor visual distinto a Gutenberg? Las razones pueden ser:

  • Nos sentimos más cómodos con el editor clásico o bien tenemos mucho contenido en el sistema clásico de maquetación y no se visualiza correctamente con Gutenberg.
  • Gutenberg no cubre alguna de las funcionalidades que necesitamos
  • Queremos añadir bloques o elementos de los que dispone nuestra plantilla, con su editor visual

Instalar un editor visual

¡Importante! Instalar un editor visual (menos Gutenberg, que viene por defecto) supone instalar un plugin extra en WordPress. Esto puede afectar de manera negativa a la velocidad de nuestra web por lo que deberemos proceder con cautela y medir bien los tiempos de carga de las páginas que maquetamos con dicho editor visual.

Si queremos utilizar Gutenberg no deberemos instalar nada en WordPress pero si queremos utilizar cualquiera de los otros editores visuales explicados en esta clase, normalmente lo haremos utilizando un plugin o desde la misma plantilla.

Por ejemplo, al instalar Avada nos pide instalar también el Avada builder:

Instalar Avada en WordPress

Para instalar el editor clásico o Elementor podremos buscar su nombre desde el instalador de plugins de WordPress.

Instalar editor clásico en WordPress

WPBakery page builder y Elementor pueden ser instalados en una plantilla premium o bien pueden comprarse aparte. En el caso en que los compremos, podremos descargarlos e instalarlos desde el instalador manual de plugins de WordPress.

Descargar e instalar plugins en WordPress

Gutenberg

Tal y como hemos explicado, Gutenberg es el editor por defecto de WordPress. A nosotros es el que más nos gusta y consideramos que cubre casi todas las necesidades que podáis tener. Es verdad que a muchos alumnos este nuevo sistema les cuesta un poco pero una vez se aprende, es más rápido que el editor clásico. Como siempre en marketing digital todo va cambiando a la velocidad de la luz, y deberemos acostumbrarnos a aprender herramientas nuevas habitualmente.

WordPress dispone de una pequeña guía donde explica su funcionamiento. Realmente es muy intuitivo pero a nosotros nos gustaría destacar lo siguiente:

Al darle a “Añadir un bloque” se nos abrirá un completo panel donde podremos seleccionar todos los que vienen por defecto o bien buscar aquellos bloques que nos interesen.

Guía de Gutenberg en WordPress
Guía de Gutenberg en WordPress

Aquí os dejamos la lista de bloques que podéis utilizar:

Lista de bloques de Gutenberg en WordPress
Lista de bloques de Gutenberg en WordPress
Lista de bloques de Gutenberg en WordPress
Lista de bloques de Gutenberg en WordPress

En el apartado de patrones podéis encontrar combinaciones de bloques que os pueden venir bien para maquetar:

Bloques de Gutenberg en WordPress

En la columna de la izquierda podréis seleccionar además las características de cada bloque:

Bloques de Gutenberg en WordPress

Editor clásico

El editor clásico nos permite utilizar la antigua interfaz de WordPress, donde seleccionar párrafo o título, negritas, cursivas, listas, etc.

Editor clásico en una entrada de WordPress

Podéis seleccionar o bien la parte visual o bien la de HTML.

Editor clásico en HTML de WordPress

Elementor

Una vez instalado podemos ir a “Primeros pasos” para entender cómo funciona.

Editor Elementor en WordPress

Si vamos a ajustes podremos cambiar las características generales.

Editor Elementor en WordPress

Para empezar a maquetar, nos meteremos en cualquier entrada o página y le daremos a “Editar con Elementor”.

Editar página con Elementor en WordPress

Se nos abrirá el menú de bloques a la derecha. Como podéis ver hay muchísimos más que en Gutenberg. ¡Ojo aquí! Algunos son gratis y otros solo pueden utilizarse si pagáis la versión pro.

Editar página con Elementor en WordPress
Editar página con Elementor en WordPress
Editar página con Elementor en WordPress
Editar página con Elementor en WordPress
Editar página con Elementor en WordPress
WordPress
Woocommerce

WPBakery page builder

Hemos utilizado este editor para las landing pages de servicios en la web de seosve durante años. No obstante, estamos deseando pasar todo el sistema a Gutenberg. En su día WP Bakery era un plugin que incorporaba algunas plantillas premium que permitía crear diseños de landing pages más elaborados que el editor clásico, esto lo convertía en una buena opción si queríamos crear diseños más elaborados. No obstante, Google le ha dado mucha importancia a la velocidad web por lo que ahora mismo lo vemos como una tecnología un poco desfasada. Además con la llegada de los core web vitals pues ya tenemos el lío montado.

Es posible que os lo encontréis en algunas instalaciones antiguas. Por ejemplo en seosve lo mantenemos puesto que remaquetarlo todo es una tarea tediosa que llevaría muchísimas horas.

El sistema de bloques es similar al que hemos visto anteriormente:

WPBakery page builder

Dependiendo de si lo habéis comprado de manera individual u os venía con la plantilla tendréis unos elementos u otros:

WPBakery page builder

Como véis tenemos un montón pero no utilizamos ni la mitad y todo esto es peso que se añade a nuestra instalación. ¿Cuándo se justifica entonces instalar semejante mostrenco? Pues cuando necesitéis añadir muchos elementos de diseño en la plantilla. Pero como os comentamos, si podéis utilizar Gutenberg, mejor.

Avada builder

Avada es un tema comprado, descargado y utilizado por una amplia comunidad y tiene un buen sistema de soporte. Si compráis este tema y tenéis cualquier problema es casi seguro que podréis solventarlo utilizando los 6 meses de soporte que os dan o el foro de dudas del que disponen.

Cuando instalamos este tema, nos pide instalar al menos 2 plugins extra: Avada Core y Avada Builder.

Avada en WordPress

Si activamos e instalamos Avada Builder se nos activará en la sección de páginas:

Editar página con Avada en WordPress

De nuevo se trata de un sistema de bloques que nos permite ir añadiendo elementos a la composición.

Editar página con Avada en WordPress

Una de sus ventajas es que podemos importar la maquetación del contenido de cualquiera de sus demos:

Editar página con Avada en WordPress

De esta manera simplemente tendremos que ir reemplazando el contenido para adaptar el diseño de la DEMO a nuestra web:

Editar página con Avada en WordPress

El truco es entrar en cada bloque y cambiar textos, imágenes, iconos, etc.

Editar página con Avada en WordPress

Trabajar con demos y un sistema de plantillas ayuda mucho a realizar diseños chulos en poco tiempo, lo que nos ayuda a ahorrarnos unos eurillos cuando montemos la web.

Conclusiones

Seleccionar la plantilla y por tanto el editor visual de nuestro proyecto es una tarea de configuración compleja. Os recomendamos realizar varias instalaciones y pruebas hasta dar con las opciones más adecuadas para vuestro proyecto.

Algunas opciones os ayudarán a ahorraros tiempo con el diseño de vuestra web, pero es posible que disminuyan la velocidad de carga y esto afecte a vuestras analíticas. Otras opciones seguramente serán más limitadas y complejas de diseñar, pero os darán un mejor rendimiento y por tanto mejorarán la velocidad web.

En seosve siempre decimos lo mismo, cada proyecto es un mundo y a lo mejor las soluciones explicadas en esta clase no se terminan de adaptar a lo que necesitáis. Como profesores os recomendamos que realicéis varias instalaciones de WordPress y hagáis pruebas con varias plantillas y plugins hasta que deis con la selección más adecuada.

No Comments

Post A Comment