banervideofoote

Moviendo el área de footer en Génesis Framework fuera del site container.

En este post te mostrare como mover el área de footer fuera del site container.

Hace unos meses instale para un  cliente el tema executive, pero él quería que el área de footer se visualizara de ancho completo y estuviera separada del site container.

En este tutorial te mostrare lo que hice,  paso a paso.

Para  este ejemplo vamos a necesitar el child theme  executive pro, si no sabes como instalarlo te comparto un tutorial.

 Si observamos la imagen podemos ver que el pie de página esta dentro del site container:

Para sacarlo del site  y colocarlo en el footer primero tenemos que ir al documento functions.php de nuestro tema, en mi caso esta seria la ruta: http://localhost/executive/wp-content/themes/executive-pro/functions.php  y colocar el siguiente código: 


//* Reposition the footer widgets
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_after', 'genesis_footer_widget_areas' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

Lo que acabamos de hacer fue utilizar los hoocks de  génesis, para que sepas que hoock ocupar tienes que instalar el plugin Genesis Visual Hook Guide .

En el siguiente pedazo de código estamos indicando que vamos a quitar  genesis_footer_widget_areas (Es un filtro de Génesis que hace referencia a los widgets del área del footer ) de genesis_before_footer.

“remove_action( ‘genesis_before_footer’, ‘genesis_footer_widget_areas’ );”
Y  en este otro estamos indicando que vamos a trasladar al área de génesis after.

¨add_action( ‘genesis_after’, ‘genesis_footer_widget_areas’ );¨

 

 

Después de pegar el código en funtions.php y guardar nuestro documento el cambio debe de aparecer y verse de la siguiente manera :

 Listo, ahora lo tenemos de ancho completo.

Lo único que nos hace falta para terminar es separar un poco el site container.

Para esto vamos a nuestro archivo css y buscamos site container, asi es como se ve :

.site-container {
margin: 0 auto;
max-width: 1140px;
}

Y vamos a agregarle 36px de padding, esta medida puedes cambiarla al tamaño que tu requieras.

 

.site-container {
margin: 0 auto;
max-width: 1140px;
padding: 36px;

}

Este es el resultado :

 

Espero que este tutorial te haya servido, si tienes alguna duda y/o sugerencia por favor házmelo saber.

Referencias :

Tema Ejecutive pro 

Genesis Visual Hook Guide 

 

 

 

 

 

comparte este post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email