Cree una lista de navegación de cartera que se pueda llevar a cabo con el DIV

Las páginas de cartera son la excusa perfecta para ser creativos con su diseño web. En este tutorial, le mostraremos cómo crear una atractiva navegación de cartera de caída para sazonar cualquier página de cartera. Usando los efectos de desplazamiento de DIV, los elementos del menú cobran vida cuando llegan a la mitad de la pantalla. Los botones con enlaces de anclaje ayudan al usuario a navegar a las secciones apropiadas. Continúe leyendo para recrear el diseño o descargar el archivo JSON de forma gratuita. Vista previa antes de comenzar con el tutorial, eche un vistazo al diseño en diferentes tamaños de pantalla.
Escritorio

Móvil

Marco de cable Esta lista de navegación de cartera que se puede llevar a cabo se crea con una serie de líneas repetidas y alternativas. Por esta razón, incluimos una captura de pantalla de la pantalla de estructura alámbrica. Esto lo ayudará a seguir el orden de las filas y módulos. Sugerimos que etiquete cada fila en consecuencia para realizar un seguimiento. También agregué estas instrucciones a los pasos del tutorial.

Descargue las secciones de héroe gratuitas para poner su mano en la apariencia gratuita de la lista de navegación de cartera sin preparación, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree una nueva sección Agregue la sección de 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
El espaciado agregue suficiente espacio a la sección para que los efectos hagan su magia.

Revestimiento superior e inferior: 660 PX
2. Cree una lista de navegación con la cartera de caída Agregue la estructura de la fila 1 de la columna Agregue la primera fila y elija la siguiente estructura de la columna:

Dimensión Ajuste el ancho de la siguiente fila.

Ancho: 90%
Ancho máximo: 2560 PX
Extienda luego, ajuste la configuración de espaciado.

Forro izquierdo
Escritorio: 130 PX
Tableta y teléfono: 50 px
Etiqueta de administrador y giro de la etiqueta.

Etiqueta de administrador: fila 1
Agregue un módulo de texto a la columna de contenido Agregue un módulo de texto para el título. Ingrese un contenido H1 de su elección.

Mostrar texto Vaya a la pestaña Design y estilice el texto del título de la siguiente manera:

Nivel de título: H1
FUENT: otra vez
Peso: en negrita
Color: # A3F7BF
Talla
Escritorio: 190 Pxtableta: 120 PX
Teléfono: 50 PX
El espacio entre letras
Escritorio y tableta: 7 PX
Teléfono: 8 PX
Por último, pero no menos importante, agregar un efecto de desfile dentro y fuera en la pestaña avanzada.
Habilitar el efecto: desvanecer dentro y fuera

La parte inferior de la ventana
Posición: 100%
Opacidad inicial: 100%
Opacidad promedio
Posición: 50%
Medio: 100%
Top Viewport
Posición: 80%
Opacidad final: 20%
Agregar la estructura de la fila 2 de la columna ahora es el momento de agregar los elementos de navegación. Agregue una nueva fila con dos columnas de igual tamaño. Fila de etiqueta de etiqueta del administrador.
Etiqueta de administrador: fila 2

Configuración de ajuste y dimensionamiento de dimensiones.
El ancho de la canaleta: 1

Ancho: 80%
Ancho máximo: 1920px
Configuración Columna 1 CSS personalizada Antes de agregar módulos, agregue una línea de código CSS a los elementos principales de las columnas para garantizar que las proporciones sigan siendo las mismas en las dimensiones de pantalla más pequeñas. Comience con la columna 1:
Elemento principal: Ancho: 20%! Importante

Ancho: 20%! IMPORTANTE}
Configuración La columna 2 CSS personalizada hace lo mismo para la segunda columna.
Elemento principal: Ancho: 80%! Importante

Ancho: 80%! IMPORTANTE}
Agregue el módulo de botón al contenido de la columna 1 ahora, agregue un botón en la columna 1 con una copia de su elección.
Botón de texto: Ver

Conexión Agregue un enlace de anclaje al siguiente módulo. Agregaremos un CSS de identificación adecuado para este enlace de anclaje más adelante en el tutorial.
URL del botón: #VB

Alineación Vaya a la pestaña Diseño y cambie la alineación del botón.
Alineación de botones: centro

Botón y luego estilice el botón en consecuencia:
Estilos personalizados para el botón: Sí

El tamaño del texto
Escritorio: 30 PX
Tableta: 25 PX
Teléfono: 20 PX
Color: blanco #ffffff
Antecedentes: Gray Cerrado # 222831
Ancho fronterizo: 0 PX
Border Ray: 0 PX
Espacio de letras: 1 PX
FUENT: otra vez
Muestra el icono del botón: No
La espartación modifica y se establece la espacios.
Forro de arriba


Escritorio: 25 PX
Tableta: 15 PX
Teléfono: 5 PX
Los efectos de despliegue y agrega un efecto de ejecución dentro y fuera.
Habilitar el efecto: desvanecer dentro y fuera

La parte inferior de la ventana
Posición: 40%
Opacidad inicial: 0%
Opacidad promedio
El fondo: 45%
Medio: 100%
Arriba: 55%
Top Viewport
Posición: 60%
Opacidad final: 0%
Box Sombra Antes de pasar al siguiente módulo, agregue una sombra del cuadro a los movimientos del botón.
Box Shadow: 4ta opción

Posición horizontal: 0 PX
Posición vertical
Coloque el cursor: 5 PX
Fuerza de harina: 0 PX
Resistencia a la propagación: 0 PX
Shadow Color: Aqua Green # A3F7BF
Agregue un módulo de texto en el contenido de la columna 2 Continuar agregando un módulo de texto a la columna 2 con un contenido H3.
Mostrar texto Vaya a la pestaña Design y estilice el texto del título de la siguiente manera:

Nivel de título: H3

FUENT: otra vez
Color
Escritorio: blanco #ffffff
Coloque el cursor: Aqua Green # A3F7BF
El tamaño del texto
Escritorio: 80 PX
Tableta: 65 PX
Teléfono: 38 PX
Los efectos realizan y completen la configuración del módulo agregando un decolorado dentro y fuera en la pestaña avanzada.
Habilitar el efecto: desvanecer dentro y fuera

La parte inferior de la ventana
Posición: 40%
Opacidad inicial: 15%
Opacidad promedio
El fondo: 45%
Medio: 100%
Arriba: 55%
Top Viewport
Posición: 60%
Opacidad final: 15%
Duplicar la fila 2 para completar la lista de navegación duplicar esta fila tres veces. Las nuevas líneas serán renombradas; 2, 3 y 4. Registro de la etiqueta del administrador de la fila 3 Cambiar la etiqueta del administrador de la fila de 2 a 3.
Etiqueta de administrador: fila 3

Botón Botón Cambie el enlace de anclaje de #VB a #WEB.

URL del botón: #Web
Modo de texto Cambie el contenido H3 en el módulo de texto.

Texto del cuerpo: sitios web
Ajuste la etiqueta del administrador de la fila 4 Cambiar la etiqueta del administrador de la fila de 2 a 4.

Etiqueta de administrador: fila 4
Botón Botón Cambie la conexión de anclaje de #VB a #ma.

La URL del botón: #ma
Cambio de modo de texto y contenido H3.

Texto del cuerpo: aplicaciones móviles
Ajuste la etiqueta del administrador de fila 5 Cambiar la etiqueta del administrador de fila de 2 a 5.

Etiqueta de administrador: fila 5
Espacio de las filas Agregue un borde inferior.

El margen inferior
Escritorio 230 px

Tableta: 100 px
Teléfono: 60 PX
Botón Botón Cambie el enlace de anclaje de #VB a #ux.
URL del botón: #ux
Modo de texto y cambie el contenido de H3 aquí.

Texto del cuerpo: diseño de UX
3. Cree artículos de cartera Agregar la fila 6 Estructura de la lista de columnas de la lista de navegación de cartera que se puede llevar a cabo en la cartera. Cada artículo consta de dos filas. Una fila con un divisor invisible y otro con la forma de llamar a la acción. Los ID de CSS se agregan al divisor. De esta manera, la navegación de anclaje no se detendrá en la parte superior del elemento de cartera, sino en el medio. Para crear los elementos ahora. Agregue una fila con una columna.


Etiqueta del administrador Recuerde etiquetar la nueva fila. Ética del administrador: fila 6
ID y clases de CSS ingresan un ID CSS que se ajusta en la pestaña avanzada.

ID CSS: VB

Agregue el módulo divisor en la fila 6 Visibilidad Agregue un separador invisible en la columna de la fila.
Divisor del espectáculo: no

Duplicado fila 6 duplicar esta fila tres veces. Las nuevas líneas serán renombradas; 8, 10 y 12.
Ajuste la fila 8 de la etiqueta del administrador Cambiar la etiqueta del administrador de 6 a 8.

Etiqueta de administrador: fila 8
ID y clases de CSS cambian la ID de CSS de VB a Web.

ID CSS: Web

Ajuste la fila 10 de la etiqueta del administrador Cambiar la etiqueta del administrador de 6 a 10.
Etiqueta de administrador: fila 10

ID y clases de CSS cambian la ID de CSS de VB a MA.
ID CSS: MA

Ajuste la fila 12 de la etiqueta del administrador Cambiar la etiqueta del administrador de 6 a 12.
Etiqueta de administrador: fila 12

ID de CSS y clases Cambio de etiqueta administradora CSS ID de VB a UX.
ID CSS: UX

Agregue la estructura de la fila 7 de la columna deje las cuatro filas con separadores donde están por ahora. Agregue una nueva línea con una columna.
fondo sin agregar otro módulo, abra la configuración de la fila y estilice el 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%
Coloque el gradiente sobre la imagen de fondo: sí
Fila de etiqueta de etiqueta del administrador.
Etiqueta de administrador: fila 7
Dimensión luego ajuste la configuración de dimensionamiento de la fila.
Ancho: 80%


Ancho máximo: 2560 PX
Alineación: centro

Border agregue algunas esquinas redondeadas.
Efectos de despliegue y active un efecto de desfile dentro y fuera.
Habilitar efectos: desvanecimiento dentro y fuera
Opacidad inicial: 0%

Opacidad promedio: 100%
Posición: 80%

Opacidad final: 20%
Agregue el módulo de llamada a Action en un contenido de la fila 7 ahora agregue un módulo de urgencia en una fila.
Título: Branding visual
Botón: aprende más
Cuerpo: texto descriptivo
Fondo eliminar el color de fondo predeterminado.

Antecedentes: ninguno
Enlace Agregar un enlace a la página apropiada. Insertaremos un # por el momento.
Enlace: #
El texto del título acolza el texto del título.

Nivel de título: H2
FUENT: otra vez

Color: blanco #ffffff
Talla

Escritorio: 70 PX
Tableta: 60 PX
Teléfono: 48 PX
Espacio de letras: 1 PX
El cuerpo del texto estiliza y el texto del cuerpo.
Fuente: lato
Color: blanco #ffffff
Talla
Escritorio: 19 PX

Tableta: 20 PX
Teléfono: 18 PX
Altura de la línea: 1.8em
Cambio de botón a la configuración del botón y aplique los siguientes cambios:
Estilos personalizados: sí
Tamaño de texto: 20 PX
Color de texto: gris oscuro # 222831
Antecedentes: Aqua Green # A3F7BF

Border Ray: 9 PX
Espacio de letras: 1 PX
Botón de fuente: Alda
Margen superior: 35 PX
Ajuste de dimensión y tamaño del módulo.
Ancho: 50%
Ancho máximo
Escritorio: 50%
Tableta y teléfono: 100%



Alineación: a la izquierda
Espacio agregue un poco de relleno al modo.
Forro izquierdo:
Escritorio: 90 PX
Forro izquierdo y derecho:
Tableta: 50 PX

Teléfono: 40 PX
CSS personalizado por último, pero no menos importante, agregue una línea de código CSS al título promocional en la pestaña Avanzada.
Título de la promoción: Formulante Bottom: 30 PX;
Bottom: 30px; }
Fila duplicada 7 Duplicado Fila 7 tres veces. Las nuevas líneas serán renombradas; 9, 11 y 13. Registro de la fila 9 Cambie de fondo la imagen de fondo y cambie la dirección del gradiente.
Imagen de fondo: nueva foto

Gradiente de fondo
Color 1: transparente
Color 2: Gris Oscuro # 222831

Posición inicial: 0%

Posición final: 50%
La etiqueta del administrador actualiza la etiqueta del administrador de fila de 7 a 9.
Etiqueta de administrador: fila 9
Ajuste el módulo de acción para que la acción en la fila 9 actualice el contenido del módulo.
Título: Sitios web
Corp: nuevo texto descriptivo
Actualización de enlace y el enlace.


Enlace: nuevo enlace
Dimensión Cambiar la alineación del módulo de izquierda a derecha.

Alineación del módulo: correcto
El espacio cambia el llenado del escritorio de izquierda a derecha. La tableta y la configuración móvil deben seguir siendo las mismas.
Revestimiento recto

Escritorio: 90 PX
Ajuste las 11 filas de fondo Cambiar la imagen de fondo en la nueva fila.

Imagen de fondo: otra foto
La etiqueta del administrador actualiza la etiqueta del administrador de fila de 7 a 11.

Etiqueta del administrador: fila 11.
Ajuste el módulo de acción para la acción en la fila 11 Cambiar el contenido en el módulo de acción.
Enlace Modificar el enlace.

Enlace: nuevo enlace
Ajuste las 13 filas de fondo Cambiar la imagen de fondo y cambiar la dirección del gradiente.

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 Etiqueta de administrador y actualice el número de fila en 13.
Ajuste el módulo de acción en la fila 13 Actualizar el contenido del módulo. Titlu: UX Design
Corp: nuevo texto descriptivo
Actualización de enlace y el enlace.
Enlace: nuevo enlace
Dimensión Cambiar la alineación del módulo de izquierda a derecha.


Alineación del módulo: correcto

El espacio cambia el llenado del escritorio de izquierda a derecha. La tableta y la configuración móvil deben seguir siendo las mismas.
Revestimiento recto
Escritorio: 90 PX

Reorganice las filas Mover las filas 7, 9 y 11. Coloque las filas en el orden correcto, según la etiqueta del administrador.
Compare su verificación de estructura alámbrica nuevamente la estructura alámbrica de la lista de navegación de la cartera que se puede llevar a cabo y los elementos. Las filas deben ser para que los enlaces de anclaje funcionen correctamente. Aquí hay otra mirada a nuestra estructura de visión:

Vista previa He terminado de seguir todos los pasos para recrear la lista de cartera de caída. Echemos otro vistazo al diseño del diseño en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En este tutorial paso a paso, recreé una lista de navegación de cartera que se puede llevar a cabo con efectos de la división. Además, agregué artículos de cartera. La navegación se controla con enlaces de anclaje e IDS CSS. Esta es una excelente manera de mostrar interactivamente artículos en la cartera. ¡Déjanos un comentario si te gustó o tienes preguntas!