Resaltado del complemento Divi - Módulo Divi Breadcrumbs

Cuando navego por un sitio web, una de las herramientas de navegación que busco son las rutas de navegación. Son excelentes para mostrarle dónde se encuentra dentro de la jerarquía de navegación y facilitan la búsqueda de otros artículos dentro de la estructura. Las migas de pan se pueden agregar a Divi con un complemento llamado Módulo Divi Breadcrumbs.

El módulo Divi Breadcrumbs es un complemento de terceros de CodeCrater que crea rutas de navegación basadas en la ubicación. En otras palabras, le muestra la jerarquía de las categorías de la página que está leyendo actualmente. También proporciona enlaces para cada elemento de la jerarquía para que pueda ver fácilmente las últimas publicaciones de cada una de las categorías. Las migas de pan son altamente personalizables.

Con el módulo Breadcrumbs, puede colocar migas de pan en páginas individuales y publicaciones que usan Divi Builder. También funciona con Extra y el complemento Divi Builder. En este complemento destacado, veremos el complemento tanto en Divi como en Extra y veremos algunas de las formas en que se puede personalizar.

¿Por qué utilizar migas de pan?

Las migas de pan dejan un rastro que muestra la jerarquía de categorías y es una excelente manera de mejorar la navegación. No ocupan mucho espacio y pueden reducir y simplificar la cantidad de acciones que debe realizar un usuario para navegar por su contenido. Esto es especialmente importante si tiene muchas categorías integradas.

El módulo Divi Breadcrumbs mejora el SEO al proporcionar a Google información de jerarquía sobre su sitio web. Esto significa que debe elegir las palabras clave para las categorías que desea clasificar. Esto también obliga a los diseñadores a utilizar nombres de categorías que sean más fáciles de entender.

Las migas de pan mejoran tanto la UX como la UI. No deberían reemplazar la navegación estándar del menú, pero pueden generar interés y mantener a los visitantes en su sitio por más tiempo.

Módulo Divi Breadcrumbs

Sube y activa el complemento como de costumbre. El módulo aparecerá en un rojo brillante llamado Hollywood Cerise. Muchos complementos de migas de pan requieren Yoast porque extraen sus migas de pan del complemento de Yoast, pero el módulo Divi Breadcrumbs no requiere Yoast. En cambio, crea sus propias migas de pan. Por lo tanto, no se requieren otros complementos.

La configuración de contenido incluye ocultar la ruta de navegación de inicio, agregar su propio texto de ruta de navegación de inicio, elegir el icono separador (de 12 opciones), ocultar la página actual, la configuración de fondo y la etiqueta de administrador. Las configuraciones de diseño incluyen estilo para los íconos, texto y enlaces, y las opciones de espaciado estándar.

Ejemplos del módulo Divi Breadcrumb

Este es un diseño de artículo básico con el módulo de título de la publicación con imagen, el módulo de rutas de navegación y el módulo de texto de los artículos. Dejé la configuración de migas de pan en sus valores predeterminados.

Así es como se ve el módulo con la configuración predeterminada. Los enlaces de Hogar y Cercado están en azul para mostrar que se puede hacer clic en ellos. Las migas de pan se pueden colocar a la izquierda, centradas o a la derecha.

En este ejemplo, coloqué las migas de pan en el centro y agregué un fondo degradado y aumenté los tamaños de fuente tanto para el título del artículo (14 puntos) como para los enlaces (12 puntos). El texto es blanco. Como están impresos sobre un degradado, los hice del mismo color. También cambié el separador de líneas. En una publicación normal, no llamaría la atención sobre las migas de pan con un fondo degradado, pero esto muestra lo que puede hacer con ellas.

Agregar migas de pan en un menú de ancho completo

El mejor lugar para agregar migas de pan es en la parte superior de la página. En este ejemplo, creé una publicación usando un menú de ancho completo y configuré el relleno y los márgenes en 0 tanto para la sección de ancho completo como para la sección estándar. Inserté las categorías para mostrar la jerarquía.

Cambié los colores de fuente de la ruta de navegación para que coincidan con el menú de ancho completo, pero luego los suavicé para que no se destaquen. Cambié el separador a una flecha y eliminé Inicio y la página actual de la navegación de la ruta de navegación.

Observe que las rutas de navegación siguen la misma estructura incrustada que las categorías en la imagen de arriba. El artículo en sí también incluye esas categorías, pero no hay una estructura jerárquica. Se pueden eliminar del título si no desea mostrar las mismas categorías varias veces.

En este ejemplo, coloqué el color de fondo en la fila, lo hice de ancho completo, cambié el color de la fuente para que no dominara el menú y agregué 1 píxel al espaciado de letras. Los pequeños cambios pueden hacer una gran diferencia.

Esta es la misma configuración que usa el fondo dentro del módulo de migas de pan en lugar de la fila. Agregué relleno para reducir el ancho. Me gusta que crea un pequeño elemento que parece separado pero adjunto al menú de arriba.

Diseñando el Separador

El separador también tiene características de estilo. Cambie el estilo, el tamaño, el color, el espaciado y la altura de la fuente. Entre las opciones de separador y las funciones de estilo, puede hacer separadores fácilmente para que coincidan con la marca de su sitio web.

Este ejemplo usa la fuente predeterminada en violeta y un tamaño de fuente de 20 para los separadores.

Aquí está el mismo separador con una fuente de Georgia para el separador. Basta con cambiar la fuente del separador para darle un nuevo aspecto.

Aquí está el mismo separador que usa la fuente Black Ops One. Es más atrevido y se destaca más.

Este es Droid Serif en fuente de 20 puntos con un interlineado de 4 píxeles. Hice la fuente en rojo oscuro.

Incluso los puntos cambian de forma con las opciones de fuente. Este es Passion One en 24 puntos. Vale la pena dedicar un tiempo a experimentar con fuentes, colores y tamaños para crear algo único. Es fácil de hacer con los controles de estilo estándar.

Uso del módulo Divi Breadcrumbs con extra

El módulo Divi Breadcrumbs funciona con Extra y el complemento Divi Builder. Aquí hay un vistazo a Extra con migas de pan debajo de la imagen de la derecha. Incluí el nombre de la publicación ya que las rutas de navegación están muy lejos del título en la parte superior de la pantalla. Utiliza un separador de barras.

Idealmente, las migas de pan estarían en la parte superior de la página. En el diseño de mi página, el módulo de migas de pan está en la parte superior. La razón por la que se muestra debajo de la imagen es que estoy permitiendo que Extra muestre la imagen destacada.

En este ejemplo, coloqué la imagen dentro del diseño y configuré la sección para que tenga 0 relleno superior. Eliminé la publicación actual e hice rojo el separador.

Licencia, actualizaciones, soporte

El complemento se puede instalar en sitios web ilimitados para usted y sus clientes. Las actualizaciones son de por vida. Incluye seis meses de soporte.

• Haga clic aquí para comprar: Módulo Divi Breadcrumbs

Pensamientos finales

Las migas de pan son una de esas pequeñas cosas que notas cuando falta. Si se diseñan correctamente, estarán allí cuando el usuario los necesite y se mantendrán apartados cuando no lo necesiten. El módulo Divi Breadcrumbs es una excelente manera de agregarlos a sus páginas y publicaciones de Divi y se pueden diseñar fácilmente para que se ajusten a la marca de su sitio. Es simple e intuitivo.

Si está interesado en agregar migas de pan a sus diseños Divi, el módulo Divi Breadcrumbs podría ser el complemento que necesita.

¡Nos gustaría saber de ti! ¿Has probado el módulo Divi Breadcrumbs? Háganos saber su experiencia en los comentarios a continuación.

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