Elementor vs Gutenberg: el enfrentamiento de 2021: ¿Qué creador de páginas es mejor?

¿Somos siquiera capaces de recordar los tiempos en que WordPress funcionaba sin creadores de páginas?

El tiempo vuela, la tecnología avanza y WordPress con sus capacidades muy limitadas ahora es solo un vago recuerdo , gracias a las funcionalidades de los temas de WordPress, pero especialmente a los complementos de WordPress, como los creadores de páginas.

En este artículo, cubriremos dos de los creadores de páginas más populares entre los usuarios de OceanWP: Elementor y Gutenberg . La información que proporcionaremos aquí no se basa únicamente en nuestra opinión y experiencia personal, sino también en los comentarios de los usuarios de OceanWP que recibimos a diario.

¡Que comience el enfrentamiento!

¿Qué es Elementor?

Con una calificación promedio de 4.7 de 5 y más de 5 millones de instalaciones activas , no hay duda al respecto: Elementor es el creador de páginas más popular entre los usuarios de WordPress .

Elementor se introdujo por primera vez en 2016 y tomó la delantera muy rápido. La razón de su popularidad casi instantánea fue la diferencia entre el generador visual de arrastrar y soltar de Elementor y el editor de texto habitual de WordPress (la era anterior a Gutenberg).

Los usuarios de WordPress finalmente obtuvieron algo que no se parecía a Microsoft Word: un editor flexible que permitió que su creatividad brillara , todo gracias a varios widgets que redujeron la necesidad de todo tipo de codificación personalizada o la creación de plantillas HTML / PHP / CSS personalizadas.

Y, si está buscando nuevas plantillas de sitio web de Elementor WordPress? Echa un vistazo a nuestra última colección de HubSpot.

En esta comparación entre Elementor y Gutenberg, abordaremos solo las funciones de la versión gratuita de Elementor.

¿Qué es Gutenberg?

Gutenberg, también conocido como el editor de bloques , es el editor de páginas / publicaciones predeterminado de WordPress. Se introdujo en 2018 por primera vez, con la versión WordPress Bebo 5.0.

El equipo de WordPress entendió las necesidades de la comunidad de un editor predeterminado más avanzado e intuitivo , así como las tendencias en la creación de sitios web. Así es como surgió el editor Gutenberg y reemplazó a su predecesor: el editor clásico.

Aunque Gutenberg aún no se ha desarrollado al máximo y se espera que alcance su punto máximo en los próximos años , el equipo de WordPress entregó lo que prometió: un editor visual simple pero poderoso que hizo el cambio de un editor de contenido a un creador de páginas.

Y, si está buscando algunas plantillas de sitios web de WordPress de Gutenberg, consulte nuestra última colección de plantillas de WooCommerce que usan Gutenberg.

Elementor vs Gutenberg: Comparación

Elementor vs Gutenberg: Facilidad de uso

Cualquier usuario de WordPress que haya tenido el placer de usar ambas herramientas le dirá algo en lo que también podemos estar de acuerdo: Elementor gana la comparación de facilidad de uso .

Gracias a su enorme flexibilidad y movilidad, Elementor realmente se parece a las herramientas avanzadas de edición de imágenes. Simplemente seleccione el widget que necesita y colóquelo en cualquier parte del contenido, eso es todo.

¿Necesitas crear secciones? ¿O secciones con diferente número de columnas? ¿Elegir un diseño o imágenes diferentes para diferentes dispositivos? Tampoco es un problema. Elementor realmente le permite configurar todo el contenido hasta la perfección. Por no mencionar varias animaciones que gustan a los diseñadores de sitios web (aunque las herramientas de medición de velocidad no lo son).

Por otro lado, Gutenberg es un creador de páginas limpio y simple . A diferencia de Elementor, Gutenberg no ofrece la función de arrastrar y soltar que tanto gusta (al menos no todavía). Aunque puede agregar y mover bloques fácilmente, las cosas no son tan simples como con Elementor. Además, diseñar un bloque puede ser algo desafiante, especialmente para aquellos que están acostumbrados al entorno lujoso que proporciona Elementor.

Gutenberg es el editor de WordPress por defecto desde hace 3 años, pero todavía hay gente que se resiste a probarlo . Dichos usuarios no favorecen a ningún creador de páginas , prefieren el editor clásico de WordPress (contenido) sobre cualquier otra cosa.

Dado que todos somos criaturas de hábitos, creemos que no sería objetivo marcar a Gutenberg como poco intuitivo y difícil de usar simplemente porque el editor clásico es más fácil de usar. Pero podemos decirle una cosa: una vez que cree una publicación con Gutenberg y supere esa curva de aprendizaje inicial, continuará usándola .

Elementor vs Gutenberg, ¿cuál elegir? La respuesta siempre es OceanWP, porque usamos ambos

PS One de los bloques de Gutenberg también es el bloque clásico, por lo que no hay razón para usar complementos adicionales para usar la función de la vieja escuela.

Resumen de facilidad de uso de Elementor vs Gutenberg

Elementor ofrece widgets avanzados y herramientas de edición que lo hacen más fácil de usar que Gutenberg, pero puede volverse igual de desafiante una vez que surge la necesidad de hacer que las páginas del sitio web respondan .

Gutenberg viene con su propia curva de aprendizaje que puedes superar fácilmente. Comprender cómo funciona Gutenberg lo ayudará a administrar todos los demás creadores de páginas , incluido Elementor.

Elementor vs Gutenberg: Características

Elementor tiene widgets, Gutenberg tiene bloques, así de simple.

El término widget , sin embargo, se ha utilizado en WordPress durante mucho tiempo, al referirse a una función que utilizaba elementos combinados . Por ejemplo, una imagen con un encabezado, una lista de publicaciones de blog con diferentes opciones de consulta, etc.

Los widgets de Elementor funcionan de manera similar : brindan funciones con opciones agrupadas y múltiples configuraciones de consulta y estilo. Naturalmente, los widgets de Elementor ofrecen muchas más opciones y versatilidad que los widgets de WordPress (Apariencia > Widgets).

Gutenberg comenzó con bloques muy básicos , como el bloque de párrafo, imagen, video, etc. Aunque los bloques también ofrecen opciones de estilo, estas características no son tan ricas ni tan intuitivas como con Elementor. Pero, para ser justos, cuando se trata de configuraciones fáciles de usar, Elementor definitivamente lidera el camino, no solo en comparación con Gutenberg, sino en comparación con casi todos los creadores de páginas disponibles.

Por otro lado, el "problema de los bloques demasiado simples" se puede resolver fácilmente con algunos de los complementos adicionales de Gutenberg que ofrecen bloques altamente funcionales con más funciones y opciones para el usuario .

Hablando de eso, ¿tuviste la oportunidad de explorar nuestro último producto: Ocean Gutenberg Blocks? Si es cliente, este complemento ya está disponible en su tablero para descargarlo y usarlo. Si considera convertirse en profesional, consulte nuestra última oferta.

Resumen de características de Elementor vs Gutenberg

Elementor usa widgets, Gutenberg usa bloques. La versión gratuita de Elementor viene con muchos widgets avanzados que todos los diseñadores de sitios web pueden usar para crear un sitio web fantástico. Para obtener bloques más avanzados, se necesitan complementos adicionales para Gutenberg , como Ocean Gutenberg Blocks.

Elementor vs Gutenberg: Rendimiento

Es posible que haya notado que usamos intencionalmente el término "rendimiento" en lugar de "velocidad de la página".

La razón es simple y directa: la mayoría de las herramientas en línea miden las puntuaciones de los sitios web que no reflejan la velocidad de un sitio web . Aparte de eso, hay demasiados factores de los que depende la velocidad del sitio web . Lamentablemente, el éxito del rendimiento de un sitio web no depende únicamente del tema o los complementos que esté ejecutando.

Sin mencionar que los propietarios de sitios web generalmente olvidan que estas herramientas no reflejan el estado de todo el sitio web, solo la página asignada a la URL probada . En resumen, cuide todas las páginas del sitio web de la misma manera que lo hace con la página de inicio .

Sin embargo, la calidad de un tema y los complementos pueden tener un impacto sustancial en el rendimiento general del sitio web . Y también lo hacen los creadores de páginas.

Comparación de configuración de WordPress

Antes de comenzar, nos gustaría dar una pequeña introducción sobre cómo creamos plantillas de WordPress . De esta forma, los resultados de la comparación Elementor vs Gutenberg se pueden entender en su totalidad.

Las plantillas de WordPress son contenido de sitio web de muestra (páginas, publicaciones de blog, prediseñadas y con estilo). Estas plantillas sirven para acelerar el proceso de construcción o inspirar. En el caso de las plantillas de sitios web de Ocean, cuando se usa el creador de páginas de Elementor, se usa únicamente en las páginas principales (inicio, contacto, acerca de, etc.).

Todas las demás páginas, como publicaciones de blog, tiendas, páginas de productos, páginas de archivo, son páginas predeterminadas de WordPress administradas por el tema OceanWP.

Para este pequeño experimento, utilizamos nuestras dos plantillas de sitio web de WordPress: Agenda y Gutenberg Agenda .

A primera vista y solo mirando las imágenes, ¿sería capaz de diferenciar entre estos dos y adivinar cuál se creó con Elementor y cuál con Gutenberg?

Ambos sitios web están ubicados en el mismo servidor y tienen absolutamente la misma configuración:

• Software: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Límite de memoria de WordPress (PHP): 256M
• Tema de WordPress: OceanWP (parpadeo parpadeo)

Ambos sitios web tienen la mayoría de los complementos de WordPress en común :

• mar extra
• Intercambio de productos oceánicos
• Intercambio social en el océano
• WooCommerce
• Lista de deseos de TI WooCommerce
• WPforms Lite
• Encabezado pegajoso del océano
• WP Rocket (no utilizado en la creación de plantillas de WordPress).

Agenda plantilla de WordPress:

• Elementor
• Widgets de Ocean Elementor

Plantilla de WordPress de la Agenda de Gutenberg:

• Bloques del océano Gutenberg

Como puede ver, la versión de Gutenberg no requiere complementos adicionales para ejecutarse. Todo lo que necesita es el editor de bloques predeterminado de WordPress: Gutenberg .

Elementor vs Gutenberg: información sobre la velocidad de la página de Google

Para todos aquellos que se saltaron algunos fragmentos del texto y vinieron directamente aquí, es importante enfatizar que Google Page Speed ​​Insights no mide la velocidad del sitio web . En cambio, califica el sitio web teniendo en cuenta diferentes factores.

Además, también es importante reconocer que las puntuaciones no solo pueden ser falsos positivos (puntuaciones bajas pero un sitio web rápido y viceversa), sino que a menudo no pintan la imagen real. Cuando se trata de puntajes PSI (Page Speed ​​Insights) móviles, Google recopila información de usuarios reales que navegan por su sitio web usando teléfonos móviles .

Esto significa que la situación real se hará visible con el tiempo , no instantáneamente. Esto también significa que sugerimos sutilmente que no debe verificar sus puntajes e intentar trabajar en ellos en el momento en que instala WordPress o crea una página ; la información no es precisa.

Para comprender completamente cómo funciona la recopilación de datos sobre el rendimiento del sitio web y el procesamiento de datos, le recomendamos que consulte esta respuesta de un empleado de Google. No hay nada mejor que obtener la respuesta directamente de la fuente.

No obstante, entendemos que las puntuaciones son importantes para los usuarios. Y es por eso que estamos compartiendo los resultados contigo.

Cuando se trata de puntajes PSI móviles , en la carrera Elementor vs Gutenberg, el ganador es Gutenberg .

Las diferencias entre todos los datos son bastante evidentes, ya favor de Gutenberg.

El resultado que más nos sorprendió es la diferencia de Total Blocking Time (TBT). En el caso de la página creada por Elementor, el TBT fue de 310 ms, mientras que el TBT en una página creada por Gutenberg fue de solo 50 ms .

¿Te imaginas cuáles habrían sido los resultados si realmente optimizáramos las imágenes en el sitio web antes de cargarlas y configurar WP Rocket correctamente en lugar de ejecutar la configuración predeterminada? No sea como nosotros: optimice sus imágenes y encuentre la configuración óptima de almacenamiento en caché para su sitio web .

En la comparación entre Elementor de escritorio y Gutenberg , las diferencias no son tan drásticas, aunque los resultados están ligeramente a favor de Gutenberg . Al menos, no según PSI.

Es por eso que estamos pasando a otra herramienta que recomendamos a menudo a nuestros usuarios: GTmetrix.

Elementor vs Gutenberg: Comparación de GTmetrix

GTmetrix parece estar contento con ambas versiones de nuestra plantilla Agenda WordPress: Elementor y Gutenberg.

Pero, no podemos ignorar la gran diferencia entre el Tiempo de interacción y el Tiempo de interacción DOM , ambas métricas a favor de Gutenberg.

Tiempo para Interactivo : Elementor vs Gutenberg : 912ms vs 408ms .

Tiempo interactivo DOM: Elementor vs Gutenberg : 714ms vs 405ms .

Cuando se trata de la comparación de la estructura Elementor vs Gutenberg, GTmetrix nuevamente nos muestra un barrido verde.

Pero hay una cosa que nos llamó la atención de inmediato : el tamaño del DOM . Una vez más, los resultados están a favor de Gutenberg.

Evite un tamaño DOM excesivo : Elementor vs Gutenberg : 1251 elementos vs 929 elementos .

Tanto si eres fanático de Gutenberg como si no, debes admitir que más de 300 elementos menos para una página con contenido casi idéntico es una gran victoria . Sin mencionar que también es una victoria inmediata.

Con todo, los gráficos han hablado. Aunque los puntajes de rendimiento y estructura son exactamente los mismos, donde ambos sitios web obtuvieron el Grado A de GTmetrix, el puntaje de rendimiento del 100 % y el puntaje de estructura del 98 %, hay muchas estadísticas a favor de Gutenberg que pueden ser importantes para usted si está un gran fanático de la optimización y el rendimiento.

A juzgar por GTmetrix, las cosas son límpidas. Cuando se trata de la comparación de rendimiento lado a lado de Elementor vs Gutenberg, Gutenberg es el ganador absoluto .

Pero, espera un minuto. ¿Significa esto que Elementor es malo y no debe usarse? No, porque lograr puntajes satisfactorios de los que puedes estar orgulloso también se puede lograr con Elementor .

Los resultados solo muestran que Gutenberg proporciona ganancias de rendimiento instantáneas, sin complicaciones y de vanguardia , mientras que cuando se trata de Elementor, debe ser un diseñador web inteligente y responsable.

Resumen de rendimiento de Elementor vs Gutenberg

Ninguna de las plantillas de nuestro sitio web ha sido optimizada para velocidad / puntajes, y usamos la configuración predeterminada de almacenamiento en caché de WP Rocket en ambos. Gutenberg ofrece más ganancias de rendimiento listas para usar y algunas de las diferencias métricas son bastante drásticas en comparación con Elementor , especialmente las métricas de tiempo de bloqueo total, tamaño de DOM, tiempo de interacción y tiempo interactivo de DOM.

Los diseñadores de sitios web experimentados con habilidades avanzadas de optimización que siguen las mejores prácticas de creación de sitios web y usan las herramientas adecuadas no tendrán problemas para lograr la mejor velocidad o puntajes con Elementor.

Los sitios web con tecnología de Gutenberg también requieren menos recursos , principalmente el límite de memoria de WordPress, para funcionar sin problemas en comparación con los sitios web de Elementor en combinación con varios complementos adicionales de Elementor.

Elementor vs Gutenberg: Beneficios

Con respecto a la comparación de beneficios de Elementor vs Gutenberg, es difícil decidir.

Cada creador de páginas tiene sus propias ventajas y motivos para ser utilizado . Del mismo modo, cada creador de páginas tiene sus contras. Tanto los pros como los contras pueden ser de naturaleza subjetiva .

Por supuesto, a todos nos encanta Elementor por su función de arrastrar y soltar, pero usar Gutenberg tampoco es tan difícil .

La configuración de capacidad de respuesta de Elementor y la posibilidad de ocultar secciones o elementos en función de los dispositivos o diseñar completamente elementos en función del dispositivo también es una de las razones adicionales para amarlo . Ahora, son las mismas características las que pueden hacer que los principiantes se sientan desanimados y abrumados cuando recién comienzan, ya que se dan cuenta de que la creación de sitios web requiere más esfuerzo del que solían leer en varios blogs.

En términos de facilidad de uso y creatividad, votamos por Elementor .

Pero, cuando nuestros usuarios nos preguntan sobre alternativas a Elementor, mencionan la estabilidad como la razón principal de la necesidad de un cambio . Para ser claros, los errores y errores ocurren, incluso en empresas como Facebook. Y no importa qué configuración estén ejecutando los propietarios y desarrolladores de sitios web, ser responsable y seguir las mejores prácticas es imprescindible para evitar inconvenientes . Sí, estamos hablando de realizar copias de seguridad o probar nuevas actualizaciones en las áreas de preparación.

De hecho, incluso los usuarios experimentados que siguen estas prácticas guardan un poco de rencor debido a las innovaciones y cambios de Elementor, que a menudo los dejan sin la posibilidad de utilizar [correctamente] esta herramienta durante algunos períodos de tiempo.

Cuando se trata de Gutenberg, como desarrolladores apoyamos su rendimiento (tanto frontend como backend), accesibilidad y estabilidad . Tenga en cuenta que algunos complementos de Gutenberg pueden agregar tanta o incluso más hinchazón a HTML que otros editores de páginas que no son de Gutenberg, así que elija sabiamente.

A pesar de que Gutenberg no parece tan amigable para principiantes como Elementor, definitivamente alentamos a los principiantes a que lo prueben . Y nuestra recomendación se basa exactamente en la ausencia de algunas funciones avanzadas que requieren un enfoque más profesional o experimentado (como editar en modos receptivos y ajustar el contenido para diferentes dispositivos).

También es seguro decir que aquellos que aborden y aprendan a manejar Gutenberg también tendrán una comprensión rápida de todos los demás creadores de páginas , incluido Elementor.

Resumen de beneficios de Elementor vs Gutenberg

Las opciones y configuraciones de capacidad de respuesta de Elementor pueden ayudar a cualquier persona a ajustar el diseño del sitio web para todos los dispositivos , incluso de manera diferente si es necesario. Pero también son las mismas configuraciones las que pueden burlar a los principiantes de WordPress una vez que se dan cuenta de que la creación de un sitio web requiere un poco más de tiempo, esfuerzo y práctica de lo que han leído al respecto.

Gutenberg puede parecer intimidante y totalmente poco intuitivo al principio , pero en realidad es un punto de partida de aprendizaje increíble. Superar Gutenberg ayudará a todos a comprender mejor todos los creadores de páginas . Además, Gutenberg ofrece más estabilidad, accesibilidad, SEO y rendimiento general .

Elementor vs Gutenberg: ¿Qué creador de páginas es mejor?

Ya sabes lo que dicen: un zapato no se adapta a todos los pies, pero no lo sabrás a menos que pruebes el zapato primero.

A algunos usuarios les encanta Elementor, algunos Gutenberg , y hay varias razones detrás de esto. Dado que estamos hablando de su sitio web, es esencial averiguar qué se adapta a usted y a las necesidades de su sitio web .

Cuando nuestros usuarios se ponen en contacto con nosotros para pedirnos consejo sobre el uso de Elementor sin comprometer la estabilidad, el rendimiento, el SEO, la accesibilidad y muchas otras cosas que son cruciales para la creación de sitios web , recomendamos que usen Elementor de la misma manera que lo usamos para crear plantillas de sitios web de WordPress. . Use Elementor en las páginas principales que deben ser atractivas y atractivas; deje todo lo demás en manos de WordPress y su tema.

En resumen, evite crear plantillas de archivo personalizadas, especialmente si no es un diseñador experto o tiene poca experiencia en la optimización general de sitios web.

Si es un principiante y quiere preocuparse menos por la edición y el estilo adicionales , o si es un profesional al que no le importa poner un poco más de esfuerzo en el diseño del sitio web (nos referimos a la ausencia de arrastrar y -función de soltar) y no se oponga a la ausencia de varias opciones de animación, entonces definitivamente debería optar por Gutenberg . Especialmente teniendo en cuenta todos los beneficios de rendimiento y el hecho de que puede crear un diseño de igual calidad utilizando Gutenberg .

Lo único que nunca debes hacer y hemos visto tales diseños, es crear plantillas personalizadas con Elementor y luego usar Gutenberg en combinación con él para agregar contenido. No hagas tu vida más difícil de lo que debería ser y no elimines tu sitio web

Ya sea que su creador de páginas de elección sea Elementor o Gutenberg, la respuesta siempre es OceanWP y Ocean Core Extensions Bundle, porque le ofrecemos widgets y bloques para lograr el diseño de sitio web deseado.

¿Cuál es tu veredicto? ¿Cuál es tu creador de páginas favorito y por qué? Y sí, puedes elegir y usar ambos.

Una vez que descanses de crear sitios web, deja un comentario y cuéntanos lo que piensas.