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:
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.
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?
