Cómo crear hermosas revelaciones de desplazamiento de pie de página debajo de los divisores de sección de Divi


En todas las tendencias de diseño, los pies de página siguen siendo esenciales. La gente se ha acostumbrado tanto a ellos, que a su vez los hace muy fáciles de usar. Ayudan a los visitantes a organizar su estadía en su sitio web y a navegar a la página precisa que están buscando. Con Divi, puede crear fácilmente cualquier tipo de pie de página en una sola sección.

Ahora, si está buscando darle a su pie de página alguna dimensión e interacción adicionales, le encantará esta publicación. Combinaremos creativamente una sección de pie de página con divisores de sección para crear una revelación de desplazamiento de pie de página.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

desplazamiento de pie de página

Móvil

desplazamiento de pie de página

Descargar The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=R5gLmBjoBOw (/ incrustar)

Suscríbase a nuestro canal de Youtube

1. Cree una nueva página en blanco y cargue el diseño de elección

Agregar nueva página en blanco

Lo primero que deberá hacer es crear una nueva página en blanco.

desplazamiento de pie de página

Cargue la página de inicio de SaaS Company Layout Pack

Cambie al Visual Builder y cargue la página de inicio del paquete de diseño de la compañía SaaS. Aunque estamos utilizando este diseño específico, puede hacer que la técnica funcione en cualquier tipo de página en la que esté trabajando.

desplazamiento de pie de página

2. Agregue el índice Z a cada sección y elimine las animaciones de sección

Agregar índice Z a la sección de héroe

Continúe cambiando el índice z de la sección de héroe en la página.

  • Índice Z: 3

desplazamiento de pie de página

Copie el índice Z y péguelo en todas las demás secciones de la página

Copie el índice z y péguelo en todas las demás secciones de la página. Aumentar el índice z para cada una de las secciones es un paso crucial para que el tutorial funcione. Permitirá que cada una de las secciones aparezca en la parte superior de la sección de pie de página que agregaremos más adelante en la publicación.

desplazamiento de pie de página

desplazamiento de pie de página

Eliminar animación de sección de héroe

Para asegurarnos de que el pie de página permanezca oculto hasta el final de la página, también eliminaremos todas las animaciones de sección. Abre la sección del héroe y elimina la animación.

  • Estilo de animación: ninguno

desplazamiento de pie de página

Extienda la animación a todas las secciones de la página

Extienda los estilos de animación a todas las secciones de la página.

desplazamiento de pie de página

desplazamiento de pie de página

3. Modificar la última sección de la página

Cambiar color de fondo

Pase a la última sección de la página y cambie el color de fondo.

  • Color de fondo: # f2f2f2

desplazamiento de pie de página

4. Agregue la Sección Regular # 1 al final de la página

Configuraciones de sección

Color de fondo

Como puede observar en la vista previa de esta publicación, el pie de página aparecerá debajo de un divisor de sección. Dedicaremos una nueva sección en la parte inferior de nuestra página a este divisor de sección. Abra la configuración de la sección y use un color de fondo completamente transparente. Esto permitirá que el pie de página se muestre a través del contenedor de la sección, aunque su posición esté debajo de él.

  • Color de fondo: rgba (0,0,0,0)

desplazamiento de pie de página

Divisor superior

Pase a la pestaña de diseño de la sección y agregue un divisor superior de su elección.

  • Estilo divisor: Buscar en la lista
  • Altura del divisor: 250 px (escritorio), 150 px (tableta), 100 px (teléfono)
  • Divisor Repetición Horizontal: 2x

desplazamiento de pie de página

Índice Z

Esta nueva sección también necesita un mayor índice z.

  • Índice Z: 3

desplazamiento de pie de página

5. Agregue la Sección Regular # 2 al final de la página

Configuraciones de sección

Color de fondo

¡Es hora de crear la sección de pie de página! Agregue otra nueva sección regular al final de la página y seleccione un color de fondo de su elección.

  • Color de fondo: # 202332

desplazamiento de pie de página

Dimensionamiento

Vaya a la pestaña de diseño y asegúrese de que el ancho sea "100%".

  • Ancho: 100%

desplazamiento de pie de página

Espaciado

También necesitaremos aumentar el relleno superior de la sección.

  • Acolchado superior: 500 px

desplazamiento de pie de página

Índice Z

El índice z que estamos asignando a esta sección es más bajo que el de las otras secciones de la página. Esto nos ayudará a ocultar la sección hasta que estemos al final de la página.

  • Índice Z: 2

desplazamiento de pie de página

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

desplazamiento de pie de página

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño en consecuencia:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí

desplazamiento de pie de página

Espaciado de columna

Abra la configuración de la columna 1 a continuación y agregue algo de relleno izquierdo.

  • Relleno izquierdo: 20px

desplazamiento de pie de página

desplazamiento de pie de página

Columna borde derecho

Agregue un borde derecho a la columna también.

  • Ancho del borde derecho: 1px
  • Color del borde derecho: # 515151

desplazamiento de pie de página

Copiar pegar estilos de columna

Aplique los cambios a todas las columnas extendiendo los estilos o usando la opción copiar y pegar.

desplazamiento de pie de página

desplazamiento de pie de página

Agregar módulo de imagen a la columna 1

Cargar imagen

¡Es hora de comenzar a agregar módulos! Agregue un nuevo Módulo de imagen a la primera columna y cargue su logotipo.

desplazamiento de pie de página

Dimensionamiento

Pase a la pestaña de diseño y cambie el ancho en diferentes tamaños de pantalla.

  • Ancho: 35% (escritorio), 30% (tableta), 25% (teléfono)
  • Alineación del módulo: izquierda

desplazamiento de pie de página

Espaciado

Agregue un poco de margen inferior también.

  • Mostrar espacio debajo de la imagen: Sí
  • Margen inferior: 50 px

desplazamiento de pie de página

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido

¡A la segunda columna! Agregue un primer módulo de texto con algún contenido de su elección.

desplazamiento de pie de página

Configuraciones de texto

Modificar la configuración del texto.

  • Fuente de texto: Nunito Sans
  • Peso de la fuente del texto: semi negrita
  • Color del texto: #ffffff
  • Tamaño del texto: 19 px

desplazamiento de pie de página

Espaciado

Y agregue algunos márgenes superior e inferior personalizados en diferentes tamaños de pantalla.

  • Margen superior: 15 px (computadora de escritorio y tableta), 10 px (teléfono)
  • Margen inferior: 15 px (escritorio y tableta), 10 px (teléfono)

desplazamiento de pie de página

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Agregue un segundo módulo de texto a la segunda columna e ingrese algún contenido de su elección.

desplazamiento de pie de página

Añadir enlace

Agregue un enlace que coincida con el elemento de pie de página.

  • URL del enlace del módulo: #

desplazamiento de pie de página

Configuraciones de texto

Modifique la configuración de texto a continuación.

  • Fuente de texto: Nunito Sans
  • Color del texto: #dbdbdb
  • Tamaño de texto: 17px

desplazamiento de pie de página

Espaciado

Y agregue algunos rellenos superiores e inferiores personalizados en diferentes tamaños de pantalla.

  • Margen superior: 15 px (computadora de escritorio y tableta), 10 px (teléfono)
  • Margen inferior: 15 px (escritorio y tableta), 10 px (teléfono)

desplazamiento de pie de página

Clone Text Module # 2 tantas veces como sea necesario

Clone el segundo módulo de texto en la columna 2 tantas veces como sea necesario.

desplazamiento de pie de página

Cambiar contenido

Asegúrate de cambiar el contenido.

desplazamiento de pie de página

Cambiar enlaces

Junto con los enlaces.

  • URL del enlace del módulo: #

desplazamiento de pie de página

Clonar módulos en la columna 2 y colocar en columnas restantes

Una vez que haya completado la segunda columna, puede clonar ambos módulos tantas veces como sea necesario y colocar los duplicados en las dos columnas restantes de la fila.

desplazamiento de pie de página

Cambiar contenido

Cambiar el contenido de cada duplicado.

desplazamiento de pie de página

Cambiar enlaces

Junto con el enlace.

  • URL del enlace del módulo: #

desplazamiento de pie de página

6. Haga que la Sección # 2 se fije en la parte inferior de la página

Agregar CSS personalizado

Ahora, para crear la revelación de desplazamiento, nos aseguraremos de que la sección de pie de página se adhiera a la parte inferior de nuestra página agregando dos líneas de código CSS al elemento principal de la sección.

position: fixed;
bottom: 0;

desplazamiento de pie de página

desplazamiento de pie de página

7. Agregue el margen inferior a la sección n. ° 1 para crear el efecto Revelar

Agregar margen inferior en diferentes tamaños de pantalla

También necesitaremos espacio en la parte inferior de nuestra página que permita que aparezca el pie de página. ¡Abra la sección que contiene el divisor de sección y agregue un margen inferior en diferentes tamaños de pantalla y ya está!

  • Margen inferior: 400 px (escritorio), 700 px (tableta), 800 px (teléfono)

desplazamiento de pie de página

desplazamiento de pie de página

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

desplazamiento de pie de página

Móvil

desplazamiento de pie de página

Pensamientos finales

En esta publicación, le mostramos cómo crear un hermoso desplazamiento de pie de página que revela los divisores de la sección a continuación para crear un efecto único. Esta es una excelente manera de hacer que cualquier pie de página sea interactivo y llamar la atención sobre los elementos que se enumeran en el pie de página. ¡Esperamos que este tutorial lo inspire a crear sus propias revelaciones de pie de página divisor de sección también! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.