Cómo crear diseños personalizados de WordPress con Beaver Builder

¿Quieres aprender a crear diseños de página personalizados en WordPress? Beaver Builder le permite crear sus propios diseños de página sin escribir ningún código. En este artículo, revisaremos Beaver Builder y le mostraremos cómo crear diseños de página personalizados en WordPress con Beaver Builder.

Creación de diseños de página personalizados en WordPress con Beaver Builder

Por qué y cuándo necesita diseños de página personalizados

Muchos temas premium de WordPress vienen con diseños de página listos para usar para diferentes secciones de un sitio web. Sin embargo, a veces un diseño integrado puede no satisfacer sus necesidades.

Puede crear plantillas de página personalizadas en WordPress creando un tema secundario y luego agregando sus propias plantillas de página. Pero necesitará algunos conocimientos de PHP, HTML y CSS para que funcione.

Aquí es donde entra Beaver Builder. Es un complemento de creación de páginas de arrastrar y soltar para WordPress. Le ayuda a crear sus propios diseños de página personalizados sin escribir ningún código.

Revisión del constructor de castores

Beaver Builder es muy fácil de usar y amigable para principiantes. Al mismo tiempo, está repleto de funciones increíbles para crear páginas de aspecto profesional.

Funciona con todos los temas de WordPress y tiene toneladas de módulos que puedes arrastrar y soltar en tu página. Puede crear cualquier tipo de diseño que desee y configurarlo tal como lo imaginó.

En esta revisión de Beaver Builder, le mostraremos cómo usar Beaver Builder para crear diseños de página personalizados en WordPress.

Empecemos.

Configuración del complemento Beaver Builder

Primero debe comprar el complemento Beaver Builder. Es un complemento pago, con precios que comienzan desde $ 99 para sitios ilimitados.

Lo siguiente que debe hacer es instalar y activar el complemento Beaver Builder. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Configuración » Creador de páginas para ingresar su clave de licencia.

Ingresando su clave de licencia de Beaver Builder

Después de ingresar su clave de licencia, ahora está listo para crear hermosos diseños de página.

Creación de su primer diseño de página personalizado con Beaver Builder

Simplemente cree una nueva página en WordPress visitando Páginas » Agregar nuevo. Notarás una nueva pestaña de Page Builder en el editor de WordPress.

Agregar nueva página con el creador de páginas

Haga clic en la pestaña ‘Generador de páginas’ para iniciar Beaver Builder.

Si es la primera vez que usa Beaver Builder, verá una ventana emergente de bienvenida que le ofrece una visita guiada.

En este momento, puede hacer clic en el botón No, gracias para omitir el recorrido. Ya que lo guiaremos a través de diferentes funciones en esta guía, por lo que no necesita el recorrido.

Después de eso, debe hacer clic en el botón Plantillas botón en el menú superior.

Elegir una plantilla para el diseño de su página en Beaver Builder

Beaver Builder viene con algunas plantillas diseñadas profesionalmente para que pueda comenzar de inmediato.

No te preocupes, puedes personalizar la plantilla tanto como quieras. Es solo una forma rápida de comenzar con un diseño.

Elija una plantilla para su diseño de página

Cuando seleccione un diseño, Beaver Builder lo cargará en la ventana de vista previa. Lleve el mouse a un elemento y Beaver Builder lo resaltará.

Simplemente puede hacer clic en el icono de llave inglesa en cualquier elemento resaltado para editarlo.

Edición de diseño en el complemento Beaver Builder

Beaver Builder mostrará una ventana emergente con diferentes configuraciones que puede editar. Puede cambiar el texto, el color, el fondo, la fuente, el relleno, el margen, etc.

También puede simplemente hacer clic en un elemento en la vista previa en vivo y arrastrarlo y soltarlo para moverlo por la página.

Los diseños de Beaver Builder se basan en filas. Puede arrastrar y soltar para reorganizar las filas. También puede eliminar o agregar una nueva fila.

Simplemente haga clic en el Diseños de fila menú y luego seleccione el número de columnas que desea en su fila.

Agregar una fila a su diseño de página en Beaver Builder

Beaver Builder agregará la fila a la vista previa en vivo en su sitio.

Puede agregar artículos a su fila usando los módulos y widgets básicos o avanzados. Estos módulos le permiten agregar los elementos más utilizados, como botones, encabezados, texto, imágenes, presentaciones de diapositivas, audio, video, etc.

Simplemente seleccione un elemento y arrástrelo a la fila que acaba de agregar. Haga clic en un elemento para editar sus propiedades.

También puede guardar una fila o un módulo para reutilizarlos más adelante en otras páginas. Haga clic en Guardar como mientras edita una fila o un módulo.

Guardar un módulo para reutilizarlo más tarde

Haga clic en el botón Listo cuando haya terminado de editar su página. Beaver Builder mostrará una ventana emergente con botones para publicar o guardar su página como borrador.

Guarde su diseño de página en Beaver Builder

También puede reutilizar un diseño de página completo para otras páginas en su sitio de WordPress. Simplemente abra la página con Page Builder y luego haga clic en el botón Herramientas en la barra superior.

Beaver Builder le mostrará una ventana emergente. Puede guardar la página como plantilla o crear rápidamente una página duplicada con el mismo diseño.

Guardar diseño como plantilla

Gestión de plantillas de diseño de página en Beaver Builder

Cada licencia de Beaver Builder le da derecho a usarla en sitios web ilimitados. Pero, ¿cómo mueve las plantillas de su página de un sitio de WordPress a otro?

Beaver Builder almacena las plantillas creadas por los usuarios en un tipo de publicación personalizada llamada plantillas. Está oculto de forma predeterminada, pero puede hacerlo visible yendo a Configuración » Creador de páginas y haciendo clic en la pestaña Plantillas.

Simplemente marque la casilla junto a la opción ‘Habilitar administrador de plantillas’ y haga clic en el botón Guardar configuración de plantilla.

Mostrar administrador de plantilla

Notará que aparecerá un nuevo elemento de menú llamado Plantillas en su barra de administración de WordPress. Todos los diseños de página que guarde como plantilla aparecerán en esa página.

Dado que es un tipo de publicación personalizada, puede exportar fácilmente sus plantillas de Beaver Builder utilizando la función de exportación integrada en WordPress.

Visitar Herramientas » Exportar página y seleccione Plantillas. Haga clic en el botón ‘Descargar archivo de exportación’ y WordPress le enviará un archivo XML para que lo descargue.

Exportación de plantillas

Ahora inicie sesión en el sitio de WordPress donde desea importar las plantillas. Visitar Ajustes » Importar página y haga clic en WordPress.

Se le pedirá que descargue e instale el complemento de importación de WordPress. Después de lo cual podrá simplemente cargar su archivo xml de plantillas e importarlo.

Eso es todo, esperamos que este artículo lo haya ayudado a crear diseños de página personalizados en WordPress usando Beaver Builder. También puede consultar nuestra guía sobre cómo ocultar elementos innecesarios del administrador de WordPress con Adminimize.

.

Deja un comentario