Las migas de pan o breadcrumbs son un elemento de navegación que se usa en los sitios web para mostrar al usuario en qué parte se encuentra a medida que se va moviendo por la página.

Suelen colocarse en la parte superior de entradas, páginas y productos para mostrar la arquitectura de la web y que el usuario pueda retroceder si lo necesita.

Las migas de pan están compuestas de enlaces que se encargan de estructurar y jerarquizar los contenidos, por lo que son recomendables para mejorar el SEO del sitio web, pues mejoran la experiencia de usuario y facilitan a Google su rastreo e indexación.

Ejemplos de migas de pan en Divi

Para que entiendas mejor que son las migas de pan o breadcrumbs, te dejamos varios ejemplos:

Cómo añadir migas de pan o "breadcrumbs" en Divi

Ejemplo de migas de pan en una entrada de blog, compuestas de página de inicio, categoría y título del post.

Cómo añadir migas de pan o "breadcrumbs" en Divi

En este ejemplo, puedes ver la migas de pan en la parte superior de una ficha de producto en un ecommerce (nuestra propia web).

Añadir migas de pan o breadcrumbs en Divi

Ahora que ya sabes qué son las migas de pan, te vamos a mostrar como añadirlas paso a paso, pues Divi no las incluye por defecto.

Lo primero que debes hacer es activarlas en el plugin de Yoast SEO. Para ello, debes ir a: SEO > Apariencia en el buscador > Migas de pan > Activo > Guardar cambios.

Cómo añadir migas de pan o "breadcrumbs" en Divi

El siguiente paso es pegar un código en las plantillas de tus entradas y páginas de WordPress.

Te lo explicamos con más detalle:

#1 Migas de pan / breadcrumbs en entradas de Divi

Para añadir migas de pan en las entradas de Divi, debes pegar el siguiente código en el archivo single.php de tu tema hijo.

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>

Si quieres que se muestren debajo del título, pega el código detrás de la etiqueta </h1>

Y si quieres añadir las migas de pan debajo de la imagen de portada del post, pégalo después de <!– .et_post_meta_wrapper –>

#2 Migas de pan / breadcrumbs en páginas de Divi

Para mostrar las migan de pan en las páginas, el proceso es muy similar. Simplemente tienes que pegar el mismo código en el archivo page.php

Para que aparezcan debajo del título, que es el lugar más habitual, pega el código detrás de la etiqueta </h1>

#3 Migas de pan / breadcrumbs en productos de Divi

En el caso de las fichas de producto de WooCommerce, las migan de pan ya están integradas por defecto, por lo que no tienes que hacer nada más.

Por eso, te dejamos un pequeño código CSS por si quieres personalizarlas o darles un toque diferente.

Para personalizar las migas en entradas y páginas de Divi:

#breadcrumbs {
    background-color: #f89637;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 12px !important;
    padding: 5px 20px 5px 20px !important;
}
#breadcrumbs a {
    color: #ffffff;
}

Para personalizar las migas de pan en productos de WooCommerce:

.woocommerce-breadcrumb {
    background-color: #f89637;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 12px !important;
    padding: 5px 20px 5px 20px !important;
}

Solo tienes que pegarlo en las opciones del tema Divi y personalizarlo con los colores de tu web.

Por último, aquí tienes un vídeo en el que te mostramos todo el proceso, por si necesitas apoyo visual para añadir las migas de pan en tu web.

Hasta aquí este tutorial para añadir migas de pan o breadcrumbs en Divi paso a paso. Recuerda que, aunque parezca difícil porque hay que tocar la plantilla, si sigues estos pasos, es algo muy sencillo 😉

¡TE REGALAMOS UN DISEÑO PARA DIVI!

Descarga gratis este diseño especialmente pensado para empresas, negocios o freelances.

➤ Diseño para página de inicio o landing page

➤ Opciones del tema con CSS personalizado

➤ Ajustes personalizados: tipografías, colores, títulos...

¡No te vayas sin tu regalo!

Descarga gratis nuestro pack para crear tu primera web con Divi, diseñado para empresas, negocios y freelances.

RGPD

¡Muchas gracias! Ahora revisa tu 📧