"Una calzada que aparece en el pergamino", No encontré nada mejor para nombrar este efecto magnífico que se puede encontrar en algunos sitios de WordPress. Algunos temas premium ofrecen esta opción pero no Divi.
¿Cómo entonces llegar un pie fijo que sólo aparece cuando el ratón baja al fondo de la página? Y esto, en un sitio que fue creado con Divi ?
Veremos en este tutorial que es súper simple. Solo agrega un poco de código CSS para conseguir este efecto de "pie-hidden".
¿Cómo luce la caldera base?
Cuando tú utilizar el tema Divi, pie de página – pie – aparece siguiendo el contenido principal de la página web. Es decir, cuando la página se desplaza, el pie de página sigue. Cuando digo "pierna", me refiero a la barra inferior, la de donde están tus créditos, pero también la parte donde se colocan los widgets..
En este video se puede ver cómo luce una "pieza básica" con el tema Divi:
¿Qué es un "pieza que aparece en el pergamino"?
Para marcar la diferencia, esto es lo que se verá como el pie de su sitio Divi después de añadir reglas CSS encontrará un poco más bajo en este artículo.
Si miras cuidadosamente, el pie se fija detrás del contenido principal de su sitio. Como resultado, parece un cortina revela su pie.
¿Qué reglas de CSS deben usarse?
De hecho, para llevar a cabo esto pie de página efecto revelado, debemos usar 4 reglas específicas de CSS. Es bueno entenderlos para que puedas modificarlos según tus planes... en lugar de copiar y pegar el código y dejarme un comentario diciéndome "No entiendo, no funciona".
Saber que con CSS, todo funciona, no hay errores como con Javascript por ejemplo. Simplemente use las propiedades y los valores adecuados y sobre todo aplíquelos a los selectores adecuados.
Descubre todo lo que puedes hacer con el tema Divi
Regla 1: z-index
Esta propiedad le permite establecer la posición de sus capas, un poco como en Photoshop. Así que si quieres que un elemento pase detrás de otro elemento, tienes que dar un valor negativo (y viceversa). Para más información sobre el z-indexTe invito a leer este artículo.
Es por lo tanto esta propiedad que permite colocar la sección de pie en el fondo con "z-index: -1". Sin embargo, el contenido principal será "z-index: 2".
Regla 2: Puesto fijo
Siguiente, la propiedad Posición tendrá el valor Fijación. Esto permite que la caldera sea fijada para que se congele en el fondo (a través del índice z). Leer este artículo para aprender más sobre la propiedad "Location".
Regla #3: la sombra de la caja
Esta propiedad permite añadir una bonita sombra bajo el contenido principal. Como resultado, parece que es una cortina que revela el contenido de su pie de página. Sin esta propiedad, te sentirías menos como si la caldera fuera revelada. Esto Artículo, le permite entender mejor box-shadow.
Regla #4: las consultas de los medios
El consultas de medios use to define specific CSS rules depending on the size of the screens. Es gracias a la consultas de medios que uno puede hacer sitios web responsables. Así que esta noción es muy importante porque piercing que aparece en el pergamino necesita un ajuste según tamaños de pantalla.
Para explicar rápidamente, el tema Divi ya embarca una hoja de estilo.css. Si no redefinimos las reglas, son las reglas de Divi las que se aplican. Así que en nuestro caso footer-hidden, vamos a necesitar redefinir ciertas reglas según el 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. Si encuentras que no coinciden con lo que estás buscando, simplemente cambiarás el valor de la propiedad margin-bottom o incluso los valores de consultas de medios.
Mientras tanto, puedes documentar el tema aquí.
El código para una calzada para revelar sin widgets
Si usas sólo la barra inferior del pie – el que los créditos son – no necesitarás tomar la delantera, el siguiente código debe bastar:
/* css code if no widgets at footer */ #main-content { margin-bottom: 53px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px negro; -moz-box-shadow: 1px 1px 10px 1px negro; box-shadow: 1px 1px 10px 1px negro; #main-footer {width fixed: 100%; 0; z-index: -1; }
El código para una calzada para revelar con widgets
Sin embargo, si usted utilizar widgets a pie, tendrá que jugar con los valores de margin-bottom y consultas de medios así que desvelar la caldera ser adaptable a las pantallas = sensible.
El siguiente código funciona en respuesta, como se muestra en el vídeo anterior (para ser copiado y pegado en su totalidad):
/* CSS FOR A CODE with WIDGET IN ACCORDANCE with ECRAN RAILS */ /* for screens of 1200px minimum */ @media screen and (min-width: 1200px) { #main-content * margin-bottom: 350px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px negro; -moz-box-shadow: 1px 1px 10px 1px negro; box-shadow: 1px 1px 10px 1px negro; #mainindex-footer {width fixed: 100%; * margin-bottom: 300px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px negro; -moz-box-shadow: 1px 1px 10px 1px negro; box-shadow: 1px 1px 10px 1px negro; #mainindex-footer {width fixed: 100%; * margin-bottom: 500px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px negro; -moz-box-shadow: 1px 1px 10px 1px negro; box-shadow: 1px 1px 10px 1px negro; #mainindex-footer {width fixed 0 100%; { margin-bottom: 450px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px negro; -moz-box-shadow: 1px 1px 10px 1px negro; box-shadow: 1px 1px 10px 1px negro; #mainindex-footer {width fixed 0 100%; -1; }
Tenga en cuenta que los tamaños de pantalla que no se definen en el código anterior se comportarán de la manera "básica", que se define por Divi.
Atención también al número de widgets utilizados. Si hay varios por zona, El efecto del pie que aparece en el pergamino sólo será relevante en pantallas grandes. Usted puede entonces deshacerse de algunas consultas de los medios para que el pie de página funcione de la manera básica en las pantallas pequeñas.
Esto es lo que piercing que aparece en el pergamino Si NO utiliza las consultas de los medios:
En este vídeo, se ve que el contenido principal siempre está bloqueado a la misma altura (nivel de ventana). Esto no es apropiado ya que el diseño no cabe según las pantallas: en pantalla media se ve una barra blanca que no debe ver y en pantalla más pequeña los widgets son "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 el tema de un próximo artículo... Mientras tanto, puede agregar el CSS a la pestaña Apariencia > Personalizar > CSS adicional.
En conclusión...
¡Divi es tan fácil de cambiar! En sólo unos pocos clics, se puede destacar de otros sitios creados con Divi. On Astuces Diviya hay varios tutoriales que han sido publicados en El pie de Divi Y otros vendrán...
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
Merci pour ce retour David !
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.
Salut Steven, non ce n’est pas normal, tes liens devraient être cliquable.
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.
Oui Bruno, ça vient de là. Le tutoriel ici présent n’est pas optimisé pour le footer global.
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
Voilà encore un sujet que j’ai traité dans ma formation Divi Vidéo Boost, qui regorge d’astuce de ce type 😉
Bonjour, même procédé avec un thème autre que DIVI ? Merci