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

Durante alg√ļn tiempo, los creadores de p√°ginas han sido objeto de conversaci√≥n para la comunidad de WordPress. 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 son.

El editor de bloques es una nueva caracter√≠stica fascinante, pero nada supera a los complementos del Creador de p√°ginas al dise√Īar p√°ginas y publicaciones personalizadas. El plugin Beaver Builder WordPress es un ejemplo perfecto de los beneficios de este tipo de herramienta, ya que es f√°cil de usar y sorprendentemente potente.

En esta publicación, echamos un vistazo más de cerca a Beaver Builder. Analizaremos las características y precios más importantes y luego le mostraremos cómo funciona en acción, para que pueda decidir por sí mismo si esta es la solución correcta para crear páginas para su sitio.

¡Pasemos directamente a nuestra guía nueva y mejorada para crear sitios Beaver Build WordPress!

¬ŅPor qu√© podr√≠as necesitar un generador de p√°ginas de WordPress?

A menos que sea nuevo en la plataforma, probablemente conozca el cl√°sico editor de WordPress:

El cl√°sico editor de WordPress

  

Aunque funcional, este siempre ha sido un sistema b√°sico. Casi todo el contenido se agreg√≥ a un solo campo, incluido el texto, los medios, etc. Fue posible crear dise√Īos √ļnicos y agregar caracter√≠sticas interesantes, pero a menudo requer√≠an habilidades de programaci√≥n y / o algunos complementos adicionales.

Sin embargo, los desarrolladores de WordPress lanzaron recientemente una nueva versión del editor, ahora compatible con Gutenberg:

WordPress Gutenberg Editor

Este cambio ha tardado en llegar, pero tampoco es algo particularmente nuevo. Block Editor 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 sitios de WordPress es diferente, casi todos en un nivel b√°sico se basan en el mismo concepto b√°sico. Le ofrecen una selecci√≥n de elementos previamente entrenados y le permiten crear contenido a partir de estas partes. El objetivo es hacer que el contenido con dise√Īos y caracter√≠sticas √ļnicos sea m√°s f√°cil e intuitivo, incluso si no tiene experiencia con el dise√Īo o la codificaci√≥n.

Sin embargo, vale la pena se√Īalar que el editor de bloques es una caracter√≠stica muy limitada. Puede usarlo para hacer publicaciones y p√°ginas m√°s visuales, pero ofrece una peque√Īa biblioteca de bloques y poco soporte para dise√Īos complejos. Debido a esto, 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.

Conceptos b√°sicos de Beaver Builder

Beaver Builder para WordPress

Beaver Builder es uno de los complementos de creación de páginas más populares, y por una buena razón. Es fácil para los principiantes aprender, pero ofrece una variedad de oportunidades para jugar. Básicamente, 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 características adicionales.

Algunas de las características principales de este complemento son:

  • Una gran biblioteca de m√≥dulos de contenido que abarca desde configuraciones b√°sicas (como m√≥dulos de texto e imagen) hasta funciones avanzadas (llamada a la acci√≥n, mapas, m√≥dulos de galer√≠a, etc.).
  • Una interfaz de edici√≥n personalizada que le permite crear visualmente p√°ginas, publicaciones y tipos de publicaciones personalizados 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 y plantillas de p√°gina predefinidas que puede usar para iniciar el proceso de dise√Īo que puede cambiar seg√ļn sea necesario.
  • La capacidad de crear y guardar sus propias plantillas para su uso posterior.
  • Opciones para agregar clases de HTML y CSS personalizadas a usuarios avanzados.

Por supuesto, toda esta funcionalidad tiene un costo. Hay una versi√≥n gratuita de Beaver Builder Lite, pero solo ofrece algunos m√≥dulos b√°sicos y no contiene muchas caracter√≠sticas importantes, como plantillas y opciones de importaci√≥n / exportaci√≥n. Sin embargo, la versi√≥n lite es √ļtil para probar este generador de p√°ginas y determinar si le gusta c√≥mo funciona.

Si desea utilizar Beaver Builder en serio, necesita una licencia premium para acceder al paquete completo. Estos comienzan en $ 99 para su uso en sitios ilimitados y un a√Īo de soporte:

Precios de Beaver Builder

Esta herramienta especial marcas Requiere una inversión inicial. Sin embargo, los costos iniciales se pueden ahorrar a tiempo y pagar a largo plazo en un sitio más eficiente. Por lo tanto, no es un mal negocio si está dentro de su presupuesto.

Comience con Beaver Builder

Si no sabe si elegir o no un nuevo complemento para su sitio, aprenda todo lo que pueda. Cuando se trata de creadores de páginas, esto incluye cómo se ven, cómo funcionan y qué opciones ofrecen.

Con eso en mente, veamos cómo es elegir Beaver Builder y usarlo para crear publicaciones y páginas. En primer lugar, debe instalar y activar el complemento.

También activará su clave de licencia si compró la versión premium (que usaremos en este tutorial). Entonces puedes ir directamente al trabajo.

pasos 1: Llame al editor de Beaver Builder

Cuando instale el complemento, aparecer√° una nueva pesta√Īa "Beaver Builder" en su panel de control. Su contenido personalizado se almacena aqu√≠, por ejemplo, cuando crea sus propias plantillas √ļnicas.

También puede crear contenido con el generador de páginas yendo a Beaver Builder> Agregar nuevoAlternativamente, puedes caminar Páginas> Agregar nuevo (o similar para publicaciones personalizadas y tipos de publicaciones). Verás una nueva oportunidad:

Beaver Builder lanzado

Esto significa que puede crear su contenido en el editor estándar de WordPress o en el generador de páginas. Encontrémonos con ellos Lanzar Beaver Builder botón:

Editor de p√°ginas Beaver Builder

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

pasos 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 desde cero y agregar los m√≥dulos que desee. Sin embargo, la forma m√°s f√°cil de aprender es comenzar con una plantilla, que demostraremos aqu√≠.

Seleccione la opci√≥n del men√ļ a la derecha del editor. plantillas Haga clic en la pesta√Īa de arriba y ver√° muchas opciones. Simplemente haga clic en una plantilla o arr√°strela a la p√°gina. Se muestra la versi√≥n completa:

Plantillas de constructor de castor

De esta forma, obtiene un dise√Īo inicial, as√≠ como im√°genes de texto y marcadores de posici√≥n. Afortunadamente, cada art√≠culo se puede reemplazar y cambiar aqu√≠ en cualquier momento para que pueda crear algo √ļnico para su sitio.

pasos 3: Editar módulos individuales

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

Configurar el módulo Beaver Builder

Este es el campo de configuración para este módulo. Contiene todas las opciones de personalización para el contenido seleccionado. Entonces, lo que contiene exactamente depende del tipo de contenido con el que trabaje.

Por ejemplo foto El m√≥dulo le permite cambiar qu√© archivo se utiliza y agregar un t√≠tulo y / o enlace. Tambi√©n puedes cambiar estilo Pesta√Īa para cambiar la orientaci√≥n, el margen y m√°s en la imagen:

Configuración de estilo de Beaver Builder

La mayor√≠a de los m√≥dulos tambi√©n tienen uno extendida La pesta√Īa donde puede ajustar sus m√°rgenes, hacerlos visibles solo en tipos de dispositivos espec√≠ficos, agregar HTML personalizado, etc.

Configuración avanzada de Beaver Builder

Como puede ver, es fácil personalizar sus módulos Beaver Builder. Se necesitará algo de experiencia para familiarizarse con la configuración de cada tipo de módulo. Una vez que haya hecho esto, agregará su propio contenido en muy poco tiempo.

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

No solo puede realizar cambios en m√≥dulos individuales, tambi√©n puede personalizar su p√°gina como un todo. Una forma de hacerlo es agregar y quitar m√≥dulos. Para agregar un m√≥dulo, simplemente seleccione uno del men√ļ de edici√≥n principal y arr√°strelo a su lugar en la p√°gina:

Módulo de formulación de contacto Beaver Builder

Por otro lado, puede eliminar módulos presionando el botón X. Esto se muestra cuando mueve el mouse sobre él. También puede arrastrar módulos hacia arriba y hacia abajo o de lado a lado para reorganizarlos a su gusto.

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

Columnas Beaver Builder

Aquí encontrará opciones para todos los módulos en la columna respectiva. Por ejemplo, puede cambiar el color de fondo y el espaciado de columnas e incluso agregar un marco.

Ahora mueva el puntero del mouse sobre la parte inferior de la p√°gina y seleccione Ajustes fila en la esquina superior derecha:

Filas de Beaver Builder

Ver√° un men√ļ similar, pero esta vez se aplica la configuraci√≥n de la fila del m√≥dulo correspondiente. Puede establecer la fila en ancho fijo o completo, ajustar los colores y hacer que muchos de los mismos cambios est√©n disponibles para las columnas.

Finalmente, seleccione el men√ļ de edici√≥n principal nuevamente y navegue hasta fila : pesta√Īa

Configuración de barra para Beaver Builder

Aqu√≠ puede agregar nuevas filas y columnas a su p√°gina y as√≠ cambiar dr√°sticamente su dise√Īo. Tambi√©n es el primer lugar al que desea ir al crear una p√°gina o publicaci√≥n desde cero. Primero puede dise√Īar su contenido y luego agregar m√≥dulos donde lo desee.

pasos 5: Expande la funcionalidad del Creador de p√°ginas (opcional).

Vale la pena se√Īalar que Beaver Builder tiene muchas otras caracter√≠sticas y opciones: acabamos de ara√Īar la superficie aqu√≠. Sin embargo, hemos visto las caracter√≠sticas clave que necesita comprender para comenzar. Entonces, el enfoque pr√°ctico es la mejor manera de aprender las cuerdas.

Sin embargo, antes de terminar, debemos tener en cuenta que hay algunas maneras en que puede sacar m√°s provecho de este creador de p√°ginas en particular. Primero, hay un tema oficial de Beaver Builder que est√° disponible de forma gratuita con los dos niveles de licencia superiores:

Tema de Beaver Builder Framework

Puede usar Beaver Builder con el tema que desee. Sin embargo, esto se creó desde cero para trabajar con el generador de páginas. Proporciona un marco básico que puede configurar para muchos tipos y estilos diferentes de sitios web.

También hay una adición opcional, Beaver Themer:

Complemento Beaver Themer

Con este complemento, tambi√©n puede usar el generador de p√°ginas de arrastrar y soltar de Beaver Builder para los encabezados y pies de p√°gina de su sitio, p√°ginas de archivo, 404 y p√°ginas de b√ļsqueda y m√°s. De esta manera, puede dise√Īar casi todo su sitio 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 a un sitio que se supone que debe hacer dinero, o para desarrolladores y dise√Īadores que trabajan en varios sitios.

Elegir un creador de sitios para su sitio es un gran compromiso. Cambiar la forma de crear y dise√Īar contenido en el futuro puede causar problemas de compatibilidad. Por lo tanto, es mejor comenzar con una herramienta que sabe que le encantar√° usar a largo plazo.

Afortunadamente, Beaver Builder es una gran opción tanto para principiantes como para usuarios avanzados. También es fácil comenzar, como viste arriba.

¬ŅAlguna vez has usado Beaver Builder y qu√© experiencia has tenido? ¬°Comparte con nosotros en la secci√≥n de comentarios a continuaci√≥n!