Une icône dans la navigation Jimdo

Il est d'insérer une icône dans la navigation de Jimdo, par exemple une petite maison pour indiquer l'accueil ou un drapeau pour le choix de langue. Cette manipulation est assez simple à condition de ne pas avoir peur du code HTML !

Un exemple concret

Cap Network utilise le design Tokyo, épuré et bien adapté au monde des affaires. La navigation "principale" est un sous-menu de la page d'accueil, ce qui est utile pour un site multilingue. Mais si je cache "Accueil" dans la navigation, je n'ai plus de navigation sur mobile.

Comme je trouvais un peu "cloche" ce lien "Accueil" tout seul en haut de l'écran, je l'ai remplacé par une icône orange en forme de maison. 

Etape 1 : télécharger une icône de la bonne couleur

Le site Iconmonstr propose plus de 4000 icônes à télécharger gratuitement :

  • Faites une recherche en anglais (ex : house, home, homepage)
  • Choisissez votre icône
  • Choisissez le format PNG
  • Saisissez le code hexadécimal de la couleur souhaitée
  • Acceptez les conditions et téléchargez l'icône. C'est aussi simple que cela !

Etape 2 : insérer l'icône dans une page cachée du site Jimdo

  • Créez une sous-page (ex : sous "Contact") et nommez-la "NE PAS EFFACER" puis cachez-la de la navigation
  • Insérez l'icône dans la page via un élément image et redimensionnez-la à la taille voulue pour la navigation (petit !)
  • Ouvrez la page cachée dans le navigateur au moyen du bouton "Mode visiteur" (petit écran en haut à droite)
  • Avec un clic droit sur l'image, ouvrez-la dans un nouvel onglet
  • Copiez l'adresse de cette fenêtre dans un document texte. 

L'adresse de l'image ressemble à https://image.jimcdn.com/app/cms/image/transf/none/path/xxxxxxxxxx/image.png

Etape 3 : trouver le code de l'onglet à remplacer

  • Toujours en mode "visiteur", sélectionnez l'onglet dans la navigation et avec un clic droit, cliquez sur "Inspecter". Attention, il faut utiliser Google Chrome pour inspecter le code.
  • La "classe" (le code) de cet onglet est unique, elle se trouve dans la ligne au-dessus de celle qui apparait en bleu. Dans cet exemple, le code  est cc-nav-view-2056151171.
  • Copiez ce code dans votre document texte

Etape 4 : modifier le head du site

Pour modifier le style du site Jimdo, allez dans Menu > Paramètres > Modifier le head

Insérez le code suivant en remplaçant les zones en mauve et en orange par vos propres données :

 

<style>

/* <![CDATA[ */

#cc-nav-view-2056144171 {

background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=30x10000:format=png/path/sb4d0c71c0b8c3a0c/image/i37d66137006b2eb4/version/1545384510/image.png);

background-position: top;

background-repeat: no-repeat;

}

/*]]>*/

</style>

 

Etape 5 : enlever le texte dans le menu

  • Si le code est inséré correctement, votre icône et le texte du menu se superposent.
  • Dans le menu (via le bouton "modifier la navigation"), vous pouvez remplacer le texte par un point ou un tiret

Testez la navigation sur mobile !

N'oubliez jamais de tester votre site sur smartphone ! C'est encore plus important après avoir effectué cette manipulation. Si votre navigation mobile pose des problèmes, c'est potentiellement un visiteur sur deux qui sera perdu. 

 


Un autre exemple : icône pour la langue

Chez Inquiry, nous avons remplacé le bouton "English" par un drapeau anglais (attention : prenez uniquement des images libres de droits !).

Un autre exemple : icône pour l'accueil

Chez Jane, organisatrice de Tentes Rouges, nous avons remplacé "Accueil" par un sigle triangulaire, qui rappelle la tente. Cela rend le menu plus léger.

Cet article vous a été utile ? Laissez-moi un commentaire et n'hésitez pas à le partager !

Écrire commentaire

Commentaires: 7
  • #1

    MYRIAM (jeudi, 15 août 2019 10:38)

    Bonjour,
    Très intéressant merci! mais je bug à la dernière étape :(
    Comment fait-on pour rendre la police transparente dans la barre de menu sur un seul menu et non sur l'ensemble des titres de menu ?
    Merci d'avance,
    Myriam

  • #2

    Rose (jeudi, 05 décembre 2019 00:31)

    Bonjour,

    Même réflexion ! Cela ne sert à rien car arrivé à la fin, tout le menu devient transparent. Dommage, j'avais réussi...

  • #3

    Amaranthe (dimanche, 08 décembre 2019 16:42)

    Bonjour et merci pour votre message. Je vais regarder ce qui bloque. En attendant, n'hésitez pas à contacter le support de Jimdo via Menu > Questions. J'espère qu'ils pourront vous aider ! Bien amicalement, Sylvie

  • #4

    RENE (dimanche, 29 décembre 2019 08:41)

    Bonjour,
    Je ne trouve pas grand chose sur mon site JIMDO Dolphi.
    Je ne vois pas l'icône HTLM pas plus que pour colorier un mot.
    Les tutos de Jimdo sont rares.
    Je vous remercie pour votre aide

  • #5

    Amaranthe (lundi, 30 décembre 2019 19:00)

    Cher René, A mon grand regret, Jimdo a récemment lancé une version très simplifiée de son outil (Jimdo Dolphin) qui ne permet rien de tout ceci. Il faut leur demander de repasser à la version Jimdo Creator et vous pourrez mieux personnaliser votre site. Voici mon avis sur Dolphin https://www.amaranthe.info/2019/11/20/j-ai-test%C3%A9-dolphin-le-nouvel-outil-de-cr%C3%A9ation-de-site-de-jimdo/

  • #6

    Marie (lundi, 23 mars 2020 10:34)

    Bonjour Sylvie, J'aimerai faire de même mais j'ai le même souci que Myriam et rose. J'aimerai remplacer le mot accueil par une icone et vérifier par la même occasion si je gagne un peu de place en largeur pour que la barre de navigation tienne sur une seule ligne :-)

  • #7

    Sophie (dimanche, 14 janvier 2024 17:59)

    Bonjour, même souci, le . écrit dans le menu continue à se voir, et surtout quand on passe la souris sur le menu, l'image disparait, car j'imagine qu'il y a aussi le code à changer sur une action de type hover ...
    Auriez-vous par hasard ce code supplémentaire svp ?
    Enfin, y aurait il des paramètres pour que l'image démarre plus haut que les autres éléments du menu, sinon ça fait vraiment trop petit me concernant, je sais pas, un padding à enlever quelque part ?
    Merci d'avance