¿Le gustaría crear un pie de página fijo con DIVI que se muestre completamente al desplazarse hacia abajo?
Agregar un pie de página adhesivo a su Sitio web puede aportar ese pequeño toque extra que estabas buscando a tu Sitio web. El efecto "Revelar", que permite revelar el pie de página al desplazarse hacia abajo, le dará un diseño muy encantador a sus páginas web.
Por lo general, este efecto requiere un CSS personalizado que es limitante y difícil de usar. Pero gracias a DIVI, puedes lograrlo fácilmente.
En este tutorial, le mostraremos cómo crear un efecto Revelar en su pie de página fijo. Todo lo que necesita son unos sencillos pasos.
Vamos a empezar!
vista
Aquí hay una breve descripción general del pie de página adhesivo con efecto Revelar que crearemos en este tutorial.
Crear una nueva plantilla de pie de página
Visita Divi >> Creador de temas desde el tablero de WordPress.
Allí, haga clic en "Agregar un pie de página global"
Entonces elige "Creación de un pie de página global"
En este tutorial, usaremos un diseño prefabricado para acelerar el proceso de creación, pero también puede hacerlo desde cero. Para hacer esto, haga clic en "Cargar desde la biblioteca".
Debajo de la ventana emergente Cargar desde la biblioteca, busque y use el diseño " Marina Acerca de la página » del paquete de diseño Marina.
Una vez que se carga el diseño, elimine todas las secciones excepto la sección de pie de página. Usaremos esta sección de pie de página para agregar el efecto Revelar.
Agregue el efecto Revelar y haga que el pie de página sea pegajoso
Hacer pie de página pegajoso
Ver también: ¿Cómo crear un menú deslizante y push en DIVI?
Primero, necesitamos hacer que el pie de página sea pegajoso. Para hacer esto, abra la configuración de la sección y haga clic en la pestaña Avanzado. Por debajo “Efectos de desplazamiento”, cambie la configuración de la siguiente manera:
- Posición pegajosa: Stick to Bottom
Actualizar índice Z para estado pegajoso
A continuación, debemos dar a nuestra sección de pie de página un índice z de 0 cuando la sección está en estado fijo. Esto permitirá que la sección permanezca detrás de otras secciones o elementos en el cuerpo de la página al desplazarse.
Para hacer esto, actualice la posición del Índice Z haciendo clic en el ícono pegajoso al lado de la opción Índice Z. Luego actualice el índice Z a 0.
- Índice Z (pegajoso): 0
Actualizar el índice Z del marcador de posición del pie de página fijo
Cuando a un elemento se le asigna una posición fija en Divi, también se crea automáticamente un elemento de marcador de posición duplicado. Esto proporciona la funcionalidad necesaria para posicionar y diseñar elementos adhesivos utilizando Divi Builder.
Ver también: Cómo crear un encabezado global con el generador de temas de Divi
En este caso, se crea un marcador de posición de sección de pie de página con un índice z predeterminado de 1. No queremos que nuestra sección de pie de página adhesiva real (ahora con un índice Z de 0) esté detrás de la sección de marcador de posición, por lo que debemos actualizar el Índice Z del marcador de posición a -1.
Para hacer esto, primero agregue una clase CSS personalizada a la sección de pie de página de la siguiente manera:
- Clase CSS: sticky-footer-reveal
A continuación, abra la configuración de la página utilizando el menú de configuración de la Creador de temas.
Ir a la " Avanzado " e ingrese el siguiente CSS en el cuadro Personalizar CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Esto obligará a la sección de marcador de posición a permanecer detrás del pie de página adhesivo.
Guardar cambios
Una vez hecho esto, guarde los cambios realizados en la plantilla de pie de página.
Guarde también los cambios de Divi Theme Builder.
Resultado final
Para ver el resultado final, vea una página y desplácese.
Descarga DIVI ahora!!!
Conclusión
En Divi, agregar un pie de página adhesivo a tu Sitio web no requiere un complemento ni CSS personalizado complicado. Usando el constructor temas, puede crear fácilmente una plantilla de pie de página con Revelar efecto en cuestión de minutos.
Con suerte, esto le dará a su diseño de pie de página un impulso sutil con una interacción atractiva que el visitantes Lo apreciaría. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Ver tambien nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
