Guía y revisión del plugin de Beaver Builder WordPress

Los creadores de páginas han sido el tema de conversación de la comunidad de WordPress por un tiempo. Estas herramientas han sido populares durante mucho tiempo, pero con la introducción del nuevo Editor de bloques, muchos se han preguntado cuán relevantes siguen siendo.

Si bien el Editor de bloques es una nueva caracter√≠stica intrigante, sin embargo, nada supera a los complementos del generador de p√°ginas a la hora de dise√Īar p√°ginas y publicaciones personalizadas. El plugin Beaver Builder WordPress es un ejemplo perfecto de los beneficios que ofrece este tipo de herramienta, ya que es f√°cil de usar y sorprendentemente potente.

En esta publicación, veremos de cerca a Beaver Builder. Analizaremos sus características y precios clave, luego le mostraremos cómo funciona en acción, para que pueda decidir por sí mismo si esta es la solución adecuada para crear páginas para su sitio web.

¡Pasemos directamente a nuestra nueva y mejorada guía actualizada para el creador de páginas Beaver Build WordPress!

Por qué podrías necesitar un generador de páginas de WordPress

A menos que sea nuevo en la plataforma, probablemente esté familiarizado con el editor clásico de WordPress:

El editor cl√°sico de WordPress

Aunque funcional, este siempre fue un sistema b√°sico. Casi todo su contenido se agreg√≥ a un solo campo, incluido texto, medios, etc. La creaci√≥n de dise√Īos √ļnicos y la adici√≥n de caracter√≠sticas interesantes era posible, pero a menudo requer√≠a conocimientos de codificaci√≥n y / o algunos complementos adicionales.

Recientemente, sin embargo, los desarrolladores de WordPress publicaron una nueva versión del editor ahora con tecnología de Gutenberg:

WordPress Gutenberg Editor

Este cambio tard√≥ mucho en llegar, pero tampoco es nada particularmente nuevo. El Editor de bloques es una versi√≥n simplificada de un creador de p√°ginas, una soluci√≥n que ha sido popular entre los usuarios de WordPress durante alg√ļn tiempo.

Si bien cada creador de p√°ginas de WordPress es diferente, en un nivel b√°sico casi todos se basan en el mismo concepto fundamental. Le proporcionan una selecci√≥n de elementos preconstruidos y le permiten crear contenido a partir de esas piezas. El objetivo es hacer que sea m√°s f√°cil e intuitivo crear contenido con dise√Īos y funciones √ļnicos, incluso si no tiene experiencia en dise√Īo o codificaci√≥n.

Sin embargo, vale la pena se√Īalar que el Editor de bloques es una caracter√≠stica muy limitada. Le permite dise√Īar publicaciones y p√°ginas de una manera m√°s visual, pero ofrece una peque√Īa biblioteca de bloques y poco soporte para dise√Īos complejos. Es por eso que todav√≠a vale la pena mirar las otras opciones de creaci√≥n de p√°ginas, como el complemento que discutiremos en el resto de esta publicaci√≥n.

Fundamentos de Beaver Builder

Beaver Builder para WordPress

Beaver Builder es uno de los complementos de creación de páginas más populares que existen, y por una buena razón. Es fácil de aprender para los principiantes, pero viene con una amplia gama de opciones para jugar. En un nivel fundamental, es un sistema de arrastrar y soltar para crear publicaciones y páginas, como cualquier otro creador de páginas. Sin embargo, también ofrece muchas funcionalidades adicionales.

Algunas de las características clave de este complemento incluyen:

  • Una gran biblioteca de "m√≥dulos" de contenido, que van desde opciones b√°sicas (como m√≥dulos de texto e imagen) hasta funcionalidades m√°s avanzadas (Call To Action, mapas, m√≥dulos de galer√≠a, etc.).
  • Una interfaz de edici√≥n personalizada que le permite crear p√°ginas, publicaciones y tipos de publicaciones personalizadas visualmente, y ver sus cambios de inmediato.
  • La capacidad de crear dise√Īos complejos de varias columnas y ajustar tama√Īos, espacios y m√°s.
  • Secciones predefinidas y plantillas de p√°gina que le permiten iniciar el proceso de dise√Īo, que puede modificar seg√ļn sea necesario.
  • La opci√≥n de crear y guardar sus propias plantillas para su uso posterior.
  • Opciones para agregar HTML personalizado y sus propias clases de CSS, para usuarios m√°s avanzados.

Por supuesto, toda esta funcionalidad tiene un costo. Si bien hay una versi√≥n Beaver Builder Lite disponible de forma gratuita, ofrece solo unos pocos m√≥dulos b√°sicos y no incluye muchas caracter√≠sticas principales, como plantillas y opciones de importaci√≥n / exportaci√≥n. Sin embargo, la versi√≥n lite es √ļtil para realizar una prueba de este generador de p√°ginas y ver si le gusta c√≥mo funciona.

Si planea utilizar Beaver Builder en serio, querr√° obtener una licencia premium para obtener acceso al paquete completo. Estos comienzan en $ 99 para su uso en sitios web ilimitados y un a√Īo de soporte:

Precios de Beaver Builder

Esta herramienta en particular hace requieren una inversión inicial. Sin embargo, el costo inicial puede pagarse en tiempo ahorrado y en un sitio web más efectivo a largo plazo, por lo que no es un mal negocio si está dentro de su presupuesto.

Cómo comenzar con Beaver Builder

Cuando no sabe si elegir o no un complemento nuevo para su sitio web, lo mejor que puede hacer es aprender todo lo que pueda sobre él. Cuando se trata de constructores de páginas, esto incluye cómo se ven, cómo funcionan y qué opciones ofrecen.

Con esto en mente, veamos cómo es elegir Beaver Builder y comenzar a usarlo para crear publicaciones y páginas. Naturalmente, lo primero que deberá hacer es instalar y activar el complemento.

Además, querrás activar tu clave de licencia si compraste la versión premium (que usaremos en este tutorial). Entonces, puedes ir directamente al trabajo.

Paso 1: Acceda al Editor Beaver Builder

Cuando instales el complemento, ver√°s una nueva pesta√Īa Beaver Builder en tu panel de control. Aqu√≠ es donde se guardar√° su contenido personalizado, por ejemplo, si crea sus propias plantillas √ļnicas.

También puede crear contenido con el generador de páginas yendo a Beaver Builder> Agregar nuevo. Alternativamente, simplemente puede ir a Páginas> Agregar nuevo (o el equivalente para publicaciones y tipos de publicaciones personalizadas). Verás una nueva opción:

Lanzamiento de Beaver Builder

Esto significa que puede crear su contenido en el editor de WordPress predeterminado o en el generador de páginas. Vamos a golpear el Lanzar Beaver Builder botón:

Editor de p√°ginas Beaver Builder

Como puede ver, accederá a una interfaz completamente nueva. Aquí, puede crear contenido y ver exactamente cómo se verá en la página.

Paso 2: Seleccione una plantilla de inicio

Vale la pena se√Īalar que no tiene que usar plantillas si no lo desea. Puede crear sus p√°ginas y publicaciones completamente desde cero, agregando los m√≥dulos que desee. Sin embargo, la forma m√°s f√°cil de aprender es comenzando con una plantilla, que es lo que demostraremos aqu√≠.

En el men√ļ en el lado derecho del editor, seleccione el Plantillas pesta√Īa en la parte superior, y ver√° muchas opciones. Simplemente haga clic en una plantilla o arr√°strela a la p√°gina, y ver√° la versi√≥n completa:

Plantillas Beaver Builder

Esto le proporciona un dise√Īo inicial, junto con texto e im√°genes de marcador de posici√≥n. Afortunadamente, cada elemento aqu√≠ puede ser reemplazado y modificado a voluntad, para que pueda crear algo √ļnico para su sitio web.

Paso 3: Editar módulos individuales

Cada elemento individual en el editor de Beaver Builder es un m√≥dulo aut√≥nomo. Para ver a qu√© nos referimos, puede desplazarse sobre un texto, una imagen o una funci√≥n en su plantilla inicial. Ver√° el m√≥dulo delineado en azul, y si hace clic en √©l, ver√° un nuevo men√ļ:

Configuración del módulo Beaver Builder

Este es el cuadro de configuración para ese módulo. Contiene todas las opciones de personalización para el contenido seleccionado. Exactamente lo que incluye, por lo tanto, dependerá del tipo de contenido con el que esté trabajando.

Por ejemplo, el Foto El m√≥dulo le permite cambiar qu√© archivo se utiliza y agregar un t√≠tulo y / o enlace. Tambi√©n puede cambiar a Estilo pesta√Īa para modificar la alineaci√≥n, el borde y m√°s de la imagen:

Configuración de estilo de Beaver Builder

La mayor√≠a de los m√≥dulos tambi√©n cuentan con un Avanzado pesta√Īa, donde puede ajustar sus m√°rgenes, hacerla visible solo en ciertos tipos de dispositivos, agregar HTML personalizado, etc.

Configuración avanzada de Beaver Builder

Como puede ver, personalizar sus módulos Beaver Builder es muy sencillo. Se necesitará un poco de experiencia para familiarizarse con las opciones que ofrece cada tipo de módulo, pero una vez que lo haga, se encontrará agregando su propio contenido en muy poco tiempo.

Paso 4: Personaliza la organizaci√≥n y el dise√Īo de tu contenido

Adem√°s de realizar cambios en m√≥dulos individuales, tambi√©n puede personalizar su p√°gina como un todo. Una de las formas de hacerlo es agregando y eliminando m√≥dulos. Para agregar un m√≥dulo, simplemente seleccione uno del men√ļ principal del editor y arr√°strelo a su lugar en la p√°gina:

Módulo de formulario de contacto de Beaver Builder

Por otro lado, puede eliminar módulos presionando el X eso aparece cuando pasas el cursor sobre ellos. También puede arrastrar los módulos hacia arriba y hacia abajo o de lado a lado, para reorganizarlos a voluntad.

Adem√°s, puede cambiar el dise√Īo general de su p√°gina. Para ver un ejemplo de esto en acci√≥n, desplace el mouse sobre un m√≥dulo y presione Editar columna> Configuraci√≥n de columna:

Columnas de Beaver Builder

Aquí, puede encontrar opciones pertenecientes a todos los módulos en la columna particular. Puede modificar el color de fondo y el espaciado de la columna, por ejemplo, e incluso agregar un borde.

Ahora coloca el cursor sobre el fondo de la página y selecciona Configuración de fila en la esquina superior derecha:

Filas de Beaver Builder

Ver√° un men√ļ similar, pero esta vez las opciones se aplican a la fila de m√≥dulos correspondiente. Puede establecer la fila en ancho fijo o completo, personalizar colores y hacer muchos de los mismos cambios que tiene disponibles con columnas.

Finalmente, seleccione el men√ļ principal del editor nuevamente y navegue hasta Filas leng√ľeta:

Opciones de columna de Beaver Builder

Aqu√≠ es donde puede agregar nuevas filas y columnas a su p√°gina, lo que le permite cambiar su dise√Īo dram√°ticamente. Adem√°s, este es el primer lugar al que querr√° ir si est√° creando una p√°gina o publicaci√≥n desde cero. Primero puede determinar el dise√Īo de su contenido y luego agregar m√≥dulos donde desee.

Paso 5: expanda el conjunto de funciones del Creador de p√°ginas (opcional)

Vale la pena se√Īalar que hay muchas otras caracter√≠sticas y opciones en Beaver Builder: aqu√≠ solo hemos ara√Īado la superficie. Sin embargo, hemos visto las funciones clave que deber√° comprender para comenzar. Despu√©s, el enfoque pr√°ctico es la mejor manera de aprender las cuerdas.

Sin embargo, antes de concluir, debemos se√Īalar que hay algunas maneras en que puede obtener m√°s de este creador de p√°ginas en particular. Primero, hay un tema oficial de Beaver Builder, que se obtiene de forma gratuita con los dos niveles superiores de licencia:

Beaver Builder Framework Theme

Puede usar Beaver Builder con el tema que desee. Sin embargo, este est√° construido desde cero para funcionar junto con el generador de p√°ginas. Proporciona un marco b√°sico que puede configurar en muchos tipos y estilos diferentes de sitios web.

También hay un complemento opcional, el Beaver Themer:

Complemento Beaver Themer

Con este complemento adicional, tambi√©n puede utilizar el generador de p√°ginas de arrastrar y soltar de Beaver Builder en los encabezados y pies de p√°gina de su sitio, p√°ginas de archivo, 404 y p√°ginas de b√ļsqueda, y m√°s. Esto le permite dise√Īar casi todo su sitio web utilizando el mismo sistema.

Con un precio de $ 147, es posible que no se ajuste a todos los presupuestos, pero es una adici√≥n √ļtil para un sitio web que pretende monetizar o para desarrolladores y dise√Īadores que trabajan en varios sitios.

Elegir un creador de p√°ginas para su sitio web es un gran compromiso. Cambiar la forma en que crea y dise√Īa contenido en el futuro puede causar problemas de compatibilidad, por lo que es mejor comenzar con una herramienta que sabe que estar√° feliz de usar a largo plazo.

Afortunadamente, Beaver Builder es una opción sólida tanto para principiantes como para usuarios más avanzados. Además, es fácil comenzar como has visto anteriormente.

¬ŅAlguna vez has usado Beaver Builder y cu√°l fue tu experiencia? ¬°Comparte con nosotros en la secci√≥n de comentarios a continuaci√≥n!