Gutenberg vs Beaver Builder 2024: ¿Cuál es mejor? Comparación detallada

Gutenberg vs Beaver Builder

Si construyes sitios web con WordPress, es probable que te enfrentes a una pregunta importante. Te quedas con el editor de bloques predeterminado Gutenberg o te pasas a un constructor de páginas como Beaver Builder?

Lo entendemos. Por un lado, tienes la simplicidad del editor de bloques por defecto. Por otro, puedes utilizar algunas funciones avanzadas de los creadores de páginas para crear sitios web fantásticos.

En Editor de bloques Gutenberg forma parte de WordPress desde la versión 5.0. El enfoque basado en bloques de la creación de páginas web acerca WordPress a constructores de páginas populares como Beaver Builder.

Aunque las similitudes entre ambas son evidentes, se trata de dos herramientas diferentes destinadas a fines distintos.

¿En qué se parecen? ¿En qué se diferencian Gutenberg y Beaver Builder? Y por último, en esta eterna confusión de Gutenberg vs. page builders, ¿cuál deberías usar?

Hemos cubierto todo esto y más en este detallado artículo sobre Gutenberg vs. Beaver Builder.

Empezaremos entendiendo los dos, luego entraremos en algunas comparaciones específicas y después crearemos páginas usando tanto Gutenberg como el constructor de páginas Beaver Builder.

Terminaremos resumiéndolo todo para que sepas cuándo usar el editor de bloques Gutenberg y cuándo usar los plugins page builder.

Sumerjámonos.

¿Qué es Gutenberg?

Gutenberg, también conocido como el editor de bloques, es el editor de contenido predeterminado de WordPress introducido el 6 de diciembre de 2018, con el lanzamiento de WordPress 5.0.

Viene por defecto con todos los sitios de WordPress y tiene este aspecto.

Gutenberg editor interface

En qué se diferencia el nuevo editor Gutenberg del anterior editor clásico de WordPress?

WordPress Classic editor interface

La gran diferencia radica en el nuevo enfoque basado en bloques para crear páginas.

Usando Gutenberg, en lugar de añadir todo tu contenido en un bloque en el editor clásico, puedes añadir elementos individuales como un bloque en tu página.

¿Quieres añadir un encabezado? Añade un bloque de encabezamiento. ¿Quieres añadir una imagen? Añade un bloque de imagen. ¿Quieres añadir texto? Añade un bloque de texto. Ya te haces una idea.

Además de bloques, también puede utilizar algunos patrones de bloques listos para usar.

¿Notas esos patrones junto a tus bloques?

Gutenberg patterns

Si bien hay una buena cantidad de bloques que vienen con el editor de páginas predeterminado de Gutenberg, a veces puedes quedarte con ganas de más, especialmente cuando se trata de los patrones de bloques.

Para ello, puede instalar nuestro Spectra Constructor de páginas. Con un gran número de bloques y patrones, puedes crear sitios web impresionantes en cuestión de minutos. Y lo mejor es que es gratis.

¿Qué es Beaver Builder?

Beaver Builder es un constructor de páginas de arrastrar y soltar. Como los otros page builders del mercado, Beaver Builder le permite crear y editar fácilmente páginas web desde el front-end de su sitio.

Beaver builder interface

Tanto si acaba de empezar como usuario de WordPress como si es un desarrollador experimentado, Beaver Builder le ofrece montones de funciones y la flexibilidad necesaria para crear fácilmente hermosas páginas web.

¿Quieres ver cómo se ven tus páginas en distintos tamaños de pantalla? No hay problema. Alterna entre las distintas vistas de pantalla y personaliza los ajustes de la página para que se vea perfecta.

Los módulos son para Beaver Builder lo que los bloques son para el editor Gutenberg. Arrastra y suelta un módulo o widget de tu elección para crear impresionantes diseños de página.

Beaver builder templates section

Aunque Beaver Builder viene con un buen número de módulos y plantillas, si se queda con ganas de más, considere la posibilidad de actualizar a nuestra versión Premium. Plugin Ultimate Addons for Beaver Builder.

Hay más de 60 módulos únicos y más de 300 plantillas de filas y páginas entre las que elegir. No solo podrás crear sitios web atractivos fácilmente, sino también acelerar tu flujo de trabajo al mismo tiempo.

Creadores de páginas vs. Editor de bloques

El editor de bloques es el editor de páginas por defecto y viene incorporado con WordPress. Los creadores de páginas, por su parte, son plugins y herramientas de terceros que se descargan e instalan.

Mientras que el editor de bloques es totalmente gratuito, tendrá que comprar el constructor de páginas si desea utilizar algunas funciones avanzadas. Algunos creadores de páginas ofrecen versiones gratuitas, pero las funciones avanzadas suelen ser de pago.

Tanto el editor de bloques de Gutenberg como los constructores de páginas ofrecen funciones de arrastrar y soltar para crear fácilmente páginas web y diseñar tus diseños. Todo ello sin escribir una sola línea de código.

Si bien el editor de bloques de Gutenberg es una mejora significativa con respecto al editor clásico, en este punto, los constructores de páginas te ofrecen más flexibilidad de diseño.

Desde plantillas a patrones, pasando por animaciones de fondo o efectos de imagen, los creadores de páginas te dan la ventaja que el editor de bloques no tiene actualmente. Por ahora.

Cuando se crea una página con el constructor de páginas, se ve exactamente cómo se ve a un visitante del sitio web.

Los creadores de páginas tienen una mayor curva de aprendizaje y pueden añadir procesos adicionales que ralenticen el sitio, pero por lo demás son excelentes para crear sitios web.

Por último, he aquí algunos elementos para la reflexión.

¿Qué pasa si los desarrolladores de los creadores de páginas dejan de darles soporte? ¿Qué ocurre con su sitio web?

Podrías trabajar en esas páginas usando el editor predeterminado de Gutenberg, pero ¿no estropearía eso la maquetación y el diseño? Tendría sentido utilizar el editor por defecto desde el primer día?

Sin duda, es algo sobre lo que reflexionar.

Los creadores de páginas y el futuro del diseño web

Antes de entrar en detalles, abordemos algunas preguntas frecuentes.

¿Serán los page builders el futuro del diseño web? ¿Gutenberg será el futuro del diseño web? ¿Sustituirá Gutenberg a los page builders?

La respuesta sencilla es que ambos van a vivir felices para siempre 🙂 .

Te explicamos por qué.

En su forma actual, el editor de bloques de Gutenberg no puede sustituir a los constructores de páginas. Las funciones que ofrecen los constructores de páginas son mucho más potentes y permiten crear sitios web impresionantes con relativa facilidad.

Gutenberg todavía tiene que ponerse al día.

Sin embargo, un vistazo a la Hoja de ruta de Gutenbergy te darás cuenta de que WordPress definitivamente tiene planes para mejorar el editor de bloques y hacerlo más potente.

Pero, en su estado actual, Gutenberg y los constructores de páginas son diferentes y se pueden utilizar para fines específicos.

Mientras que Gutenberg hace que la creación de contenido sea más manejable, los constructores de páginas hacen que el diseño de páginas sea mucho más fácil.

Comparación entre Gutenberg y Beaver Builder

Ahora es el momento de comparar Gutenberg contra el constructor de páginas Beaver Builder. Vamos a comparar los dos contra varias características y entender cómo se comportan.

Gutenberg vs. Beaver Builder: Capacidades

Empecemos por lo más básico.

Tanto Gutenberg como Beaver Builder están pensados para ayudarte a crear, editar y gestionar tus páginas web. Aunque el nuevo editor de bloques de Gutenberg lo hace mucho mejor que el editor clásico, Beaver Builder se impone a la hora de crear diseños complejos.

Tanto si está trabajando en un área de contenido de ancho completo, o añadir efectos de fondo, Beaver Builder y la mayoría de los creadores de páginas lo hacen sencillo.

Beaver builder text editor

Con Beaver Builder, puede modificar el ancho de las filas y columnas introduciendo un valor o ajustándolo a sus necesidades. Con Gutenberg, se pierde este tipo de flexibilidad.

Los creadores de páginas le ofrecen muchas más opciones a la hora de crear páginas.

Por otro lado, Gutenberg te ayuda a crear contenido optimizado y es excelente para escribir entradas de blog.

Gutenberg vs. Beaver Builder: Facilidad de uso

El nuevo editor de bloques de Gutenberg tiene un enfoque modular para crear una página. Solo tienes que añadir un bloque y personalizarlo mediante la configuración de bloques. Toda la edición se realiza desde el panel de control de WordPress.

Beaver Builder, por otro lado, ofrece una interfaz única para su constructor frontend. La mayor parte del trabajo se realiza desde la barra lateral de la derecha. Las opciones de la barra lateral sólo aparecen al hacer clic en un botón de la barra superior.

Beaver builder modules interface

Quieres saber cómo crear una página utilizando Gutenberg y el constructor de páginas Beaver Builder? Lo veremos más adelante en este artículo.

Gutenberg frente a Beaver Builder: características principales

Vamos a repasar algunas de las características clave de Gutenberg y el constructor de páginas Beaver Builder.

Características de Gutenberg

1. Bloquea

Los bloques son una parte integral del nuevo editor Gutenberg. Hay un bloque para casi cualquier elemento que quieras añadir a tus páginas web, como un bloque para encabezado, texto, imágenes, vídeo, galería y mucho más.

Sólo tiene que añadir un bloque y crear sus páginas fácilmente.

2. Editor WYSIWYG

Gutenberg te permite ver una página casi en vivo y real mientras la editas. Con el editor Lo que ves es lo que obtienes (WYSIWYG), puedes hacerte una idea del aspecto que tendrá tu página una vez publicada.

3. Ajustes de bloque

A diferencia del editor clásico, en el que tenías todos los ajustes enumerados anteriormente, la nueva versión de Gutenberg ofrece una interfaz intuitiva para gestionar los ajustes individuales de los bloques. Sea cual sea el bloque que selecciones, los ajustes se muestran en la parte derecha del editor.

4. Tablas

Adding table in Gutenberg

Añadir tablas a tu página es más sencillo que antes. Basta con añadir un bloque Tabla, configurar el número de filas y columnas que desee y su tabla se incluirá en la página sin más.

5. Botones

Algo que ha faltado en el editor clásico, y que ahora forma parte de Gutenberg, es la opción de añadir un botón. Con el bloque Botón, ahora puedes añadir fácilmente un botón en cualquier lugar de tu sitio web. También podrás editar su texto e incluir un enlace a través de la configuración del botón.

6. Soporte de anclaje

Gutenberg HTML anchor

Otra nueva característica de Gutenberg es la posibilidad de añadir un ancla HTML. Esto es especialmente útil cuando tienes un contenido largo y quieres hacer referencia a una parte específica del contenido.

Simplemente incluya un ancla HTML y navegue dentro de su contenido. De este modo, no es necesario desplazarse hasta el contenido al que se hace referencia.

7. Soporte de ancho completo

¿Quieres que tu contenido ocupe todo el ancho de la página? Ahora es posible con el editor de páginas Gutenberg. Tienes la flexibilidad de crear contenido de ancho completo siempre que quieras.

Características de Beaver Builder

1. Editor de arrastrar y soltar

Beaver Builder es un editor de arrastrar y soltar. Puedes gestionar visualmente tu página desplazándote por los distintos elementos (también llamados módulos), incluidas las filas y columnas.

Gracias a la función de arrastrar y soltar, podrá hacerse una idea exacta del aspecto de su página antes de publicarla.

2. Plantillas

Beaver builder templates

Otra característica de Beaver Builder son las plantillas de página. ¿Sabes esas veces que creas una página y quieres reutilizarla? Con un constructor de páginas, puedes guardar una página entera como plantilla y reutilizarla más adelante.

Además, Beaver Builder también incluye plantillas para otras páginas de su sitio web, como quiénes somos, contacto, páginas de destino y otras.

3. Personalización

Además de personalizar cada elemento de su página web, Beaver Builder también le permite añadir CSS y Javascript personalizados a nivel de página. De este modo, no es necesario cambiar todo el sitio web y personalizar sólo las páginas que desee.

4. Vista receptiva

Beaver builder responsive view

Gestionar el aspecto de sus páginas en el dispositivo móvil no podría ser más sencillo. Con la función de vista adaptable que tiene Beaver Builder, puede cambiar fácilmente entre los tamaños de los dispositivos y personalizar sus páginas en consecuencia.

¿Quieres ocultar un elemento específico en el móvil y mostrarlo sólo en el escritorio? Beaver Builder te lo pone muy fácil.

5. Guardar y reutilizar módulos

Al igual que para guardar una plantilla completa, también tienes la opción de guardar módulos. Tus módulos pueden incluir una fila, columnas, texto, imágenes, CTA y más. Así que cuando tienes este módulo guardado como global, puedes reutilizarlos en cualquier parte de tu sitio web.

Y lo mejor de usar un módulo global es que usted puede hacer los cambios en el módulo, y se refleja a través de su sitio web. Esto ayuda principalmente cuando se tiene un CTA o un pie de página que desea utilizar varias veces a través de su sitio.

Ya que estamos en este tema, si está buscando módulos adicionales que le ayuden a crear sitios web fantásticos, consulte nuestra sección Ultimate Addons for Beaver Builder.

Disponemos de módulos de cuenta atrás, cajas giratorias, carrusel de imágenes, barra de progreso, clasificación por estrellas, índice y mucho más.

Gutenberg frente a Beaver Builder: principales diferencias

A continuación se enumeran algunas de las principales diferencias entre Gutenberg y Beaver Builder.

Arrastrar y soltar

Gutenberg no es el típico constructor de páginas de arrastrar y soltar. Al menos, no cuando estamos creando este artículo. Aunque puedes añadir bloques y moverlos hacia arriba o hacia abajo, crear diseños complejos podría ser todo un reto con el editor de bloques.

Beaver Builder, por otro lado, es un típico constructor de páginas de arrastrar y soltar. Seleccione un bloque o widget de su elección, arrástrelos y suéltelos fácilmente, cree diseños complejos y haga mucho más usando su constructor de páginas.

Bloques y widgets

El editor de bloques Gutenberg viene con un número decente de bloques. La mayoría de los bloques de uso común que usted requeriría para crear un sitio web están cubiertos. También tiene la opción de guardar y reutilizar los bloques en otras páginas.

Beaver Builder viene con aún más bloques, widgets y módulos. Mientras que la versión premium viene con mucho más, la versión lite del constructor de páginas también viene con más bloques y widgets que el editor Gutenberg.

¿Quieres guardar bloques, filas o una plantilla entera para reutilizarla más tarde? Es totalmente posible con este constructor de páginas.

Ya que estamos con el tema de los bloques, si quieres añadir algunos bloques fantásticos a tu editor de bloques, considera descargar nuestro Ultim

ate Addons for Gutenberg (UAG).

Con más de 25 bloques, podrás crear sitios web impresionantes sin esfuerzo. Y lo mejor es que UAG es gratuito.

Formato

Cada bloque que añades en el editor de bloques de WordPress tiene sus propias opciones de formato. Sin embargo, estarás de acuerdo en que las opciones son limitadas. Si quieres añadir estilos y formatos adicionales, tendrás que añadir CSS personalizado.

Beaver Builder tiene muchas más opciones de estilo. Desde la altura de línea y el espaciado entre caracteres hasta el uso de degradados, fuentes-iconos y el cambio de los colores de fondo de los bloques, hay muchas más cosas que puedes hacer con esta herramienta.

Diseño de página

Los diseños que se crean con los bloques de Gutenberg son bastante sencillos. Permiten crear diseños sencillos y eficaces con las opciones de columnas, tablas y ancho completo.

También en este caso podría verse limitado a la hora de crear un diseño más complejo.

Beaver Builder le ofrece esa flexibilidad adicional. Además de añadir el contenido de la forma que desee, puede cambiar la disposición para adaptarla a su diseño.

¿Quieres añadir texto superpuesto en un elemento concreto? ¿Quieres más opciones de diseño para tus widgets y bloques? Todo esto y mucho más es posible con Beaver Builder.

Los creadores de páginas también te permiten modificar el estilo del tema. De este modo, puedes crear tus propios diseños personalizados, siempre que sepas lo que estás haciendo.

Gutenberg vs. Beaver Builder: Experiencia de edición en directo

Gutenberg no ofrece el mismo nivel de experiencia de edición en vivo que Beaver Builder.

Aunque Gutenberg lo hace mucho mejor que el editor clásico, no se acerca a la experiencia de edición en vivo que ofrecen los constructores de páginas.

Cuando creas o editas una página (o entrada) utilizando el editor de bloques, no puedes ver el aspecto real de tu página.

El editor Gutenberg hace todo lo posible para mostrar el aspecto de tu contenido cuando lo previsualizas. Para ver cómo queda exactamente, tendrás que previsualizar o publicar tu página.

Cuando crea o edita una página utilizando Beaver Builder, obtiene una vista previa exacta de su página. Es como editar el sitio en vivo y ver cómo se ve antes de publicar.

Gutenberg vs. Beaver Builder: Características Responsive

El tráfico desde dispositivos móviles va en aumento. Informes sugieren que en el primer trimestre de 2021 el 54,8% del tráfico mundial procedió de dispositivos móviles.

Google potencia los sitios web que son responsive y que ofrecen una gran experiencia de usuario a los usuarios móviles. Todo esto es una clara indicación de que tienes que asegurarte de que tu sitio web está optimizado para móviles.

Cuando se trata de construir sitios web responsivos para móviles, los constructores de páginas lo hacen mucho mejor que Gutenberg. Y esto tiene mucho que ver con la edición en vivo que acabamos de ver.

Con Beaver Builder, puede cambiar fácilmente entre los distintos tamaños de pantalla y editar su sitio web para que se adapte perfectamente a todos los dispositivos.

¿Quieres añadir un espaciado de texto adicional o un alto de línea? ¿Quieres reducir el tamaño del texto en dispositivos móviles? ¿Quieres mostrar un elemento sólo en ordenadores de sobremesa y ocultarlo en dispositivos móviles? Todo esto es posible con Beaver Builder.

En su forma actual, lograr esto con Gutenberg puede ser un desafío y gran parte de la capacidad de respuesta vendría del tema de WordPress que utilizaste. Por eso preferimos los creadores de páginas cuando se trata de crear sitios web adaptativos.

A menos que utilice Astra por supuesto, ¡que responde fuera de la caja!

Gutenberg vs. Beaver Builder: Funciones avanzadas

El Beaver Builder rinde mucho más cuando se trata de funciones avanzadas.

Incluso si utilizara la versión lite de Beaver Builder, seguiría teniendo muchas más opciones que la versión actual del editor de bloques.

Por ejemplo, los efectos de fondo.

He aquí un ejemplo de borde inclinado aplicado a los bordes superior e inferior utilizando Beaver Builder.

Beaver builder slanted edge

Aquí hay otro ejemplo de una onda superior blanca aplicada al borde superior.

Beaver builder top wave

¿Quieres efectos adicionales como el paralaje de fondo, el paralaje del ratón o incluso un efecto Ken Burns (similar a un acercamiento y alejamiento con una velocidad de transición predefinida)? Pruébalo con tu creador de páginas favorito.

¿Quieres añadir márgenes y relleno a tu texto? Beaver Builder te lo pone muy fácil.

Del mismo modo, tienes varias funciones avanzadas cuando usas Beaver Builder. Algo que te perderías al usar el editor de bloques Gutenberg.

Gutenberg vs. Beaver Builder: Impacto en la velocidad de la página

La velocidad de la página siempre ha sido un factor crítico para Google. Dado que la experiencia del usuario es tan importante, es imprescindible asegurarse de que la página se carga rápidamente.

Entonces, en lo que respecta a la velocidad de la página, ¿cuál de los dos carga más rápido? ¿Gutenberg o Beaver Builder?

La forma más sencilla de probarlo es creando dos páginas idénticas, una con Gutenberg y otra con Beaver Builder.

A continuación, utilice herramientas como Google PageSpeed Insights o GT Metrix. Esto le da el tiempo exacto que tarda en cargar una página.

Hemos realizado varias pruebas y hemos comprobado que las páginas creadas con Gutenberg son más rápidas que las creadas con Beaver Builder.

Los resultados están aquí para que los evalúes.

Aquí están los resultados de la prueba ejecutados en una página creada usando Gutenberg y nuestro Starter Templates.

Gutenberg template load time

Un tiempo de carga de 2,5 segundos.

Realizamos la misma prueba, esta vez en la página creada utilizando Beaver Builder y la misma Plantilla de inicio.

Beaver builder template load time

Un tiempo de carga de 4,3 segundos.

El resultado es bastante sencillo. Las páginas creadas con Gutenberg se cargan más rápido.

Las páginas creadas con Gutenberg reciben menos peticiones del navegador, tienen un tamaño de página menor, menos archivos como CSS y JS que cargar y, en general, se cargan más rápido.

Esto también es válido para tiendas online creadas con WooCommerce.

Gutenberg vs. Beaver Builder: Precios

El precio es una de las diferencias significativas entre ambos.

Gutenberg viene empaquetado con WordPress y su uso es completamente gratuito. La mayoría de los constructores de páginas vienen con una versión lite que también es gratuita.

Sin embargo, pronto descubrirás que las mejores prestaciones y funcionalidades están detrás de un plan de pago. Y esto no sale barato.

Beaver Builder viene con un plan estándar de $99 para el primer año y llega hasta $399 al año para el plan de agencia. Aunque hay un descuento 40% en las renovaciones, se trata de un coste anual continuo que tendrás que tener en cuenta.

Beaver builder plans

Si no renueva su licencia, podría perderse esas actualizaciones críticas y, en algunos casos, acabar con un sitio roto.

Cómo construir una página con Gutenberg

En esta sección, crearemos una página sencilla desde cero utilizando el editor de bloques de Gutenberg. Asumimos que tienes el Astra y Spectra instalados en su instalación de WordPress.

Paso 1: Crear una nueva página

Vamos a crear una sencilla página Acerca de nosotros.

Los elementos típicos que se incluyen en una página de presentación son la imagen principal, un texto sobre nosotros, una instantánea de sus servicios, equipo, testimonios y, probablemente, una llamada a la acción.

Visite Páginas > Añadir nueva.

Llamaremos a nuestra página 'Mi nuevo Sobre nosotros(¡Eso es ser único!)

New page with Gutenberg

Paso 2: Añadir bloques

En el siguiente paso, tenemos que añadir bloques a nuestra página, como el bloque de encabezado, el bloque de imagen, etc. Haz clic en el icono del signo más de la parte superior y selecciona el bloque que quieras.

Teniendo en cuenta que tenemos que empezar con la imagen héroe, vamos a buscar un bloque de imagen.

Gutenberg editor layout

La imagen principal es aquella que ocupa un espacio considerable por encima del pliegue. Considera usar una imagen de al menos 1200px de ancho.

¿Quieres añadir texto sobre la imagen? Haz clic en el icono 'Añadir texto sobre la imagencomo se muestra en el paso 2 anterior. Estas opciones sólo aparecen cuando has seleccionado la imagen.

Si quieres editar la imagen, utiliza los ajustes que aparecen a la derecha.

Una vez hecho esto, ya tienes la imagen principal lista para tu página "Acerca de". Repite el mismo proceso para los otros bloques que quieras añadir a tu página.

Cuando haya terminado de añadir todos los bloques y contenidos necesarios, publique su página para ver cómo queda.

Paso 3: Utilizar Starter Templates

Los pasos anteriores funcionan bien cuando quieres crear una página desde cero. Además, es la mejor manera de saber cómo crear una página cuando estás empezando con WordPress y Gutenberg.

Si quieres dar un empujón a tu página web, te recomendamos que utilices uno de nuestros UAG Starter Templates.

UAG templates button in gutenberg editor

Haga clic en el botón Plantillas UAG botón.

Encontrará una serie de plantillas diseñadas profesionalmente que podrá importar y utilizar fácilmente para lanzar su sitio web.

UAG Templates interface

Como estamos creando una sola página, busque Acerca de en el campo de búsqueda.

Aparecerán varias plantillas específicas para la página "Acerca de". Seleccione una que se ajuste a sus necesidades y haga clic en Importar plantilla "Acerca de.

Ahora dispondrá de una página "Acerca de" completamente preconstruida y lista para ser personalizada.

Y en caso de que desee crear una página de principio a fin sin utilizar la función Starter Templates pero desea una opción más sencilla que las que hemos cubierto en los pasos 1 y 2, haga clic en el botón Patrones en la parte superior.

UAG block patterns

Verás que hay varios patrones listos para importar.

Los patrones de bloques son plantillas listas para usar que son similares a sus Starter Templates. La única diferencia es que, mientras que los Starter Templates son una página o sitio web completo, los patrones de bloques son plantillas para secciones individuales de una página.

Por ejemplo, si desea añadir un Sección FAQo una sección de testimonios en su página web, puede seleccionar un bloque preconstruido de las categorías mencionadas a la izquierda.

En nuestro caso, seleccione la opción Acerca de y siga añadiendo sus patrones de bloques, como equipo, testimonios, servicios, productos, llamada a la acción y otros.

Los patrones de bloques son similares a los bloques que añadió anteriormente. Sólo que esta vez, viene con un montón de bloques dentro de un solo patrón.

Importe el patrón de su elección, cree su página y haga clic en Publique.

¡Y así de sencillo es crear una página con Gutenberg!

Cómo crear una página con Beaver Builder

A continuación te explicamos cómo crear una página con Beaver Builder.

Suponemos que tiene instalado Beaver Builder.

También puede instalar nuestro Starter Templatessi desea utilizar nuestro plantillas de diseño profesional para Beaver Builder y empiece a diseñar su sitio web.

Paso 1: Crear una nueva página

Visite Páginas > Añadir nueva. Y ponle nombre a tu página.

launch beaver builder builder in gutenberg

Paso 2: Iniciar Beaver Builder

A continuación, haga clic en 'Lanzamiento Beaver Builder'.

El editor visual de Beaver Builder abre tu página.

Beaver builder visual editor

Verá una lista de opciones en la parte derecha de la página. Estas incluyen tus módulos, filas y plantillas. Usando esto, puedes añadir cualquier módulo que quieras en la página.

Por ejemplo, si desea añadir una imagen, arrastre y suelte el icono Foto módulo.

Beaver builder photo module

A continuación, selecciona la imagen y añádela a tu página. Del mismo modo, puedes añadir cualquier elemento que desees.

Para añadir una fila con columnas, pulse Filas y se le ofrecen varias opciones para elegir.

Beaver builder rows

Una vez que añada una combinación de filas y columnas, siga adelante e incluya los módulos necesarios para crear su página.

¿Quieres empezar a diseñar tu página con una plantilla profesional? Haz clic en Plantillas.

Beaver builder templates

Puede seleccionar una plantilla en función del tipo de página que desee crear y, a continuación, editarla para adaptarla a sus necesidades.

Una vez que haya terminado de editar y crear su página, haga clic en Hecho en la parte superior.

Paso 3: Utilizar Starter Templates

Al igual que usamos el Starter Templates mientras crear páginas cong Gutenberg, tienes algunas plantillas ya preparadas que puedes aprovechar también con el constructor de páginas Beaver Builder.

Haga clic en Starter Templates para empezar.

Starter templates button

A continuación, seleccione una de las plantillas diseñadas por profesionales.

Starter templates pages

Puede importar una demostración de un sitio web completo o seleccionar una página individual que le guste.

Beaver builder heading tag

Para editar cualquier módulo, simplemente haga clic en él y se abrirá la ventana de configuración. Realice los cambios y haga clic en Guardar.

Una vez que haya terminado con todas sus ediciones, haga clic en Hecho y Publique tu página.

Bastante sencillo, ¿verdad?

Ahora que hemos creado una página usando Gutenberg y Beaver Builder, es hora de decidir cuál funciona mejor para ti.

Antes de eso, he aquí la buena noticia. Puedes elegir las dos cosas.

Gracias a las sencillas integraciones entre los constructores de páginas y Gutenberg, puedes decidir cuándo usar el editor de bloques o tu constructor de páginas favorito.

Gutenberg es mejor para...

Gutenberg es una excelente opción si usted:

  • Quieres un diseño sencillo para crear entradas que carguen rápido
  • Desea crear contenidos que combinen con su tema
  • Quieres un editor de páginas más fácil de aprender

Beaver Builder es mejor para...

Los creadores de páginas son ideales para ti:

  • Desea crear diseños de página complejos con un aspecto espectacular
  • Quieres más opciones de diseño para dar estilo a tus páginas
  • Quieres más control sobre la creación de diseños adaptables
  • Quieres más control sobre la personalización de los distintos elementos de tu página

Gutenberg frente a Beaver Builder: el veredicto

En esta eterna batalla de Gutenberg contra... Beaver Builderestá claro que ninguno sustituirá al otro.

En su forma actual, Gutenberg no te da la flexibilidad que ofrecen los creadores de páginas. Los creadores de páginas aportan mucho más, ya sea para crear páginas impresionantes, conseguir una vista responsive perfecta o añadir elementos de diseño fantásticos a las filas y columnas.

Dicho esto, el nuevo editor de bloques de Gutenberg es una mejora significativa con respecto al editor clásico.

La adición de bloques y la facilidad con la que puedes editar la configuración de tus bloques es una mejora notable con respecto a antes. Además, gracias a su código simplificado, las páginas y entradas creadas con Gutenberg se cargan más rápido que las creadas con Beaver Builder.

Sin embargo, Gutenberg no está a la altura de los constructores de páginas cuando se trata de crear páginas y diseños más avanzados. Al menos por ahora.

Para ello, será mejor que utilices tus creadores de páginas favoritos como Elementor, Beaver Builder, Brizy, y otros.

Recursos relacionados:

Esperamos que este artículo te haya ayudado a decidir qué camino tomar. Va a ser el editor de bloques Gutenberg o el constructor de páginas? Háznoslo saber en los comentarios si utilizas uno de ellos o ambos.

Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.

1 comentario
Deja un comentario

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

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

La descarga está a un solo clic

Download Checklist

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio