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

A lo largo de todas las tendencias de diseño, los pies de página siguen siendo esenciales. La gente se ha acostumbrado tanto a ellos, lo que a su vez los hace muy fáciles de usar. Ayudan a los visitantes a organizar su estancia en su sitio web y a navegar hasta la página precisa que buscan. 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 una dimensión e interacción adicionales, le encantará esta publicación. Combinaremos de forma creativa 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

Móvil

Descarga 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

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

Agregar nueva página en blanco

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

Cargar la página de inicio del paquete de diseño de la empresa SaaS

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

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

Agregar índice Z a la sección Hero

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

• Índice Z: 3

Copiar índice Z y pegar 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 del pie de página que agregaremos más adelante en la publicación.

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

Para asegurarnos de que el pie de página permanezca oculto hasta la parte inferior de la página, también eliminaremos todas las animaciones de la sección. Abra la sección de héroe y elimine la animación.

• Estilo de animación: Ninguno

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.

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

Cambiar el color de fondo

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

• Color de fondo: # f2f2f2

4. Agregue la sección regular n. ° 1 al final de la página

Configuración de la 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.

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

Divisor superior

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

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

Índice Z

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

• Índice Z: 3

5. Agregue la sección regular n. ° 2 al final de la página

Configuración de la 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

Dimensionamiento

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

• Ancho: 100%

Espaciado

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

• Relleno superior: 500px

Í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

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado de columnas

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

• Relleno izquierdo: 20px

Borde derecho de la columna

Agrega un borde derecho a la columna también.

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

Copiar y pegar estilos de columna

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

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.

Dimensionamiento

Vaya 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

Espaciado

Agregue un poco de margen inferior también.

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

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.

Configuración de texto

Modifique 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: 19px

Espaciado

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

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

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.

Añadir enlace

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

• URL del enlace del módulo: #

Configuración de texto

A continuación, modifique la configuración del texto.

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

Espaciado

Y agregue un acolchado superior e inferior personalizado en diferentes tamaños de pantalla.

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

Clonar el módulo de texto n. ° 2 tantas veces como sea necesario

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

Cambiar contenido

Asegúrate de cambiar el contenido.

Cambiar enlaces

Junto con los enlaces.

• URL del enlace del módulo: #

Clonar módulos en la columna 2 y colocarlos en las 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.

Cambiar contenido

Cambie el contenido de cada duplicado.

Cambiar enlaces

Junto con el enlace.

• URL del enlace del módulo: #

6.Haga que la sección n. ° 2 esté fija 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;

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

Agregue margen inferior en diferentes tamaños de pantalla

También necesitaremos algo de espacio en la parte inferior de nuestra página que permitirá 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 ¡listo!

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

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear hermosos desplazamientos de pie de página que se muestran debajo de los divisores de secció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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.