Cree una lista de navegación de cartera desplazable con los efectos de desplazamiento de Divi

Avance

Antes de comenzar con el tutorial, echemos un vistazo al diseño en diferentes tamaños de pantalla.

Escritorio

Móvil

Estructura alámbrica

Esta lista de navegación de cartera desplazable receptiva se crea con una serie de filas repetidas y alternas. Por ese motivo, hemos incluido una captura de pantalla de la vista de estructura alámbrica. Esto te ayudará a seguir el orden de las filas y sus respectivos módulos. Le sugerimos que etiquete cada fila en consecuencia para realizar un seguimiento. También hemos agregado esas instrucciones en los pasos del tutorial.

Descarga las Secciones Hero GRATIS

Para poner sus manos en el diseño de la lista de navegación de cartera desplazable gratuita, 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.

1. Crear nueva sección

Agregar sección

Fondo

Comience con una sección regular dentro de una página nueva o existente. Antes de agregar filas o módulos, agregue un color de fondo a la sección.

• Color de fondo: #222831

Espaciado

Agregue suficiente espacio a la sección para que los efectos de desplazamiento también hagan su magia.

• Relleno superior e inferior: 660px

2. Crear lista de navegación de cartera desplazable

Agregar fila 1

Estructura de la columna

Agregue la primera fila y elija la siguiente estructura de columna:

Dimensionamiento

Ajuste el ancho de la fila siguiente.

• Ancho: 90%
• Ancho máximo: 2560px

Espaciado

Luego, ajuste la configuración de espaciado.

• Relleno izquierdo
  
  • Escritorio: 130px
  • Tableta y teléfono: 50px

Etiqueta de administrador

Y etiqueta la fila.

• Etiqueta de administración: Fila 1

Agregar módulo de texto a la columna

Contenido

Agregue un módulo de texto para el título. Inserte algún contenido H1 de su elección.

Texto de encabezado

Pase a la pestaña de diseño y diseñe el texto del título de la siguiente manera:

• Nivel de título: H1
• Fuente: Alata
• Peso: Negrita
• Color: #a3f7bf
• Tamaño
  
  • Escritorio: 190px
  • Tableta: 120px
  • Teléfono: 50px
• Espaciado de letras
  
  • Escritorio y tableta: 7px
  • Teléfono: 8px

Efectos de desplazamiento

Por último, pero no menos importante, agregue un efecto de desplazamiento de aparición y desaparición gradual a la pestaña avanzada.

• Habilitar efecto: aparición y desaparición gradual
• Vista inferior
  
  • Posición: 100%
  • Opacidad inicial: 100%
• Opacidad media
  
  • Posición: 50%
  • Medio: 100%
• Vista superior
  
  • Posición: 80%
  • Opacidad final: 20%

Agregar fila 2

Estructura de la columna

Ahora es el momento de agregar los elementos de navegación. Agregue una nueva fila con dos columnas del mismo tamaño.

Etiqueta de administrador

Etiqueta la fila.

• Etiqueta de administrador: Fila 2

Dimensionamiento

Ajuste la configuración de tamaño también.

• Ancho del canalón: 1
• Ancho: 80%
• Ancho máximo: 1920px

Configuración de la columna 1

CSS personalizado

Antes de agregar módulos, agregue una línea de código CSS a los elementos principales de las columnas para asegurarse de que las proporciones permanezcan iguales en tamaños de pantalla más pequeños. Comience con la columna 1:

• Elemento principal: ancho: 20% !importante

Configuración de la columna 2

CSS personalizado

Haz lo mismo con la segunda columna.

• Elemento principal: ancho: 80% !importante

Agregar módulo de botones a la columna 1

Contenido

Ahora, agregue un módulo de botón a la columna 1 con alguna copia de su elección.

• Texto del botón: Ver

Enlace

Agregue un enlace de anclaje al módulo a continuación. Agregaremos un ID de CSS coincidente para este enlace ancla más adelante en el tutorial.

• URL del vínculo del botón: #VB

Alineación

Pase a la pestaña de diseño y cambie la alineación del botón.

• Alineación de botones: Centro

Botón

Luego, diseñe el botón en consecuencia:

• Estilos personalizados para botón: Sí
• Tamano del texto
  
  • Escritorio: 30px
  • Tableta: 25px
  • Teléfono: 20px
• Color: Blanco #ffffff
• Fondo: gris oscuro #222831
• Ancho del borde: 0px
• Radio del borde: 0px
• Espaciado entre letras: 1px
• Fuente: Alata
• Mostrar icono de botón: No

Espaciado

Realice cambios en la configuración de espaciado también.

• Acolchado superior
  
  • Escritorio: 25px
  • Tableta: 15px
  • Teléfono: 5px

Efectos de desplazamiento

Y agregue un efecto de desplazamiento de entrada y salida gradual.

• Habilitar efecto: aparición y desaparición gradual
• Vista inferior
  
  • Posición: 40%
  • Opacidad inicial: 0%
• Opacidad media
  
  • Fondo: 45%
  • Medio: 100%
  • Superior: 55%
• Vista superior
  
  • Posición: 60%
  • Opacidad final: 0%

Sombra de la caja

Antes de pasar al siguiente módulo, agregue una sombra de cuadro a la configuración de desplazamiento del botón.

• Sombra de cuadro: cuarta opción
• Posición Horizontal: 0px
• Posición vertical
  
  • Pasar el cursor: 5px
• Fuerza de desenfoque: 0px
• Fuerza de propagación: 0px
• Color de sombra: Verde aguamarina #a3f7bf

Agregar módulo de texto a la columna 2

Contenido

Continúe agregando un módulo de texto a la columna 2 con algún contenido H3 de su elección.

Texto de encabezado

Pase a la pestaña de diseño y diseñe el texto del título de la siguiente manera:

• Nivel de título: H3
• Fuente: Alata
• Color
  
  • Escritorio: Blanco #ffffff
  • Desplazarse: Verde aguamarina #a3f7bf
• Tamano del texto
  
  • Escritorio: 80px
  • Tableta: 65px
  • Teléfono: 38px

Efectos de desplazamiento

Y complete la configuración del módulo agregando un efecto de desplazamiento de entrada y salida gradual en la pestaña avanzada.

• Habilitar efecto: aparición y desaparición gradual
• Vista inferior
  
  • Posición: 40%
  • Opacidad inicial: 15%
• Opacidad media
  
  • Fondo: 45%
  • Medio: 100%
  • Superior: 55%
• Vista superior
  
  • Posición: 60%
  • Opacidad final: 15%

Fila duplicada 2

Para completar la lista de navegación, duplique esta fila tres veces. Las nuevas filas se volverán a numerar; 2, 3 y 4.

Ajustar fila 3

Etiqueta de administrador de fila

Cambie la etiqueta de administrador de la fila de 2 a 3.

• Etiqueta de administración: Fila 3

Módulo de botones

Cambie el enlace ancla de #VB a #WEB.

• URL del enlace del botón: #WEB

Módulo de texto

Cambie también el contenido H3 en el módulo de texto.

• Texto del cuerpo: sitios web

Ajustar fila 4

Etiqueta de administrador de fila

Cambie la etiqueta de administrador de la fila de 2 a 4.

• Etiqueta de administrador: Fila 4

Módulo de botones

Cambie el enlace de anclaje de #VB a #MA.

• URL del enlace del botón: #MA

Módulo de texto

Cambie el contenido de H3 también.

• Texto del cuerpo: aplicaciones móviles

Ajustar fila 5

Etiqueta de administrador de fila

Cambie la etiqueta de administrador de la fila de 2 a 5.

• Etiqueta de administrador: Fila 5

Distancia entre filas

Agregue un poco de margen inferior.

• Margen inferior
  
  • Escritorio 230px
  • Tableta: 100px
  • Teléfono: 60px

Módulo de botones

Cambia el enlace ancla de #VB a #UX.

• URL del enlace del botón: #UX

Módulo de texto

Y cambie el contenido de H3 aquí también.

• Texto del cuerpo: Diseño UX

3. Crear elementos de cartera

Agregar fila 6

Estructura de la columna

La lista desplazable de navegación de la cartera enlaza con los elementos de la cartera. Cada elemento se compone de dos filas. Una fila con un divisor invisible y otra con un módulo de llamada a la acción. Los ID de CSS se agregan a la fila con el divisor. De esta forma, la navegación ancla no se detendrá en la parte superior del elemento de la cartera, sino en el medio.

Vamos a crear los elementos ahora. Agregue una fila con una columna.

Etiqueta de administrador

No olvide etiquetar la nueva fila.

• Etiqueta de administrador: Fila 6

ID y clases de CSS

Inserte una ID de CSS coincidente en la pestaña avanzada.

• ID de CSS: VB

Agregue el módulo divisor a la fila 6

Visibilidad

Agregue un divisor invisible a la columna de la fila.

• Mostrar divisor: No

Fila duplicada 6

Duplica esta fila tres veces. Las nuevas filas se volverán a numerar; 8, 10 y 12.

Ajustar fila 8

Etiqueta de administrador

Cambie la etiqueta de administrador de 6 a 8.

• Etiqueta de administración: Fila 8

ID y clases de CSS

Cambie la ID de CSS de VB a WEB.

• ID CSS: WEB

Ajustar fila 10

Etiqueta de administrador

Cambie la etiqueta de administrador de 6 a 10.

• Etiqueta de administrador: Fila 10

ID y clases de CSS

Cambie la ID de CSS de VB a MA.

• ID de CSS: MA

Ajustar fila 12

Etiqueta de administrador

Cambie la etiqueta de administrador de 6 a 12.

• Etiqueta de administrador: Fila 12

ID y clases de CSS

Etiqueta de administrador

Cambie la ID de CSS de VB a UX.

• ID de CSS: UX

Agregar fila 7

Estructura de la columna

Deje las cuatro filas con divisores donde están por ahora. Agregue una nueva fila con una columna.

Fondo

Sin agregar un módulo todavía, abra la configuración de la fila y aplique estilo al fondo de la siguiente manera:

• Imagen de fondo: Foto
  
  • Fusión de imágenes: Multiplicar
• Gradiente de fondo
  
  • Color 1: Gris oscuro #222831
  • Color 2: Transparente
  • Tipo: Lineal
  • Dirección: 90 grados
  • Posición inicial: 50%
  • Posición final: 100%
  • Coloque el degradado sobre la imagen de fondo: Sí

Etiqueta de administrador

Etiqueta la fila.

• Etiqueta de administrador: fila 7

Dimensionamiento

Ajuste la configuración de tamaño de la fila siguiente.

• Ancho: 80%
• Ancho máximo: 2560px
• Alineación: Centro

Borde

Agregue algunas esquinas redondeadas también.

• Esquinas redondeadas: 25px

Efectos de desplazamiento

Y habilite un efecto de desplazamiento de entrada y salida gradual.

• Habilitar efectos: aparición y desaparición gradual
  
  • Opacidad inicial: 0%
  • Opacidad media: 100%
    
    • Posición: 80%
  • Opacidad final: 20%

Agregue el módulo de llamada a la acción a la fila 7

Contenido

Ahora agregue un módulo de llamada a la acción a la fila.

• Título: Marca visual
• Botón: Más información
• Cuerpo: Texto Descriptivo

Fondo

Elimina el color de fondo predeterminado.

• Antecedentes: Ninguno

Enlace

Añadir un enlace a la página correspondiente. Insertaremos un # por ahora.

• Enlace: #

Texto del título

Aplique estilo al texto del título a continuación.

• Nivel de título: H2
• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño
  
  • Escritorio: 70px
  • Tableta: 60px
  • Teléfono: 48px
• Espaciado entre letras: 1px

Cuerpo de texto

Dale estilo al cuerpo del texto también.

• Fuente: Lato
• Color: Blanco #ffffff
• Tamaño
  
  • Escritorio: 19px
  • Tableta: 20px
  • Teléfono: 18px
• Altura de la línea: 1,8 em

Botón

Pase a la configuración del botón y aplique los siguientes cambios:

• Estilos personalizados: Sí
• Tamaño del texto: 20px
• Color del texto: Gris oscuro #222831
• Fondo: verde aguamarina #a3f7bf
• Radio del borde: 9px
• Espaciado entre letras: 1px
• Fuente del botón: Alata
• Margen superior: 35px

Dimensionamiento

Ajuste el tamaño del módulo también.

• Ancho: 50%
• Anchura máxima
  
  • Escritorio: 50%
  • Tableta y Teléfono: 100%
• Alineación: Izquierda

Espaciado

Agregue algo de relleno al módulo también.

• Relleno izquierdo:
  
  • Escritorio: 90px
• Relleno izquierdo y derecho:
  
  • Tableta: 50px
  • Teléfono: 40px

CSS personalizado

Por último, pero no menos importante, agregue una línea de código CSS al título de la promoción en la pestaña avanzada.

• Título de la promoción: padding-bottom: 30px;

Fila duplicada 7

Duplica la fila 7 tres veces. Las nuevas filas se volverán a numerar; 9, 11 y 13.

Ajustar fila 9

Fondo

Cambie la imagen de fondo y cambie la dirección del degradado.

• Imagen de fondo: nueva foto
• Gradiente de fondo
  
  • Color 1: Transparente
  • Color 2: gris oscuro #222831
  • Posición de inicio: 0%
  • Posición final: 50%

Etiqueta de administrador

Actualice la etiqueta de administrador de la fila de 7 a 9.

• Etiqueta de administración: fila 9

Ajuste el módulo de llamada a la acción en la fila 9

Contenido

Actualice el contenido del módulo.

• Título: Sitios web
• Cuerpo: Nuevo texto descriptivo

Enlace

Actualice el enlace también.

• Enlace: Nuevo enlace

Dimensionamiento

Cambie la alineación del módulo de izquierda a derecha.

• Alineación del módulo: Derecha

Espaciado

Cambie el relleno del escritorio de izquierda a derecha. La configuración de la tableta y el móvil debe seguir siendo la misma.

• Relleno derecho
  
  • Escritorio: 90px

Ajustar fila 11

Fondo

Cambia la imagen de fondo en la nueva fila.

• Imagen de fondo: otra foto

Etiqueta de administrador

Actualice la etiqueta de administrador de la fila de 7 a 11.

• Etiqueta de administración: fila 11.

Ajuste el módulo de llamada a la acción en la fila 11

Contenido

Cambie el contenido dentro del módulo de llamada a la acción.

Enlace

Modifique el enlace también.

• Enlace: Nuevo enlace

Ajustar fila 13

Fondo

Cambie la imagen de fondo y cambie la dirección del degradado.

• Imagen de fondo: nueva foto
• Gradiente de fondo
  
  • Color 1: Transparente
  • Color 2: gris oscuro #222831
  • Posición de inicio: 0%
  • Posición final: 50%

Etiqueta de administrador

Abra la pestaña de la etiqueta de administrador y actualice el número de fila a 13.

Ajuste el módulo de llamada a la acción en la fila 13

Contenido

Actualice el contenido del módulo.

• Título: Diseño UX
• Cuerpo: Nuevo texto descriptivo

Enlace

Actualice el enlace también.

• Enlace: Nuevo enlace

Dimensionamiento

Cambie la alineación del módulo de izquierda a derecha.

• Alineación del módulo: Derecha

Espaciado

Cambie el relleno del escritorio de izquierda a derecha. La configuración de la tableta y el móvil debe permanecer igual.

• Relleno derecho
  
  • Escritorio: 90px

Reorganizar filas

Mueva las filas 7, 9 y 11.

Coloque las filas en el orden correcto, según su etiqueta de administrador.

Compare su estructura alámbrica

Vuelva a verificar la estructura metálica de la lista de navegación de su cartera desplazable y los elementos. Las filas deben estar en orden para que los enlaces ancla funcionen correctamente. Aquí hay otro vistazo a nuestra vista de estructura alámbrica:

Avance

Hemos terminado de seguir todos los pasos para recrear la lista de navegación de cartera desplazable. Echemos otro vistazo a cómo se ve el diseño en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En este tutorial paso a paso, recreamos una lista de navegación de cartera desplazable con los efectos de desplazamiento de Divi. Además, agregamos artículos de cartera. La navegación se controla con enlaces ancla e ID CSS. Esta es una excelente manera de mostrar de forma interactiva los elementos de la cartera. ¡Déjanos un comentario si te ha gustado o tienes alguna duda!