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
Móvil
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.
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.
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
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.
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
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 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 # 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)
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
Índice Z
Esta nueva sección también necesita un mayor índice z.
- Índice Z: 3
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
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.
- Acolchado superior: 500 px
Í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 columna
Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
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í
Espaciado de columna
Abra la configuración de la columna 1 a continuación y agregue algo de relleno izquierdo.
- Relleno izquierdo: 20px
Columna borde derecho
Agregue un borde derecho a la columna también.
- Ancho del borde derecho: 1px
- Color del borde derecho: # 515151
Copiar 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
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
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.
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
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)
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 de pie de página.
- URL del enlace del módulo: #
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
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)
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.
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 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.
Cambiar contenido
Cambiar el contenido de cada duplicado.
Cambiar enlaces
Junto con el enlace.
- URL del enlace del módulo: #
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;
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)
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 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.