Comment créer un sous menu / menu déroulant sur systeme.io ?

Comment créer un sous menu ou menu déroulant sur systeme io ?

Tu as fait ton site avec un petit menu tout en haut, mais tu te rends compte que ton menu est trop »petit ». Tu te rends compte qu’il ne contient pas assez de liens. Et tu voudrais faire un menu déroulant, un sous menu qui apparait au passage de la souris.

Dans cet article, tu découvriras comment faire un sous menu ou un menu déroulant sur systeme io.

C’est quoi un sous menu ?

Salut !

Tu es peut-être débutant dans le monde de la création de site internet et tu te demandes ce qu’est un sous-menu ?

Pas de panique, je vais t’expliquer ça en quelques lignes.

Mais avant toute chose, sais-tu que tu peux prendre ton abonnement systeme.io avec 40 % de réduction ?

Ou 30 % en paiement annuel…

Allez, c’est parti pour l’explication.^^

Un sous-menu, c’est tout simplement un menu qui se trouve dans un autre menu. Tu peux le voir comme une sorte de sous-catégorie. Par exemple, si tu as un menu « produits » sur ton site, tu peux créer un sous-menu « chaussures » qui apparaîtra lorsque l’utilisateur survolera ou cliquera sur le menu « produits ».

Le sous-menu peut être utile pour organiser ton site et permettre à tes visiteurs de trouver rapidement ce qu’ils cherchent. Tu peux en créer autant que tu le souhaites, en fonction de tes besoins.

Il est également possible de créer des sous-menus à plusieurs niveaux, c’est-à-dire des sous-menus dans les sous-menus. Cela peut être utile si tu as une grande quantité de contenu à mettre en avant sur ton site. Toutefois, je te le déconseille, car si tu fais trop de sous menu, tu peux rapidement perdre les visiteurs.

En résumé, un sous-menu c’est un moyen de structurer ton site et de rendre la navigation plus facile pour tes visiteurs. N’hésite pas à en utiliser pour optimiser l’expérience de ton utilisateur sur ton site internet.

C’est quoi un menu déroulant ?

Tu as sûrement déjà vu un menu déroulant sur un site internet, mais tu te demandes peut-être ce que c’est exactement.

Un menu déroulant, aussi appelé « menu drop-down » en anglais, est un élément de navigation qui permet de dérouler une liste de liens vers d’autres pages ou sections du site. Il s’agit d’une manière pratique et esthétique de regrouper différentes informations sous un même menu.

Le menu déroulant est généralement placé en haut de la page, et s’ouvre lorsque l’utilisateur passe sa souris sur un titre ou un lien. La liste de liens s’affiche alors en dessous, ce qui permet de naviguer facilement d’une page à l’autre sans avoir à revenir en haut de la page.

Il existe de nombreuses manières de personnaliser un menu déroulant, en utilisant différentes couleurs, polices de caractères ou encore des icônes. Tu peux également choisir de faire apparaître ou disparaître certains liens en fonction de la page sur laquelle tu te trouves, ce qui permet de mieux orienter l’utilisateur et de le guider dans sa navigation.

En résumé, le menu déroulant est un élément incontournable de tout site internet, qui permet de structurer et de rendre plus accessible le contenu de ton site. Alors n’hésite pas à l’intégrer sur ton site systeme io, tu verras que cela facilitera la vie de tes visiteurs !

Pour finir, un sous menu ou un menu déroulant, c’est la même chose…^^

Pourquoi utiliser des sous-menus et/ou des menus déroulants sur ton site web systeme.io ?

Tu es en train de créer ton site web avec systeme.io et tu te demandes s’il est utile d’utiliser des sous-menus et/ou des menus déroulants ?

La réponse est oui ! Et voici pourquoi.

Tout d’abord, cela permet de mieux organiser ton site et de faciliter la navigation de tes visiteurs. En effet, lorsque tu as beaucoup de pages ou de rubriques, il peut être difficile de tout mettre en valeur dans un seul menu.

Les sous-menus et les menus déroulants permettent de regrouper les différentes sections et de les rendre plus accessibles.

Ensuite, cela peut aider à améliorer ton référencement naturel. En effet, lorsque les moteurs de recherche analysent ton site, ils accordent une importance aux liens internes et à la structure de ton menu. Si tu utilises des sous-menus et/ou des menus déroulants, tu peux renforcer la hiérarchie de ton site et ainsi obtenir un meilleur classement dans les résultats de recherche.

Enfin, cela peut être esthétiquement agréable et ajouter une touche de professionnalisme à ton site. Tu peux personnaliser l’apparence de tes menus et créer une expérience de navigation fluide et agréable pour tes visiteurs.

En résumé, utiliser des sous-menus et/ou des menus déroulants sur ton site web systeme.io est une excellente idée. Cela permet d’organiser ton site, d’améliorer ton référencement et d’offrir une expérience de navigation de qualité à tes visiteurs.

Alors n’hésite pas à en profiter !

Attention :
J’ai bien dit qu’un sous menu ou menu déroulant peu être génial pour ton site systeme.io.
Je n’ai pas dit que ce serait bien pour ton tunnel de vente !

Ne mélange pas les 2 !

Je te déconseille fortement de mettre un menu ou sous menu dans ton tunnel de vente parce que ça va disperser l’attention des visiteurs et tu feras moins de vente !

Amélioration de l’expérience utilisateur

Les sous menus facilitent la navigation et rendent l’expérience utilisateur plus agréable. Si tes visiteurs doivent parcourir de nombreuses pages pour trouver ce qu’ils cherchent, ils vont très vite se lasser et quitter ton site.

En utilisant un sous menu, tu leur offres une meilleure expérience et tu augmentes les chances qu’ils restent sur ton site plus longtemps.

Organisation du contenu de ton site internet

En utilisant un sous-menu, tu offres une meilleure expérience de navigation à tes visiteurs et tu leur facilites la tâche pour trouver ce qu’ils cherchent sur ton site.

Cela peut également améliorer le référencement de ton site, car les moteurs de recherche apprécient les sites bien structurés et faciles à parcourir.

Bref, tout est plus simple à trouver pour tes visiteurs.

Nouvelle fonctionnalité de création de sous menus sur systeme.io

Il y a peu, systeme.io a doté le module « menu » de la possibilité de créer un sous menu, ce qui est géniale parce que ça manqué à pas mal de monde. Pour les gens qui veulent faire des sous menus avec systeme.io, les choses sont beaucoup plus simples maintenant.

Voici comment créer un sous menu dans systeme.io :

1 – Va sur la page sur laquelle tu veux faire ton menu et sous menu. Je te suggère de faire ça dans « template du blog » pour que ton menu et sous menu s’affiche sur tout ton blog (pas sur tes tunnels de ventes). Et insère le module « Menu ».

– Maintenant, clique sur le module que tu viens d’insérer et regarde à gauche dans les paramètres. Tu as les menus ET une petite case à cocher « Créer un sous menu ». Clique sur cette case pour faire apparaitre tes sous menus sous chaque menu, tu as juste à les paramétrer ensuite. Et c’est tout !

Si tu veux voir la procédure utilisée auparavant, jette un oeil plus bas…

Comment créer un sous-menu ou un menu déroulant sur Systeme.io ?

Je sais que tu attends ce petit tuto avec impatience et que tu as même sauté tout le texte pour arriver jusqu’ici.

Donc, c’est parti pour créer ton sous menu ou menu déroulant avec systeme.io !

1 – Rends-toi sur « Blog » pour créer ton menu déroulant

Tu sélectionnes le blog de ton choix.

Tu Cliques sur « Mise en page du blog ».  En faisant nos menus et sous menus dans cette partie, ils s’afficheront sur toutes les pages qui utilisent ce modèle.

Maintenant, tu vas prendre le module « Code html » puis tu le glisses sur ta page là où tu veux tes menus (en général en haut à droite).

Tu cliques sur le bloc html que tu viens de déposer et tu cliques sur « Modifier le code ».

Une petite pop up va s’ouvrir pour que tu puisses mettre le code, supprime « <h2>systeme.io</h2> ». Cela ne sert à rien ^^

2 – Copie et colle le code ci-dessous dans le bloc html que tu viens de déposer

<style>
a {
text-decoration: none;
}

nav {
font-family: Sans-serif;
float: right;
}

ul {
list-style: none;
margin: 0;
padding-left: 0;
}

li {
color: #fff;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}

/* Couleur du texte des menus et sous-menus */
li a {
color: #ffffff;
}

/* Couleur de l’arrière-plan du menu et sous-menus au survol avec la souris */
li:hover,
li:focus-within {
background: blue;
cursor: pointer;
}

li:focus-within a {
outline: none;
}

/* Style de l’arrière-plan des sous-menus */
ul li ul {
z-index: 50;
visibility: hidden;
opacity: 10;
background: grey;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
font-size: 13px;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}

ul li ul li {
clear: both;
width: 100%;
}
</style>

<!– On crée le menu accueil, les menus, les sous-menus et le menu contact –>
<div>
<nav role= »navigation »>
<ul>
<li><a href= »#lienpage »>Accueil</a></li>

<li><a href= »#lienpage » aria-haspopup= »true »>Menu 1</a>
<ul class= »dropdown » aria-label= »submenu »>
<li><a href= »#lienpage »>Sous Menu 1</a></li>
<li><a href= »#lienpage »>Sous Menu 2</a></li>
<li><a href= »#lienpage »>Sous Menu 3</a></li>
</ul>
</li>

<li><a href= »#lienpage » aria-haspopup= »true »>Menu 2</a>
<ul class= »dropdown » aria-label= »submenu »>
<li><a href= »#lienpage »>Sous Menu 1</a></li>
<li><a href= »#lienpage »>Sous Menu 2</a></li>
<li><a href= »#lienpage »>Sous Menu 3</a></li>
</ul>
</li>

<li><a href= »#lienpage » aria-haspopup= »true »>Menu 3</a>
<ul class= »dropdown » aria-label= »submenu »>
<li><a href= »#lienpage »>Sous Menu 1</a></li>
<li><a href= »#lienpage »>Sous Menu 2</a></li>
<li><a href= »#lienpage »>Sous Menu 3</a></li>
</ul>
</li>

<li><a href= »#LinkHere » aria-haspopup= »true »>Menu 4</a>
<ul class= »dropdown » aria-label= »submenu »>
<li><a href= »#LinkHere »>Sous Menu 1</a></li>
<li><a href= »#LinkHere »>Sous Menu 2</a></li>
<li><a href= »#LinkHere »>Sous Menu 3</a></li>
</ul>
</li>

<li><a href= »#LinkHere »>Contact</a></li>
</ul>
</nav>
</div>

3 – Décoches élément visible sur « Mobile »

Cliques sur le bloc html et décoche élement visible sur « Mobile ». Tu dois avoir ça.

Enfin, sauvegarde le tout en haut à droite.

En effet, il est préférable que ce menu et sous menu ne fonctionnent que sur la version ordinateur. Je te conseille de faire un menu tout simple avec le bloc « Menu » pour la version téléphone. Je t’explique cela plus bas.

4 – Modifie le code comme tu le souhaites (couleurs, polices de texte, etc.)

Avec le petit tuto ci-dessus, tu auras ton menu et tes sous menus sur ton site systeme.io. Mais tu peux tout personnaliser.

Essaye de t’amuser à changer la couleur des arrières plan, du texte, etc.

Comme cela, le menu collera plus à ton site, à ta marque et à ton branding !

5 – Crée ton menu pour la version mobile

Comme je te l’ai dit plus haut (je te le répète quand même au cas où^^), on vient de faire un menu et sous menu sur systeme io pour la version ordinateur.

Maintenant, il te faut donc faire un menu tout simple pour la version mobile. Ce n’est pas vraiment compliqué, il te suffit de glisser/déposer le module « Menu » sur la page.

Tu décoches élément visible sur « Ordinateur ». Comme cela, ton menu s’affichera uniquement sur la version mobile.

Tu comprends le principe ?

Juste avant, on cache le menu et sous menu que l’on a créé pour la version ordinateur en décochant élément visible sur « Mobile ».
Et là, on fait l’inverse, c’est-à-dire qu’on crée le menu simple pour la version mobile et on le cache pour la version ordinateur en décochant élément visible sur « ordinateur ».

Pourquoi on fait cela ?

Tout simplement parce qu’en terme d’expérience utilisateur, si on met un menu avec sous menu pour la version mobile. C’est juste surchargé et cela ne s’affichera pas correctement. pour la version mobile, il faut un menu SIMPLE.

Astuces et conseils pour la création de sous-menus et de menus déroulants efficaces sur Systeme.io

Tu utilises Systeme.io pour créer ton site web et tu aimerais mettre en place des sous-menus et des menus déroulants pour mieux organiser tes contenus ?

Tout d’abord, il est important de bien réfléchir à la structure de ton site et à la manière dont tu souhaites présenter tes informations. Essaie de regrouper les différents sujets en catégories logiques et de créer des sous-menus pour chacune d’entre elles.

Ensuite, pense à la lisibilité de tes menus et de tes sous-menus. Utilise des titres clairs et concis, et évite de trop surcharger tes menus avec trop de sous-menus. Tu peux également utiliser des icônes pour ajouter une touche de visuel à tes menus et les rendre plus attrayants.

Il est également important de bien placer tes menus et tes sous-menus sur ton site. Tu peux les mettre en haut de ta page, sur le côté ou en bas, selon ce qui te convient le mieux. N’oublie pas de penser à l’expérience utilisateur et à la manière dont tes visiteurs vont naviguer sur ton site.

Enfin, n’hésite pas à tester différentes options et à demander l’avis de tes amis ou de ta famille pour savoir ce qui fonctionne le mieux. La création de menus et de sous-menus efficaces est essentielle pour une navigation fluide sur ton site, alors prends le temps de bien les mettre en place.

Voilà, tu as maintenant toutes les clés en main pour créer des sous-menus et des menus déroulants efficaces sur Systeme.io. Alors n’hésite pas à mettre en pratique ces astuces et à tester différentes options pour trouver ce qui te convient le mieux.^^

Conclusion sur l’amélioration de l’organisation et l’expérience utilisateur avec des sous menus ou menus déroulants créent sur systeme.io

Tu as sûrement déjà entendu parler de l’importance de l’organisation et de l’expérience utilisateur pour le succès de ton site ou de ta boutique en ligne. Alors dans cette conclusion, je vais te parler de la manière dont les sous-menus ou menus déroulants créés sur systeme.io peuvent t’aider à améliorer ces deux aspects.

Tout d’abord, les sous-menus ou menus déroulants permettent de rendre ta navigation plus fluide et intuitive. En effet, plutôt que de devoir cliquer sur de nombreux liens pour accéder à la page souhaitée, l’utilisateur peut simplement dérouler le menu et choisir directement l’option qui l’intéresse.

Cela lui évite de perdre du temps et de l’énergie, ce qui est essentiel pour maintenir un bon taux de conversion.

Ensuite, ces menus déroulants permettent de mieux organiser le contenu de ton site ou de ta boutique en ligne. Tu peux y regrouper les produits ou les pages en fonction de leur thématique, de leur catégorie, de leur prix…

Cela facilite la recherche des internautes et leur permet de trouver ce qu’ils cherchent plus rapidement.

Enfin, les sous-menus ou menus déroulants créés sur systeme.io sont personnalisables et peuvent être adaptés à l’identité visuelle de ton site ou de ta boutique. Tu peux choisir la couleur, la police, la taille, l’animation…

Cela permet de créer une expérience utilisateur cohérente et agréable pour tes visiteurs.

En résumé, les sous-menus ou menus déroulants créés sur systeme.io sont une solution idéale pour améliorer l’organisation et l’expérience utilisateur de ton site ou de ta boutique en ligne. Donc n’hésite pas à les utiliser pour offrir une meilleure expérience à tes visiteurs et augmenter ta visibilité sur les moteurs de recherche.

À voir absolument :

Dis-moi si tu es arrivé à faire ton sous menu sur systeme io en commentaire.
Tu peux te servir des commentaires comme d’un tchat et me poser tes questions. 😃

Est-ce que tu as lu mon guide de démarrage gratuit sur systeme io ?