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 sorprendente utilizando el paquete de diseño de gestión de riesgos de Divi . Combinaremos esta navegación de iconos fijos con enlaces ancla. Este es un gran enfoque para páginas únicas, pero también puede usarlo para varias páginas de su sitio web para facilitar el proceso de navegación de sus visitantes. Vamos a recrear tres ejemplos, pero puede crear fácilmente su propio tipo de navegación con iconos fijos utilizando este enfoque.
¡Hagámoslo!
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
Ejemplo #2
Ejemplo #3
Agregar enlaces de anclaje
Agregar enlace ancla n.º 1 a la sección
Lo primero con lo que vamos a comenzar son las ID de ancla. 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 una 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 utilizando la página de inicio del paquete de diseño de gestión de riesgos y agregue el primer enlace de anclaje a una de las secciones de la página.
- ID de CSS: fijo-icono-navegación-1
Agregar enlace ancla n.º 2 a la sección
Agrega otro ID de anclaje a una segunda sección.
- ID de CSS: fijo-icono-navegación-2
Agregar enlace de anclaje n.º 3 a la sección
Repita el mismo paso para la tercera ID de anclaje.
- ID de CSS: fijo-icono-navegación-3
Agregar enlace de anclaje n.º 4 a la sección
Y agregue la identificación del ancla a la cuarta y última sección también. Más adelante en este tutorial, vincularemos estas 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
Agregar nueva fila a la última sección de la página
Estructura de la 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:
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
Alineación
Luego, cambie la alineación de la fila.
- Alineación de filas: Izquierda
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 del canalón: 1
Espaciado
Y agregue un poco de relleno personalizado para tamaños de pantalla más pequeños.
- Relleno izquierdo: 2vw (solo tableta y teléfono)
- Relleno derecho: 7vw (solo tableta y teléfono)
Borde
También estamos usando algunas esquinas redondeadas en la configuración de los bordes.
- Arriba a la derecha: 10px
- Abajo a la derecha: 10px
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 cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
CSS personalizado
Por último, pero no menos importante, vamos a arreglar la navegación de íconos agregando algunas líneas de código CSS personalizadas en la pestaña avanzada de la fila.
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 33%;bottom: 33%;z-index: 9999; |
Agregue el 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 de Blurb y seleccione un icono de su elección.
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: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
Clonar módulo Blurb 3 veces
Clone el módulo de Blurb que ha agregado tres veces.
Cambiar iconos
Y cambia el icono de cada uno de los duplicados.
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 iconos a la ID de sección correcta.
- URL del enlace del módulo: https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1
Comience a recrear el ejemplo n.º 2
Agregar nueva fila a la última sección de la página
Estructura de la columna
¡Vamos al segundo ejemplo! Agregue una nueva fila a la última sección de la página utilizando la siguiente estructura de columnas:
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
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 del canalón: 1
Espaciado
Y agregue algunos valores de relleno personalizados para tamaños de pantalla más pequeños.
- Relleno izquierdo: 2vw (solo tableta y teléfono)
- Relleno derecho: 10vw (tableta), 15,5vw (teléfono)
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.
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 10%;bottom: 10%;z-index: 9999; |
Agregue el módulo Blurb a la columna 1
Seleccionar icono
Continúe agregando un módulo de Blurb a la columna de su fila y seleccione un icono de su elección.
Configuración de iconos
Luego, vaya a la pestaña de diseño y realice algunos cambios en la apariencia del ícono en la configuración del ícono.
- Color del icono: #000000
- Icono de círculo: Sí
- Color del círculo: rgba (0,0,0,0,14)
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 1.5vw (escritorio), 3vw (tableta), 2.5vw (teléfono)
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.
Cambiar iconos
Asegúrate de cambiar el ícono que se usa para cada uno de los duplicados.
Agregue enlaces de anclaje a los módulos de Blurb individualmente
Y, de nuevo, vincule cada uno de los Módulos de Blurb al enlace de anclaje correcto.
- URL del enlace del módulo: https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1
Comience a recrear el ejemplo n.º 3
Agregar nueva fila a la última sección de la página
Estructura de la columna
¡Vamos al siguiente y último ejemplo! Agrega una nueva fila a la última sección de tu página usando la siguiente estructura de columnas:
Fondo degradado
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado.
- Color 1: #ffb337
- Color 2: #1b52d9
Alineación
Continúe cambiando la alineación de las filas en la pestaña de diseño.
- Alineación de filas: Izquierda
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 del canalón: 1
Espaciado
Agregue también algunos valores de relleno personalizados para tamaños de pantalla más pequeños.
- Relleno izquierdo: 2vw (tableta), 1vw (teléfono)
- Relleno derecho: 7vw (tableta), 5.5vw (teléfono)
Borde
Y agregue un borde izquierdo a la fila.
- Ancho del borde izquierdo: 3px
- Color del borde izquierdo: #ffffff
Sombra de la caja
También estamos agregando una sutil sombra de cuadro para crear profundidad en la página.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
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 que la barra de navegación de iconos sea fija.
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 62%;bottom: 10%;z-index: 9999; |
Agregue el módulo Blurb a la columna 1
Seleccionar icono
Continúe agregando el primer módulo de Blurb a la columna de la fila y seleccione un icono de su elección.
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: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 1.5vw (escritorio), 4vw (tableta y teléfono)
Clonar módulo Blurb 3 veces
Clona el módulo de Blurb tres veces.
Cambiar iconos
Y asegúrate de cambiar el icono de cada uno de los duplicados.
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
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Ejemplo #2
Ejemplo #3
Pensamientos finales
En esta publicación, le mostramos cómo crear barras de navegación de iconos fijos que puede aplicar a cualquier tipo de sitio web que esté construyendo. Los que hemos creado coinciden muy bien con el paquete de diseño de gestión de riesgos . Esperamos que estés disfrutando de esta iniciativa de diseño Divi en curso en la que tratamos de poner algo extra en tu caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!