¿Cómo crear un pie de página que aparezca al desplazarse con Divi?

"Un pie de página que aparece al desplazarse".No se me ocurre un nombre mejor para este bonito efecto que se puede encontrar en algunos sitios de WordPress. Algunos temas premium ofrecen esta opción pero no Divi.

Entonces, ¿cómo se consigue un pie de página fijo que sólo aparece cuando el ratón va al fondo de la página? Y esto, en un sitio que fue creado con Divi ?

Veremos en este tutorial que es muy sencillo. Todo lo que tiene que hacer es añadir un pequeño fragmento de código CSS para obtener este efecto de "pie de página oculto".

 

¿Qué aspecto tiene el pie de página básico?

Cuando utilizar el tema DiviEl pie de página aparece después del contenido principal de la página web. Esto significa que cuando la página se desplaza hacia abajo, el pie de página le sigue. Cuando digo "pie de página", me refiero a la barra inferior, aquella en la que se encuentran tus créditos, pero también a la parte en la que se colocan los widgets.

En este vídeo puedes ver cómo es un pie de página básico con el tema Divi:

 

¿Qué es un "pie de página desplazable"?

Para marcar la diferencia, este es el aspecto que tendrá tu pie de página de Divi después de añadir las reglas CSS que encontrarás un poco más abajo en este artículo.

 

Si te fijas bien, el pie de página está fijado detrás del contenido principal de tu sitio. Esto hace que parezca una cortina que revela su pie de página.

 

¿Qué reglas CSS deben utilizarse?

De hecho, para lograr este efecto de revelación del pie de página, necesitamos utilizar 4 reglas CSS específicas. Es bueno entenderlos para poder modificarlos según sea necesario, dependiendo de tus proyectos... en lugar de copiar y pegar el código y dejarme un comentario diciendo "no entiendo, no funciona".

Deberías saber que con CSS todo funciona, no hay bugs como con Javascript por ejemplo. Sólo hay que utilizar las propiedades y valores adecuados y aplicarlos a los selectores correctos.

Descubra lo que puede hacer con el tema Divi

 

Regla 1: el índice z

Esta propiedad le permite definir la posición de sus capas, un poco como en Photoshop. Así, si quieres que un elemento vaya detrás de otro, debes darle un valor negativo (y viceversa). Para saber más sobre el índice z, le invito a leer este artículo.

Por lo tanto, es esta propiedad la que permite colocar la sección de pie de página en el fondo con "z-index: -1". El contenido principal, en cambio, tendrá un "z-index: 2".

 

Regla 2: la posición fija

Entonces la propiedad Posición se establecerá como Fija. Esto permite que el pie de página se fije en el fondo (gracias al z-index). Leer este artículo para saber más sobre la propiedad "Posición".

 

Regla 3: la caja-sombra

Esta propiedad permite añadir una bonita sombra bajo el contenido principal. Esto hace que realmente parezca una cortina que revela el contenido de su pie de página. Sin esta propiedad, el pie de página tendría un aspecto menos revelador. Este artículoEsta sección le permite comprender mejor la sombra de caja.

 

Regla 4: consultas de medios

Las consultas de medios se utilizan para definir reglas CSS específicas según el tamaño de la pantalla. Es gracias a las consultas de medios que podemos hacer sitios web responsivos. Por lo tanto, esta noción es muy importante porque el pie de página que aparece al desplazarse tendrá que ajustarse según los tamaños de pantalla.

Para explicarlo rápidamente, el tema Divi ya incorpora una hoja de estilos .css. Si no redefinimos ninguna regla, se aplican las reglas de Divi. Así que en nuestro caso de pie de página oculto, tendremos que redefinir algunas reglas según el tamaño de las pantallas.

En el código siguiente, he definido 4 tamaños diferentes utilizando las consultas de medios. Si ves que no se ajustan a lo que buscas, puedes simplemente cambiar el valor de la propiedad margin-bottom o incluso los valores de las consultas de medios.

Mientras tanto, puedes lea más sobre el tema aquí.

 

El código para revelar un pie de página SIN widgets

 

Si sólo utilizas la barra inferior del pie de página - la que está en los créditos - no necesitas molestarte, el siguiente código debería ser suficiente:

/* code css si pas de widgets en pied de page */


#main-content {
margin-bottom: 53px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black; 
-moz-box-shadow: 1px 1px 10px 1px black; 
box-shadow: 1px 1px 10px 1px black;
}


#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

 

El código para que un pie de página se revele CON los widgets

Por otro lado, si utilizas widgets en el pie de página, tendrás que jugar con los valores de margin-bottom y media queries para que la visualización del pie de página se adapte a las pantallas responsivas.

 

El siguiente código funciona en responsive, como se muestra en el vídeo de arriba (copiar y pegar en su totalidad):

/* CSS POUR UN CODE AVEC WIDGET EN FONCTION DES TAILLES ECRAN */

/* pour les écrans de 1200px minimum */

@media screen and (min-width: 1200px) {

#main-content {
margin-bottom: 350px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 1000 et 1199px */

@media screen and (min-width: 1000px) and (max-width: 1199px) {

#main-content {
margin-bottom: 300px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 900 et 999px */

@media screen and (min-width: 900px) and (max-width: 999px) {

#main-content {
margin-bottom: 500px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 800 et 899px */

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

#main-content {
margin-bottom: 450px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

 

Observará que los tamaños de pantalla no definidos en el código anterior se comportarán de la manera "básica", tal como lo define Divi.

También hay que tener cuidado con el número de widgets utilizados. Si hay varios por zona, el efecto de pie de página que aparece al desplazarse sólo será relevante en pantallas grandes. A continuación, puede deshacerse de algunas de las consultas de medios para que el pie de página funcione de forma básica en pantallas pequeñas.

Este es el aspecto que tendría el pie de página al desplazarse si NO se utilizan consultas de medios:

 

En este vídeo se puede ver que el contenido principal está siempre bloqueado a la misma altura (nivel de la ventana). Esto no es correcto porque el diseño no se adapta a las diferentes pantallas: en una pantalla mediana se ve una barra blanca que no debería verse y en una pantalla más pequeña los widgets están "cortados".

 

¿Dónde insertar el código CSS en Divi?

Si nunca has añadido CSS a tu sitio de WordPress/Divi, puedes hacerlo fácilmente: hay varias soluciones que serán objeto de un futuro artículo... Mientras tanto, puedes añadir el CSS al Apariencia > Personalizar > CSS adicional.

 

En conclusión...

¡Divi es tan fácil de modificar! Con sólo unos pocos clics, puede diferenciarse de otros sitios creados con Divi. En Divi Tips, ya hay varios tutoriales que se han publicado en Pie de página de Divi y otros vendrán...