Elementor (pro) vs Divi builder 2020 – Ventajas e inconvenientes

Si estás familiarizado con WordPress, ya has oído hablar de estos dos monstruos. En este artículo compararemos dos de los productos más populares de WordPress: Elementor vs Divi Builder.

Ambos tienen un historial probado y muchos fans detrás, pero así que ¿cuál es mejor en realidad?

Descúbrelo aquí:

Como diseñador web, pero aún más como propietario de un sitio web, queremos tener el poder de diseñar simplemente nuestras páginas web personalizadas, con la facilidad de arrastrar y soltar. Los creadores de páginas de WordPress permiten a los usuarios crear páginas web de aspecto profesional sin tener que escribir o saber cómo escribir una sola línea de código.

Debido a esto, el constructor de páginas ha crecido masivamente en popularidad y como resultado, muchos desarrolladores y compañías han comenzado a producir un constructor de páginas propio…

Mientras que hoy en día hay muchos, sólo unos pocos han llegado a la cima – algunos ya han caído en el olvido (incluso los de las grandes empresas – un ejemplo notable es el ya desaparecido WPMUDEV Upfront).

Por lo tanto, hacer la elección correcta (Elementor vs Divi) para su sitio web es crítico – después de todo, no quiere que su elección de herramienta esté muerta y enterrada dentro de unos pocos meses o años, dejando su sitio web con un producto sin soporte.

Estas dos opciones son las preferidas por la mayoría de los usuarios y expertos de WordPress porque tienen una amplia selección de características, son fáciles de usar, tienen el mejor rendimiento y estabilidad, y están respaldadas por un equipo de expertos desarrolladores de WordPress o por una empresa de renombre.

Aún así, los constructores de páginas varían bastante, y ambos tienen cosas que pueden no ser ideales para sus circunstancias específicas.

En este artículo, vamos a tomar dos de los principales constructores de páginas del mercado actual, Elementor vs. Divi Builder, y profundizaremos en todas sus capacidades y las compararemos cara a cara.

Vamos a echar un vistazo en profundidad a su interfaz de usuario, el conjunto de características, los precios y mucho más.

Al final de este artículo de Elementor vs. Divi, tendrás todo el conocimiento necesario para hacer un juicio educado sobre cuál se ajusta a tus propias necesidades, sabrás cómo funcionan, cómo se ven, qué viene con el paquete, cuál de estos dos populares creadores de páginas tiene más sentido para ti, y cualquier otra cosa que necesites saber.

Esto te ayudará a tomar una decisión informada sobre cuál elegir, o si debes considerar otros constructores de páginas en su lugar.

¡Adelante!

Elementor vs Divi

Elementor y Divi tienen características avanzadas de construcción de páginas. Elementor es gratis y tiene una versión PRO que cuesta $49. Divi cuesta $89 por año y puede ser usado en un número ilimitado de sitios. El Constructor Divi es fácil de usar, pero Elementor es más rápido para trabajar con él.

Resumen

Precio	Comienza desde $49	Desde 89 dólares
Versión gratuita	Sí	No… pero tiene una garantía de devolución de dinero de 30 días
Editor en tiempo real	Sí	Sí
Edición en línea	Sí	Sí
Frontend / Backend	Ambos	Ambos
Arrastrar y soltar	Sí	Sí
Elementos de terceras partes apoyados	Sí	Sí
Frontend / Backend	Ambos	Ambos
Importación / Exportación	Sí	Sí
Público objetivo	Desarrollador / Diseñador / Usuario / Agencia	Diseñador / Usuario / Agencia
Elementos apoyados	90+	46
Soporte para WordPress Widgets	Sí	Complicado
Código limpio	Sí	No
Plantillas / diseños prehechos	300+	150+
Una característica genial..	Contenido dinámico	Pruebas A/B
Rendimiento	4.5/5	4/5
Lo que nos gustó	Una solución muy poderosa para crear cualquier tipo de diseño	Interfaz de usuario limpia
	Opciones superiores de gestión de diseño	El contenido permanece intacto incluso después de desactivar el plugin
	Precios atractivos con acceso	Un modo de edición único para los clientes
	El constructor de páginas más popular por una razón	Te permite usar los widgets de WordPress en los diseños
Lo que no nos gustó		Algún código permanece después de quitar el plugin
Facilidad de uso	5/5	4.5/5
Apoyo	4.5/5	4.5/5
Estabilidad y fiabilidad	5/5	4/5
Extensibilidad	5/5	4.5/5
Valor	4.5/5	5/5
En general	4.9/5	4.5/5
Ganador	?
Página web	Visita el sitio	Visita el sitio (10% DE DESCUENTO)

Ahora que tienes una rápida visión general de cada plugin, vamos a sumergirnos en ellos. Hemos investigado muchos aspectos, así que no dudes en desplazarte y saltar a las secciones que te interesen.

Empecemos con este último enfrentamiento de constructores de páginas: ¡Elementor contra Divi!

¿Qué son los Creadores de Páginas?

Empezaremos nuestro artículo de Elementor vs. Constructor de Divisiones con una introducción de lo que hace un constructor de páginas.

Para quienes no estén familiarizados con los creadores de páginas, son herramientas de arrastrar y soltar que permiten a los usuarios de todos los niveles crear y diseñar páginas web de aspecto profesional o, en algunos casos, incluso un sitio web completo desde cero, con facilidad.

Por ejemplo, mira este video de 1 minuto sobre cómo y por qué se diseñó Elementor y algunas de sus capacidades:

Cuando se utilizan creadores de páginas, el flujo de trabajo típico es elegir un diseño de página, luego agregar, arrastrar y soltar un elemento del sitio web para posicionarlo, editar las propiedades del elemento, cambiar los colores, el espaciado, etc. y listo.

Es como construir una página web usando piezas de Lego.

Los constructores de páginas se han hecho muy populares porque son fáciles de usar y aprender, cualquiera puede empezar a construir páginas web bonitas y profesionales rápidamente. Probablemente a la mayoría de los usuarios primerizos les tomaría menos de un día poder utilizar plenamente un constructor de páginas.

Mientras que un constructor de páginas se dirige principalmente a usuarios sin conocimientos de codificación, incluso los diseñadores web lo utilizan para ayudarles a terminar un sitio web muy rápidamente. Muchos constructores de páginas vienen con herramientas avanzadas y extensibilidad que permiten a los diseñadores web profesionales crear páginas web únicas y profesionales mucho más rápido que cuando lo hacen desde cero.

Los constructores de páginas tienen herramientas incorporadas que permiten a los usuarios crear secciones que pueden ser divididas usando filas o columnas. Dentro de estas filas o columnas, se pueden colocar varios elementos como imágenes, texto, párrafos e incluso código HTML. Cada uno de estos elementos puede ser estilizado por separado.

Como una rápida introducción, el Divi Builder y su tema relacionado son los productos estrella de Elegant Themes, uno de los mayores vendedores de la industria de WordPress. Habiendo estado alrededor de WordPress durante años de burro, saben cómo hacer las cosas bien.

También han acumulado un gran número de seguidores y más de 550.000 clientes, ¡y sigue creciendo!

Hemos trabajado con este producto durante mucho tiempo, de hecho, ya hemos escrito una revisión completa del tema Divi 3.0 aquí. Su constructor de Divi es un plugin que está incorporado y incluido en el tema, aunque puede ser comprado y usado por separado con otros temas, si así lo deseas.

Cuando se trata de constructores de páginas, Elementor es el nuevo chico del bloque.

Elementor sólo ha existido por un par de años más o menos, pero el producto ha disfrutado de un crecimiento estratosférico – literalmente, el crecimiento es viral, pasando de 500.000 instalaciones a más de 2 millones de instalaciones en cuestión de meses. Elementor ha tomado al mundo por asalto y las críticas y los fans que tiene el producto son un testimonio de la gran calidad de la herramienta que el equipo ha producido.

Parte de su éxito se debe al hecho de que tienen una versión gratuita, por lo que los usuarios pueden empezar con esto, y luego actualizarla cuando necesiten más funcionalidad.

Hemos profundizado mucho en Elementor Pro. Encontrarás nuestra reseña aquí.

En la siguiente sección, vamos a comparar la interfaz de usuario de Divi vs. Elementor, es decir, lo fácil que es construir sitios web utilizando ambos constructores de páginas.

Facilidad de uso

La interfaz de usuario y su facilidad de uso son una de las partes más importantes de un plugin de construcción de páginas porque es donde pasarás la mayor parte del tiempo trabajando. Puedes elegir uno que se adapte a tus necesidades y preferencias o si no te conviene perfectamente, entonces tendrás que acostumbrarte a él…

Así que como nuestra primera parte de nuestra comparación de constructores Elementor vs Divi, vamos a caminar a través de sus UI y los ajustes disponibles que podemos configurar. En términos de facilidad de uso, ambos constructores de páginas han puesto mucho esfuerzo en asegurarse de que son muy fáciles de usar.

Interfaz de usuario de Divi Builder

Antes de comenzar, veamos lo que el vendedor tiene que decir sobre el uso del plugin en este corto video, particularmente con la recién renovada interfaz:

Con el plugin Divi Builder instalado, al crear una nueva página, será recibido con una interfaz que le preguntará si desea «Usar Divi Builder» o «Usar el editor por defecto».

Al hacer clic en la opción Usar Divi Builder se abrirá una pantalla que le pedirá que elija entre «construir desde cero», «elegir un diseño prefabricado» o «clonar una página existente».

• Construir desde cero – comenzará con una página en blanco.
• Elegir un diseño prehecho – te permitirá elegir entre una selección de plantillas prehechas. Hablaremos de esto con más detalle más adelante.
• Clonar página existente – bastante auto-explicativo, básicamente copia una página existente a la página en la que está trabajando actualmente.

Vamos a elegir la opción «construir desde cero», ya que las otras dos opciones son prácticamente iguales, sólo que con el contenido ya añadido. Esto nos permitirá centrarnos más en cómo funciona la interfaz del constructor Divi y cómo se ve cuando se usa para diseñar páginas y sitios.

Agregar elementos

Al hacer clic en la opción «construir desde cero» se encenderá el constructor Divi y lo primero que aparecerá es un cuadro de diálogo pidiéndote que insertes una nueva fila.

Después de elegir el diseño de la fila, habrá otro cuadro de diálogo que te permitirá elegir un módulo para ponerlo en una de las columnas.

Al seleccionar un módulo, se abrirá otro cuadro de diálogo con opciones que puedes configurar. Las opciones cambian dependiendo del módulo y del contenido. Más adelante en el artículo trataremos más sobre los módulos (a los que nos referiremos principalmente como elementos).

El menú

La interfaz de usuario del constructor de Divi es minimalista. El minimalismo siempre ha sido una de las características de diseño de Elegant Themes y el constructor de páginas mantiene este concepto de diseño.

Como puedes ver en el gif de arriba, no hay ninguna barra lateral o de menú. En su lugar, todo lo que tienes es un círculo flotante con tres puntos blancos en su interior.

El círculo flotante con tres puntos blancos es lo que actúa como tu menú. Al hacer clic en estos puntos en la página inicial de construcción de Divi, tendrás acceso a varias opciones y herramientas útiles.

Puedes mover este menú haciendo clic y arrastrándolo. Puedes soltarlo en una de las ocho posiciones predefinidas en la esquina de la pantalla.

Echemos un vistazo más profundo al contenido de este menú flotante. Al usar Divi, empezando por el lado izquierdo, tenemos

• Ajustes del constructor de la división,
• vista de alambre,
• herramienta de zoom,
• vista de escritorio,
• vista de la tableta,
• carga desde las opciones de la biblioteca,
• guardar en la opción de la biblioteca,
• …un diseño claro,
• ajustes de página,
• editando la historia,
• portabilidad,
• el botón de búsqueda y ayuda,
• y los botones de guardar el borrador y publicar.

¿Qué tal una mirada más profunda a cada una de ellas?

Configuración del constructor: al usar Divi, en este elemento de menú, puedes configurar varios ajustes del constructor de la página. Al hacer clic en él, aparecerá un cuadro de diálogo con diferentes opciones que te permitirán personalizar los iconos que aparecen en la barra de herramientas del constructor Divi, cambiar el modo de visualización predeterminado (móvil, escritorio o tableta), habilitar o deshabilitar las animaciones de la interfaz de usuario, etc.

Vista de la estructura – al hacer clic en este elemento se activa o desactiva la vista de la estructura. Puedes usar la vista de estructura para tener una vista estructural de tu página.

Herramienta de zoom – te permite acercar y alejar la página.

Vista de escritorio, tableta y móvil: le permite obtener una vista previa del aspecto de su página en diferentes dispositivos y con diferentes resoluciones de pantalla.

Cargar desde la biblioteca – te permite insertar o usar una plantilla prefabricada desde la biblioteca de plantillas a la página.

Guardar en la biblioteca – le permite guardar la página actual en la biblioteca de plantillas.

Diseño claro: borra todo lo que hay en la página.

Ajustes de la página: te permite acceder a los ajustes de la página como el título, el extracto, la imagen destacada, etc.

Historial de edición – puedes ver desde aquí qué cambios se hicieron en la sesión de edición actual. Al hacer clic en un elemento, puedes retroceder en el tiempo, deshacer todas las ediciones que has realizado y revertir el estado de la página. Ten en cuenta que tu historial de edición sólo mostrará las ediciones realizadas en la sesión actual y que, una vez que cierres el editor, estos elementos se perderán.

Portabilidad: si quieres importar o exportar tu diseño actual, puedes hacerlo haciendo clic en este elemento.

Botones de búsqueda y ayuda – al usar Divi, estos botones le permiten acceder a la documentación del constructor de Divi; el botón de búsqueda le permite buscar una acción, elemento de menú o elemento específico.

Botones de Guardar borrador y Publicar – bastante auto-explicativo.

Menú específico de Elementor

Cuando se usa el constructor Divi, si se pasa el cursor por encima de un elemento, se muestra otro conjunto de menús. Estos menús permiten configurar los ajustes de un elemento específico, como su contenido, su diseño o añadirle un CSS personalizado.

Constructor de Divi en acción

A continuación se muestra un gif que muestra cómo es la edición de una página a través de Divi builder. Como puedes ver, puedes usar el constructor de páginas para arrastrar elementos para reposicionarlos, o puedes hacer doble clic en un texto para realizar la edición en línea, etc.

Y eso es todo para los fundamentos de la interfaz de usuario del Constructor Divi. Es bastante limpia y simple pero tiene todo lo que necesitas para hacer las cosas.

La IU del Constructor de la División es minimalista. No te abruma en absoluto, te mantiene centrado en tus diseños. Presenta una experiencia a pantalla completa. Sin embargo, esto significa que añadir nuevos elementos a veces puede requerir un montón de clics.

Lo que es único en su interfaz de usuario es la capacidad de cambiar a la vista de cuadro de alambre y la vista frontal sin problemas.

Esto es útil, especialmente para las páginas grandes, ya que podrá mover los elementos con mayor facilidad. Además, en la vista frontal del constructor Divi, mover elementos, especialmente si la página ya está llena de contenido, tiende a ser un poco lento.

Al cambiar a la vista de cuadro de cables se elimina el retraso.

Finalmente, usando la vista de cuadro de alambre es mucho más fácil acceder a los menús específicos de los elementos porque siempre están visibles.

Como puedes ver, en términos de facilidad de uso, Elegant Themes ha trabajado para que el constructor de Divi sea simple, pero poderoso al mismo tiempo.

Ahora que terminamos con el Constructor de la División, veamos la IU de Elemental. Nuestra siguiente sección de la comparación entre el Elementor y el Divi Builder se centrará en la IU del Elementor,

Interfaz de usuario de Elementor

La interfaz de usuario de Elementor es drásticamente diferente a la de la mayoría de los demás constructores de páginas. Si el constructor Divi se centra en el minimalismo, Elementor se centra en la accesibilidad, pero la facilidad de uso también está en este constructor de páginas.

Usaremos esta sección de nuestra comparación de constructores Elementor vs. Divi para centrarnos en las diferencias entre ambos.

Elementor utiliza el concepto de bloques de construcción, que se usan para construir cada página en varias «secciones». Echa un vistazo al siguiente video de 1 minuto que explica exactamente cómo funciona esto:

Crear una nueva página con Elementor activo te llevará al editor predeterminado de WordPress. Para empezar a editar la página, tienes que hacer clic en el botón «Editar con Elementor» ubicado en la parte superior de la pantalla, para que aparezca el constructor de Elementor.

Al hacer clic en el botón se abrirá la interfaz de usuario de Elementor que está compuesta por dos partes: la barra lateral y la vista previa de la página.

Puedes ocultar la barra lateral pulsando el pequeño icono que se muestra en el gif de abajo:

Esconder la barra lateral le permite tener una vista previa de su página en pantalla completa. Ten en cuenta que no puedes editar nada mientras la barra lateral esté oculta.

Agregar elementos

Para añadir un elemento a la página, simplemente arrastra y suelta uno desde la barra lateral a la página.

En Elementor, al arrastrar y soltar un elemento, la barra lateral cambiará para mostrar las opciones específicas del elemento que se acaba de añadir, como se puede ver en el gif de arriba.

El botón rojo más y el icono de carpeta en la vista previa de la página te permiten añadir una nueva sección o cargar una plantilla de tu biblioteca, respectivamente.

Después de arrastrar y soltar un elemento a la página o después de seleccionar un elemento en la página, es posible que desee volver al panel de selección de elementos, sin embargo, puede que note que el lado ahora muestra opciones para el elemento seleccionado en su lugar.

Para volver al panel de selección de elementos, puedes hacer clic en el icono de azulejos cuadrados en la esquina superior derecha del menú de la barra lateral.

Al hacer clic en ese icono, podrá volver al panel de selección de elementos. Ahora puedes arrastrar y soltar otro elemento desde aquí a la página.

Barra lateral

La barra lateral se divide en tres partes.

1. El menú superior,
2. el cuerpo, y
3. el menú inferior.

El menú superior contiene ajustes generales, el cuerpo muestra información sobre el elemento seleccionado actualmente y el menú inferior muestra ajustes adicionales que se pueden configurar. Exploremos más a fondo cada uno de ellos.

Menú superior

El menú de la barra lateral superior del constructor de páginas de Elementor son las tres líneas horizontales cortas en la esquina superior izquierda de la barra lateral. Al hacer clic en ellas, puedes configurar los estilos y las fuentes predeterminados, el selector de colores, etc.

Hay otros elementos diversos accesibles en este menú aparte de las opciones de estilo.

Hay una función de búsqueda, un enlace a la página de configuración de Elementor y más. También puedes encontrar aquí el botón que puedes usar si quieres volver de Elementor al tablero de WordPress: el botón azul de salida al tablero.

Menú inferior

En la parte inferior de la barra lateral, puedes ver los elementos adicionales del menú.

De izquierda a derecha, tenemos la configuración, el navegador, el historial, el modo de respuesta, la vista previa de los cambios y el botón de publicación.

El botón de publicación tiene un submenú al que se puede acceder haciendo clic en la pequeña flecha ascendente que está a su lado. Al hacer clic en él, aparecen dos opciones de guardado adicionales: el borrador de guardar y las opciones de guardar como plantilla.

Repasemos cada una de ellas rápidamente.

Ajustes – el icono del engranaje situado en el extremo izquierdo del menú inferior. Contiene los ajustes de la página en la que estás trabajando actualmente.

Aquí puedes editar el título de tu página, añadir una imagen destacada, cambiar su estado de publicación (borrador, programado, publicado), cambiar su diseño predeterminado, etc. También puedes notar la presencia de dos pestañas adicionales: la de estilo y la avanzada.

En la pestaña de estilo, puedes configurar los ajustes de estilo del cuerpo de la página. Puedes definir un color o imagen de fondo y también puedes cambiar el relleno.

Y en la pestaña avanzada, puedes agregar tu CSS personalizado.

Navegador – nos permite ver una vista jerárquica de los elementos de la página. Esto es comparable al modo wireframe del constructor Divi. Sin embargo, el navegador es sólo un menú flotante que representa la jerarquía de elementos de tu página. También puedes reorganizar los elementos usando el navegador, aunque su funcionalidad no es tan buena como la del modo wireframe que hemos visto anteriormente en el Divi builder.

El propósito principal del navegador es, como su nombre indica, ayudarte a navegar por tu página de una manera mucho más fácil. Esto es muy útil, especialmente si tienes una página compleja con toneladas de elementos en ella

Historia – donde puedes ver tu historial de edición. Te permite volver a una versión anterior de tus ediciones. Sin embargo, ten en cuenta que sólo se guardan las ediciones de la sesión actual.

Hay una cosa que separa la característica de historia de Elementor del constructor Divi, y es una grande, haciendo que la característica de historia sea mucho mejor.

Si se han dado cuenta por la imagen de arriba, tenemos otra pestaña etiquetada como «revisiones» en el panel de historia. Estas revisiones se mantienen incluso después de salir de la interfaz del constructor de la página o incluso después de cerrar el navegador.

Cada vez que pulsa el botón «actualizar», se guarda una nueva revisión

Además, el plugin también hace auto-guardos que evitan que pierdas tu trabajo debido a algunos accidentes imprevistos como caídas del navegador.

Esta es una característica muy útil que le permite volver a una revisión anterior fácilmente, incluso si cierra el editor, sale de WordPress o apaga su computadora. Esta característica hace de Elementor un claro ganador contra el constructor Divi en términos de historial de revisiones.

Modo de respuesta – te permite previsualizar cómo se verá tu página en diferentes dispositivos y resoluciones de pantalla.

Cambios en la vista previa: se abrirá una nueva pestaña que le permitirá tener una vista previa en directo de su página.

Menú de elementos específicos

Al hacer clic en un elemento de la página de vista previa, aparecerá un menú específico de elementos que se mostrará en la barra lateral. Cada elemento tiene sus opciones únicas que puede configurar.

Menú de clic derecho

Además de la barra lateral, en Elementor también hay un menú adicional al que se accede haciendo clic con el botón derecho del ratón en un elemento. Varía muy ligeramente dependiendo del elemento sobre el que se haga clic con el botón derecho. Pero básicamente, el menú de clic derecho muestra los siguientes elementos:

• Duplicar – duplica el elemento actual.
• Copiar – copia el elemento actual.
• Pegar – pega el elemento copiado.
• Pegar estilo – permite pegar la configuración de estilo del elemento copiado a otro elemento, cambiando el elemento de destino para que tenga las mismas opciones de estilo que el elemento fuente.
• Restablecer estilo – si quieres restablecer el estilo de un elemento a su valor predeterminado.
• Guardar como global – te permite guardar un elemento, o widget en la jerga de Elementor, como un widget global. Cubriremos más sobre ellos en la sección «Elementos» de este artículo.
• Navegador – al hacer clic en esto se abrirá el menú del navegador y te llevará a la posición actual del elemento en la jerarquía.
• Borrar – elimina el widget.

Elemental en acción

Como hicimos con el producto de ElegantThemes, en la siguiente parte de nuestra comparación Divi vs Elementor te mostraremos cómo se ve Elementor en acción para que puedas entender la diferencia entre estos dos constructores de páginas. Usando gifs animados, puedes ver el producto en acción como parte de nuestra revisión de Elementor vs Divi.

A continuación, podrás ver cómo podemos arrastrar y soltar elementos para reposicionarlos, cómo puedes editar el texto sin problemas con solo hacer clic en él, cómo puedes añadir nuevos elementos, etc.

Como podemos ver, el constructor de Elementor se centra en la accesibilidad y la facilidad de uso.

A diferencia de Divi, a la que puede llevar un tiempo acostumbrarse, Elementor hace que sus usuarios se sientan como en casa. Agregar nuevos elementos es muy fácil ya que solo tienes que arrastrar y soltar el elemento que necesitas desde la barra lateral hasta el área de vista previa.

Podemos ver que al comparar Divi vs. Elementor, ambos se enfocan en cosas diferentes. El primero en la simplicidad y limpieza y el segundo en la disponibilidad y accesibilidad.

Entonces, ¿quién gana cuando se trata de Elementor vs Divi – qué constructor visual es más fácil de usar?

No creemos que haya un ganador en términos de facilidad de uso. Tanto los constructores de páginas de Elementor como de Divi tienen una interfaz que te ayuda a hacer el trabajo. Es sólo una cuestión de estilo y preferencia.

Ahora que hemos terminado de explorar las interfaces de usuario de ambos plugins, es hora de echar un vistazo a los elementos o widgets y módulos disponibles de los constructores de páginas según su jerga. Los «elementos» o «módulos» reales están resaltados en la siguiente parte de nuestra comparación Elementor vs Divi.

Elementos

Los elementos son lo que usarás para construir tu página. En términos de Divi vs Elementor, el uso de la terminología es ligeramente diferente, pero en general, los conceptos son bastante similares.

El constructor de Divi llama a sus elementos la sección, las filas y columnas, y los módulos. Al igual que Divi, Elementor trabaja con tres bloques de construcción fundamentales, pero por otro lado, llama a sus elementos la sección, la columna y los widgets.

Los elementos son lo que se usa para definir la estructura de una página. Mientras que los nombres pueden ser diferentes en Elementor vs. Divi constructor, los conceptos son los mismos.

Echemos un vistazo más profundo comenzando con el constructor Divi.

Elementos del Constructor Divi: Sección, filas y módulos

Los elementos de construcción de Divi se dividen en tres categorías principales. La sección, que actúa como contenedor, las filas, que actúan como divisores, y los módulos, que son el contenido real.

La imagen de abajo muestra una página vacía. Esta página tiene tres secciones.

La segunda sección tiene una fila dentro de ella, que está resaltada en verde. La fila está dividida en tres columnas. Las columnas están vacías.

Por último, la sección inferior también tiene una fila dentro de ella, aunque no está resaltada. La fila también está dividida en tres columnas, similares a la de la segunda sección. La columna central de la fila inferior contiene un módulo, que en este caso es un módulo de botones.

Para añadir secciones, filas o módulos, se hace clic en los botones más. El botón azul, púrpura o naranja plus añadirá una sección (el color de resaltado de la sección cambia dependiendo del tipo de sección: azul para regular, púrpura para ancho completo y naranja para especialidad), el botón verde plus añadirá una fila y el botón negro plus añadirá un módulo.

Secciones

En el constructor Divi, la sección actúa como un contenedor para filas y módulos.

Puedes usar secciones para dividir tu página en diferentes partes. Por ejemplo, puedes tener tres secciones en una página; la primera es una sección sobre, la segunda es una sección de contacto y la tercera es una sección de ubicación de negocios.

Las secciones son «independientes» unas de otras. Si aplica un color de fondo azul en la primera sección, las otras dos secciones no se verán afectadas.

Agregar secciones – Al hacer clic en el botón azul (o naranja o púrpura) plus de la página, podrá agregar una nueva sección. Al hacer clic en el botón especificado, aparecerá un cuadro de diálogo que le pedirá que seleccione entre tres tipos diferentes de secciones: regular, especialidad y ancho completo.

Las secciones regulares permiten añadir filas con columnas dispuestas una al lado de la otra. Las secciones especiales te permitirán añadir una disposición de filas y columnas más compleja. Las secciones de ancho completo te permiten añadir elementos especiales de ancho completo como el portafolio, el deslizador de mensajes, el título del mensaje, etc.

También existe la opción de añadir una sección de tu biblioteca. Si has guardado una sección antes, puedes encontrarla aquí y añadirla a la página.

Configuración de la sección: hemos dicho repetidamente que más adelante en este artículo trataremos la configuración específica de los elementos, y aquí estamos. Comencemos con la configuración de la sección del Constructor de Divi.

Poniendo el ratón sobre un elemento lo resaltará, lo que mostrará una barra de acción en la esquina superior derecha del área resaltada. Echa un vistazo a la siguiente animación de cómo usar la configuración de la sección del constructor de Divi.

Estos ajustes le permiten configurar el elemento específico. Para los elementos de sección, tienes lo siguiente:

• Mover sección
• Ajustes de la sección
• Sección duplicada
• Guardar la sección en la biblioteca
• Eliminar la sección
• Ajustes adicionales de la sección
  • Guardar en la biblioteca
  • Prueba de división
  • Desactivar
  • Bloquear
  • La sección de copias
  • Estilo de la sección de copiado
  • Reajustar el estilo de la sección
  • Ver el estilo modificado
  • Extender el estilo de la sección

La mayoría de estas opciones se explican por sí solas, pero lo que es interesante aquí es la opción de prueba dividida. Esta es una característica de prueba A/B que le permite realizar pruebas divididas en cualquier tipo de elementos constructores de Divi, desde filas, secciones, columnas y módulos.

Por cierto, cuando se trata de Divi vs Elementor en términos de pruebas A/B, Divi sale ganando. La única manera de hacer pruebas de división con Elementor es usando un plugin de terceros o usando Google Optimize.

Al hacer clic en el icono del engranaje (ajustes de la sección) se abrirá un cuadro de diálogo que muestra opciones de configuración adicionales para la sección resaltada.

El cuadro de diálogo de configuración de la sección contiene tres pestañas: Contenido, Diseño y Avanzado. La pestaña de contenido contiene elementos relacionados con el contenido del elemento seleccionado, mientras que la pestaña de diseño y la avanzada contienen opciones de estilo.

Filas

Como la mayoría de los constructores de páginas, las filas son elementos que residen dentro de una sección. Al añadir una fila, debes seleccionar una variación de la misma. Las variaciones de fila difieren en el número de columnas que tiene por defecto y en el tamaño de cada columna.

Si quieres una estructura de columnas más compleja, querrás usar una sección especializada.

Las variaciones de las filas de la sección especializada tienen una estructura de diseño de columnas más compleja, como puedes ver en la imagen de arriba.

Configuración de filas – Al igual que las secciones, una fila tiene una barra de acción cuando pasas el ratón por encima de ella que te permite acceder a determinados elementos del menú. Tiene más o menos las mismas cosas que se encuentran en las secciones, aparte de la opción de cambiar la estructura de las columnas que es exclusiva de los elementos de las filas

Módulos

Los módulos en el constructor Divi son los que usarás para añadir contenido visible a tu página. Los módulos son elementos de la página web como texto, imágenes, párrafos, videos, formularios de contacto, mapas, etc.

Al hacer clic en un botón negro más, se abrirá un cuadro de diálogo de selección de módulos. Al elegir un módulo, otro cuadro de diálogo mostrará los ajustes que se adaptan al módulo específico que ha seleccionado.

Por ejemplo, si selecciona el módulo de texto, aparecerá un texto de marcador de posición en el área seleccionada. Con él, se mostrará un cuadro de diálogo que te permite editar el propio texto y añadir estilos, añadir CSS personalizados, etc. Por cierto, puedes editar el texto directamente en la página sin tener que acceder al módulo de texto.

Cada módulo tiene el mismo cuadro de diálogo que te permite acceder a las opciones de configuración y personalización, al igual que el anterior.

Para abrir la configuración de un módulo, pasa el ratón por encima de ellos para que aparezca la barra de acción y luego haz clic en el icono del engranaje.

El cuadro de diálogo de ajustes tiene tres pestañas: Contenido, Diseño y Avanzado.

• La pestaña de contenido contiene los ajustes de configuración del módulo. Esto varía según el módulo.
• La pestaña de diseño contiene opciones de diseño que permiten cambiar la alineación del contenido, el espaciado, la tipografía, etc.
• La pestaña avanzada permite acceder a opciones como la configuración avanzada de CSS, transiciones, etc.

Estos son los elementos disponibles del constructor Divi que puedes usar para construir y diseñar tus páginas. Acceder a los elementos, especialmente a los elementos de los módulos, es un poco difícil ya que tienes que hacer clic varias veces sólo para obtenerlos.

Todos los elementos son arrastrables en la pantalla, lo que te permite reposicionarlos fácilmente.

Los elementos de texto son editables en línea.

Quizás una de las mejores cosas de los elementos del constructor Divi son las filas especiales, ya que te permite construir un diseño y posicionamiento complejo con relativa facilidad de uso.

Ahora que hemos comprobado los elementos de este plugin, veamos a continuación los elementos de Elementor en nuestro enfrentamiento entre Elementor y el constructor Divi.

Elementos de Elementor: Sección, columnas y widgets

Al igual que Divi, Elementor tiene tres categorías de elementos diferentes: la sección, que actúa como contenedor, las columnas que dividen la sección y los widgets que son el contenido real.

En la imagen de abajo, puedes ver una página vacía dividida en tres secciones.

La sección superior está vacía. La segunda sección contiene tres columnas y la sección inferior, que también contiene tres columnas, con la columna central que contiene un widget de botón.

Añadir elementos a la página es tan sencillo como arrastrar y soltar un widget de la barra lateral a un área vacía.

A diferencia del constructor Divi, que requiere que crees primero una sección y una columna antes de poder añadir un elemento, en Elementor, puedes simplemente arrastrar, digamos, por ejemplo, un widget de botón de la barra lateral a un área vacía de tu página y listo.

Automáticamente creará una sección con una sola columna que contenga el widget seleccionado.

Si estás editando un elemento, la barra lateral cambiará su contenido para mostrar los ajustes apropiados para dicho elemento.

Al igual que con el constructor Divi, puedes arrastrar y soltar elementos para reposicionarlos en la página y puedes hacer clic en cualquier texto de la página para editarlos directamente. También puedes cambiar el tamaño de las columnas libremente.

Al hacer clic con el botón derecho del ratón en cualquier elemento de la página, aparece un menú contextual que varía ligeramente en función del tipo de elemento seleccionado.

Sección

La sección actúa como un contenedor para las columnas y los widgets.

No es necesario añadir explícitamente una sección a una página. Cuando abres una página en blanco y la editas con elementor, sólo tienes que arrastrar un widget a ella y se creará automáticamente una sección con una sola columna que contendrá el widget, igual que lo que viste anteriormente.

Hay dos tipos de secciones en Elementor, la sección normal y la sección interna. La sección interna sólo puede existir dentro de una sección normal. Una sección interna es algo similar a las columnas, pero puedes tener múltiples secciones internas y múltiples columnas dentro de ellas permitiéndote crear diseños complejos.

Ajustes de la sección – Al pasar el cursor sobre cualquier elemento de la página se resaltará la sección a la que pertenecen. La sección resaltada tiene un pequeño menú en su parte superior.

Este pequeño menú tiene tres elementos: la sección de añadir nuevo (botón más), la sección de editar (área punteada), y la sección de eliminar (botón x)

La sección añadir nueva sección añadirá una nueva sección vacía encima de las resaltadas.

La sección de edición mostrará los ajustes de la sección en la barra lateral. También puedes acceder a ella haciendo clic con el botón derecho del ratón en una parte vacía de la sección.

En la configuración de la sección, hay tres pestañas: diseño, estilo y avanzado. Puedes configurar las opciones de diseño y estructura en la pestaña de diseño.

En la pestaña de estilo, puedes configurar las opciones de estilo y en la pestaña avanzada, puedes configurar opciones adicionales de estilo y atributos avanzados

Columnas

Las columnas dividen las secciones verticalmente. Las columnas actúan como un contenedor para los widgets, incluyendo los widgets de la sección interna.

Al agregar una nueva sección, puedes elegir cuántas columnas contendrá.

Configuración de la columna – El acceso a la configuración de la columna se realiza pasando el cursor por una columna y haciendo clic con el botón derecho del ratón en el icono de la columna ahora visible. Aparecerán diferentes opciones que te permitirán editar la columna, duplicarla, añadir una nueva columna, etc.

Al seleccionar la columna de edición se cambiará la barra lateral para mostrar los ajustes relacionados con la columna. Al igual que en los ajustes de sección, también tiene tres pestañas: diseño, estilo y avanzado.

La pestaña de diseño contiene opciones de configuración de diseño como el ancho de la columna, la alineación, etc.; mientras que las pestañas de estilo y avanzadas son prácticamente iguales a las que puedes ver en los ajustes de la sección.

Widgets

La última pieza de las diferencias entre Elementor y Divi en lo que se refiere a los elementos reales son los widgets.

Los widgets son el contenido o los elementos (por lo tanto Elementor) que puedes usar en tus páginas.

Son cosas comunes como texto, imágenes, videos, galerías, botones, etc. Como ya sabrás, añadir un widget es tan sencillo como arrastrar uno desde la barra lateral a la página o hacer clic en el botón más para que aparezca el panel de selección de widgets y luego arrastrar y soltar uno.

Configuración de los widgets – Al seleccionar un widget, la barra lateral cambiará para mostrar las opciones configurables de ese elemento en particular. En el gif que aparece a continuación, puede ver cómo cada elemento muestra diferentes opciones.

También puede acceder a este panel haciendo clic con el botón derecho del ratón en un elemento y seleccionando el editar [nombre del elemento] en el menú contextual.

Por último, cada widget también tiene el estilo y las pestañas avanzadas a las que puedes acceder desde el panel de la barra lateral.

La pestaña de estilo cambia según el widget seleccionado. Por ejemplo, los widgets de imagen no tienen opciones de estilo de tipografía, mientras que los widgets de texto no tienen ajustes de dimensión.

La pestaña avanzada es la misma que en los otros elementos.

Widgets globales

Hay un tipo especial de widget en Elementor: los widgets globales. Puedes guardar un widget como un widget global y usarlo en cualquier parte de la página o del sitio y puedes editarlos a la vez en un solo lugar.

Elementor tiene una selección más amplia de elementos en comparación con el constructor Divi, pero ambos soportan plugins de widgets de terceros, por lo que se equilibra un poco.

Elementor proporciona una forma más rápida de añadir elementos a una página, ya que sólo tienes que arrastrarlos y soltarlos desde la barra lateral a la vista previa. El constructor Divi, por otro lado, requiere que hagas clic varias veces antes de llegar al elemento que quieres agregar.

Al igual que nuestra sección anterior de la comparación Elementor vs Divi, esta es muy cercana, aunque Elementor podría tener una ligera ventaja en esta.

Ahora, hemos visto la interfaz de usuario y los elementos de ambos plugins de WordPress. Es hora de ver y comparar las opciones de estilo de los constructores de páginas de Elementor vs. Divi.

Estilo

Tanto Divi como Elementor vienen con opciones de estilo profundas y avanzadas que son adecuadas no sólo para las personas que no pueden escribir códigos, sino también para los expertos en el campo del diseño web.

Sin embargo, la forma en que Divi vs Elementor abordan el estilo es ligeramente diferente y algunas cosas disponibles en uno no están disponibles en el otro

Si bien es posible que ya hayas visto un vistazo a las opciones de estilo de ambos plugins anteriormente, en esta sección, vamos a echar un vistazo un poco más profundo a cada una de sus respectivas opciones de estilo, porque nuestro constructor de Elementor vs Divi no estaría completo sin una mirada profunda a estas funciones en ambos constructores de páginas.

Opciones de estilo del Constructor Divi

Haciendo doble clic en un elemento del constructor de páginas Divi, ya sea una sección, una fila o un módulo, aparecerá su panel de configuración. También puedes acceder a este panel pasando el cursor sobre un determinado elemento hasta que aparezca una barra de acción y luego haciendo clic en el icono del engranaje.

Hay tres pestañas en el panel de ajustes, la de contenido, la de diseño y la avanzada.

Las opciones de estilo del constructor del Divi se pueden configurar a través de las pestañas de diseño y de las avanzadas. La pestaña de diseño permite configurar la tipografía, las sombras de las cajas, los márgenes, la animación, los filtros, etc. La mayoría de estos elementos requieren la configuración de deslizadores y números de entrada, lo cual es muy fácil de usar incluso para aquellos que no saben codificar

Para los usuarios avanzados o para aquellos que quieren más control sobre el estilo o los que están bien versados en el diseño web, hacen uso de la pestaña avanzada. La pestaña avanzada permite a los usuarios añadir sus clases e identificaciones CSS personalizadas, añadir un código CSS personalizado, configurar la visibilidad, etc.

Estilo receptivo

En el Divi Builder, puedes definir diferentes ajustes de estilo para diferentes dispositivos. Por ejemplo, puedes definir la fuente de un elemento de texto como Verdana y hacer que tenga un tamaño de 20px en los dispositivos de escritorio y puedes definir otra configuración para el móvil que haga que tenga una fuente Times New Roman y un tamaño de 10px.

Las opciones de diseño del constructor Divi permiten a todo tipo de usuarios, desde los no codificadores y los principiantes hasta los veteranos y los diseñadores web, personalizar sus páginas a su gusto.

Opciones de estilo de Elementor

Al seleccionar un elemento en el constructor de páginas de Elementor se cambia lo que se muestra en el panel de la barra lateral para reflejar las opciones disponibles para ese elemento en particular. Al igual que el constructor Divi, todos los elementos en Elementor tienen tres pestañas en su panel de configuración que varía dependiendo del tipo de elemento seleccionado. La primera pestaña contiene el contenido o el diseño, luego el estilo y el avance en la segunda y tercera pestaña respectivamente.

Puedes configurar el estilo de un elemento a través de las pestañas de estilo y avanzadas. Las pestañas de estilo y avanzada muestran diferentes opciones dependiendo del elemento seleccionado.

La pestaña de estilo permite configurar diferentes opciones de estilo como colores de fondo, bordes, tipografía, etc. El contenido de esta pestaña cambiará dependiendo del tipo de elemento que se seleccione. A continuación se muestra la pestaña de estilo para el elemento de la sección.

La pestaña avanzada contiene opciones de estilo avanzadas como márgenes, códigos CSS personalizados, etc

Estilo de respuesta

Puedes tener opciones de estilo separadas para diferentes dispositivos en el constructor de Elementor, como Divi.

Control de las opciones de estilo por defecto de Elementor

Por defecto, después de instalar Elementor, el plugin de construcción de páginas aplicará automáticamente sus opciones de estilo para anular las de tu tema.

Puedes deshabilitar esto dirigiéndote a Elementor > Configuración desde el panel de control de WordPress y comprobando los colores y las fuentes predeterminadas.

Ahora Elementor utilizará la fuente y los colores predeterminados de tu tema en lugar de los suyos propios.

También hay una pestaña de estilo ahí, desde donde puedes configurar varios valores básicos por defecto como fuentes genéricas por defecto, ancho de contenido por defecto, etc.

Ambos plugins ofrecen un excelente conjunto de herramientas de estilo y opciones que se adaptan a todos. Los casuales y los no codificadores pueden definir fácilmente sus estilos utilizando los deslizadores y otras herramientas de estilo que tienen ambos plugins.

Los usuarios avanzados y los diseñadores web que quieran tener más control también pueden disfrutar utilizando cualquiera de estos dos plugins ya que ambos les permiten añadir sus códigos CSS personalizados para una mayor capacidad de diseño.

Ahora, hemos terminado de ver la interfaz de usuario, los elementos y las opciones de estilo. ¡Es hora de revisar las plantillas y cómo las opciones de Elementor vs. Divi se comparan entre sí!

Plantillas

Las plantillas te ayudan a empezar a construir una página rápidamente. Uno de los puntos fuertes de los constructores de páginas y temas hoy en día depende de la cantidad y calidad de las plantillas disponibles como parte del producto. Así que echemos un vistazo a la riqueza de plantillas Divi vs Elemetor ofrecidas por estos dos constructores de páginas.

Tanto el constructor Elementor como el Divi ofrecen montones de plantillas para que elijas.

Veamos cómo se comparan los dos constructores de páginas, Elementor vs Divi, cuando se trata de plantillas ya hechas disponibles.

Diseños del Constructor de la División

El constructor de páginas de Divi ofrece muchas plantillas prefabricadas, sin embargo, se llaman diseños. Se dividen en dos tipos: un paquete de diseños que consiste en múltiples diseños con el mismo tema y un solo diseño.

Los paquetes de diseño contienen múltiples plantillas en una sola. Por ejemplo, un paquete contiene plantillas para la página de inicio, la página de información, la página de contacto, etc., todas ellas siguiendo un conjunto unificado de diseños o temas. Un diseño único es sólo una plantilla para una sola página.

Puedes guardar tus plantillas para reutilizarlas más tarde, o incluso exportarlas para poder usarlas en otro sitio.

Así, por ejemplo, podrías crear una página de aterrizaje que luego puedes cargar desde los diseños y usarla para diferentes promociones que puedas estar ejecutando.

Plantillas de elementales

Las plantillas de Elementor se dividen en dos tipos: bloques y páginas. La versión gratuita permite a los usuarios acceder a más de 40 bloques y páginas, mientras que la versión premium desbloquea todos los disponibles.

En el momento de escribir este artículo, Elementor tiene más de 150 plantillas para elegir en la versión Premium.

Ver toda la lista de plantillas/temas de Elementor disponibles

También hemos revisado un montón de temas y plantillas de Elementor aquí.

Los bloques son plantillas de una sola sección que puedes insertar en una página. Hay bloques para

• formularios de contacto,
• botones de llamada a la acción,
• Preguntas frecuentes,
• las tablas de precios,
• portafolios,
• …de cabeza,
• servicios, etc.

Las plantillas de página son lo que parecen: una plantilla de página entera. Aunque dijimos que hay más de 150 plantillas de página disponibles para los usuarios premium de Elementor, quizás quieras comprobar lo que está disponible hoy.

Esto se debe a que el equipo de Elemetor está constantemente creando y agregando más plantillas a la biblioteca y no podemos mantenernos al día con el flujo constante de plantillas de Elementor publicadas 🙂

Para los usuarios gratuitos, las opciones se reducen pero la selección sigue siendo bastante buena

Como la biblioteca de plantillas del constructor de páginas de Elementor crece continuamente, puedes comprobar las últimas adiciones haciendo clic en «nuevo» en la esquina superior izquierda de la interfaz de selección de plantillas de páginas.

Siempre puede guardar su página en su biblioteca de plantillas para poder reutilizarlas más tarde. Elementor también le ofrece la posibilidad de exportar sus plantillas para que pueda usarlas en otro sitio.

Si bien tanto los plugins de construcción de Elementor como de Divi ofrecen una amplia gama de selección de plantillas, en este momento, creemos que el constructor de Divi ofrece mucho más en términos de números. Además, Divi facilita la construcción de un sitio completo, gracias a sus paquetes de plantillas.

Ganador de las plantillas de Elementor vs. Divi Builder: Divi Builder

Edificio temático

ACTUALIZACIÓN: En la versión anterior de este artículo, sólo Elementor tenía un tema de construcción.

Con el lanzamiento de Divi 4.0, esta característica ya no se limita a Elementor.

La actualización principal de Divi Builder 4.0, que se publicó en octubre de 2019, se centró en equipar al constructor de Divi con potentes herramientas de construcción de temas, permitiendo a sus usuarios utilizar elementos, módulos y características para construir no sólo páginas estáticas sino también un encabezado, un pie de página y disposiciones del cuerpo dinámicos. En otras palabras, la capacidad de construir temas completos.

Hemos actualizado esta sección para reflejar los nuevos cambios y hemos enfrentado las características de construcción de temas de Elementor vs. Divi para ver si la última puede resistirse a la primera.

El constructor de temas de Divi

Una característica relativamente nueva del constructor Divi, el constructor de páginas ahora te permite crear plantillas que puedes usar para anular el diseño, la disposición e incluso el comportamiento del encabezado, el pie de página y el cuerpo de tu sitio web.

Las características son bastante similares a las de Elementor en muchos aspectos, esta es una característica en la que el constructor de Divi se está poniendo al día con Elementor.

Puedes acceder al constructor de temas de Divi yendo a Divi > Theme Builder

Desde allí, puedes crear una nueva plantilla, exportar una plantilla o importar una plantilla de fuentes externas.

Uno de los inconvenientes de esto, en el momento de escribir este artículo, es que no hay forma de importar plantillas pre-construidas del constructor de temas desde la nube. Tienes que descargar un archivo JSON de una fuente externa y subirlo para importar una plantilla pre-construida.

Hablando de plantillas pre-construidas de constructores de temas, hay muchos paquetes disponibles de forma gratuita por los propios desarrolladores del constructor Divi, que puedes obtener aquí. Sólo tienes que buscar «paquetes de construcción de temas» en su barra de búsqueda y podrás encontrarlos fácilmente.

Aparte:Si quieres obtener más de estos paquetes, te recomendamos que visites el El sitio web de Elegant Themes está aquí y suscribirse a su boletín de noticias. Constantemente (literalmente a diario) envían nuevas cosas que pueden ser usadas con el constructor Divi, uno de los más valiosos boletines a los que estamos suscritos.

Con el constructor de temas, puede definir una plantilla global que anulará el aspecto general de todo su sitio web y también puede crear plantillas específicas que se pueden aplicar a publicaciones, páginas y partes específicas de su sitio web

Al crear una nueva plantilla, el constructor Divi le preguntará primero dónde quiere que se aplique la plantilla. Puedes elegir entre aplicar o excluir la aplicación de tus plantillas a publicaciones o páginas específicas o incluso a etiquetas y categorías específicas y más.

Una vez que hayas decidido dónde quieres que se aplique tu plantilla, puedes empezar a construir y diseñar tu plantilla. Si has definido una plantilla de encabezado y pie de página global, se añadirán automáticamente a tu nueva plantilla.

Sólo tendrás que preocuparte de crear una nueva plantilla de cuerpo. Por supuesto, eventualmente puedes anular la plantilla del cuerpo con una personalizada si lo necesitas.

Al hacer clic en añadir un cuerpo personalizado, un encabezado personalizado o botones de pie de página personalizados, se abrirá un pequeño menú emergente que le permitirá elegir entre varias opciones, como seleccionar una plantilla prefabricada o copiar una existente. Cuando se trata de plantillas prefabricadas, Divi tiene una gran selección para elegir.

A partir de ahí, tendrías a tu disposición las herramientas y módulos habituales del constructor de Divi para empezar a construir tu diseño previsto.

Constructor de temas de Elementor

Puedes acceder al constructor de temas de Elementor a través del panel de control de WordPress e ir a Plantillas > Constructor de temas.

A partir de ahí, puedes elegir qué parte de tu tema quieres construir.

Actualmente, puedes crear plantillas de Elementor para páginas, secciones, pop-ups, encabezados, pies de página, posts individuales, páginas de WooCommerce y archivos

Utilizará la misma interfaz de usuario que tiene al crear las páginas, sólo que esta vez los elementos disponibles en la barra lateral se adaptan a la plantilla específica que está intentando crear.

Por ejemplo, a continuación se muestran los contenidos de la barra lateral al editar una plantilla de encabezado.

Una vez que haya terminado de editar una plantilla de tema, puede elegir cómo y cuándo se mostrará la plantilla.

En esta parte, el constructor Divi es un poco más fácil de usar que Elementor debido al uso de casillas de verificación para elegir dónde quieres incluir o excluir una determinada plantilla, en comparación con tener que hacer clic en el botón Add Condition y hacer clic en el menú desplegable cada vez que quieras añadir una nueva regla.

Sin embargo, Elementor todavía viene con un control de grano fino que es igual al del Constructor Divi.

Puedes elegir incluir y excluir tus plantillas de Elementor usando complejas reglas condicionales. Por ejemplo, digamos que tenemos una plantilla llamada «A». Puedes elegir mostrar esta plantilla si la página está bajo la categoría llamada «tratos» y si el autor es «John Doe» como se indica a continuación.

Usado correcta y creativamente, este motor de reglas de Elementor puede ser una herramienta increíblemente poderosa y útil. Le da flexibilidad y personalizaciones a un nivel muy granular. Esto es suficiente para robar la corona en la sección de construcción de temas.

Pocos constructores de páginas tienen tal función y esto es un gran diferenciador.

Y ahí tienes el constructor de temas de Elementor.

Ganador de Elementor contra el Constructor de temas de Divi: Elementor

La siguiente sección de nuestro artículo Elementor vs Divi es cómo se comparan sus precios.

Precios

Elementor y Divi Builder tienen modelos de precios muy diferentes.

Una de las diferencias más destacadas es que el Constructor de páginas de Elementor viene con una versión gratuita mientras que el de Divi no. En cuanto a las versiones premium, Elementor Pro viene con una opción de precio anual, mientras que el constructor Divi permite elegir entre un precio único con un período de actualización y soporte de un año o una licencia de por vida.

Echemos un vistazo más profundo a sus opciones de precio.

Precios de Elementor

Elementor tiene una versión gratuita disponible en el repositorio de plugins de WordPress que puede descargar y usar libremente en su sitio. La versión gratuita es muy útil y ya puedes crear páginas convincentes con ella.

A medida que su sitio web madura y necesita elementos que no están disponibles en la versión gratuita, puede entonces actualizar a la versión pro de Elementor en cualquier momento para obtener características y módulos adicionales y si desea utilizar su característica de construcción de temas.

Elementor Pro es una extensión del actual plugin gratuito de construcción de páginas. Eso significa que si compras una licencia pro, tendrás que descargar un plugin separado e instalarlo para disfrutar de las características premium.

Todas las licencias desbloquean el mismo conjunto de características y niveles de acceso de soporte durante un año (las actualizaciones están incluidas). La única diferencia es el número de sitios donde puedes usarlo.

Las renovaciones tienen un 25% de descuento para los clientes activos.

Hay tres niveles de precios llamados personal, plus y experto.

• La licencia personal cuesta 49 dólares al año y puede ser usada para un sitio.
• La licencia Plus cuesta $99 al año y puede ser usada para tres sitios.
• La licencia de experto cuesta 199 dólares al año y puede utilizarse para mil sitios.

Si planeas usarla en más de un sitio, creemos que deberías optar por la licencia de experto desde el principio, porque es la que ofrece más valor.

Si estás construyendo sitios web para tus clientes, y quieres tener un constructor de páginas, normalmente sugerimos optar por la licencia de experto y luego cobrar a cada cliente el precio de una licencia Plus. Esto te permite alcanzar el punto de equilibrio después de 3 sitios y a partir de ahí obtienes un bono de $99.

Precios del Constructor Divi

A diferencia de Elementor, Divi Builder no tiene una versión gratuita disponible, pero tienen una demo a la que puedes acceder para que la pruebes tú mismo antes de comprarla. Además de eso, sólo hay dos opciones de precio diferentes para Divi.

Se paga anualmente o se paga una cuota única para una licencia de por vida.

Ambas opciones de precio también desbloquean el mismo conjunto de características. Puedes elegir entre las dos:

• $89 $80 de suscripción anual
• 249 $224 Acceso de por vida

Ambos te permiten usar Divi en sitios ilimitados.

Pero, antes de seguir adelante – le haremos una oferta que no podrá rechazar 😉

Hemos estado trabajando con Elegant Themes y hemos conseguido un 10% de descuento limitado en el Divi Builder para los visitantes de CollectiveRay como se puede ver a continuación. Dado el precio, y nuestro descuento que es válido sólo hasta marzo de 2020, te recomendamos encarecidamente que vayas por el acceso de por vida – es un no-sé qué.

Obtenga un 10% de descuento en Divi Builder hasta marzo de 2020

Disfrutarás de lo siguiente:

• Acceso a Divi, Extra, Bloom & Monarch
• Cientos de paquetes de páginas web
• Actualizaciones de productos
• Soporte Premium
• Uso ilimitado del sitio web

Con la licencia Divi, no sólo tendrás el Divi Builder, sino que también tendrás acceso a toda la oferta de Elegant Themes, que consiste en el tema Divi, un tema de revista, un plugin de correo electrónico opt-in y un plugin de medios sociales, que puedes utilizar en un número ilimitado de sitios.

Ganador del premio Elementor vs Divi Builder: Constructor Divi debido al excelente valor

Testimonios – Lo que dicen otros usuarios

Con su popularidad, tanto Divi Builder como Elementor tienen miles, incluso decenas de miles de usuarios. Lo bueno es que no hay mucha diferencia en las clasificaciones de Elementor vs. Divi Builder, ambos son altamente calificados.

Por ejemplo, mira las clasificaciones para el constructor de páginas de Elementor en el directorio de WordPress:

Diferentes personas, desde desarrolladores hasta usuarios ocasionales, han tenido experiencia en uno o ambos y muchas grandes personalidades de WordPress tienen su propia opinión y pensamientos cuando se trata de estos plugins.

Podemos encontrar muchos comentarios y testimonios de usuarios de Elementor en el repositorio oficial de plugins de WordPress. El constructor Divi, por otro lado, tiene muchas revisiones y testimonios en Trustpilot.

Lo que la gente dice sobre el Divi Builder

Con el constructor Divi, la gente siempre está alabando a su equipo de apoyo, la mayoría de las reseñas de 4 y 5 estrellas siempre mencionan lo grande que es su apoyo. Por lo tanto, aunque el constructor Divi puede ser un poco más difícil de usar que Elementor, su equipo de apoyo está ahí para respaldarte

«Elegante tema Divi Builder» y «Tema» es impresionante. Busqué por todas partes un tema con un editor/constructor de páginas sólido, desperdiciando dinero en muchos temas de baja calidad. Cuando finalmente encontré Divi, sabía que era el tema para mí y ahora lo uso en mi agencia de marketing para construir sitios web de clientes porque funciona muy bien. También tienen un apoyo increíble que están bien informados y listos para ayudarte con cualquier personalización del sitio web que se te ocurra»

«He sido miembro de Elegant themes desde hace unos años y me encanta. He hecho sitios web increíbles para los clientes usando sus brillantes temas y plugins y no puedo verme usando nada más. El servicio de atención al cliente es insuperable, son rápidos en responder y el asesoramiento es totalmente fiable. Excelente compañía»

Lo que la gente dice de los Elementales

Los usuarios de Elementor elogian cómo es uno de los mejores plugins de creación de páginas gratuitas del mercado y lo fácil que es de usar que incluso los principiantes no tienen ningún problema en utilizarlo.

Soy un nuevo usuario del plugin, pero no puedo enfatizar lo fácil que es de configurar el plugin y las características de ahorro de tiempo que ofrece!

Nuevo en WP pero Elementor es un super constructor de páginas. Realmente hace que el desarrollo web sea más rápido y mucho menos frustrante. Además hace un hermoso trabajo. Una de las características que realmente me encanta es la posibilidad de volver a versiones anteriores cuando yo o el ordenador estropeamos algo. Puedes volver al cambio anterior, o cualquier cambio en esta sesión o cualquier cambio guardado. ¡Me encanta el concepto de bloque! Podría usar más plantillas de bloques. Crear plantillas de Elementor es tan fácil de hacer y de usar. Desearía que hubiera un widget PHP. El desafío es mantenerse al día con todas las nuevas mejoras ya que las lanzan frecuentemente. Siempre tratando de mejorar este buen producto. Mantengan el buen trabajo chicos!

Terminando..

Estamos llegando al final de nuestra revisión de los constructores de Elementor vs Divi, pero hay pocas cosas que nos gustaría reiterar.

Tanto Divi Builder como Elementor ofrecen una amplia variedad de características que pueden ayudarte a construir hermosas páginas con facilidad. Ambos constructores de páginas se han centrado en la facilidad de uso.

Aunque tienen muchas similitudes, sus interfaces de usuario son muy diferentes. Elementor ofrece accesibilidad al ofrecer una barra lateral que contiene herramientas y opciones, mientras que Divi ofrece simplicidad al mostrar la menor cantidad posible de elementos de la interfaz de usuario.

En cuanto al número de plantillas predeterminadas, el constructor Divi ofrece más en comparación con Elementor, pero ambos plugins tienen una opción de importación y exportación, lo que permite añadir docenas de plantillas de terceros desde otras fuentes.

En cuanto a los precios, Elementor es más caro que el constructor Divi ya que este último tiene una licencia de por vida y un uso ilimitado del sitio. Elementor, por otro lado, tiene un precio máximo de $199 por año, permitiéndote usarlo para mil sitios. Sin embargo, Elementor tiene una versión gratuita que aún ofrece un poderoso conjunto de herramientas e incluso plantillas que te permiten construir hermosas páginas.

Limpieza del código

En cuanto a la limpieza del código, Elementor dejará un código HTML limpio y válido si lo desactivas. El constructor de Divi, por otro lado, dejará algunos códigos en las páginas que son un problema a arreglar, así que te bloquea un poco.

Sin embargo, considerando que tienen una opción de licencia de por vida, es algo justificado. Podríamos inferir que quieren que vinculen sus sitios al ecosistema Divi comprando su opción de licencia de por vida.

Seguridad

En cuanto a la seguridad, Elementor ha tenido un serio problema de seguridad en el pasado pero fue mitigado y resuelto fácilmente. El constructor de la división no ha experimentado un problema de seguridad serio aún.

Actualización: En enero de 2020 el constructor y el tema de la División han experimentado una vulnerabilidad de inyección que requería una actualización.

Esto nos lleva a una simple conclusión, no importa el tamaño del proveedor, las vulnerabilidades son siempre una posibilidad. El quid de la cuestión es cómo reacciona el proveedor ante tal vulnerabilidad. Ambos vendedores han respondido muy maduramente a la vulnerabilidad.

Capacidad de construcción de temas

Cuando este artículo apareció por primera vez, el constructor del Divi todavía no tenía un tema de construcción. Es por eso que anteriormente recomendábamos a Elementor si necesitabas capacidades de construcción de temas.

Pero, ¿cuál es la situación en estos días cuando se trata de la construcción temática de Divi vs. Elementor?

Aunque antes había plugins de terceros para el constructor de Divi, Elementor todavía tenía la ventaja en esta área. Esto se debe a que una característica nativa es casi siempre mejor para la integración y la compatibilidad. Las extensiones de terceros raramente pueden competir con una característica nativa.

Pero todo cambió cuando Divi 4.0 fue lanzado. La actualización le dio al constructor de Divi la tan necesaria característica de construcción de temas.

En este punto, tanto el constructor de Divi como Elementor vienen con el mismo conjunto de características.

En términos de personalización y control, Divi y Elementor hay muy poca diferencia entre los dos.

Ambos ofrecen poderosas características de construcción de temas con controles de grano fino que le permiten construir y diseñar su sitio web de la manera que desee. Desde páginas estáticas personalizadas hasta cabeceras, pies de página y diseño del cuerpo personalizados, ¡puedes construirlos todos!

Entonces, ¿quién gana esta comparación entre los constructores de Elementor y Divi?

Hay una cosa que hace que el constructor Divi sea el mejor producto en general y se lleva la palma: el Tema Divi. Divi viene en dos formas: un tema y un plugin. Usarías el plugin si quieres usar el constructor Divi con temas de terceros. De lo contrario, optarías por usar el tema.

¿Por qué es eso importante? Integración y compatibilidad.

Si optas por el tema, no tendrás ningún problema de compatibilidad.

Elementor tiene su propio tema, pero cuando lo comparas con el tema Divi, no hay comparación.

El tema «Hello Elementor» es barebones y está destinado a usuarios y desarrolladores avanzados para que puedan seguir desarrollándolo. Si quieres un tema de Elementor rico en características, tendrás que instalar un producto de terceros.

Considera la posibilidad de usar Astra en este caso: un tema de Elementor.

Y aunque hay tantos temas que se desarrollan con Elementor en mente, las nuevas actualizaciones y características de Elementor o del tema podrían potencialmente romper la compatibilidad e integración.

Tendrás que esperar hasta que los desarrolladores arreglen cualquier error o incompatibilidad que pueda surgir. Y como con todas las incompatibilidades, hay una ligera posibilidad de perder parte o la totalidad de tu trabajo.

No nos malinterprete, ambos son una solución sólida para la construcción de temas, pero no podemos ignorar el hecho de que Divi es un tema rico en características y un constructor de páginas, por lo que para eso, Divi gana por un pequeño margen en la categoría de construcción de temas.

Principales diferencias en la construcción de temas

Una de las principales diferencias entre el uso de Elementor y el tema de construcción de Divi es el editor. Hay una gran diferencia en la experiencia del usuario, eventualmente, la que prefieras se reduce a la experiencia y preferencia personal.

Cuando se edita un encabezado, pie de página o una plantilla de cuerpo personalizada en el constructor Divi, el editor sólo se centrará en esa área particular de su sitio web. Por ejemplo, cuando estás editando un encabezado personalizado, lo único que será visible en tu pantalla no es nada más que el área del encabezado.

Con Elementor, tendrás una vista de todo el sitio web independientemente de si estás editando un encabezado, un pie de página o un diseño de cuerpo.

Puedes ver abajo que además del área de encabezado, también se muestra el área de contenido. Si te desplazas más abajo, también verás el área de pie de página (sin embargo, están en modo de sólo lectura).

En este sentido, podemos decir que el constructor Divi se centra en la edición sin distracciones mientras que con Elementor se ve todo el cuadro en cualquier punto.

No conocemos una forma de alternar entre los modos de edición sin distracción y de vista previa de página completa en ninguno de los dos constructores de páginas, por lo que si tienes alguna preferencia, esto podría afectar tu elección final.

Esta es una mejora que tanto el constructor de páginas Elementor como el Divi pueden eventualmente agregar: permitir que los usuarios puedan elegir entre las opciones de edición de vista previa sin distracciones y de página completa.

Read More:WP Bakery vs Divi – una comparación completa.

Preguntas más frecuentes

1. ¿Qué es Divi?

Divi es un constructor de páginas y una combinación de temas de WordPress. Es un producto multipropósito completo que puede ser usado para construir cualquier tipo de sitio web desde cero, ya sea de comercio electrónico, basado en un nicho o específico de una industria o un sitio web de un portafolio. Es producido por Elegant Themes y es uno de los productos más populares de WordPress y se ha vendido más de 600.000 veces.

2. ¿Qué es Elemental?

Elementor es uno de los constructores de páginas de WordPress más populares. Aunque no es un tema, también tiene poderosas capacidades de construcción de temas. Típicamente, Elementor se usa junto con un tema para construir publicaciones y páginas personalizadas usando las funciones de arrastrar y soltar. Elementor tiene una versión gratuita y otra de pago. Gracias a la versión gratuita, y en los últimos años tiene millones de instalaciones activas.

3. ¿Cuál es la diferencia entre el constructor Divi y el constructor Divi?

Divi es el tema de WordPress, el constructor de Divi es el editor o constructor de páginas de arrastrar y soltar que forma parte del tema Divi. En realidad, no necesitas hacer ninguna distinción entre ellos, porque funcionan perfectamente juntos.

4. ¿Puedo usar Divi en varios sitios?

Sí, una vez que compres Divi por el precio de 89 dólares, podrás usarlo en un número ilimitado de sitios, pero obtendrás soporte y actualizaciones sólo por 1 año. Hay una versión a $249 que tiene sitios ilimitados de por vida, soporte y actualizaciones ilimitadas.

5. ¿Es Elementor el mejor constructor de páginas?

Elementor es el mejor constructor de páginas que existe actualmente. Aunque esto es subjetivo y puede no ser adecuado para todo el mundo, creemos firmemente que ningún constructor de páginas por sí mismo puede igualar sus características. Por supuesto, esto no significa que sea adecuado para todo el mundo. Divi con su paquete de tema + constructor de páginas es una excelente opción para muchas personas también.

6. ¿Es Divi mejor que Elementor?

Depende. Para algunas personas, que no quieren comprar un tema y una página separada, Divi puede dar más valor. Si estás planeando construir una sola página web, creemos que Divi es una gran elección. Si planeas construir varios sitios, o eres un desarrollador o diseñador, Elementor puede ser mejor porque es compatible con más temas.

7. ¿Trabajarán Divi y Elementor con Gutenberg?

Sí, tanto Divi como Elementor trabajan bien con Gutenberg.

Elementor contra Divi Builder: Pensamientos finales

Entonces, ¿cuál es el veredicto final en lo que se refiere al constructor de páginas de Divi vs Elementor?

Al final, no hay un plugin perfecto y no hay nada que dure para siempre. Todo depende de ti para decidir si quieres usar Divi y el constructor Divi, que podría vincularte a su ecosistema, o Elementor, que es un poco más caro, ambos son grandes opciones y no te arrepentirás de tu elección.

Si aún no te decides, puedes probar fácilmente ambos plugins por ti mismo instalando la versión gratuita del plugin de Elementor o probando la demo del constructor Divi. No hay nada mejor que la experiencia práctica para elegir este tipo de cosas.

Si tuvieras que presionarnos para elegir un constructor de páginas solamente, diríamos Elementor en estos días, pero hemos estado trabajando con el constructor Divi y Elegant Themes durante muchos años, así que no tenemos nada que decir en contra de ellos y del excelente valor que ofrecen.

Sin embargo, en lo que se refiere a los plugins de Elementor vs Divi builder, ya has elegido un ganador para tus futuros proyectos, así que sea cual sea el que elijas, te espera un combo ganador.