footer qui apparait au scroll de la souris

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

Publicado el 06/09/2018 | 8 comentarios

1.361 palabras

5

"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...

footer qui apparait au scroll

obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

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 web? ¿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 al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

8 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.

  7. minne

    Bonjour cela fonctionne très bien si on utilise un footer avec widget.

    Par contre comment faire si on a un footer créé avec le thème builder ?

    Cela ne fonctionne pas ?

    Qqun pourrait me venir en aide svp …. merci

  8. Lycia Diaz

    Voilà encore un sujet que j’ai traité dans ma formation Divi Vidéo Boost, qui regorge d’astuce de ce type 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

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.

¡Nueva formación en Divi!

55 vídeos para dominar el Divi Visual Builder como un profesional: ⏱ 3h30 de teoría + 👩🏻💻 6h00 de aplicación práctica + 🤝 30min. de coaching individual en visio.

(Formación subvencionable por el CPF)

Pínchalo en Pinterest

Acciones
Comparte esto