Fraud Blocker

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

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?

Los comentarios están cerrados.


COMPARTE ESTE ARTÍCULO​

También te puede interesar:

Ei, ¿a qué estás esperando?
DESCARGA AHORA MISMO EL EBOOK "5 COSAS" CON 5 TAREAS PARA REALIZAR EN TU WEB YA MISMO Y OBTENER MÁS VISITAS Y CLIENTES EN UNA SEMANA.

ADEMÁS, TE HARÉ UNA OFERTA ÚNICA PARA ACCEDER A 16 CURSOS GRATUITOS DE LA ACADEMIA DE HORMIGAS EN LA NUBE. ESTOY DESEANDO COMPARTIR CONTIGO TODO LO QUE SÉ SOBRE WORDPRESS, ESCUELAS ONLINE Y HERRAMIENTAS QUE FACILITAN LA VIDA DEL EMPRENDEDOR ONLINE.

Te contaré cómo aprovechar el auge de la formación online actual, y que claves has de tener en cuenta para tener más alumnos y no cometer errores aumentando las ventas de tu negocio digital.

Cómo mejorar el soporte de tu web, y aspectos de mi día a día que te puedan ayudar a crecer como emprendedor.

Scroll al inicio