Creación de una impresionante navegación de iconos fijos con Divi


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear una navegación de íconos fijos asombrosos utilizando Divi Paquete de diseño de gestión de riesgos. Combinaremos esta navegación de íconos fijos con enlaces de anclaje. Este es un gran enfoque para los usuarios de una página, pero también puede utilizarlo para varias páginas de su sitio web para facilitar el proceso de navegación de sus visitantes. Vamos a recrear tres ejemplos, pero puedes crear fácilmente tu propio tipo de navegación de íconos fijos usando este enfoque.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los tres ejemplos y cómo se ven en diferentes tamaños de pantalla.

Ejemplo 1

navegación de icono fijo

Ejemplo # 2

navegación de icono fijo

Ejemplo # 3

navegación de icono fijo

Agregar enlaces de ancla

Agregar enlace de anclaje n. ° 1 a la sección

Lo primero con lo que vamos a empezar son los ID de anclaje. Las barras de navegación de íconos fijos que recrearemos contendrán 4 íconos diferentes. Esto significa que tendrás que vincular cada uno de los íconos a una parte diferente de tu página. Puede agregar un ID de anclaje a cualquier tipo de elemento de diseño, pero se usa más comúnmente para secciones. Cree una nueva página usando el Paquete de diseño de gestión de riesgosPágina de destino y agregue el primer enlace de anclaje a una de las secciones de la página.

  • ID de CSS: icono-fijo-navegación-1

navegación de icono fijo

Agregar enlace de anclaje n. ° 2 a la sección

Agregue otro ID de anclaje a una segunda sección.

  • ID de CSS: icono-fijo-navegación-2

navegación de icono fijo

Agregue el enlace de anclaje n. ° 3 a la sección

Repita el mismo paso para el tercer ID de anclaje.

  • ID de CSS: icono-fijo-navegación-3

navegación de icono fijo

Agregar enlace de anclaje n. ° 4 a la sección

Y agregue el ID de anclaje a la cuarta y última sección también. Más adelante en este tutorial, vamos a vincular estos ID a los íconos que colocamos en la barra de navegación de íconos fijos.

  • ID de CSS: icono-fijo-navegación-4

Comience a recrear el ejemplo n. ° 1

navegación de icono fijo

Agregar nueva fila a la última sección de la página

Estructura de columna

¡Comencemos a recrear el primer ejemplo! Desplácese hacia abajo hasta la parte inferior de su página y agregue una nueva fila a la última sección usando la siguiente estructura de columnas:

navegación de icono fijo

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la fila.

  • Color de fondo: #ffffff

navegación de icono fijo

Alineación

Luego, cambie la alineación de las filas.

  • Alineación de filas: izquierda

navegación de icono fijo

Dimensionamiento

Modifique también la configuración de tamaño de la fila.

  • Usar ancho personalizado: Sí
  • Unidad:%
  • Ancho personalizado: 4%
  • Usar ancho de canalón personalizado: Sí
  • Ancho de la canaleta: 1

navegación de icono fijo

Espaciado

Y agregue algo de relleno personalizado para tamaños de pantalla más pequeños.

  • Acolchado izquierdo: 2vw (solo tableta y teléfono)
  • Acolchado derecho: 7vw (solo tableta y teléfono)

navegación de icono fijo

Frontera

También usamos algunas esquinas redondeadas en la configuración del borde.

  • Arriba a la derecha: 10px
  • Abajo a la derecha: 10px

navegación de icono fijo

Sombra de la caja

Junto con una sombra de caja sutil que nos ayudará a crear algo de profundidad.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.3)

navegación de icono fijo

CSS personalizado

Por último, pero no menos importante, vamos a arreglar la navegación del ícono agregando algunas líneas de código CSS personalizadas en la pestaña avanzada de la fila.

position:fixed;
left: 0px;
top: 33%;
bottom: 33%;
z-index: 9999;

navegación de icono fijo

Agregar módulo Blurb a la columna 1

Seleccionar icono

Ahora que hemos terminado de modificar la configuración de las filas, podemos comenzar a agregar los módulos. Agregue un módulo Blurb y seleccione un icono de su elección.

navegación de icono fijo

Configuración de iconos

Luego, vaya a la pestaña de diseño y modifique la configuración del icono.

  • Color del icono: # 000000
  • Ubicación del icono: Arriba
  • Usar tamaño de fuente del icono: Sí
  • Tamaño de fuente del icono: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

navegación de icono fijo

Clonar módulo Blurb 3 veces

Clona el módulo de Blurb que has agregado tres veces.

navegación de icono fijo

Cambiar iconos

Y cambia el icono de cada uno de los duplicados.

navegación de icono fijo

Agregue enlaces de anclaje a los módulos de Blurb individualmente

Por último, pero no menos importante, deberá agregar la URL de anclaje a cada uno de los módulos de Blurb individualmente. Asegúrese de vincular cada uno de los íconos a la ID de sección correcta.

  • URL del enlace del módulo: https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

navegación de icono fijo

Comience a recrear el ejemplo 2

navegación de icono fijo

Agregar nueva fila a la última sección de la página

Estructura de columna

¡Pasemos al segundo ejemplo! Agregue una nueva fila a la última sección de la página utilizando la siguiente estructura de columnas:

navegación de icono fijo

Alineación

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la alineación de la fila.

  • Alineación de filas: izquierda

navegación de icono fijo

Dimensionamiento

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

  • Usar ancho personalizado: Sí
  • Unidad:%
  • Ancho personalizado: 6%
  • Usar ancho de canalón personalizado: Sí
  • Ancho de la canaleta: 1

navegación de icono fijo

Espaciado

Y agregue algunos valores de relleno personalizados para tamaños de pantalla más pequeños.

  • Acolchado izquierdo: 2vw (solo tableta y teléfono)
  • Acolchado derecho: 10vw (tableta), 15.5vw (teléfono)

navegación de icono fijo

CSS personalizado

Por último, pero no menos importante, agregue el código CSS personalizado en la pestaña avanzada de la fila para corregir la navegación del icono.

position:fixed;
left: 0px;
top: 10%;
bottom: 10%;
z-index: 9999;

navegación de icono fijo

Agregar módulo Blurb a la columna 1

Seleccionar icono

Continúe agregando un módulo Blurb a la columna de su fila y seleccione un icono de su elección.

navegación de icono fijo

Configuración de iconos

Luego, vaya a la pestaña de diseño y realice algunos cambios en la apariencia del icono en la configuración del icono.

  • Color del icono: # 000000
  • Icono de círculo: Sí
  • Color del círculo: rgba (0,0,0,0.14)
  • Ubicación del icono: Arriba
  • Usar tamaño de fuente del icono: Sí
  • Tamaño de fuente del icono: 1.5vw (escritorio), 3vw (tableta), 2.5vw (teléfono)

navegación de icono fijo

Clonar módulo Blurb 3 veces

Una vez que haya terminado de modificar el primer módulo de Blurb, puede continuar y clonar el módulo tres veces.

navegación de icono fijo

Cambiar iconos

Asegúrate de cambiar el icono que se usa para cada uno de los duplicados.

navegación de icono fijo

Agregue enlaces de anclaje a los módulos de Blurb individualmente

Y, nuevamente, vincule cada uno de los Módulos de Blurb al vínculo de anclaje correcto.

  • URL del enlace del módulo: https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

navegación de icono fijo

Comience a recrear el ejemplo n. ° 3

navegación de icono fijo

Agregar nueva fila a la última sección de la página

Estructura de columna

¡Pasemos al siguiente y último ejemplo! Agrega una nueva fila a la última sección de tu página usando la siguiente estructura de columnas:

navegación de icono fijo

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado.

  • Color 1: # ffb337
  • Color 2: # 1b52d9

navegación de icono fijo

Alineación

Continúe cambiando la alineación de las filas en la pestaña de diseño.

  • Alineación de filas: izquierda

navegación de icono fijo

Dimensionamiento

Luego, modifique la configuración de tamaño.

  • Usar ancho personalizado: Sí
  • Unidad:%
  • Ancho personalizado: 4%
  • Usar ancho de canalón personalizado: Sí
  • Ancho de la canaleta: 1

navegación de icono fijo

Espaciado

Agregue también algunos valores de relleno personalizados para tamaños de pantalla más pequeños.

  • Acolchado izquierdo: 2vw (tableta), 1vw (teléfono)
  • Acolchado derecho: 7vw (tableta), 5.5vw (teléfono)

navegación de icono fijo

Frontera

Y agregue un borde izquierdo a la fila.

  • Ancho del borde izquierdo: 3px
  • Color del borde izquierdo: #ffffff

navegación de icono fijo

Sombra de la caja

También estamos agregando una sombra de cuadro sutil para crear profundidad en la página.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.3)

navegación de icono fijo

CSS personalizado

Por último, pero no menos importante, agregue las siguientes líneas de código CSS a la pestaña avanzada de la configuración de la fila. Esto ayudará a corregir la barra de navegación de iconos.

position:fixed;
left: 0px;
top: 62%;
bottom: 10%;
z-index: 9999;

navegación de icono fijo

Agregar módulo Blurb a la columna 1

Seleccionar icono

Continúe agregando el primer módulo Blurb a la columna de la fila y seleccione un icono de su elección.

navegación de icono fijo

Configuración de iconos

Luego, vaya a la pestaña de diseño y cambie la configuración del icono.

  • Color del icono: #ffffff
  • Ubicación del icono: Arriba
  • Usar tamaño de fuente del icono: Sí
  • Tamaño de fuente del icono: 1.5vw (escritorio), 4vw (tableta y teléfono)

navegación de icono fijo

Clonar módulo Blurb 3 veces

Clona el módulo Blurb tres veces.

navegación de icono fijo

Cambiar iconos

Y asegúrate de cambiar el icono de cada uno de los duplicados.

navegación de icono fijo

Agregue enlaces de anclaje a los módulos de Blurb individualmente

Por último, pero no menos importante, agregue la URL de anclaje a cada uno de los módulos de Blurb individualmente y ¡listo!

  • URL del enlace del módulo: https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

navegación de icono fijo

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Ejemplo 1

navegación de icono fijo

Ejemplo # 2

navegación de icono fijo

Ejemplo # 3

navegación de icono fijo

Pensamientos finales

En esta publicación, le mostramos cómo crear barras de navegación de íconos fijos que puede aplicar a cualquier tipo de sitio web en su edificio. Los que hemos creado coinciden con Paquete de diseño de gestión de riesgos Realmente bien. Esperamos que esté disfrutando de esta iniciativa de diseño de Divi en curso, en la que intentamos poner algo extra en su caja de herramientas de diseño todas las semanas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!