Agregar una revelación de pie de página adhesivo a su sitio web puede aportar ese pequeño toque adicional que estaba buscando para darle al pie de página de su sitio web. El efecto de revelación del pie de página abre y cierra la visibilidad del pie de página a medida que se desplaza hacia y desde la parte inferior de la página (desvelando el pie de página como una persiana en una ventana). Por lo general, este efecto requiere CSS personalizado que es limitante y difícil de trabajar. Pero con las opciones de creación de temas de Divi , puede agregar fácilmente un efecto de revelación de pie de página a cualquier diseño de pie de página personalizado creado con las opciones integradas de Divi.
En el tutorial Divi de hoy , le mostraremos cómo crear una revelación de pie de página adhesivo en Divi. Todo lo que necesita son unos sencillos pasos.
¡Empecemos!
Este es un vistazo rápido al diseño revelador del pie de página fijo que construiremos en este tutorial.
Para poner sus manos en la plantilla de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la plantilla a su sitio web, deberá ir a Divi Theme Builder y usar la opción de portabilidad para importar el archivo .json al generador de temas.
Vayamos al tutorial, ¿de acuerdo?
Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress. Allí, agregue un nuevo pie de página global o personalizado.
A continuación, seleccione la opción «Elegir un diseño prefabricado». Para este tutorial, vamos a utilizar un diseño prefabricado para acelerar el proceso de diseño. Pero, podrías empezar a construir uno desde cero si quieres.
En la ventana emergente Agregar de la biblioteca, busque y use el diseño de página Acerca de Marina del Paquete de diseño de Marina.
Una vez que se haya cargado el diseño, elimine todas las secciones excepto la sección del pie de página inferior. Usaremos esta sección de pie de página para agregar el efecto de revelación de pie de página.
Para agregar el efecto de revelación de pie de página a la sección de pie de página, deberemos hacer lo siguiente.
1: Agregar posición fija a la sección de pie de página
Primero, debemos darle a la sección de pie de página una posición fija. Para hacer esto, abra la configuración de la sección y haga clic en la pestaña Avanzado. En Efectos de desplazamiento, actualice la posición adhesiva para que se adhiera a la parte inferior:
- Posición pegajosa: Stick to Bottom
1: Actualizar Z-Index para Sticky State
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 se sitúe 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 para activar la pestaña de estilo pegajoso. Luego, actualice el Índice Z a 0 debajo de la pestaña adhesiva.
- Índice Z (pegajoso): 0
3: 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 en segundo plano. Esto ayuda a brindar la funcionalidad necesaria para posicionar y diseñar los elementos adhesivos utilizando Divi Builder. En este caso, se crea un marcador de posición de la 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) quede 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
Luego abra la configuración de página de la plantilla de pie de página utilizando el menú de configuración del generador. En el modal Configuración de plantilla de pie de página, seleccione la pestaña Avanzado e ingrese el siguiente CSS en el cuadro CSS personalizado:
|
01
02
03
|
.sticky-footer-reveal.et_pb_sticky_placeholder {z-index:-1;} |
Esto obligará a la sección de marcador de posición a sentarse detrás del pie de página con el efecto de revelación de pie de página fijo para que pueda interactuar con el contenido de la sección de pie de página.
4: Guardar cambios
Una vez hecho esto, guarde los cambios en la plantilla de pie de página y el generador de temas.
Resultado final
Para ver el resultado final, consulte una página en vivo y desplácese hacia afuera. ¡Aquí lo tienes!
Pensamientos finales
En Divi, agregar una revelación de pie de página fijo a su sitio web no requiere un complemento o CSS personalizado complicado. Con el generador de temas, puede crear fácilmente una plantilla de pie de página y diseñar una sección de pie de página con el efecto de revelación de pie de página en minutos. Con suerte, esto proporcionará un impulso sutil al diseño de su pie de página con una interacción tentadora que los visitantes disfrutarán.
Espero escuchar de usted en los comentarios.
¡Salud!