Divi tiene una función de navegación incorporada, llamada Dot Navigation, que coloca una serie de puntos a lo largo del lado derecho de la pantalla. Cada punto representa una sección de esa página. Al hacer clic en los puntos se accede a esa sección. Los puntos son simples y combinan con la mayoría de los diseños de sitios web. ¿Y si quisieras darles estilo? Aún mejor, ¿qué pasaría si quisiera mostrar una etiqueta o animarlos en la carga? Podría estar interesado en un complemento llamado DotNav.
DotNav es un complemento de terceros de Divicio.us . DotNav le brinda las herramientas para cambiar el color, el tamaño y la forma de los puntos y fondos, agregar etiquetas, deshabilitar puntos específicos y controlar la animación de carga. Puede ocultar DotNav por dispositivo. En este complemento destacado, echaremos un vistazo a DotNav.
En estos ejemplos, estoy usando un diseño que viene con Divi llamado Características del producto. Las imágenes están tomadas de Unsplash.com. Primero, habilitemos la Navegación de puntos de Divi.
La navegación de puntos se puede habilitar o deshabilitar por página. Encontrará la configuración en el editor visual de la página, en la esquina superior derecha, debajo de Configuración de la página de puntos.
La navegación de puntos aparecerá en el lado derecho de la página. Los puntos representan las secciones. Hacer clic en un punto te lleva a esa sección. En este ejemplo, he navegado a la segunda sección y el segundo punto está iluminado.
Primero, descomprima el archivo de descarga. Habrá tres archivos dentro de la carpeta. Cargue y active el archivo divi-dotnav.
La configuración de DotNav se encuentra en el Personalizador de temas . Incluye tres áreas:
- Configuración general
- Configuración de puntos
- Configuración de etiquetas
Veamos cada área.
La configuración general le permite ocultar DotNav por dispositivo, ajustar el desplazamiento, el borde, el relleno, los colores y la animación. Hay 11 animaciones para elegir, que incluyen moverse desde la dirección que elija, desvanecerse desde una dirección o girar en el eje x o y.
Ejemplos
Cuando ajustas los controles, ves los cambios en tiempo real. En este ejemplo, establecí el desplazamiento derecho en 38 y ajusté el ancho, el radio y el relleno del borde para crear un borde redondeado.
En este ejemplo, establecí el ancho del borde en 10 y el radio del borde en 30 en todos los lados, y el relleno superior en 20, el derecho en 10, el inferior en 20 y el izquierdo en 9. He usado colores de fondo y borde de la página misma para que se mezcle.
La configuración de puntos le permite mostrar u ocultar secciones individuales (requiere que se agregue CSS a la sección), ajustar los márgenes, el radio del borde, el ancho y el color. La configuración de puntos incluye color, ancho y alto, y color, ancho y alto de desplazamiento.
Ejemplos
En este ejemplo, establecí el radio del borde del punto en 10 alrededor y ajusté el ancho del punto en 30. Esto crea líneas horizontales interesantes en lugar de puntos redondos.
Ajustar el ancho del borde y la altura del punto puede crear algunos efectos interesantes. Aquí configuré el ancho del borde del punto en 4 para la parte superior y 10 para la derecha.
Aquí configuré el radio del borde superior izquierdo en 0, el superior derecho en 98 y dejé los demás en 10. También configuré el ancho del borde del punto en 6 y ajusté tanto el color del punto como el color del punto activo.
Este usa la configuración general predeterminada y tiene un ancho de borde de 1, un ancho y alto de punto de 15, y un ancho y alto de punto activo de 20. Los puntos son de color gris oscuro con un borde rojo. El punto activo es blanco con un borde rojo.
Esta es la misma configuración de puntos y agrega un ancho de borde superior e inferior, radio y relleno para crear el borde redondeado.
La configuración de etiquetas le permite mostrar u ocultar las etiquetas de puntos, ajustar la fuente, el fondo, el ancho, aplicar un ancho fijo, etc. El ancho fijo agrega ajustes para el ancho de la etiqueta normal, el ancho de la etiqueta activa y la alineación del texto de la etiqueta. Para mostrar etiquetas, las secciones deben tener una identificación (que se utiliza como etiqueta).
Agregue la etiqueta al campo ID de CSS en la pestaña Avanzado para cada sección.
Las etiquetas se mostrarán automáticamente. Las etiquetas se pueden personalizar y puede optar por no mostrar etiquetas específicas. Este ejemplo muestra la configuración predeterminada.
En este, cambié el fondo y los colores de la fuente e hice la sección activa desplazada y un color salmón para su fuente. Puede ajustar el espacio entre líneas horizontales, pero para la vertical debe ajustar los márgenes de los puntos en Configuración de puntos. Para mí este fue el único este confuso sobre los ajustes.
Si no desea que se muestren todas las etiquetas, puede configurarlo como Solo activo, Solo flotante o Activo y flotante.
He ajustado la configuración de los puntos para poner algo de espacio entre las etiquetas. Esto me permitirá hacer las etiquetas más altas sin que se superpongan. En este, los márgenes de los puntos se establecen en 16 para la parte superior e inferior. El radio del borde superior derecho e inferior izquierdo se establece en 72, y el superior izquierdo e inferior derecho se establece en 22.
En la configuración de la etiqueta, ajusté el relleno a 10 en todos los lados, configuré el desplazamiento hacia la derecha activo en 45 y aumenté el tamaño de fuente a 18. Las etiquetas se destacan un poco más.
Ocultar puntos específicos
Puede ocultar puntos específicos si lo desea. Agregue la clase CSS a la pestaña Configuración avanzada del módulo de sección. Encontrarás el CSS en la Configuración de puntos en el Personalizador de temas.
En Configuración de puntos, la primera configuración es un cuadro desplegable. Está configurado en Mostrar de forma predeterminada. Seleccione Ocultar. Esto oculta todas las secciones a las que ha agregado la clase CSS de la sección oculta (la clase CSS se encuentra dentro de la nota sobre el cuadro desplegable). La sección etiquetada TODAS LAS COSAS CORRECTAS ya no se encuentra dentro de la estructura de navegación de puntos.
Este ejemplo solo se muestra al pasar el mouse. La fuente y el color del punto activo o flotante se establecen en rojo. El fondo y los bordes son transparentes. El margen de puntos se establece en 16 para la parte superior e inferior. El ancho es 15 y la altura es 5, con el punto activo establecido en 20 y 8.
Este usa un ancho fijo para las etiquetas. Estoy usando negro para el fondo de la etiqueta activa con una fuente roja y un borde rojo para la izquierda y la derecha (que está configurado en 5). El radio del borde se establece en 9 para darle una ligera curva. He centrado el texto dentro de las etiquetas. El desplazamiento a la derecha es 6 para que las etiquetas cuelguen de la línea. El desplazamiento derecho activo es 20 para que salte fuera de la línea.
También acorté los nombres de las secciones y oculté la etiqueta de la sección llamada Todas las cosas correctas. Las fuentes son cursivas.
Para la configuración de puntos, establecí el ancho en 6 y la altura en 38. El punto activo es 10 y 35. Esto hace que los puntos parezcan una línea vertical. Usaré este ejemplo para mostrar animaciones.
Las animaciones muestran cómo aparecen los puntos cuando se carga la página. Incluye 11 animaciones. La duración de la animación se puede ajustar con el control deslizante. He aquí un vistazo a algunos de ellos.
Justo en
Right In es difícil de ver, pero se mueve desde la derecha tal como aparece.
Parte inferior hacia adentro
Bottom In aparece y se desliza hacia arriba.
Fundirse
Fade In se desvanece ya en su lugar.
Desvanecer a la izquierda
Fade In Left se funde y luego se mueve de izquierda a derecha en su lugar.
Fundido en la parte superior
Fade In Top se desvanece hacia adentro y luego hace un gran movimiento hacia abajo.
Voltear en X
Flip In X se voltea desde el eje X y rebota cuando se coloca en su lugar.
Voltear en Y
Flip In Y se voltea desde el eje Y y parece una puerta.
Licencia y Documentación
El complemento se puede usar con sitios web ilimitados para usted y sus clientes. La documentación está incluida en el archivo de descarga. Descubrí que los controles son lo suficientemente intuitivos como para no necesitar la documentación, pero me alegro de que esté incluido por si acaso.
Pensamientos finales
Encontré DotNav fácil de usar. Proporciona muchas personalizaciones a los puntos y fondos, y me gusta poder agregar etiquetas. Las secciones flotante y activa se diferencian y se pueden personalizar por separado. Las animaciones son interesantes, pero no hay muchas y solo se animan cuando se cargan. Ajustar el ancho y la altura de la etiqueta en dos pestañas separadas (ajustar la altura del punto para la altura de la etiqueta) puede ser confuso al principio, pero una vez que me acostumbré, no tuve problemas para hacer los ajustes.
Al igual que todas las configuraciones en el personalizador de temas, la configuración de DotNav es para todo el sitio. Deberá experimentar con la fuente y los colores de fondo para encontrar una combinación que funcione con todos los fondos de su sitio web.
Si está interesado en personalizar la navegación de puntos de Divi, DotNav de Divicio.us podría ser el complemento que está buscando.
Queremos escuchar de ti. ¿Has usado DotNav para Divi? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de newelle / shutterstock.com