On dirait que vous 'utilisez IE11re

Si c’est la première fois que vous entendez parler du terme « chapelure » utilisé dans la conception Web, laissez-moi vous montrer à quoi il ressemble:

Je suis presque sûr que vous l’avez rencontré dans les sites Web vous avez visité. Maintenant, ajoutons-en un sur votre website.To ajoutez l’élément fil d’ariane, recherchez simplement « fil d’ariane » dans le panneau éléments et faites glisser l’élément Fil d’ariane vers le volet contenu.

Vous pourrez voir quelque chose comme ceci:

Maintenant, le texte que vous voyez dans le générateur ou dans Cornerstone n’est pas le texte réel qui apparaîtra sur le front-end de votre site. C’est simplement un espace réservé. Sur le front-end, vous verrez la hiérarchie des pages Web en commençant par le lien vers la maison sur la partie la plus à gauche, puis en déplaçant un enfant plus loin sur la droite.

Dans ce cas, puisque la page que nous créons est le Profil de l’entreprise, qui dans cet exemple est un enfant de la page À propos de nous, la structure est la suivante: Accueil >À propos de nous > Profil de l’entreprise.

Sous le groupe de champs Setup, vous verrez les champs suivants :

Type d’étiquette d’accueil

Vous pouvez choisir d’utiliser un texte brut (par exemple, Home) pour le lien de la page d’accueil ou d’utiliser une icône à la place.

Étiquette d’accueil

Si vous avez sélectionné du texte dans le champ Type d’étiquette d’accueil ci-dessus, vous pouvez remplacer le texte par « Accueil » par autre chose (par exemple, Blog, Actualités).

Si vous avez choisi l’icône, vous aurez la possibilité de choisir l’icône à utiliser.

Width&Largeur maximale

Vous pouvez définir la largeur par défaut de l’élément de fil d’ariane. Vous pouvez également définir sa largeur maximale afin qu’elle ne puisse pas dépasser cette largeur.

Justification &Direction

Cela vous permet de modifier l’ensemble des propriétés CSS Flex de l’élément de Fil d’ariane. Si vous n’êtes pas familier avec Flexbox, il y a une introduction utile ici.

Background

Vous pouvez ajouter une couleur d’arrière-plan à l’élément.

Vous pouvez définir les polices, les marges, les paddings, les ombres à paupières, les bordures et le rayon des bordures de l’élément du fil d’ariane. Vous verrez ces mêmes propriétés sur le panneau de commandes:

Notez que ces propriétés mentionnées, lorsqu’elles sont configurées, concernent l’ensemble de l’élément du fil d’ariane et non des liens individuels à l’intérieur dudit élément. Cela signifie que si vous définissez les rembourrages, cela s’appliquera à l’ensemble de l’élément.

Plus tard, nous discuterons de la configuration des liens individuels dans le fil d’ariane.

Dans la chapelure, les « délimiteurs » sont les séparateurs de chaque lien.

Le délimiteur par défaut est une flèche mais nous pouvons le modifier et même le supprimer complètement. Les paramètres se trouvent dans le groupe de champs de configuration du Delimètre.

Discutons maintenant des paramètres individuels.

Enable

Par défaut, les délimiteurs sont activés mais vous pouvez les désactiver, supprimant ainsi tout délimiteur.

Type de Délimiteur

Tout comme dans le Type d’étiquette d’accueil sous le groupe de champs de configuration discuté précédemment, vous pouvez choisir d’utiliser du Texte ou une icône pour le Type de Délimiteur. Lorsque nous disons « Texte », cela ne signifie pas nécessairement des mots, bien que les mots soient autorisés. Ce qui est généralement utilisé sont des codes ASCII. Le délimiteur par défaut, → est un code ASCII qui génère la flèche.

Si vous choisissez Icon comme Type de délimiteur, vous verrez apparaître le champ de sélection d’icônes pour choisir les icônes que vous souhaitez utiliser.

LTR &Délimiteur RTL

LTR signifie « De gauche à droite » tandis que RTL signifie « De droite à gauche ». Ceux-ci signifient essentiellement la direction dans la façon dont nous lisons les lettres. Par exemple, vous lisez cet article en commençant de gauche à droite, c’est donc LTR. Des langues comme l’arabe et l’hébreu lisent leurs caractères et leurs mots en commençant par la droite et en allant vers la gauche.

Certains sites Web prennent en charge plusieurs langues où LTR et RTL sont pris en charge. Ce paramètre prépare votre délimiteur de fil d’ariane en vous permettant de définir non seulement le délimiteur LTR, mais également ce qu’il faut utiliser lorsque RTL est activé.

Espacement

La valeur que vous mettez ici sera définie comme la distance à la fois à gauche et à droite du délimiteur. Donc, si vous définissez 10px comme valeur, chaque délimiteur aura un espace de 10px à sa gauche et un autre 10px à sa droite.

Les paramètres des liens sont pratiquement les mêmes que les paramètres de configuration et de conception combinés. La principale différence est que les paramètres des liens sont spécifiques aux liens individuels tandis que les deux premiers sont appliqués à l’élément de fil d’ariane lui-même.

La configuration des liens vous permet également de définir la couleur du texte et la couleur d’arrière-plan de tous les liens dans le fil d’ariane sur lequel la souris plane.

Personnaliser

La section personnaliser se compose de contrôles pour personnaliser l’élément si vous êtes en HTML, CSS et Javascript.

• ID – Utilisez cette option pour définir un ID HTML pour l’élément. L’identifiant doit être unique sur la page.
• Class – Utilisez cette option pour définir une classe HTML pour l’élément. Vous pouvez utiliser la classe pour votre code CSS personnalisé.
• Element CSS – Utilisez cette option pour avoir un meilleur contrôle sur l’élément pour accéder aux balises internes de l’élément en utilisant $el comme sélection CSS. Cliquez ici pour plus d’informations.
• Masquer pendant le point d’arrêt – Utilisez cette option pour masquer l’élément sur différentes tailles de périphérique. Cliquez ici pour plus d’informations.
• Attributs personnalisés – Utilisez cette option pour ajouter des attributs personnalisés à la balise HTML wrapper de l’élément. Tels que data-info=123. Vous pouvez utiliser l’option pour injecter des informations personnalisées dans l’élément à utiliser sur votre code de personnalisation.

Démo

Pour voir une démo en direct de l’élément Breadcrumbs, cliquez ici.

Résumé

En quelques minutes, vous avez appris à ajouter et à configurer du fil d’ariane à Cornerstone/Content Builder. Vous avez appris à concevoir l’élément de fil d’ariane ainsi que ses liens individuels. Enfin, vous avez également appris à configurer le délimiteur à votre guise.