TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter du fil d’Ariane dans le site Weebly ?

10

La structure interne du site est l’un des facteurs de référencement importants qui aident Google et les autres moteurs de recherche à comprendre facilement votre site. En plus de lier d’autres pages de votre site, l’ajout de fil d’Ariane peut aider les utilisateurs à naviguer vers différentes sections. Si vous ne connaissez pas le fil d’Ariane, il s’agit d’un lien de navigation supplémentaire, généralement affiché en haut de la page Web contenant la structure. Il aide les utilisateurs à naviguer facilement vers les catégories ou sections de niveau supérieur du site à partir de la page actuelle.

Connexe : Comment ajouter des fils d’Ariane dans le site WordPress ?

Exemples de fil d’Ariane

Vous trouverez ci-dessous un exemple de l’apparence des fils d’Ariane horizontaux et verticaux.

Comment ajouter du fil d'Ariane dans le site Weebly ?

Exemples de chapelure

Comme vous pouvez le voir, il fournit la position relative de la page actuelle sur l’ensemble du site, quelque chose comme un tableau d’affichage "Vous êtes ici!" dans la carte.

Weebly et Breadcrumb

Weebly ne propose pas d’ élément de fil d’Ariane par défaut pour l’ajouter sur votre site. Cependant, vous pouvez utiliser du CSS/HTML personnalisé et insérer manuellement le fil d’Ariane sur chaque page. Ici, nous allons vous montrer six fils d’Ariane de styles CSS différents que vous pouvez ajouter à votre site Weebly.

Remarque : N’oubliez pas qu’il s’agit de fils d’Ariane simples et manuels. Cela ne fait pas partie du schéma et donc les moteurs de recherche ne les afficheront pas dans les résultats de recherche comme les sites WordPress.

Avant de commencer, la condition préalable à un fil d’Ariane est de garder vos pages de manière structurée. Bien qu’il ne soit pas nécessaire d’organiser les pages selon le fil d’Ariane, nous vous recommandons fortement de maintenir la hiérarchie nécessaire sous l’onglet « Pages » et d’aligner votre navigation en conséquence. Nous expliquerons avec un exemple de structure comme « Accueil > Création de site > Weebly > Trucs et astuces Weebly > Cette page ». Cela nécessite cinq blocs avec les liens correspondants pour créer un fil d’Ariane.

Le fil d’Ariane utilise un code CSS et HTML simple, par conséquent, le code CSS doit être ajouté à la feuille de style et le code HTML doit être intégré à la page requise. Étant donné que vous devrez peut-être placer le fil d’Ariane sur plus d’une page, il est recommandé d’ajouter le code CSS sous "Thème > Modifier HTML / CSS > Styles > main.less" comme indiqué ci-dessous :

Comment ajouter du fil d'Ariane dans le site Weebly ?

Modification du fichier CSS principal dans Weebly

Le code HTML est à insérer sur une page en utilisant l’ élément «Embed Code» au-dessus du contenu.

Styles 1 et 2

Les fils d’Ariane des styles 1 et 2 ci-dessous partagent une classe CSS commune avec un ajout mineur de code pour le deuxième style.

Fil d’Ariane CSS Style 1

Fil d’Ariane CSS Style 2

Style 3, 4, 5 & Bonus 6

Fil d’Ariane CSS Style 3

Fil d’Ariane CSS Style 4

Fil d’Ariane CSS Style 5

Style de fil d’Ariane CSS bonus 6

Cliquez sur le bouton ci-dessous pour obtenir le code CSS/HTML pour tous les fils d’Ariane ci-dessus et le code CSS est mis en évidence pour chaque style.

Il y a quatre images requises pour ces fils d’Ariane que vous pouvez télécharger ci-dessous et les télécharger sur votre site Weebly. N’oubliez pas de remplacer les URL des images dans CSS par vos propres URL.

Remarque: les styles de chapelure 1, 2, 3 et 4 dans le CSS téléchargé représentent respectivement les exemples 3, 4, 5 et 6, comme indiqué ci-dessus. N’oubliez pas de remplacer les liens des images par vos propres URL.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails