Se parece a ti're using IE11

Si esta es la primera vez que escuchas sobre el término «breadcrumb» utilizado en el diseño web, déjame mostrarte cómo se ve:

Estoy bastante seguro de que lo has encontrado en los sitios web que ha visitado. Ahora, vamos a añadir uno en su website.To agregue el elemento de migas de ruta, simplemente busque «migas de ruta» en el panel elementos y arrastre el elemento de migas de ruta al panel de contenido.

Podrá ver algo como esto:

Ahora, el texto que está viendo en el constructor o en Cornerstone no es el texto real que aparecerá en el front-end de su sitio. Eso es simplemente un marcador de posición. En el front-end, verá la jerarquía de las páginas web comenzando con el enlace a la Casa en la parte izquierda, la mayor parte, y luego moviendo un niño más a la derecha.

En este caso, dado que la página que estamos creando es el Perfil de la empresa, que en este ejemplo es un hijo de la página Acerca de nosotros, la estructura es: Inicio > Acerca de nosotros > Perfil de la empresa.

En el grupo de campos de configuración, verá los siguientes campos:

Tipo de etiqueta de inicio

Puede elegir si desea usar un texto sin formato (por ejemplo, Inicio) para el enlace de la página de inicio o usar un icono en su lugar.

Etiqueta de inicio

Si seleccionó Texto en el campo Tipo de etiqueta de inicio de arriba, puede cambiar el texto de «Inicio» a otra cosa (por ejemplo, Blog, Noticias).

Si eliges Icono, se te dará la opción de elegir el icono que quieres usar.

Width & Max Width

Puede establecer el ancho predeterminado del elemento de migas de pan. También puede establecer su ancho máximo para que no pueda ir más allá de ese ancho.

Justification& Direction

Esto le permite cambiar las propiedades set the Flex CSS del elemento Breadcrumb. Si no está familiarizado con Flexbox, aquí encontrará una introducción útil.

Fondo

Puede añadir un color de fondo al elemento.

Puede establecer las fuentes, márgenes, rellenos, sombras de caja, bordes y radio de borde del elemento de migas de pan. Verá estas mismas propiedades en el panel de controles:

Tenga en cuenta que estas propiedades mencionadas, cuando se configuran, son para todo el elemento de migas de ruta y no para enlaces individuales dentro de dicho elemento. Eso significa que, si configura los rellenos, se aplicará a todo el elemento.

Más adelante hablaremos sobre cómo configurar enlaces individuales dentro de la migaja de pan.

En las migas de pan ,los «delimitadores» son los separadores de cada enlace.

El delimitador predeterminado es una flecha, pero podemos cambiarlo e incluso eliminarlo por completo. Los ajustes se pueden encontrar en el grupo de campos de configuración del medidor.

Ahora hablemos de los ajustes individuales.

Habilitar

De forma predeterminada, los delimitadores están activados, pero puede desactivarlos, eliminando así cualquier delimitador.

Tipo de delimitador

Al igual que en el Tipo de etiqueta de inicio en el grupo de campos de configuración discutido anteriormente, puede elegir si desea usar Texto o Icono para el Tipo de Delimitador. Cuando decimos «Texto», no significa necesariamente palabras, aunque las palabras están permitidas. Lo que generalmente se utiliza son códigos ASCII. El delimitador predeterminado, & rarr; es un código ASCII que genera la flecha.

Si elige Icono como Tipo Delimitador, se le mostrará el campo selector de iconos para elegir los iconos que desea usar.

LTR & Delimitador RTL

LTR significa» De izquierda a derecha», mientras que RTL significa»de derecha a izquierda». Básicamente, esto significa la dirección en la que leemos las letras. Por ejemplo, está leyendo este artículo comenzando de izquierda a derecha, por lo tanto, esto es LTR. Idiomas como el árabe y el hebreo leen sus caracteres y palabras desde la derecha hacia la izquierda.

Algunos sitios web admiten varios idiomas en los que se admiten tanto LTR como RTL. Esta configuración prepara el delimitador de migas de ruta al permitirle establecer no solo el delimitador LTR, sino también qué usar cuando se habilita RTL.

Espaciado

El valor que ponga aquí se establecerá como la distancia en el lado izquierdo y derecho del delimitador. Así que si establece 10px como valor, cada delimitador tendrá un espacio de 10px a su izquierda y otro de 10px a su derecha.La configuración de enlaces

es prácticamente la misma que la Configuración y la configuración de diseño combinadas. La principal diferencia es que la configuración de enlaces es específica para los enlaces individuales, mientras que los dos primeros se aplican al elemento de ruta de navegación en sí.

La configuración de enlaces le permite establecer también el color del texto y el color de fondo de todos los enlaces dentro de la ruta de navegación que el ratón está flotando en un enlace.

Personalizar

La sección personalizar consta de controles para personalizar el elemento si le gusta HTML, CSS y Javascript.

• ID: Utilice esta opción para establecer un ID HTML para el elemento. El ID debe ser único en la página.Clase
• : Utilice esta opción para establecer una clase HTML para el elemento. Puede usar la clase para su código CSS personalizado.
• Elemento CSS: Utilice esta opción para tener un mejor control sobre el elemento para acceder a las etiquetas internas del elemento utilizando $el como selección CSS. Haga clic aquí para obtener información más detallada.
• Ocultar durante el punto de interrupción: Utilice esta opción para ocultar el elemento en diferentes tamaños de dispositivo. Haga clic aquí para obtener más información.
• Atributos personalizados: Use esta opción para agregar atributos personalizados a la etiqueta HTML de envoltura del elemento. Como data-info=123. Puede utilizar la opción para inyectar información personalizada en el elemento que desea utilizar en el código de personalización.

Demo

Para ver una demostración en vivo del elemento Breadcrumbs, haga clic aquí.

Resumen

En solo unos minutos, aprenderás a agregar y configurar migas de pan a Cornerstone / Content Builder. Has aprendido a diseñar el elemento breadcrumb, así como sus enlaces individuales. Por último, también has aprendido a configurar el delimitador a tu gusto.