¿Cómo creo un pie de página que aparece en el pergamino con Divi?

Publicado el 06/09/2018 | 4 comentarios

"Un pie de página que aparece en el pergamino".No podría pensar en un nombre mejor para este magnífico efecto que se puede encontrar en algunos sitios de WordPress. Algunos temas premium ofrecen esta opción pero no Divi.

¿Cómo consigo un pie de página fijo que sólo aparece cuando el ratón baja al final de la página? Y esto, en un sitio que fue creado con Divi ?

Veremos en este tutorial que es súper sencillo. Sólo tienes que añadir un poco de código CSS para obtener este efecto de "pie oculto".

 

¿Cómo es el futbolista básico?

Cuando tú usar el tema Diviel pie de página aparece después del contenido principal de la página web. Es decir, a medida que la página se desplaza, el pie de página sigue. Cuando digo "pie de página", me refiero a la barra inferior, aquella donde se encuentran tus créditos pero también 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 de Divi:

 

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

Para marcar la diferencia, aquí está cómo se verá el pie de página de tu sitio Divi después de agregar las reglas CSS que encontrarás un poco más abajo en este artículo.

 

Si miras de cerca, el pie de página se fija detrás del contenido principal de tu sitio. Como resultado, parece como si una cortina revelara tu pie de página.

 

¿Qué reglas del CSS hay que usar?

De hecho, para lograr este efecto de desvelar al futbolista, tenemos que usar 4 reglas específicas de CSS. Es bueno entenderlos para poder modificarlos si es necesario, de acuerdo con sus proyectos... en lugar de copiar-pegar el código y dejarme un comentario diciendo "No entiendo, no funciona".

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

Descubre todo lo que puedes hacer con el tema Divi

 

Regla n°1: el índice z

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

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

 

Regla n°2: la posición fija

Entonces la propiedad Posición tendrá el valor Fijo. Esto le permite fijar el pie de página para que quede fijo en el fondo (gracias al índice z). Lea este artículo para aprender más sobre la propiedad "Posición".

 

Regla n°3: la sombra de la caja

Esta propiedad te permite añadir una bonita sombra bajo el contenido principal. Realmente parece una cortina que revela el contenido de tu pie de página. Sin esta propiedad, se vería menos como el pie de página se revela a sí mismo. Este artículote permite entender mejor la sombra de la caja.

 

Regla No. 4: Consultar a los medios de comunicación

Las consultas de medios se usan para definir reglas específicas de CSS según el tamaño de la pantalla. Es gracias a las consultas de los medios de comunicación que podemos hacer sitios web receptivos. Así que esta noción es muy importante porque el pie de página que aparece en el pergamino necesitará un ajuste de acuerdo con los tamaños de la pantalla.

Para explicarlo rápidamente, el tema de Divi ya incluye una hoja de estilo .css. Si no redefinimos ninguna regla, se aplican las reglas de Divi. Así que en nuestro caso de pie de página oculto, necesitaremos redefinir algunas reglas dependiendo del tamaño de las pantallas.

En el código que presento a continuación, he definido 4 tamaños diferentes gracias a las consultas de los medios de comunicación. Si encuentras que no coinciden con lo que buscas, sólo tienes que cambiar el valor de la propiedad marginada o incluso los valores de las consultas de los medios.

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

 

El código para que un futbolista se revele SIN aparatos

 

Si sólo usas la barra inferior del pie de página, donde se encuentran los créditos, no tendrás que 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 un pie de página que se revelará con los widgets

Por otra parte, si se utilizan los widgets de pie de página, se tendrá que jugar con los valores del margen inferior y las consultas de los medios de comunicación para que el desvelamiento del pie de página sea adaptable a las pantallas = respuesta.

 

El siguiente código funciona de forma adecuada, como se muestra en el vídeo anterior (para ser copiado y pegado 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;
}
}

 

Tengan en cuenta que los tamaños de pantalla que no estén definidos en el código anterior se comportarán de la manera "básica", la definida por Divi.

También preste atención al número de widgets utilizados. Si hay varios por zona, el efecto de pie de página que aparece en el pergamino sólo será relevante en las grandes pantallas. Entonces puedes deshacerte de algunas consultas de los medios para que el pie de página funcione de manera básica en las pantallas pequeñas.

Así es como se vería el pie de página que aparece en el pergamino si NO usamos las consultas de los 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 apropiado ya que el diseño no se adapta a las pantallas: en la pantalla promedio se ve una barra blanca que no se debe ver y en una pantalla más pequeña, los widgets se "cortan".

 

¿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 CSS al Apariencia > Personalizar > CSS adicional.

 

En conclusión...

¡Divi es tan fácil de cambiar! Con sólo unos pocos clics, puedes destacar de otros sitios creados con Divi. En Divi Tips, ya hay varios tutoriales que han sido publicados en El futbolista de Divi y otros vendrán...

footer qui apparait au scroll

footer qui apparait au scroll

1.361 palabras

5

A ti también debería gustarte:

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 sus imágenes sean más gráficas y dan originalidad a su diseño. ¿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.

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

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.

Ponerlo en el interés

Acciones
Comparte esto