Beaver Builder y Genesis framework trabajando juntos para crear páginas que impresionen

No me voy a andar con rodeos.

Te voy a descubrir la forma de integrar dos de las mejores herramientas para crear webs que he conocido hasta hoy.

Poner a trabajar juntos Beaver Builder y Genesis Framework te va a dar unas alegrías enormes, ya que juntarás unos de los mejores temas para WordPress, con un plugin liviano, que te ayudará a suplir una de las mayores quejas sobre Genesis, la personalización de las páginas.

Con Beaver Builder puedes crear fácilmente filas y columnas donde ir insertando los diferentes contenidos: textos, imágenes, tablas, iconos, etc….

Pero hay un problema. La mayoría de temas Genesis, por no decir todos, tienen una clase CSS llamada .site-inner que limita el ancho del contenido, por lo que no podrás crear filas de ancho completo así por las buenas, donde por ejemplo pongas una imagen, o video de fondo y ocupe toda la fila.

Me refiero a esto:

Beaver Builder a ancho completo en Genesis Framework

Por suerte estamos trabajando con Genesis Framework, y ya sabes que es muy sencillo, adaptarlo para que funcione como queremos.

Y todo en un paso a paso sencillo, como te tengo acostumbrado.

Los 3 pasos para integrar Beaver Builder y Genesis

Necesitamos crear una nueva plantilla de página, para usarla con Beaver Builder, y ponerlo a ancho completo, y además aplicar algunos estilos CSS, para quitar esa limitación de ancho.

Yo lo he probado ya en varios Child Themes de genesis, sin necesitar modificarlo, pero si no funcionará bien en tu Child Theme, solo necesitarás unas pequeñas modificaciones en el CSS.

Paso #1. Crear una nueva plantilla de página

Accede por FTP o a través del gestor de ficheros de tu hosting y crea un fichero llamado page_beaver.php en el directorio de tu Child Theme. Recuerda, estará en wp-content/themes/tuchildtheme/

Cuando este creado, ábrelo, y copia y pega este código:

<?php
// Template Name: Página Ancho Completo
add_filter( 'body_class', 'beaver_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function beaver_body_class( $classes ) {
	$classes[] = 'fl-builder-completo';
	return $classes;
}
add_filter( 'genesis_attr_site-inner', 'hormi_beaver_site_inner' );
/**
 * Add attributes for site-inner element.
 *
 * @since 2.0.0
 *
 * @param array $attributes Existing attributes.
 *
 * @return array Amended attributes.
 */
function hormi_beaver_site_inner( $attributes ) {
	$attributes['role']     = 'main';
	$attributes['itemprop'] = 'mainContentOfPage';
	return $attributes;
}
// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );
// Display Header
get_header();
// Display Content
the_post(); // sets the 'in the loop' property to true.
the_content();
// Display Footer
get_footer();

Paso#2. Añade los estilos CSS

Abre el fichero style.css de tu Child Theme, y añade estas líneas al final:

/* Página ancho completo
-------------------------------------------- */

.fl-builder-completo .site-inner {
	max-width: none;
	padding-top: 0;
}

@media only screen and (max-width: 800px) {

	.fl-builder-completo .site-inner {
		padding-left: 0;
		padding-right: 0;
	}

}

Con esto hemos hecho todas las modificaciones necesarias.

Paso #3. Usa la nueva plantilla en tus páginas

A partir de ahora, cuando quieras usar Beaver Builder, en una de tus páginas, simplemente, elige en Atributos de página la nueva plantilla creada.

beaver-y-genesis

Ahora podrías por ejemplo crear una página totalmente personalizada, para usarla cómo página de inicio, y desde Ajustes/Lectura, fijarla como página Home.

Remate Final

Como ves, las posibilidades que te dan al combinar Beaver Builder y Genesis Framework son enormes. Con esta plantilla hemos conseguido personalizar al máximo tus páginas, pero conservando la cabecera y el footer.

En un próximo post te enseñare a combinar Beaver y Genesis, pero para usarlo en landings pages.

¿Estas ya pensando en darle una oportunidad a Beaver Builder?

16 comentarios en “Beaver Builder y Genesis framework trabajando juntos para crear páginas que impresionen”

  1. Muchas gracias Javier!

    Precisamente estaba maldiciendo a Genesis por sus limitaciones al utilizar los temas hijos, y ha sido entonces cuando he empezado a investigar y llegué a tu artículo sobre Beaver Builder.

    Y te quería hacer una pregunta;

    ¿Sabes si la versión estándar incluye las plantillas predeterminadas que aparecen en la demo de su web?

    Te comento esto porque para lo que más me interesa en principio –aunque después tiraré de Beaver Builder para casi diseñar las webs a medida– es para realizar un portafolio para un cliente.

    Y la verdad es que creo que este plugin se acerca a lo que necesito.

    Gracias por publicar contenidos tan valiosos

    Un saludo 🙂

    1. Hola Fernando.

      La versión gratuita no incluye las plantillas, ni los modulos avanzados, por lo que te será complicado conseguir una página como la que quieres.

      Lo mejor es que compres la licencia aunque sea la más básica, y es valida para sitios ilimitados, por lo que puedes usarla en tantas webs como necesites. Que te falte el tema no es un problema.

      Si quieres además añadirle tu propia marca, y que no se vea que es Beaver, si necesitarás la licencia de agencia.

      Un abrazo.

  2. -Hola Javier soy nuevo en hormigasenlanube y quiero transmitirte que me ha encantado éste artículo que sin duda pronto pondré en práctica.Información útil 1000% desde ya tienes un nuevo seguidor.
    -Creo que la utilidad que nos aporta éste plugin o aplicación es enorme pues aunque sólo dispongamos de un theme concreto del framework génesis, nos va a permitir personalizar futuros proyectos personales o proyectos de clientes de un modo bastante distinto….a como nos lo ofrecen los chicos de studio press(que en mi opinion están de PM )pero así conseguimos que con la adquisición de un sólo theme podamos crear muchísimas variantes completamente distintas e incluso a gusto del cliente sin tener que comprar themes distintos o los famosos packs.
    -Encima la utilidad como landin pages es tremenda ya sea para crear un home diferente o para temas de email marketing.MUCHÍSIMAS GRACIAS JAVIER!!!
    Abrazo enorme.
    100% WAR AND SEO.

    1. Hola Alberto.

      Muchisimas gracias y bienvenido al hormiguero.

      Con un solo tema y este plugin tienes muchisimas posibilidades, pero si quieres personalziar un poco más algunos elementos, si necesitas el paquete de temas. yo al menos lo uso asi, porque asi tengo cabeceras diferentes, layouts para entradas distintos, etc… y si ya los personalzias con CSS las posibilidades son enormes. Pero efectivamente es un elemento que le falta a Genesis, y que resolvemos de manera estupenda con este plugin.

      Un abrazo.

  3. Hola Javier:

    Hace más de un mes encontre a Beaver Builder hay mucha información en inglés , al fin encuentro algo en español gracias por compartir Javier, y ahora si estoy convencida para comprarlo.

    Sabes que también tengo Dynamik con el cual puedes crear child themes personalizados y me ha parecido una maravilla por su versatilidad y ahorro de tiempo, y he leído que acompañado con Beaver te ahorra mucho más en la creación de sitios web.

    Gracias nuevamente Javier

    1. Gracias Veronica.

      Es verdad que no habia nada en Español, sin embargo en el mundo anglosajón esta dando muy fuerte, y muchos expertos estan ya usandolo.

      Efectivamente se combina genial con Dynamik, y se pueden crear temas espectaculares. Espero le des buen uso!

      Un abrazo.

  4. La verdad es que llevo bastante tiempo oyendo hablar de este editor visual y tiene muy buena pinta.

    Sobre todo lo bien que se fusiona con Genesis y lo intuitivo que es, es muy apreciado en la comunidad Genesis.

    Después de leer tu post me voy a animar a probarlo me pica inmensamente la curiosidad.

    Un abrazote!!!

    1. Oscar, pues animate sin dudarlo, que en tus manos ni me imagino lo que puedes llegar a crear. Si creas alguna plantilla chula, te animo a compartirla!

      Un abrazo.

  5. Muchas gracias! Por todo…
    Aunque pensé que no lo lograría, ya que era mi primera vez trateando en esos lares, ¡lo he logrado!
    Está tan bien explicado que no he tenido ni una duda sobre qué hacer. Y ahora ocupa tooooda la pantalla, tal y como quería…. ¡muchas,muchas gracias!

    1. Bienvenida a mi casa Digital Zaira.

      Me alegra que te haya sido útil. Es un plugin que cuando le coges el rollo es super útil.

      Un abrazo.

  6. Hola Javier:
    Muy interesante este post para el tema de generar la página de inicio de una web. En mi caso que conozco el uso de page-builder de site origin, puedo utilizar esta misma plantilla para usar con ese plugin o tendría que realizar modificaciones?
    Muchas gracias por tu ayuda,

    Alberto

    1. Hola Alberto.

      Pues en principio debe de funcionar sin modificaciones. Este código lo que hace es crearte una plantilla que no tenga limitaciones de ancho, para poder hacer cajas de ancho completo, sea con el constructor que sea.

      Pero al no conocer ese constructor, no puedo asegurarte que funcione al 100%, porque no se como funcionan sus filas a ancho completo. Por ejemplo con Thrive Content no funciona bien, porque no tiene la posibilidad de añadir estas filas si no coges una de sus plantillas.

      Un abrazo.

  7. Hola Javier! Estoy navegando y zambulléndome en este mundo para lanzar mi web… Una pregunta! Qué pasa si sólo utilizo Beaver Builder y le doy la espalda a Genesis?

    1. Hola Gabi.

      Pues en si no puedes usar solo Beaver Builder, pues es un plugin, pero Beaver tambien tiene un tema, que lógicamente se integra perfecto con su plugin. Pero pierdes la ligeresa y buen código de Genesis, o el que puedas personalizar ciertas zonas gracias a areas de widgets, y no editando con beaver página a página. Además de lo que te costará cambiar de tema.

      Creo en la potencia de Genesis, y suplirlo con Beaver para tener más libertad a la hora de editar algunas páginas y poder ser más creativos.

      Un abrazo.

  8. ¡Hola Javier!

    Te agradezco infinitamente este post. Sin tus indicaciones no hubiera podido crear una página de ancho completo para Beaver + Genesis.

    Rápido, fácil y bien explicado. Así da gusto.

    Es la primera (y única web) donde he encontrado las instrucciones precisas. En español siempre cuesta encontrar tutoriales útiles porque o bien son un copia y pega (con fallos incluidos), o bien no explican todos los pasos. Por supuesto, ese no es tu caso.

    Es un lujo para mí haberte encontrado. Te has ganado otra nueva fan.

    Poco a poco iré leyendo el resto de tu blog y asimilando los contenidos para mejorar mi web. Estoy segura de que me quedan grandes posts que leer de los que aprenderé mucho.

    Gracias a ti puedo hacer la página que siempre he soñado con Beaver. Así que serás responsable en parte de los buenos resultados que conseguiré con ella. Te debo una.

    Mil gracias de nuevo y enhorabuena por tu fantástico trabajo y generosidad.

Los comentarios están cerrados.

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba