¿Buscas una forma de crear diseños personalizados en WordPress sin meterte en código? Lo entendemos. La mayoría de las guías que existen parecen novelas o asumen que eres un experto en codificación.
Hemos notado que algunos usuarios experimentados de WordPress evitan los constructores de páginas como Beaver Builder, preocupados de que creen diseños torpes o ralenticen sus sitios.
Pero esto es lo que hemos aprendido al ayudar a miles de principiantes: el constructor de páginas adecuado puede simplificar drásticamente la creación de sitios web y, al mismo tiempo, ofrecer resultados profesionales.
En esta guía paso a paso, te mostraremos cómo crear diseños personalizados de WordPress usando Beaver Builder. Ya sea que empieces desde cero o uses plantillas prediseñadas, aprenderás a construir exactamente lo que quieres, sin necesidad de codificación.
¿Por qué usar Beaver Builder para crear diseños personalizados de WordPress? 👀
Muchos temas de WordPress premium 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 adaptarse a tus necesidades.
Puedes crear plantillas de página personalizadas en WordPress creando un tema hijo y luego agregando tus propias plantillas de página. Pero necesitarás algunos conocimientos de PHP, HTML y CSS para que eso funcione.
Aquí es donde entran herramientas como Beaver Builder. Es un plugin constructor de páginas para WordPress de arrastrar y soltar. Te ayuda a crear tus propios diseños de página personalizados sin escribir ningún código.
Beaver Builder es muy fácil de usar y amigable para principiantes. Al mismo tiempo, está cargado de características increíbles para crear páginas de aspecto profesional.
Funciona con todos los temas de WordPress y tiene toneladas de módulos que puedes simplemente arrastrar y soltar en tu página. Puedes crear cualquier tipo de diseño que desees y configurarlo tal como lo imaginaste.
En este tutorial de Beaver Builder, te mostraremos cómo usar Beaver Builder para crear diseños de página personalizados en WordPress. Puedes usar los enlaces rápidos a continuación para navegar por este artículo:
- Paso 1: Configura el plugin Beaver Builder
- Paso 2: Crea tu primer diseño de página personalizado con Beaver Builder
- How to Manage Page Layout Templates in Beaver Builder
Paso 1: Configura el plugin Beaver Builder
Primero, necesitas comprar el plugin Beaver Builder. Es un plugin de pago, con precios a partir de $99 para sitios ilimitados.
A continuación, debes instalar y activar el plugin Beaver Builder. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, debes visitar la página Configuración » Beaver Builder para introducir tu clave de licencia.
Después de introducir tu clave de licencia, ya estás listo para crear hermosos diseños de página.
Paso 2: Crea tu primer diseño de página personalizado con Beaver Builder
Primero, simplemente crea una nueva página en WordPress visitando Páginas » Añadir Nueva Página.
Antes de abrir Beaver Builder, ponle un título a tu nueva página y guárdala como borrador.
En nuestra experiencia, el constructor de páginas no se abría a menos que hiciéramos esto primero.
Una vez que hagas eso, presiona el botón ‘Lanzar Beaver Builder’ para empezar.
Esto abrirá el front-end de tu página en la interfaz de Beaver Builder.
Si esta es tu primera vez usando Beaver Builder, verás una ventana emergente de bienvenida que te ofrece un recorrido guiado.
Después de eso, necesitas hacer clic en el botón ‘+’ en el menú superior. Este botón se convertirá en un ícono de ‘x’. Luego, cambia a la pestaña ‘Plantillas’.
Beaver Builder viene con algunas plantillas diseñadas profesionalmente para que comiences de inmediato.
No te preocupes; puedes personalizar la plantilla tanto como quieras. Es solo una forma rápida de empezar con un diseño.
Cuando selecciones un diseño, Beaver Builder lo cargará en la ventana de vista previa. Mueve el ratón sobre un elemento y Beaver Builder lo resaltará.
Simplemente puedes hacer clic en el ícono de la llave inglesa en cualquier elemento resaltado para editarlo.
Beaver Builder mostrará una ventana emergente con diferentes configuraciones que puedes editar.
Puedes cambiar la fuente, el color, el fondo, la fuente, el relleno, el margen, y más.
Los diseños de Beaver Builder se basan en filas. Puedes arrastrar y soltar para reorganizar filas. También puedes eliminar o agregar una nueva fila.
Simplemente haz clic en el mismo botón ‘+’ de antes y navega a la sección ‘Filas’. Desde aquí, puedes elegir cualquiera de las filas y columnas que se te presenten.
Beaver Builder agregará la fila a la vista previa en vivo en tu sitio.
Puedes agregar elementos a tu fila usando los módulos básicos o avanzados y widgets. Estos módulos te permiten agregar los elementos más utilizados como botones, encabezados, texto, imágenes, presentaciones de diapositivas, audio, video, etc.
Simplemente haz clic en el botón ‘+’ y navega a la sección ‘Módulos’. Luego, arrastra un elemento a la fila que acabas de agregar.
Haz clic en un elemento de diseño de WordPress para editar sus propiedades.
También puedes guardar una fila o un módulo para reutilizarlo más tarde en otras páginas. Haz clic en el botón ‘Guardar como’ mientras editas una fila o módulo.
Haz clic en el botón ‘Listo’ en la esquina superior derecha cuando hayas terminado de editar tu página.
Beaver Builder te mostrará una serie de botones para publicar o guardar tu página como borrador.
También puedes reutilizar el diseño de una página completa para otras páginas de tu sitio de WordPress. Simplemente abre la página con Page Builder y luego haz clic en el botón de flecha hacia abajo para acceder a ‘Herramientas’ en la barra superior.
Beaver Builder te mostrará una ventana emergente. Puedes guardar la página como una plantilla o crear rápidamente una página duplicada con el mismo diseño.
Cómo administrar plantillas de diseño de páginas en Beaver Builder
Puedes ver todas las plantillas que creaste en Beaver Builder » Plantillas. Aquí, puedes administrar, previsualizar y editar tus plantillas existentes.
Algo genial de las plantillas de Beaver Builder es que son tipos de publicación personalizados. Esto significa que puedes exportar fácilmente tus plantillas de Beaver Builder utilizando la función de exportación integrada en WordPress.
Visita la página Herramientas » Exportar y selecciona Plantillas. Haz clic en el botón ‘Descargar archivo de exportación’, y WordPress te enviará un archivo XML para descargar.
Ahora inicia sesión en el sitio de WordPress donde deseas importar las plantillas. Visita la página Ajustes » Importar y haz clic en WordPress.
Se te pedirá que descargues e instales el plugin importador de WordPress. Después de eso, podrás simplemente subir el archivo XML de tu plantilla e importarlo.
Alternativa: Usa SeedProd para crear un tema personalizado
Si bien Beaver Builder es genial, podría no ser la opción perfecta para todos. ¡No pasa nada! Hay otras excelentes opciones, como SeedProd.
SeedProd es otro constructor de páginas fácil de usar que recomendamos con frecuencia. No es solo para crear páginas de destino. Incluso puedes usarlo para crear temas completos de WordPress. Lo hemos utilizado con buenos resultados en muchos proyectos, incluida la creación de páginas de destino para OptinMonster.
Lo que distingue a SeedProd son sus amplias opciones de personalización. Estas te permiten agregar fácilmente funciones geniales a tus páginas, como testimonios rotativos, animaciones llamativas, tablas de precios profesionales, cuadros de características y más.
Además, SeedProd tiene herramientas de IA que pueden generar rápidamente texto e imágenes de buena calidad para tu sitio. Esto puede ahorrarte mucho tiempo cuando estás creando tus páginas.
¿Interesado en aprender más? Echa un vistazo a estas reseñas para ver cómo se compara SeedProd con otros constructores de páginas populares:
- Elementor vs Divi vs SeedProd (Comparativa) – ¿Cuál es el mejor?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Esperamos que este artículo te haya ayudado a crear diseños de página personalizados en WordPress usando Beaver Builder. También te puede interesar ver nuestra guía sobre cómo crear un sitio de WordPress compatible con dispositivos móviles y nuestras selecciones expertas de los mejores constructores de temas de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
corey
esto me ayuda mucho.
estoy usando Astra y Beaver. Necesito actualizarme al plan de crecimiento pronto
aún está por encima de mi comprensión a diferencia de Guttenberg
Soporte de WPBeginner
¡Me alegra saber que nuestra guía fue útil!
Administrador
Rodney Harrier
Empecé a usar Elementor para crear un blog. Si cambio a Beaver Builder, ¿pierdo lo que he hecho?
Soporte de WPBeginner
Si cambias de plugin, perderías las personalizaciones de tu primer plugin.
Administrador
Pius Anthony
Estimado señor:
¡Feliz año nuevo! He estado viendo tus videos de wpbeginner, son realmente inspiradores. Creo que antes de los próximos seis meses estaré enseñando a otras personas.
Atentamente
Pius Anthony
Soporte de WPBeginner
Glad our guides can help you start helping other people too
Administrador
Krayl
Al usar Beaver Builder, ¿lo estás usando solo en un tema hijo? Si no, ¿cómo se mantiene ante las actualizaciones del tema?
¡Gracias equipo WPbeginner!
Lisa Theriault
Realmente necesito ayuda. Se supone que esto es fácil, pero cuando hago clic en un módulo o una fila, no pasa nada. Intenté arrastrar y soltar, guardar, etc. Nada. Me aseguré de que la configuración fuera correcta y de que el complemento estuviera activo. Beaver Builder aparece en la página para editar, pero obviamente soy un idiota. Me estoy frustrando, pero estoy seguro de que es solo una tontería. ¿Alguien puede ofrecer sugerencias? Seguí el tutorial para principiantes y es realmente fácil. Cuando intento hacerlo en modo Live... nada. Por favor, ayuden. Gracias de antemano.
Soporte de WPBeginner
Hola Lisa,
Intenta editar una página nueva. Si eso no funciona, intenta cambiar a un tema predeterminado de WordPress como twenty seventeen y luego intenta editar con Beaver Builder. Si eso funciona, entonces tu tema probablemente tenga problemas de compatibilidad con el constructor de páginas.
Administrador
David Sharp
Estoy teniendo el mismo problema que Lisa. Usé Beaver Builder hace un par de años para crear una página de destino, y funcionó muy bien. De hecho, todavía estoy usando esa misma página de destino sin ningún problema. Pero hoy intenté crear una nueva página de destino usando Beaver Builder, pero esta vez, Beaver Builder no funcionó.
Esto es lo que sucedió: creé una nueva página. Hice clic en la pestaña Beaver Builder. Pero en lugar de ver un botón que dice "Lanzar Beaver Builder", me llevó a una pantalla que decía "Arrastra un diseño de fila o módulo para empezar". Desafortunadamente, Beaver Builder no produjo una barra de herramientas de Beaver Builder ni ninguna otra herramienta (como módulos o filas) con la que construir la página.
Esto es lo que intenté para solucionar el problema, sin éxito:
1. Desactivé mis otros plugins.
2. Cambié al tema Twenty Sixteen.
3. Me aseguré de estar usando la última versión de todo (Wordpress, Beaver Builder, etc.)
4. Noté que si escribía algo en la página y luego hacía clic en la pestaña de Beaver Builder, aparecían las herramientas. Pero cuando hacía clic en ellas, solo obtenía un círculo giratorio.
5. Intenté usar Beaver Builder en mi sitio web que está en línea, y también en mi sitio de prueba local (localhost), pero Beaver Builder no funcionó en ninguno de los dos sitios.
6. Intenté usar un navegador diferente (Safari en lugar de mi Chrome habitual) sin éxito.
¿Alguna idea de qué podría estar mal y cómo podría solucionarlo?
¡Gracias!
Soporte de WPBeginner
Hola David,
Puedes contactar al soporte de Beaver Builder, ellos podrían ayudarte.
Krayl
Me pasó lo mismo, Lisa. Creo que es mi tema el que no se lleva bien con BB. Estoy buscando cambiar de tema para tener compatibilidad total.
Yeremi Akpan
Tuve problemas similares usando Chrome, pero se resolvieron cuando cambié a Microsoft Edge.
Jesse
Estoy muy agradecido por todos los artículos de 'cómo hacer' de wpbeginner. Son claros y directos, y me facilitan mucho la vida. Como pude seguir el rastro desde ecommerce hasta Beaver Builder, ahora estoy en posición de obtener OptInMonster. Gracias Syed y equipo.
Gabrielle
Hola, ¿BB está generando [shortcodes] o contenido html, al volver al editor normal?
Me pregunto si esto funciona bien, al crear páginas de productos para woocommerce.
Dr. Peter H. Markesteyn
¿Tendría que crear un tema hijo (20-17) para conservar todos los cambios que haría con BeaverBuilder cuando haya una actualización?
Anthony
Si bien este plugin es genial, me preguntaba si enseñan cómo personalizarlos ustedes mismos. ¡Estoy buscando construir mi portafolio y saber cómo hacerlo yo mismo sería fantástico!
Ian Gordon
Con el plugin Beaver Builder, ¿puedo tomar un tema existente y crear un encabezado y pie de página completamente nuevos sin editar ninguno de los archivos de plantilla existentes?
Sam
¿Qué tan bien funciona Beaver Builder con otros plugins?
Soporte de WPBeginner
Funciona bien con la mayoría de los plugins. Puede haber algunos inconvenientes con un plugin aleatorio menos utilizado, pero son rápidos para resolver dichos problemas.
Administrador
Rk bhardwaj
Este es un plugin increíble para hacer que cualquier blog se vea bonito
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
ME ENCANTA Beaver Builder. Lo he usado para cerca de una docena de sitios desde que hice el cambio en otoño. De hecho, estoy volviendo a convertir a algunos de mis clientes de VC a BB. ¡Es genial!
Shaiful
Hola,
Solo me pregunto, ¿puede soportar shortcodes que tengan contexto condicional? Como por ejemplo:
[if user_loggedin]
hola usuario.
(mostrar contenido de usuario conectado creado con beaver builder)
[else]
hola invitado.
(mostrar contenido público creado con beaver builder)
[/if]
Soporte de WPBeginner
Sí, soporta shortcodes. Pégalos en cualquier campo donde puedas insertar texto y se renderizarán automáticamente. Al colocar shortcodes en la página, es mejor usar el módulo HTML en comparación con el módulo Editor de Texto. Este último tiende a agregar etiquetas p adicionales que a veces rompen el diseño.
Administrador