Elementor vs Divi: Comparación de características de diseño

Elementor y Divi son dos excelentes herramientas para crear un sitio web con WordPress, especialmente para aquellos que desean crear un sitio web que se centre en el diseño. Ya sea Elementor o Divi, viene con un editor visual para facilitarle la creación de páginas en su sitio web de WordPress.

En el artículo anterior, hemos escrito un artículo que compara las características generales de los dos creadores de páginas. Esta vez, compararemos las características de diseño detalladas que ofrecen Elementor y Divi.

Primero lo primero. Tanto Elementor como Divi vienen con un editor visual en el que puedes diseñar tu página. Los editores vienen con una capacidad de edición receptiva. Lo que significa que puede optimizar su diseño para todos los tipos de dispositivos (computadora de escritorio, tableta y teléfono inteligente). Ya sea Elementor o Divi, le permite usar diferentes configuraciones (por ejemplo, valores de margen) para cada tipo de dispositivo.

La capacidad de edición receptiva que ofrecen Elementor y Divi le permite adoptar un enfoque de diseño móvil primero en su sitio web.

Elementor y Divi ofrecen decenas de características de diseño. Para facilitarle el aprendizaje de las diferencias, dividiremos la comparación en seis secciones.

Activos y medios

– Biblioteca de iconos

Para algunos diseñadores, la disponibilidad de la colección de íconos es el aspecto que más consideran al elegir un creador de páginas. En el diseño web, el ícono tiene un papel vital al igual que la tipografía.

Desde el principio, Elementor confía en Font Awesome para proporcionar una colección de iconos a los usuarios. Aunque la cantidad de íconos es lo suficientemente grande, en realidad no satisfacen las necesidades de los diseñadores. Especialmente si desea agregar iconos delgados. Debe actualizar a la versión pro de Font Awesome para acceder a iconos delgados y otros conjuntos de iconos premium.

Si tiene sus propios conjuntos de iconos descargados de Fontello, IcoMoon o Fontastic, Elementor le permite usarlos.

¿Qué hay de Divi?

A diferencia de Elementor, Divi tiene su propia colección de iconos. Para ser honesto, no tenemos idea de la cantidad exacta de íconos que ofrece Divi, pero puede encontrar fácilmente íconos delgados e íconos generales, como íconos de redes sociales e íconos de marca.

Recientemente, Divi también se ha integrado con Font Awesome. Lo que significa que también puede agregar un icono proporcionado por Font Awesome como en Elementor. En otras palabras, Divi tiene dos proveedores de íconos: la propia biblioteca de íconos nativos de Divi y Font Awesome. A diferencia de Elementor, Divi no le permite cargar un conjunto de iconos personalizados.

– Vídeos de fondo

Ya sea Elementor o Divi, le permite agregar un video como fondo en una sección. La diferencia es que Divi no te permite agregar videos de fondo desde una fuente externa (por ejemplo, YouTube). Solo puede usar el fondo de video cargando el archivo de video en formato MP4 o Webm.

Mientras tanto, Elementor le permite agregar el video de fondo desde una fuente de terceros (YouTube y Vimeo). Incluso puede agregar un video dinámico usando un complemento de campos personalizados como ACF o JetEngine.

– Presentación de diapositivas de fondo

Además del video, Elementor también le permite usar una presentación de diapositivas como fondo de una sección. La misma función no está disponible en Divi.

Al configurar la presentación de diapositivas de fondo, puede agregar tantas imágenes como desee. Para no interferir en la velocidad de carga de su sitio web, Elementor ofrece la opción de carga diferida.

– Máscara de fondo

Divi tiene una función nativa para agregar una máscara de fondo. Con la función, puede agregar una determinada forma a su fondo actual. Sea un fondo, degradado, imagen o video de color sólido. Gracias a la función, no necesita cargar una imagen PNG transparente para agregar una forma a un fondo. Hay 23 opciones de forma entre las que puede elegir.

Así es como funciona la función:

¿Qué pasa con Elementor?

De lejos, Elementor aún no tiene una función de máscara de fondo nativa.

- Patrón de fondo

Para decorar aún más el fondo de una sección, Divi también te permite agregar un patrón. Al igual que la máscara, el patrón también funciona en un fondo de color sólido, degradado, imagen y video. Divi ofrece 24 patrones entre los que puede elegir.

Elementor aún no tiene una función nativa para agregar un patrón a un fondo.

– Divisor de forma

Un divisor de forma le permite decorar el área inferior o superior de una sección agregando una forma determinada. Tanto Divi como Elementor le permiten agregar un divisor de forma a una sección.

Elementor y Divi ofrecen más de 20 opciones de divisores de formas. Al agregar un divisor de formas en Elementor, solo se le proporciona la lista de los nombres de los divisores. Mientras está en Divi, se le proporcionan las vistas previas de los divisores.

– Enmascaramiento de imagen

En Elementor, puede convertir una imagen cuadrada o rectangular en una determinada forma gracias a la función de enmascaramiento de imágenes nativas. Hay seis formas predeterminadas entre las que puede elegir: círculo, flor, boceto, triángulo, blog, hexágono. También puede crear una forma personalizada creando una imagen SVG.

Divi no tiene una función de enmascaramiento de imágenes nativa.

Color y efectos

– Colores globales

El color global es una característica útil, especialmente si a menudo crea sitios web que constan de muchas páginas. Al usar un color global, puede cambiar los colores en varios elementos, ya sea en la misma página o en páginas diferentes, con un solo clic.

Tanto Elementor como Divi vienen con funciones globales. Puede leer esta publicación para aprender a usar el color global en Elementor. Mientras que para Divi, puedes leer esta publicación.

– Gradientes

Si te encanta jugar con degradados, Divi podría ser una opción más adecuada. La razón es que Divi te permite agregar varios colores (más de dos) a tu degradado. La función avanzada de degradado de Divi se puede utilizar en cualquier elemento que admita degradado. Desde el fondo de la sección, el fondo de la fila, el fondo de la columna, hasta el botón.

La función de degradado de Elementor solo admite dos colores.

– Superposición de fondo

Al diseñar una sección o columna en Divi, puede agregar una imagen como fondo. Para que el contenido de la sección o columna sea más visible, es posible que desee agregar una superposición.

Elementor tiene un bloque de configuración en el panel de configuración dedicado a agregar una superposición de fondo. Puedes usar ya sea un color sólido o degradado. Divi también le permite agregar una superposición de fondo (sólido y degradado) como Elementor.

– Modos de fusión

Si suele utilizar Photoshop y otras herramientas de edición de imágenes, ya debe estar familiarizado con el término "modo de fusión". Esta característica le permite mezclar dos elementos para que se mezclen en el mismo tono de color.

Elementor y Divi vienen con este tipo de función, lo que te permite mezclar dos elementos en el mismo tono de color. En Elementor, la opción para agregar el modo de fusión solo está disponible en el widget de encabezado. Mientras está en Divi, puede agregar el modo de fusión en la imagen de fondo, el módulo de imagen, el módulo de texto y otros módulos.

– Filtros CSS

Los filtros CSS son una característica que le permite aplicar ciertos efectos a una imagen en su diseño. Con la función, no necesita editar su imagen usando Photoshop para agregar efectos como desenfoque, sepia, etc. En cambio, solo necesita cambiar el tamaño de su imagen y luego cargarla de inmediato.

En Elementor, tiene cinco opciones de filtro CSS. Mientras está en Divi, hay 8 opciones de filtro CSS entre las que puede elegir:

- Sombra de la caja

La imagen de arriba es un ejemplo de sombra de cuadro que puede configurar en Elementor y Divi. Box shadow se puede agregar a todos los elementos, ya sea en Elementor o Divi. Desde sección, columna, hasta widgets (llamados módulos en Divi).

Tipografía

– Tipografía mundial

La tipografía global es tan útil como el color global. Descubrirá lo útil que es cuando crea un sitio web que consta de varias páginas. Con la tipografía global, puede cambiar la configuración de la tipografía en muchas áreas con un solo clic.

La tipografía global, así como el color global, como mencionamos anteriormente, pueden ahorrarle mucho tiempo en la edición de su sitio web.

Elementor es un creador de páginas que tiene este tipo de características. Desafortunadamente, Divi no tiene tal característica por el momento.

– Control de tipografía

La capacidad de personalizar una fuente es la característica que obtendrá de los complementos de creación de páginas como Elementor y Divi Builder. La función de edición en vivo le permite ver los cambios en tiempo real. En Elementor y Divi, puede personalizar una fuente configurando el tamaño, el peso, etc.

Las siguientes opciones de configuración están disponibles para personalizar una fuente en Elementor y Divi:

• Color
• Tamaño
• Peso
• Transformar (mayúsculas, minúsculas, mayúsculas)
• Estilo (normal, cursiva, oblicuo)
• Decoración (subrayado, sobrerayado, línea a través)
• Altura de la línea
• Espaciado de letras
• Espaciado entre palabras

Ya sea en Elementor o Divi, la vista previa de fuentes está disponible para permitirle obtener una vista previa de una familia de fuentes antes de usarla.

- Fuentes personalizadas

La gran mayoría de las herramientas de diseño actuales utilizan Google Fonts para agregar una biblioteca de fuentes a su editor. Elementor y Divi no son la excepción. En Divi, tiene la opción de deshabilitar Google Fonts para simplificar las opciones de fuente.

Para un determinado proyecto de sitio web, es posible que desee utilizar fuentes personalizadas en su lugar. Tanto Elementor como Divi lo hacen posible si desea utilizar su propia fuente. En Divi, los tipos de archivos permitidos para fuentes personalizadas son TTF y OTF. En Elementor, puede cargar TTF y WOFF.

Si usa Adobe Fonts, Elementor admite la integración con Adobe Fonts para permitirle usar una fuente de Adobe Fonts sin descargar primero el archivo de fuente. Divi no admite la integración con Adobe Font. Por lo tanto, primero debe descargar el archivo de fuente para usar una fuente de Adobe Fonts.

Diseño

- Diseño de página

En Elementor, antes de comenzar a crear el diseño de su página, primero puede configurar el diseño de la página. Hay cuatro opciones de diseño de página entre las que puede elegir:

• Predeterminado: el diseño de página predeterminado que establece en Configuración del sitio
• Elementor Canvas: el diseño de la página en blanco. Sin encabezado y pie de página
• Elementor Full-width: Similar a Elementor Canvas, pero con encabezado y pie de página
• Tema: la plantilla de página predeterminada de su tema

Divi no tiene opciones de configuración para configurar el diseño de la página desde su editor. En Divi, el contenedor (sección) se establece automáticamente en ancho completo. Si desea que su página tenga un tamaño específico (p. ej., 1200 px), puede establecer el tamaño de las filas (puede establecer el ancho predeterminado de la fila a través del Personalizador de temas).

Divi también te permite crear una página en blanco (sin pie de página ni barra lateral). Sin embargo, debe configurarlo a través del panel de configuración de Gutenberg en lugar del panel de configuración de Divi Builder.

– Posicionamiento personalizado

El posicionamiento personalizado le permite colocar un elemento en cualquier lugar de su diseño. Con esta característica, puede lograr un cierto diseño de diseño. Aquí está el ejemplo:

Como se puede ver en la captura de pantalla de arriba. Hay cinco elementos que rodean la imagen en el área central. El diseño como el anterior se puede lograr gracias al posicionamiento personalizado.

El posicionamiento personalizado funciona colocando un elemento en función de la posición vertical y horizontal de la pantalla del dispositivo, no del contenedor. Ya sea en Elementor o Divi, puede lograr un diseño de diseño como el de arriba.

– Margen y relleno

El margen y el relleno son la función de configuración que puede usar para establecer el espacio entre un elemento determinado y otros elementos a su alrededor. En Elementor y Divi, puede establecer el margen y el relleno en todos los elementos. Desde sección, columna, hasta widgets (módulos).

– Índice Z

El índice Z es una propiedad de CSS que especifica el orden de pila de un elemento. Un elemento con mayor orden de apilamiento siempre está delante de un elemento con menor orden de apilamiento. Tanto Elementor como Divi le permiten establecer el valor del índice z de un elemento.

– Alineación de caja flexible

La alineación de Flexbox le permite alinear y distribuir elementos en cada columna dentro de una sección, ya sea vertical u horizontalmente.

En Elementor, puede establecer la alineación de flexbox desde la columna de configuración. Hay opciones de configuración integradas entre las que puede elegir, como se muestra a continuación:

Divi también es compatible con la alineación de flexbox. Sin embargo, debe agregar cierto código CSS, que es problemático para los principiantes. Especialmente para aquellos que no tienen conocimientos de CSS.

– Posicionamiento en línea

El posicionamiento en línea le permite colocar dos elementos dentro de una columna uno al lado del otro. Echa un vistazo a la siguiente captura de pantalla.

Como puede ver, hay dos botones colocados uno al lado del otro. Estos botones, así como la imagen encima de ellos, están en la misma columna. El diseño de diseño como el de arriba se puede lograr gracias a la función de posicionamiento en línea.

En Elementor, puede establecer sin esfuerzo un posicionamiento en línea de un elemento, ya que Elementor tiene una opción de configuración integrada para hacerlo. En Divi, debe agregar código CSS para establecer el posicionamiento en línea de un elemento.

Diseño de respuesta

– Puntos de interrupción personalizados

El diseño de una página web es diferente en cada dispositivo. Sigue el tamaño de los dispositivos de pantalla.

En Elementor y Divi, puede optimizar el diseño de su diseño en tres tipos de dispositivos (computadora de escritorio, tableta y dispositivo). ¿Qué sucede si desea optimizar su diseño para dispositivos con un tamaño de pantalla específico (por ejemplo, un escritorio de pantalla grande)?

En Elementor, puede agregar un punto de interrupción personalizado, que es bastante útil si necesita optimizar su diseño para un tipo de dispositivo que tiene un tamaño de pantalla específico. Después de agregar un nuevo punto de interrupción personalizado, tendrá una nueva opción de dispositivo en el editor para optimizar su diseño.

A diferencia de Elementor, Divi no tiene una función nativa para agregar un punto de interrupción personalizado. Solo puede optimizar su diseño para los tipos de dispositivos predeterminados disponibles en el editor: computadora de escritorio, tableta y teléfono inteligente.

Para su información, aquí están los tamaños de pantalla de los tipos de dispositivos:

• Pantalla ancha: 2400px
• Escritorio: 1209px
• Computadora portátil: 1025px
• Tableta: 881px
• Móvil (teléfono inteligente): 360px

– Columnas inversas

Cuando tenga una sección que consta de dos columnas (o más), la primera columna (más a la izquierda) se colocará en la parte superior del dispositivo móvil. Echa un vistazo al siguiente GIF animado.

Por alguna razón, es posible que desee colocar la segunda columna en la parte superior. En Elementor, puede lograrlo sin esfuerzo gracias a la función de inversión de columna incorporada.

Divi también le permite configurar la columna inversa en una sección. Sin embargo, debe lidiar con el código CSS.

– Mostrar/Ocultar Elementos

Al crear un diseño receptivo con Elementor o Divi, no es necesario mostrar todos los elementos en el dispositivo móvil debido al área limitada de la pantalla. Ya sea Elementor o Divi, le permite ocultar un determinado elemento (sección, columna o widget/módulo) en tipos de dispositivos específicos.

Mociones e interacciones

– Efectos de desplazamiento

El efecto de desplazamiento le permite agregar un efecto o más a un elemento en función del desplazamiento de la página. Lo que significa que el efecto solo tendrá lugar cuando la página se desplace hacia abajo o hacia arriba. Tanto Elementor como Divi vienen con esta característica. Puede aplicar los siguientes efectos de desplazamiento a su diseño:

Los efectos de desplazamiento se pueden aplicar a la sección, columna y widget/módulo.

– Efectos de ratón

Los efectos del mouse le permiten agregar un efecto adicional a un determinado elemento de su diseño, donde el efecto se produce en función del movimiento del cursor. Elementor viene con esta función, mientras que Divi no la tiene.

Hay dos efectos de mouse que puede aplicar en Elementor: Mouse Track e 3D Tilt

– Animación Hover y Transformación CSS

¿Quiere agregar un efecto que solo tenga lugar al pasar el mouse por encima?

Elementor y Divi vienen con efectos de desplazamiento integrados que puede usar para aplicar el efecto de desplazamiento a una sección, columna y widget/módulo. Puede, por ejemplo, aplicar diferentes niveles de opacidad a una imagen en el estado normal y el estado de desplazamiento. También puede agregar sin esfuerzo efectos de desplazamiento como encogimiento, pulso, etc.

Además, Elementor y Divi también vienen con CSS Transform que puede aplicar en ambos estados (normal y flotante).

– Animaciones de entrada y salida

Las animaciones de entrada y salida son funciones estándar disponibles en un creador de páginas. En Elementor, tiene más de diez animaciones de entrada y salida para elegir. Mientras está en Divi, solo tiene siete opciones (desvanecer, deslizar, rebotar, hacer zoom, voltear, plegar y rodar). Ya sea Elementor o Divi, le permite establecer la velocidad de la animación.

– Paralaje

Parallax se refiere a un comportamiento de fondo que se mueve a un ritmo más lento que el primer plano. Puede aplicar paralaje a una sección y columna.

Divi ofrece solo un efecto de paralaje, mientras que Elementor ofrece seis efectos de paralaje de la siguiente manera:

• Desplazamiento vertical
• Desplazamiento horizontal
• Transparencia
• Difuminar
• Girar
• Escala

– Efectos pegajosos

Con efectos fijos, puede configurar un elemento para que siempre esté visible cuando la página se desplaza hacia abajo. La función es especialmente útil cuando se crea un encabezado personalizado con el generador de temas.

Tanto Elementor como Divi te permiten agregar un efecto pegajoso a un elemento. Puede configurar un elemento para que se adhiera a la parte inferior o superior. También puede establecer el valor de compensación para que se aplique el efecto pegajoso.

La línea de fondo

Elementor y Divi son excelentes herramientas para crear sus proyectos de sitios web de WordPress. Le permiten crear hermosos sitios web con menos esfuerzo gracias a las amplias funciones de diseño. Ya sea en Elementor o Divi, puede establecer sin esfuerzo el relleno y el margen entre los elementos, establecer el tamaño, aplicar efectos de animación, etc. Todos los cambios se aplican en tiempo real en el editor. Además, también puede optimizar su diseño en cualquier tipo de dispositivo gracias a la función de edición receptiva que ofrecen los dos.

Antes de elegir qué creador de páginas desea utilizar para sus proyectos, es posible que desee conocer las funciones detalladas que ofrecen los dos primeros.

Como ha leído anteriormente, tanto Elementor como Divi tienen características de diseño similares, con algunas diferencias en algunos detalles. Por ejemplo, Elementor le permite establecer una configuración de tipografía global mientras que Divi no lo hace. Por el contrario, Divi le permite crear un degradado multicolor, mientras que Elementor solo le permite crear un degradado con un máximo de dos colores. Cualquiera que sea la opción que finalmente elija, asegúrese de que puedan satisfacer sus necesidades para realizar sus proyectos.