Besoin d'aide ?

Placer des images dans la barre de navigation

Pour n'importe quel type de projet, mais plus particulièrement dans le cas de sites multilingues, insérer des images à la place des textes dans la barre de navigation permet de donner un côté esthétique, et parfois plus parlant qu'un texte, dans l'accès à certaines pages de votre site.

Nous allons donc aborder ici la manipulation en partant de l'exemple des sites multilingues, le plus évident. Pour tout autre usage, il est recommandé de bien juger de l'utilité d'avoir recours aux images : en effet, améliorer l'esthétique de votre site ne doit pas prendre le pas sur sa compréhension. Les visiteurs cliqueront beaucoup moins sur ces boutons si ils ne comprennent pas vers quoi cela les mène !

Ce tutoriel est à réserver, d'un point de vue ergonomie, à quelques designs présentant des traits particuliers : la navigation doit être de préférence fixe, et accessible par défaut (pas d'appel par un bouton "Menu" comme sur Cape Town).

Conseil :
Dans ce tutoriel, il sera nécessaire de faire quelques passages entre votre site en modes Édition (modification) et Visiteur (vue publique). Pour faciliter vos manipulations, je vous invite à ouvrir simplement 2 onglets dans votre navigateur, chacun avec votre site dans l'un de ces deux modes.

Formatage de la navigation actuelle

Afin d'accueillir les drapeaux, le texte de la navigation doit être adapté. En effet, bien qu'invisible au final, votre texte sera toujours physiquement présent, et créera donc des espacements en conséquence. Pour nos drapeaux, nous insérons donc simplement un code pour chaque pays, 3 lettres en majuscules dans une police Arial à 18px.

Insertion de l'image

Pour pouvoir afficher une image dans la navigation, il sera avant tout nécessaire de l'insérer sur votre site par un élément Image. Si cette image ne doit pas être affichée en dehors de la navigation, créez une page que vous cacherez et protégerez par mot de passe pour l'y insérer. Elle sera ainsi là, à disposition, sans que le visiteur lambda ne puisse y accéder.

Note :
L'image que vous insérerez via cet élément Image sera reproduite à l'identique dans la navigation, y compris dans les dimensions. Insérez donc une image aux dimensions exactes que vous prévoyez dans la navigation : le tout est qu'elles ne dépassent pas les dimensions de l'onglet.
Dans notre exemple, les drapeaux mesurent 20px de haut sur 30px de large.

Une fois l'image insérée, rendez-vous sur cette même page en mode Visiteur. Effectuez un clic droit sur cette image, et sélectionnez "Ouvrir l'image dans un nouvel onglet" (Google Chrome) ou "Afficher l'image" (Mozilla Firefox).

Gardez l'onglet ainsi ouvert de côté : nous en aurons besoin par la suite !

Identification de l'onglet à modifier

Chaque bloc d'un site Jimdo est identifié grâce à un identifiant et/ou est désigné dans une catégorie qui la caractérise. La première étape consistera donc à trouver l'identifiant de l'onglet que nous souhaitons changer, afin de lui apporter les modifications souhaitées.

Pour cela, accédez à votre site en mode Visiteur, et effectuez un clic droit précisément sur l'onglet en question. Sélectionnez alors "Procéder à l'inspection de l'élément" (Google Chrome) ou "Examiner l'élément" (Mozilla Firefox), afin d'ouvrir le panneau affichant le code source de la page.


Dans ce panneau, vous observerez des lignes de code ; si vous avez bien sélectionné l'onglet, vous devriez observez les lignes de code ci-contre. Une ligne sera en l'occurence surlignée : c'est la ligne juste au dessus qui nous intéressera. Elle commence par la mention "<li ...".

Dans cette ligne, il y a une mention de type id="cc-nav-view-2139337627" : copiez alors ce qui se trouve entre guillemets : il s'agit de l'identifiant de l'élément que nous recherchions !

Gardez-le ouvert, à disposition, ou copiez-le quelque part.

Insertion du code

Après avoir récupéré l'image et l'identifié l'onglet que nous allons modifier, nous passons à la partie la plus intéressante : le code ! Pour cela, partons de la base suivante :

<style>

#IDENTIFIANT_DE_L'ONGLET_DE_NAVIGATION {

background-image: url(ADRESSE_URL_DE_L'IMAGE);

background-position: center;

background-repeat: no-repeat;

}

</style>

Sur votre site en mode Édition, accédez à l'onglet Paramètres > Modifier le head, et copiez ces lignes sous l'onglet "Site entier".

Deux éléments seront ici à modifier :

  • La mention IDENTIFIANT_DE_L'ONGLET_DE_NAVIGATION en rouge sera à remplacer par l'identifiant de l'onglet récupéré, commençant par "cc-nav-view...". Prenez garde à ne pas supprimer les symbole # et { en début et fin de ligne !
  • La mention ADRESSE_URL_DE_L'IMAGE devra être remplacée par l'URL de l'image à insérer. Pour cela, rendez-vous sur la page de l'image gardée ouverte, et récupérez l'adresse dans la barre URL de votre navigateur pour le copier à la place.

Vous devriez alors obtenir un résultat similaire à cette illustration (cliquez sur l'image pour l'agrandir) :

Enregistrez alors votre modification. Rechargez la page en mode Visiteur, afin d'observer vos images intégrées ! Toutefois, il est vrai qu'à peu de chose près, vous devriez observer du texte devant, quelques chose comme ceci :

Dernières mises au point

Pour finaliser la manipulation, 2 actions restent à effectuer.

  • En mode édition, sélectionnez précisément un onglet de navigation avec l'outil Style. Définissez alors la couleur de la police en transparent, aussi bien par défaut qu'en mode "Actif"
  • Vous pouvez également adapter la taille de vos images. Pour cela, accédez à l'élément image inséré précédemment, et modifiez-en la taille (très légèrement !). En enregistrant cela affectera donc les dimensions de sa copie dans la navigation.
Cette fonction vous intéresse mais vous ne parvenez à l'installer sur votre site ? Rendez-vous sur notre forum ou contactez un Jimdo Expert.