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:
Para instalar el editor clásico o Elementor podremos buscar su nombre desde el instalador de plugins de 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.
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.
Aquí os dejamos la lista de bloques que podéis utilizar:
En el apartado de patrones podéis encontrar combinaciones de bloques que os pueden venir bien para maquetar:
En la columna de la izquierda podréis seleccionar además las características de cada bloque:
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.
Podéis seleccionar o bien la parte visual o bien la de HTML.
Elementor
Una vez instalado podemos ir a “Primeros pasos” para entender cómo funciona.
Si vamos a ajustes podremos cambiar las características generales.
Para empezar a maquetar, nos meteremos en cualquier entrada o página y le daremos a “Editar con Elementor”.
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.
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:
Dependiendo de si lo habéis comprado de manera individual u os venía con la plantilla tendréis unos elementos u otros:
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.
Si activamos e instalamos Avada Builder se nos activará en la sección de páginas:
De nuevo se trata de un sistema de bloques que nos permite ir añadiendo elementos a la composición.
Una de sus ventajas es que podemos importar la maquetación del contenido de cualquiera de sus demos:
De esta manera simplemente tendremos que ir reemplazando el contenido para adaptar el diseño de la DEMO a nuestra web:
El truco es entrar en cada bloque y cambiar textos, imágenes, iconos, etc.
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.
