Inicio / Tutoriales Wordpress / Los maquetadores de páginas en WordPress ¿Cual usar?
elementor-vs-divi-builder
Escrito por | | en Tutoriales Wordpress

Los maquetadores de páginas en WordPress ¿Cual usar?

Si bien los constructores de páginas o maquetadores de páginas  pueden ser un tema que genera divisiones entre los usuarios incondicionales de WordPress, no se puede negar el efecto masivo que han tenido en el ecosistema de WordPress cuando se trata de hacer que el diseño sea
accesible para los usuarios habituales.
Más allá de eso, a veces parece que todas y cada una de las compañías de WordPress se han tomado la molestia de crear un constructor de páginas en algún momento.

Los chicos de codeinwp han preparado un artículo que nos permite analizar 3 de los maquetadores más populares.En esta publicación, se puede profundizar entre las características más destacadas de: Elementor vs Divi Builder vs Beaver Builder.

Más allá de darle un vistazo a los conceptos básicos de cómo funciona cada constructor de páginas, queremos profundizar entre sus características más destacadas. Por esa razón, profundizaremos en opciones de diseño avanzadas, funcionalidad de diseño responsive, bloqueo de código, rendimiento en el mundo real, facilidad de uso y más.

Cuando hayas terminado de leer esta comparación, esperamos que tengas un conocimiento profundo de cada complemento y, lo que es más importante, la confianza para elegir el maquetador  de páginas adecuado para ti.

El resumen: Elementor vs Divi Builder vs Beaver Builder

 

Vamos a cubrir todo con mucho más detalle. Pero antes de encontrarnos con un montón de tablas de comparación, imágenes y gif específicos para  cada función, pensamos que podría ser útil ofrecerle una descripción general rápida de Elementor frente a Divi Builder versus Beaver Builder.

Si solo quieres los aspectos más destacados, dale una lectura a esta  tabla. Si desea todos los detalles esenciales, siga leyendo las  siguientes 3.000 palabras para una mirada mucho más profunda:

Elementor vs Divi Builder vs Beaver Builder
Elementor vs Divi Builder vs Beaver Builder

 1)  ¿Cuál es el constructor de páginas más popular?

Esto no pretende ser una mirada definitiva sobre qué constructor de páginas es el más popular porque los números hacen referencia a cosas ligeramente diferentes. Aún así, pensamos que sería un ejercicio divertido comparar los números de usuarios publicados para cada constructor de páginas. Así es como se acumulan:

Los números de Elementor y Beaver Builder provienen de WordPress.org, mientras que el número de Divi Builder proviene del sitio web de Elegant Themes. Además, el número de Divi Builder se refiere a la cantidad total de clientes que atiende Elegant Themes, independientemente de la razón por la que se unieron esos clientes (no solo para el constructor).

Elementor :200.000
Divi builder: 437.800
Beaver Build :300.000

2) Un vistazo a las interfaces de los Constructores de páginas: ¿ofrecen una edición frontal real?

 

Si bien los tres maquetadores visuales de nuestra comparación ofrecen creación visual de páginas frontales, no todos lo hacen de la misma manera.
En esta sección, veremos la interfaz principal de cada constructor de páginas y discutiremos algunas de las peculiaridades que diferencian a cada una de las demás.

Interfaces Maquetadores Visuales-WordPress

Ahora comparemos estos aspectos para cada constructor uno por uno:

Una mirada a la interfaz de Elementor

Elementor divide su interfaz en dos partes principales:

a) Una barra lateral izquierda donde puede agregar nuevos elementos y editar configuraciones para elementos existentes
b) Una mirada visual a su página en el lado derecho

Interface Elementor Maquedar Visual WordPress

 

Para agregar un nuevo elemento a su diseño, solo tiene que arrastrarlo desde el lado izquierdo y verá una vista previa en vivo de cómo se ve el elemento en su página actual:

Elemntor-Maquetadores-Visuales-WordPress

Puede configurar nuevas columnas con el botón Agregar nueva sección:

Elementor-Maquetador-de-paginas-WordPress

Para editar el contenido y el estilo de un elemento, todo lo que necesita hacer es hacer clic en un elemento determinado y podrá editarlo en la barra lateral izquierda. Cualquier cambio que realice será inmediatamente visible en la vista previa de su sitio.

Es importante señalar aquí que, a diferencia de Divi Builder, no puede editar el texto escribiendo directamente en la interfaz visual. En su lugar, deberá hacer todos sus tipeos y formateos en la barra lateral izquierda:

Como verá en un segundo, este enfoque es similar al de Beaver Builder.

 

Una mirada a la interfaz del Maquetador Visual Divi Builder

Aunque Divi Builder también ofrece una interfaz de edición de backend, nos centraremos en el editor visual para esta comparación porque los editores visuales son lo que prefieren la mayoría de los usuarios.
A diferencia de Elementor, donde tiene una clara distinción entre la vista previa visual de su sitio y la barra lateral de control de Elementor, Divi Builder opta por superponer todas sus opciones sobre una vista previa visual en vivo.

Así es como se ve la interfaz cuando abre Divi Builder por primera vez:

Interface divi builder

 

Para agregar un nuevo Módulo (nombre de Divi Builder para elementos), usará los diversos íconos, a diferencia de Elementor y Beaver Builder, puede escribir directamente en la página para editar texto en sus diseños. Y también puede reorganizar los módulos mediante el uso de arrastrar y soltar.

Sin embargo, para los módulos que no son de texto, a menudo utilizará un cuadro emergente para editar el módulo en lugar de escribir directamente en la página.

Una mirada a la interfaz de Beaver Builder

En términos de interfaz, Beaver Builder tiene más en común con Elementor que con Divi Builder. Al igual que Elementor, Beaver Builder tiene una barra lateral que enumera todos los módulos disponibles.
Para agregar un módulo a su página, todo lo que necesita hacer es arrastrarlo y soltarlo desde la barra lateral derecha a su página activa:

Beaver Builder interface

 

Sin embargo, como puede ver al final del GIF, Beaver Builder usa una interfaz diferente para editar los módulos, optando por una ventana  emergente como Divi Builder. Una gran ventaja de Beaver Builder es que puede crear automáticamente columnas nuevas simplemente arrastrando un módulo al lado de otro, mientras que Divi Builder y Elementor lo obligan a crear nuevas columnas manualmente antes de poder agregar elementos nuevos. Es algo pequeño, pero hace que el proceso de diseño se sienta un poco más fluido.

3)¿Qué tipo de módulos de contenido puede usar para construir sus páginas?

Los elementos o módulos (los términos a menudo se usan indistintamente) son una parte importante de un constructor de páginas porque son los bloques de construcción reales de sus diseños.
En las comparaciones de interfaz anteriores, viste dos tipos de módulos:

  • Texto
  • Botón

Pero la mayoría de los creadores de páginas también ofrecen listas de elementos mucho más largas que le dan más elementos de nicho como:

  • Testimonios
  • Formularios de contacto
  • Tablas de precios, y más

Aquí están las cantidades totales de módulos actualmente disponibles para cada uno:

# De elementos oficiales
Elementor: 53
Divi Builder : 46
Beaver Builder: 31

¿Utiliza widgets de WordPress?

Elementor: SI
Divi Builder: SI, pero no es fácil utilizarlos.
Beaver Builder:SI

Elementos complementarios de terceros.
Los tres constructores de páginas utilizan complementos de terceros.

Como cada uno de estos maquetadores visuales ofrece una gran cantidad de módulos, no vamos a centrarnos en los módulos que son todos iguales.En su lugar, intentaremos resaltar algunas de las diferencias entre Elementor y Divi Builder versus Beaver Builder para tipos de módulos más avanzados.

Es decir, estos son algunos de los módulos más destacados que no son compartidos por los 3 constructores de  páginas:

Modulos Maquetadores Visuales

Beaver Builder definitivamente tiene la mayoría de las respuestas “No” en la lista … pero eso no es necesariamente un obstáculo. Beaver Builder aún incluye todos los módulos fundamentales que probablemente utilizará a diario; es posible que no pueda competir con los módulos de nicho que ofrecen los otros dos, pero será suficiente para un trabajo profesional.

4) ¿Estos constructores producen diseños compatibles para dispositivos móviles?

 

Debido a la importancia del diseño responsive, usted desea un constructor de páginas que le permita agregar funcionalidad de diseño responsive a sus páginas. A continuación, encontrará una comparación de las diversas funciones de diseño responsive que se ofrecen en Elementor frente a Divi Builder vs Beaver Builder:

 

5) ¿Qué características únicas ofrece cada constructor de páginas?

Con los constructores de páginas de WordPress, hay muchas cosas iguales …
Claro, hay muchas pequeñas diferencias en las comparaciones anteriores, pero las interfaces de construcción de la página principal son bastante similares. Es decir, arrastra y suelta elementos en una página y los diseña según sea necesario.

Pero ahora, queremos profundizar en algunas de las características únicas de Elementor vs Divi Builder vs Beaver Builder. Estas son cosas que van más allá de la interfaz habitual de creación de páginas y ofrecen nuevas funcionalidades útiles.
Y  también pueden ayudarte a tomar una decisión cuando se trata de Elementor vs Divi Builder vs Beaver Builder.

Elementor características únicas

Elementor ha hecho un gran trabajo creando características únicas que lo diferencian de la competencia. Estos son algunos de los grandes:

Incrustar en cualquier lugar: Le permite usar widgets y códigos cortos para incorporar diseños de Elementor en cualquier parte de su sitio, incluidas barras laterales, pies de página y otras áreas.
Modo Mantenimiento / Próximamente: Le permite usar Elementor para diseñar un modo de mantenimiento o una página que esta por lanzarse o crearse y, de hecho, activar esas páginas directamente desde la interfaz de Elementor.
Shape Dividers: Un fantástico efecto de diseño que le permite agregar formas SVG a sus diseños directamente desde la interfaz Elementor.

Funciones únicas de Divi Builder

Para no quedarse atrás, Divi Builder tiene una función incorporada increíblemente poderosa:

Prueba dividida: Divi Builder le permite configurar fácilmente las pruebas A / B / n para módulos específicos desde la interfaz del constructor  de back-end. A continuación, puede comparar los efectos de esos módulos en un objetivo específico para elegir la  versión que funcione mejor:

Otras características únicas incluyen:

Editor de funciones Divi: Le permite restringir el acceso a ciertas funciones de Divi Builder (o incluso módulos específicos)
basado en roles de usuario.Los otros dos constructores de páginas incluyen restricciones de roles básicos, pero no son tan detallados como Divi Builder.
Elementos de bloqueo: Otra característica útil es la capacidad de “bloquear” ciertos módulos para evitar hacer un cambio accidentalmente en un módulo terminado.
Copie el estilo del módulo: En lugar de duplicar un módulo completo, Divi Builder le permite copiar solo el estilo. De hecho, podemos simplemente poner la mayoría de las opciones de “clic derecho” aquí.

Ninguno de los otros creadores de páginas le permite hacer clic con el botón derecho para realizar cambios

Beaver Builder características únicas

Una de las características más exclusivas de Beaver Builder es el add-on de Beaver Themer lanzado recientemente.Este complemento se compra por separado,  pero, en esencia, le permite usar la misma interfaz de Beaver Builder para crear todo el tema, incluidos encabezados,  diseños de publicaciones únicas y más.
Además, Beaver Builder es el único complemento que incluye una característica de etiqueta blanca de forma predeterminada.  Si bien los usuarios casuales no se preocupan por esta característica, muchos desarrolladores de WordPress lo consideran importante.

Esperemos que todo este análisis te haya resultado útil, el artículo original contiene mucho detalles interesantes que quizás puedas consultar si son de tu interés, recuerda su fuente original puedes encontrarla en codeinwp.

Nos vemos en un próximo artículo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *