Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo crear disposiciones personalizadas en WordPress con Beaver Builder

Probablemente has buscado formas de hacer estructuras / disposiciones / diseño / plantillas personalizadas en WordPress. Pero las guías que encuentras son demasiado largas o requieren conocimientos de código. ¿Te suena familiar?

Si es así, creemos que deberías probar un maquetador de páginas como Beaver Builder. Muchos usuarios experimentados piensan que los maquetadores de páginas no hacen grandes diseños o ralentizan los sitios web. Pero en nuestra experiencia, herramientas como esta pueden realmente simplificar la forma de hacer sitios web, especialmente para los principiantes.

Para demostrarlo, le mostraremos cómo hacer una estructura / disposición / diseño / plantilla personalizada en WordPress usando Beaver Builder. Le enseñaremos cómo establecerlo, hacer su primera disposición personalizada y utilizar diseños ya hechos para ahorrar tiempo.

Creating custom page layouts in WordPress with Beaver Builder

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

Muchos temas premium de WordPress vienen con disposiciones de página listas para usar para diferentes secciones de un sitio web. Sin embargo, a veces, una estructura / disposición / diseño / plantilla no se ajusta a tus necesidades.

Puedes crear plantillas de página personalizadas en WordPress creando un tema hijo y luego añadiendo tus propias plantillas de página. Pero necesitarás algunos conocimientos de PHP, HTML y CSS para que eso funcione.

Aquí es donde entran en juego herramientas como Beaver Builder. Es un plugin editor de arrastrar y soltar para WordPress. Te ayuda a crear tu propia estructura / disposición / diseño / plantilla de página personalizada sin escribir ningún código.

Beaver Builder es muy fácil de usar y para principiantes. Al mismo tiempo, está cargado con características increíbles para crear páginas de aspecto profesional.

Funciona con todos los temas de WordPress y tiene un montón de módulos que puedes arrastrar y soltar en tu página. Puede crear cualquier tipo de disposición que desee y establecerlo de la manera que imaginó.

En este tutorial de Beaver Builder, le mostraremos cómo utilizar Beaver Builder para crear disposiciones de página personalizadas en WordPress. Puede utilizar los enlaces rápidos a continuación para navegar a través de este artículo:

Consejo profesional: ¿Quieres omitir todo el bricolaje? Nuestros expertos de WPBeginner Pro Services pueden ayudarte a poner en marcha un sitio web profesional rápidamente para que ahorres tiempo. Nos encargaremos de todo, desde el diseño hasta el desarrollo, para que puedas centrarte en tu negocio.

Paso 1: Establecer el plugin Beaver Builder

En primer lugar, usted necesita comprar el plugin Beaver Builder. Es un plugin de pago, con precios a partir de $99 para sitios ilimitados.

A continuación, debe instalar y activar el plugin Beaver Builder. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página Ajustes ” Beaver Builder para introducir su clave de licencia.

Entering the Beaver Builder's license key

Después de introducir su clave de licencia, ya está listo para crear hermosas estructuras / disposición / diseño / plantillas de páginas.

Paso 2: Cree su primera disposición de página personalizada con Beaver Builder

Primero, simplemente cree una nueva página en WordPress visitando Páginas ” Añadir nueva página.

Clicking Add New Page in WordPress admin area

Antes de abrir Beaver Builder, dale un título a tu nueva página y guárdala como borrador.

En nuestra experiencia, el maquetador de páginas no se abre a menos que hagamos esto primero.

Saving a page as a draft

Una vez hecho esto, pulse el botón ‘Launch Beaver Builder’ para empezar.

Esto abrirá la página de inicio de su página en la interfaz de Beaver Builder.

Launching the Beaver Builder plugin

Si es la primera vez que utiliza Beaver Builder, verá un mensaje / ventana emergente de bienvenida ofreciéndole un recorrido, gira, viaje guiado.

A continuación, haz clic en el botón “+” del menú superior. Este botón se convertirá en una “x”. A continuación, pasa a la pestaña “Plantillas”.

Finding a template to add to the page template in Beaver Builder

Beaver Builder viene con algunas plantillas de diseño profesional para empezar de inmediato.

No te preocupes, puedes personalizar la plantilla tanto como quieras. Es sólo una forma rápida de empezar con una estructura / disposición / diseño / plantilla.

Cuando seleccione una estructura / disposición / diseño / plantilla, Beaver Builder la cargará en la vista previa. Lleve el ratón a un elemento / artículo y Beaver Builder lo resaltará.

Basta con hacer clic en el icono de llave inglesa de cualquier elemento resaltado para editarlo.

wrench icon

Beaver Builder mostrará un mensaje / ventana emergente con diferentes ajustes que puede editar.

Puede cambiar el tipo de letra, el color, el fondo, la fuente, el relleno, el margen y mucho más.

headings popup

Los maquetadores de Beaver Builder se basan en filas. Puede arrastrar y soltar para reorganizar las filas. También puede quitar / añadir una nueva fila.

Sólo tiene que hacer clic en el menú Disposiciones de filas y seleccionar el número de columnas que desea en su fila.

row and columns layout

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

Puede añadir elementos a su fila utilizando los módulos y widgets básicos o avanzados. Estos módulos le permiten añadir los elementos más utilizados como botones, encabezados, texto, imágenes, pases de diapositivas, audio, vídeo, etc.

Sólo tiene que seleccionar un elemento y arrastrarlo a la fila que acaba de añadir. Haga clic en un elemento para editar sus propiedades.

También puede guardar una fila o un módulo para reutilizarlos más tarde en otras páginas. Haga clic en el botón “Guardar como” de mientras edita una fila o un módulo.

Save element to reuse

Haga clic en el botón “Listo” de la esquina superior derecha cuando haya terminado de editar la página.

Beaver Builder mostrará una serie de botones para publicar o guardar su página como borrador.

publish button

También puede reutilizar una disposición de página completa para otras páginas de su sitio WordPress. Solo tienes que abrir la página con el maquetador de páginas y, a continuación, hacer clic en el botón con la flecha hacia abajo para acceder a “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 la misma estructura / disposición / diseño / plantilla.

Beaver Builder tools

Cómo gestionar plantillas de disposición de página en Beaver Builder

Puede comprobar todas las plantillas que hizo en Beaver Builder “ Plantillas. Aquí, usted puede gestionar, vista previa y editar sus plantillas existentes.

Managing templates in Beaver Builder

Una gran cosa acerca de las plantillas de Beaver Builder es que son tipos de contenido personalizado. Esto significa que puede exportar fácilmente sus plantillas Beaver Builder utilizando la característica de exportación incorporada en WordPress.

Visite la página Herramientas ” Exportar y seleccione Plantillas. Haga clic en el botón “Descargar archivo de exportación” y WordPress le enviará un archivo XML para descargar.

Exporting templates

Ahora accede al sitio de WordPress donde quieres importar las plantillas. Visita la página Ajustes ” Importar y haz clic en WordPress.

Se le pedirá que descargue e instale el plugin importador de WordPress. Después de eso, podrás simplemente subir el archivo XML de tu plantilla e importarlo.

Alternativa: Utilice SeedProd para crear un tema personalizado

Aunque Beaver Builder es genial, puede que no sea perfecto para todo el mundo. No pasa nada. Hay otras opciones excelentes, como SeedProd.

SeedProd es otro maquetador de páginas fácil de usar que recomendamos a menudo. No es sólo para hacer páginas de destino. Usted puede incluso utilizarlo para crear temas completos de WordPress. Le hemos dado un buen uso en muchos proyectos, incluyendo la creación de páginas de destino para OptinMonster.

SeedProd's homepage

Lo que hace que SeedProd destaque son sus amplias opciones de personalización. Le permiten añadir fácilmente características interesantes a sus páginas, como testimonios rotativos, animaciones llamativas, tablas de precios profesionales, cuadros de características y mucho más.

Además, SeedProd tiene herramientas de IA que pueden generar rápidamente texto e imágenes de buena calidad para su sitio. Esto le ahorrará mucho tiempo a la hora de crear sus páginas.

¿Quieres saber más? Compruebe estas valoraciones para ver cómo SeedProd se compara con otros maquetadores de páginas populares:

Esperamos que este artículo te haya ayudado a personalizar la estructura / disposición / diseño / plantilla de una página en WordPress usando Beaver Builder. Puede que también quieras ver nuestra guía sobre cómo crear un sitio WordPress adaptado a dispositivos móviles y nuestra selección de los mejores maquetadores de temas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

26 comentariosDeja una respuesta

  1. corey

    this helps me out a lot.
    i am using astra and beaver. been needing to upgrade to grwoth plan soon
    is still over my head unlike Guttenberg

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administrador

  2. Rodney Harrier

    I started using Elementor to build a blog. If I switch to Beaver Builder, do I lose whatever I have done?

    • WPBeginner Support

      If you change plugins you would lose the customizations from your first plugin.

      Administrador

  3. Pius Anthony

    Dear Sir,

    Happy new year, i have being watching your wpbeginner video it really inspiring I believe before the next six month i will be teaching other people.

    Regard
    Pius Anthony

    • WPBeginner Support

      Glad our guides can help you start helping other people too :)

      Administrador

  4. Krayl

    When using Beaver Builder, are you using it on a child theme only? If not, how does it hold up to theme updates?

    Thank you team WPbeginner!

  5. Lisa Theriault

    I really need some help. This is supposed to be easy but when I click on a module or a row nothing happens. I tried dragging and dropping, saving, etc. Nada. I made sure the settings were correct and that the plug in was active. Beaver Builder shows up on the page for editing but I’m obviously an idiot. Getting frustrated, but I’m sure it’s just some silly thing. Can someone offer suggestions? I followed the beginner tutorial and thay is really easy. When I try to do it in Live mode….nothing. Please help. Thank you in advancd.

    • WPBeginner Support

      Hi Lisa,

      Try editing a new page. If that doesn’t work try switching to a default WordPress theme like twenty seventeen and then try editing with Beaver Builder. If that works, then your theme probably has compatibility issues with the page builder.

      Administrador

      • David Sharp

        I’m having the same problem as Lisa. I used Beaver Builder a couple of years ago to create a landing page, and it worked very well. In fact, I’m still using that same landing page without any problems. But today I tried to create a new landing page using Beaver Builder, but this time, Beaver Builder wouldn’t work.

        Here’s what happened: I created a new page. I clicked the Beaver Builder tab. But instead of seeing a button that says “Launch Beaver Builder,” I was taken to a screen that said, “Drop a row layout or module to get started.” Unfortunately, Beaver Builder failed to produce a Beaver Builder toolbar or any other tools (such as modules or rows) with which to build the page.

        Here’s what I tried to do to fix the problem, without success:

        1. I deactivated my other plugins.
        2. I switched to the Twenty Sixteen Theme.
        3. I made sure I’m using the latest version of everything (Wordpress, Beaver Builder, etc.)
        4. I noticed that if I typed something into the page and then clicked Beaver Builder tab, tools would show up. But when I clicked on them, I just got a spinning circle.
        5. I tried using Beaver Builder on my website that’s online, and also on my localhost test site, but Beaver Builder failed to work on either site.
        6. I tried using a different browser (Safari instead of my usual Chrome) without success.

        Any idea what might be wrong and how I might fix it?

        Thanks!

        • WPBeginner Support

          Hi David,

          You can contact Beaver Builder support, they would be able to help you out.

    • Krayl

      Same thing happened to me Lisa. I think it is my theme not playing well with BB. Looking to switch themes to have full compatibility.

    • Yeremi Akpan

      I had similar issues using Chrome, but they were resolved when I switched to Mirosoft Edge.

  6. Jesse

    I am so grateful for all the wpbeginner ‘how-to’ articles. They are clear and direct, and they make my life so much easier. Because I could follow the trail from ecommerce through Beaver Builder I am now in a place to get OptInMonster. Thanks Syed & team.

  7. Gabrielle

    Hi, is BB outputting [shortcodes] or html content, when switching back to normal editor?
    I wonder if this works well, when building products pages for woocommerce.

  8. Dr. Peter H. Markesteyn

    Would I have to create a child theme (20-17) to preserve all the changes I would make with BeaverBuilder when there is an update?

  9. Anthony

    While this plugin is great, I was wondering if you teach how to customize them yourself? I am looking to build my portfolio and knowing how to do it yourself would be fantastic!

  10. Ian Gordon

    WIth the Beaver Builder plugin, I can take an existing theme and create a completely new Header and Footer without editing any of the existing template files? My

  11. Sam

    How nice does Beaver Builder play with other plugins?

    • WPBeginner Support

      It plays well with most plugins. There might be some hiccups with a random less commonly used plugin, but they are quick to solve such issues.

      Administrador

  12. Rk bhardwaj

    This is amazing plugin to make any blog looks pretty

  13. Oliver

    Beaver Builder is the best page builder plugin by the best team! :)

    • Robby

      Hey, Oliver! Thanks for the kind words. :)

  14. Andrew Peters

    I LOVE Beaver Builder. I’ve used it for close to a dozen sites since making the switch back in the fall. I’m actually going back and converting some of my clients from VC to BB. It’s fire!

    • Shaiful

      Hi there,

      Just wondering, can it support shortcodes that have conditional context? Such as:

      [if user_loggedin]
      hello user.
      (show logged in user content build with beaver builder)
      [else]
      hello guest.
      (show public content build with beaver builder)
      [/if]

      • WPBeginner Support

        Yes it supports shortcode. Paste them in any field that you can insert text and they will be rendered automatically. When placing shortcodes on the page, it is best to use the HTML module compared to the Text Editor module. The latter tends to add additional p tags which sometimes break the layout.

        Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.