Cree una lista de navegación de cartera desplazable con los efectos de desplazamiento de Divi
Publicado: 2020-06-11Las páginas de portafolio son la excusa perfecta para ser creativo con su diseño web. En este tutorial, le mostraremos cómo armar una lista de navegación de portafolio desplazable llamativa para darle vida a cualquier página de portafolio. Usando los efectos de desplazamiento de Divi, los elementos del menú cobran vida cuando llegan al centro de la pantalla. Los botones con enlaces de anclaje ayudan al usuario a navegar a las secciones correspondientes.
Siga leyendo para recrear el diseño o descargue el archivo JSON de forma gratuita.
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 portafolio desplazable y receptiva se crea con una serie de filas repetidas y alternas. Por esa razón, hemos incluido una captura de pantalla de la vista de estructura alámbrica. Esto le 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 The Hero Sections GRATIS
Para tener en sus manos el diseño de lista de navegación de portafolio de desplazamiento 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.
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.
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!
1. Crear nueva sección
Agregar sección
Fondo
Comience con una sección normal 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.
- Acolchado superior e inferior: 660px
2. Cree una lista de navegación de cartera desplazable
Agregar fila 1
Estructura de la columna
Agregue la primera fila y elija la siguiente estructura de columnas:
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 etiquete la fila.
- Etiqueta de administrador: Fila 1
Agregar módulo de texto a la columna
Contenido
Agrega un módulo de texto para el título. Inserte algún contenido H1 de su elección.
Texto de encabezado
Vaya a la pestaña de diseño y aplique el estilo del texto del título de la siguiente manera:
- Nivel de encabezado: H1
- Fuente: Alata
- Peso: negrita
- Color: # a3f7bf
- Tamaño
- Escritorio: 190px
- Tableta: 120 px
- 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 entrada y salida gradual a la pestaña avanzada.
- Habilitar efecto: desvanecimiento hacia adentro y hacia afuera
- Parte inferior de la ventana gráfica
- Posición: 100%
- Opacidad inicial: 100%
- Opacidad media
- Posición: 50%
- Medio: 100%
- Vista superior de la ventana
- 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 de la canaleta: 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 sigan siendo las mismas en los tamaños de pantalla más pequeños. Comience con la columna 1:
- Elemento principal: ancho: 20%! Importante
width: 20% !important }
Configuración de la columna 2
CSS personalizado
Haz lo mismo con la segunda columna.
- Elemento principal: ancho: 80%! Importante
width: 80% !important }
Agregar módulo de botones a la columna 1
Contenido
Ahora, agregue un módulo de botones 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 siguiente. Agregaremos un ID de CSS coincidente para este enlace de anclaje más adelante en el tutorial.
- URL del enlace del botón: #VB
Alineación
Vaya a la pestaña de diseño y cambie la alineación de los botones.
- 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 de borde: 0px
- Espaciado entre letras: 1px
- Fuente: Alata
- Mostrar icono de botón: No
Espaciado
También realice cambios en la configuración de espaciado.
- 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: desvanecimiento hacia adentro y hacia afuera
- Parte inferior de la ventana gráfica
- Posición: 40%
- Opacidad inicial: 0%
- Opacidad media
- Inferior: 45%
- Medio: 100%
- Superior: 55%
- Vista superior de la ventana
- 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 caja: 4ta opción
- Posición horizontal: 0px
- Posición vertical
- Desplazamiento: 5px
- Fuerza de desenfoque: 0px
- Fuerza de propagación: 0px
- Color de sombra: Verde agua # 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
Vaya a la pestaña de diseño y aplique el estilo del texto del título de la siguiente manera:
- Nivel de encabezado: H3
- Fuente: Alata
- Color
- Escritorio: Blanco #ffffff
- Flotar: Aqua Green # 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: desvanecimiento hacia adentro y hacia afuera
- Parte inferior de la ventana gráfica
- Posición: 40%
- Opacidad inicial: 15%
- Opacidad media
- Inferior: 45%
- Medio: 100%
- Superior: 55%
- Vista superior de la ventana
- Posición: 60%
- Opacidad final: 15%
Fila 2 duplicada
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 administrador: Fila 3
Módulo de botones
Cambie el enlace de anclaje de #VB a #WEB.
- URL del enlace del botón: #WEB
Módulo de texto
Cambie también el contenido de H3 en el módulo de texto.
- Texto del cuerpo: sitios web
Ajustar la 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 también el contenido de H3.
- Texto del cuerpo: aplicaciones móviles
Ajustar la 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
Agrega un margen inferior.
- Margen inferior
- Escritorio 230px
- Tableta: 100 px
- Teléfono: 60px
Módulo de botones
Cambie el enlace de anclaje 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 de navegación de la cartera desplazable se vincula a 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 manera, la navegación de ancla no se detendrá en la parte superior del elemento de la cartera, sino en el medio.
Creemos los elementos ahora. Agrega 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 un ID de CSS coincidente en la pestaña avanzada.
- ID de CSS: VB
Agregue el módulo divisor a la fila 6
Visibilidad
Agrega un divisor invisible a la columna de la fila.
- Mostrar divisor: No
Fila 6 duplicada
Duplica esta fila tres veces. Las nuevas filas se volverán a numerar; 8, 10 y 12.
Ajustar la fila 8
Etiqueta de administrador
Cambie la etiqueta de administrador de 6 a 8.
- Etiqueta de administrador: Fila 8
ID y clases de CSS
Cambie el ID de CSS de VB a WEB.
- ID de CSS: WEB
Ajustar la 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 el ID de CSS de VB a MA.
- ID de CSS: MA
Ajustar la 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 el ID de CSS de VB a UX.
- ID de CSS: UX
Agregar fila 7
Estructura de la columna
Deje las cuatro filas con separadores 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 el estilo del fondo de la siguiente manera:
- Imagen de fondo: Foto
- Mezcla 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%
- Colocar 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
Frontera
Agrega también algunas esquinas redondeadas.
- 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 llamado 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: Visual Branding
- Botón: Más información
- Cuerpo: Texto descriptivo
Fondo
Elimina el color de fondo predeterminado.
- Antecedentes: Ninguno
Enlace
Agregue un enlace a la página correspondiente. Insertaremos un # por ahora.
- Enlace: #
Texto del título
A continuación, aplique estilo al texto del título.
- Nivel de encabezado: H2
- Fuente: Alata
- Color: Blanco #ffffff
- Tamaño
- Escritorio: 70px
- Tableta: 60px
- Teléfono: 48px
- Espaciado entre letras: 1px
Cuerpo de texto
Diseñe también el cuerpo del texto.
- Fuente: Lato
- Color: Blanco #ffffff
- Tamaño
- Escritorio: 19px
- Tableta: 20px
- Teléfono: 18px
- Altura de la línea: 1.8em
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: Aqua Green # a3f7bf
- Radio del borde: 9px
- Espaciado entre letras: 1px
- Fuente del botón: Alata
- Margen superior: 35 px
Dimensionamiento
Ajuste también el tamaño del módulo.
- 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.
- Acolchado izquierdo:
- Escritorio: 90px
- Acolchado 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;
padding-bottom: 30px; }
Fila 7 duplicada
Duplica la fila 7 tres veces. Las nuevas filas se volverán a numerar; 9, 11 y 13.
Ajustar la 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 inicial: 0%
- Posición final: 50%
Etiqueta de administrador
Actualice la etiqueta de administrador de la fila de 7 a 9.
- Etiqueta de administrador: fila 9
Ajustar el módulo de llamada a la acción en la fila 9
Contenido
Actualiza el contenido del módulo.
- Título: Sitios web
- Cuerpo: Nuevo texto descriptivo
Enlace
Actualice también el enlace.
- Enlace: Nuevo enlace
Dimensionamiento
Cambie la alineación del módulo de izquierda a derecha.
- Alineación del módulo: derecha
Espaciado
Cambie el acolchado del escritorio de izquierda a derecha. La configuración de la tableta y el móvil debe permanecer igual.
- Relleno derecho
- Escritorio: 90px
Ajustar la fila 11
Fondo
Cambie 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 administrador: fila 11.
Ajustar 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 la 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 inicial: 0%
- Posición final: 50%
Etiqueta de administrador
Abra la pestaña de etiqueta de administrador y actualice el número de fila a 13.
Ajustar el módulo de llamada a la acción en la fila 13
Contenido
Actualiza el contenido del módulo.
- Título: UX Design
- Cuerpo: Nuevo texto descriptivo
Enlace
Actualice también el enlace.
- Enlace: Nuevo enlace
Dimensionamiento
Cambie la alineación del módulo de izquierda a derecha.
- Alineación del módulo: derecha
Espaciado
Cambie el acolchado del escritorio de izquierda a derecha. La configuración de la tableta y del 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, de acuerdo con su etiqueta de administrador.
Compare su estructura alámbrica
Vuelva a verificar la estructura alámbrica de los elementos y la lista de navegación de su portafolio desplazable. Las filas deben estar en orden para que los enlaces de anclaje funcionen correctamente. Aquí hay otro vistazo a nuestra vista de estructura alámbrica:
Avance
Terminamos de seguir todos los pasos para recrear la lista de navegación del portafolio 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 portafolio desplazable con los efectos de desplazamiento de Divi. Además, agregamos artículos de cartera. La navegación se controla con enlaces de anclaje e ID de CSS. Esta es una excelente manera de mostrar elementos de la cartera de forma interactiva. ¡Déjanos un comentario si te ha gustado o tienes alguna duda!