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

Publicado el 06/09/2018 | 6 comentarios

" Un pie de página que aparece en el desplazamientoNo 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. Sólo tienes que añadir un poco de código CSS para conseguir 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. Es decir, cuando la página se desplaza, el pie de página le sigue. Cuando digo "pie de página", me refiero a la barra inferior, donde se encuentran tus créditos, pero también a la parte donde 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. Así, parece que una cortina revela su pie de página.

 

¿Qué reglas CSS utilizar?

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

Sepa que con CSS, todo funciona, no hay errores como con Javascript por ejemplo. Sólo hay que utilizar las propiedades y valores adecuados y aplicarlos a los selectores correctos.

Vea 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. Por lo tanto, 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. De esta manera, realmente parece 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 ayudará a entender la sombra de caja.

 

Regla 4: consultas de medios

Las medias queries se utilizan para definir reglas CSS específicas en función del tamaño de las pantallas. Es gracias a las consultas de los medios de comunicación que podemos hacer sitios web receptivos. Por lo tanto, esta noción es muy importante porque el pie de página que aparece en el desplazamiento necesitará un ajuste 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 la pantalla.

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 de los créditos- no tienes que preocuparte, 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 = responsive.

 

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;
}
}

 

Notarás que los tamaños de pantalla no definidos en el código anterior se comportarán de la manera "básica", la definida por 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 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 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 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 a la pestaña 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...

footer qui apparait au scroll

footer qui apparait au scroll

1.361 palabras

5

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

6 Commentaires

  1. David

    En effet le code est à adapter en fonction de la configuration de son site.
    Par exemple, le shadow était trop important… J’ai mis le shadow de base.
    box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

    Aussi je ne suis pas en pleine largeur… J’ai donc ajusté le pourcentage du footer
    width: 90%;
    et supprimé du coup la position left pour qu’il soit centré.

    Ensuite il faut ajuster le margin-bottom du #main-content dans toutes les configuration d’écran.

    En tous cas, merci pour ce bout de code que je cherchais.

    Dommage que le margin-bottom ne s’adapte pas automatiquement en fonction de la taille du footer –> Peut être que c’est possible –> A voir

  2. Lycia Diaz

    Merci pour ce retour David !

  3. Steven

    Bonjour et merci pour l’astuce.

    Je rencontre un problème, les liens du footer ne sont plus cliquable, est-ce normale ?

    En vous remerciant par avance.

  4. Lycia Diaz

    Salut Steven, non ce n’est pas normal, tes liens devraient être cliquable.

  5. Bruno

    Bonjour.

    Cela ne fonctionne pas pour moi.

    Pourtant j’avais fait un essai concluant il y quelque temps, depuis j’ai réalisé beaucoup de modifications.

    Est-ce du au fait que j’utilise dorénavant le theme builder et que j’assigne un footer global à toutes mes pages ?

    Merci et bonne journée.

  6. Lycia Diaz

    Oui Bruno, ça vient de là. Le tutoriel ici présent n’est pas optimisé pour le footer global.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto