Resaltado del complemento Divi - DotNav

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 peinarlos? Aún mejor, ¿qué pasa si quisieras mostrar una etiqueta o animarla en la carga? Es posible que le interese 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 por puntos de Divi.

Habilitación de la navegación por puntos

La navegación por puntos se puede habilitar o deshabilitar por página. Encontrarás la configuración en el editor visual de la página, en la esquina superior derecha debajo de Configuración de página de puntos.

La navegación por 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, navegué a la segunda sección y el segundo punto está iluminado.

Instalación de DotNav

Primero, descomprime el archivo de descarga. Habrá tres archivos dentro de la carpeta. Sube y activa el archivo divi-dotnav.

Configuración del personalizador del tema 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 etiqueta

Veamos cada área.

Configuración general de DotNav

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 voltear en el eje x o y.

Ejemplos de

Cuando ajusta los controles, ve 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, de derecha a 10, de abajo a 20 y de izquierda a 9. He usado colores de fondo y de borde de la propia página para que se mezcle.

Configuración de DotNav Dot

La configuración de puntos le permite mostrar u ocultar secciones individuales (requiere CSS agregado 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 de

En este ejemplo, establecí el radio del borde del punto en 10 alrededor y ajusté el ancho del punto a 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 establecí el ancho del borde del punto en 6 y ajusté tanto el color del punto como el color del punto activo.

Éste 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, radio y relleno de borde superior e inferior para crear el borde redondeado.

Configuración de etiquetas DotNav

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 normal de la etiqueta, 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é los colores de fondo y de fuente e hice la sección activa desplazada y un color salmón para su fuente. Puede ajustar el espaciado de la línea horizontal, pero para la vertical debe ajustar los márgenes de los puntos en la Configuración de puntos. Para mí, esto fue lo único confuso acerca de los ajustes.

Si no desea que se muestren todas las etiquetas, puede configurarlo en Solo activo, Solo desplazarse o Activo y desplazarse.

Ajusté la configuración de los puntos para dejar 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 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 radio 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, establecí el desplazamiento activo de desplazamiento derecho a 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 la 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 de ocultar (la clase CSS se encuentra dentro de la nota sobre el cuadro desplegable). La sección denominada TODAS LAS COSAS CORRECTAS ya no se encuentra dentro de la estructura de navegación por puntos.

Este ejemplo solo se muestra al pasar el mouse. La fuente y el color del punto activo / 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.

Éste 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 se establece 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 de la línea.

También acorté los nombres de las secciones y escondí la etiqueta de la sección llamada Todas las cosas correctas. Las fuentes están en cursiva.

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.

Animaciones DotNav

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í algunos de ellos.

Justo en

Right In es difícil de ver, pero se mueve desde la derecha tal como aparece.

Abajo en

Aparecerá Bottom In y se deslizará hacia arriba.

Fundirse

Fade In se desvanece ya en su lugar.

Fundido a la izquierda

Fundido a la izquierda se desvanece y luego se mueve de izquierda a derecha en su lugar.

Fundido en la parte superior

Fade In Top se desvanece 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 utilizar con sitios web ilimitados para usted y sus clientes. La documentación está incluida en el archivo de descarga. Encontré que los controles eran lo suficientemente intuitivos como para no necesitar la documentación, pero me alegro de que esté incluida por si acaso.

Pensamientos finales

DotNav me pareció fácil de usar. Proporciona muchas personalizaciones a los puntos y fondos, y me gusta poder agregar etiquetas. Las secciones flotante y activa se destacan y se pueden personalizar por separado. Las animaciones son interesantes pero no hay muchas y solo se animan en carga. 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 lo entendí, no tuve problemas para hacer los ajustes.

Como todas las configuraciones en el Personalizador de temas, las configuraciones de DotNav son 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 por puntos de Divi, DotNav de Divicio.us podría ser el complemento que está buscando.

Queremos escuchar de ti. ¿Ha utilizado DotNav para Divi? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de newelle / shutterstock.com