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 que, a su vez, los hace muy fáciles de usar. Ayudan a los visitantes a organizar su estancia en su sitio web y navegar a la página precisa que están buscando. Con Divi , puedes 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!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño 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 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!
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 deberá hacer es crear una nueva página en blanco.
Cargue la página de destino del paquete de diseño de la empresa SaaS
Cambie a Visual Builder y cargue la página de destino 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. Agregar índice Z a cada sección y eliminar animaciones de sección
Agregar índice Z a la sección de héroe
Continúe cambiando el índice z de la sección principal de la página.
- Índice Z: 3
Copie el índice Z y pegue 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.
Quitar la animación de la sección del 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 sección. Abra la sección de héroe y elimine la animación.
- Estilo de animación: Ninguno
Extender 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
Ajustes de sección
Color de fondo
Como puede notar 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 separador de secciones. 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 estará debajo.
- 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 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 #2 al final de la página
Ajustes de sección
Color de fondo
¡Es hora de crear la sección de pie de página! Agregue otra nueva sección regular en la parte inferior de la página y seleccione el 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 en la parte inferior 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 del canalón: 1
- Igualar alturas de columna: Sí
Espaciado de columnas
Abra la configuración de la columna 1 a continuación y agregue un poco de relleno izquierdo.
- Relleno izquierdo: 20px
Borde derecho de la columna
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: 50px
Agregue el Módulo de Texto #1 a la Columna 2
Agregar contenido
¡A por 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 del texto: Nunito Sans
- Peso de fuente de texto: semi negrita
- Color del texto: #ffffff
- Tamaño del texto: 19px
Espaciado
Y agregue un margen superior e inferior personalizado en diferentes tamaños de pantalla.
- Margen superior: 15 px (computadora de escritorio y tableta), 10 px (teléfono)
- Margen inferior: 15 px (computadora de escritorio y tableta), 10 px (teléfono)
Agregue el Módulo de Texto #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: #
Configuración de texto
Modifique la configuración de texto a continuación.
- Fuente del texto: Nunito Sans
- Color del texto: #dbdbdb
- Tamaño del texto: 17px
Espaciado
Y agregue un poco de relleno superior e inferior personalizado en diferentes tamaños de pantalla.
- Margen superior: 15 px (computadora de escritorio y tableta), 10 px (teléfono)
- Margen inferior: 15 px (computadora de 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 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
Cambia el contenido de cada duplicado.
Cambiar enlaces
Junto con el enlace.
- URL del enlace del módulo: #
6. Haz que la sección n.° 2 quede 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.
|
01
02
|
position: fixed;bottom: 0; |
7. Agregue el margen inferior a la sección n. ° 1 para crear un efecto de revelación
Agregar margen inferior en diferentes tamaños de pantalla
También necesitaremos algo de 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 ¡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 hermosas revelaciones de desplazamiento de pie de página debajo de los separadores 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 de división 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.