Éditeur Studio : Ajouter et personnaliser des onglets
Temps de lecture : 7 min
Utilisez l'élément Onglets pour organiser et regrouper le contenu connexe sur une page. Cet élément affiche plusieurs sections de contenu de manière compacte, ce qui permet aux visiteurs du site de votre client de trouver facilement les informations dont ils ont besoin.
Dans cet article, découvrez comment :
Ajouter l'élément Onglets à une page
Ajoutez autant d'éléments Onglets que nécessaire pour organiser le contenu du site. Après avoir sélectionné un élément prédéfini et l'avoir fait glisser sur la page, vous pouvez personnaliser le contenu et ajouter des éléments.
Pour ajouter des onglets :
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Cliquez sur Outils de mise en page.
- Cliquez sur Onglets.
- Sélectionnez un design et faites-le glisser sur la page.
- Personnalisez le contenu des onglets :
- Cliquez sur l'élément Onglets que vous venez d'ajouter.
- Cliquez sur Gérer les onglets.
- Sélectionnez l'onglet sur lequel vous souhaitez travailler.
- Modifiez le contenu de l'onglet :
- Ajoutez plus d'éléments.
- Modifiez les éléments existants.
- Ajustez la grille à la mise en page souhaitée.
Gérer les onglets
Utilisez le panneau Gérer les onglets pour ajouter, dupliquer, renommer ou supprimer des onglets. Ce panneau vous permet également de naviguer entre les onglets pour les prévisualiser et les modifier si nécessaire.
Pour gérer les onglets :
- Cliquez sur l'élément Onglets.
- Cliquez sur Gérer les onglets.
- Survolez l'onglet concerné et cliquez sur l'icône Plus d'actions
. - Choisissez ce que vous voulez faire avec cet onglet : Renommer, Supprimer ou Dupliquer.
Vous souhaitez ajouter un onglet vierge ?
Cliquez sur Ajouter un onglet au bas du panneau.
Concevoir le design des onglets
Personnalisez l'élément Onglets pour qu'il corresponde au style de la page. Vous pouvez concevoir le design du menu des onglets, des onglets eux-mêmes et du conteneur qui affiche le contenu.
Suggestion :
Vous pouvez concevoir les onglets pour 3 états différents : Normal, Survol et Sélectionné.
Pour personnaliser le design des onglets :
- Cliquez sur l'élément Onglets.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Cliquez sur l'onglet Design
. - Sélectionnez la partie que vous souhaitez concevoir dans le menu déroulant :
- Conteneur de l'onglet : Ce conteneur affiche le menu de l'onglet.
- Onglets : Ce sont les onglets apparaissant sur le menu. Sélectionnez l'état que vous souhaitez personnaliser (Normal, Survol, ou Sélectionné).
- Conteneur : Il s'agit du conteneur qui affiche le contenu de chaque onglet.
- Utilisez les options de design disponibles :
- Remplissage d'arrière-plan : Appliquez un arrière-plan de couleur, de dégradé ou d'image. Vous pouvez ajouter plusieurs calques d'arrière-plan et ajuster leur opacité.
- Bordures : Ajoutez des bordures pour créer un contraste avec la page de votre site. Sélectionnez un design et une couleur, et configurez la largeur.
- Angles : Choisissez l'apparence des angles. Vous pouvez ajuster chaque angle différemment et les rendre plus arrondis ou plus carrés.
- Ombres : Ajoutez des ombres pour un effet 3D sympa. Vous pouvez configurer la taille, la visibilité, l'angle, etc. pour lui donner plus d'impact.
- Mise en page : Ajustez la marge intérieure pour l'agrandir ou la réduire. Vous pouvez activer ou désactiver l'icône Verrouiller
pour ajuster chaque côté séparément, ou les faire correspondre. - Texte : Stylisez et formatez les noms des onglets apparaissant dans le menu. Vous pouvez modifier la police, la taille, la couleur et plus encore.
Remarque :
Les options disponibles dépendent de la partie dont vous choisissez de personnaliser le design (ex. Conteneur d'onglets, Onglets ou Conteneur).
Choisir un onglet par défaut
L’onglet par défaut est l’onglet qui s’ouvre automatiquement sur le site en ligne. Vous pouvez le remplacer par celui qui doit apparaître en premier pour le contenu de votre client et les besoins du site.
Suggestion :
Dans le panneau Gérer les onglets, vous pouvez voir une icône de case à cocher à côté de l'onglet par défaut actuel.
Pour configurer l'onglet par défaut :
- Cliquez sur l'élément Onglets.
- Cliquez sur Gérer les onglets.
- Survolez l'onglet concerné et cliquez sur l'icône Plus d'actions .
- Cliquez sur Définir par défaut.
Ajuster la mise en page de l'onglet
Personnalisez la mise en page, l'espacement et la marge intérieure des éléments des onglets. S'il y a un grand nombre d'onglets, vous pouvez également décider de leur affichage dans le menu (Défilement ou Renvoi à la ligne).
Pour ajuster la mise en page de l'onglet :
- Cliquez sur l'élément Onglets.
- Cliquez sur l'icône Mise en page
. - Ajustez la mise en page à l'aide des options disponibles :
- Distribution d'onglet : Décidez de l’étirement du menu d’onglets :
- Par défaut : Le menu ne s'étire pas pour s'adapter à la largeur de l'élément. Vous pouvez ensuite aligner les onglets à gauche, au centre ou à droite.
- Étirement : Le menu s'étire pour s'adapter à la largeur de l'élément. Vous pouvez aligner le texte du menu à gauche, au centre ou à droite.
- Espace entre les onglets : Faites glisser le curseur pour modifier l'espacement entre les onglets sur le menu.
- Espace entre onglets et conteneur : Modifiez l'espacement entre le menu et le conteneur qui affiche le contenu de chaque onglet.
- Marge horizontale : Ajustez la marge à gauche et à droite des onglets du menu.
- Marge verticale : Ajustez la marge en haut et en bas des onglets du menu.
- Affichage des onglets qui débordent : Sélectionnez l'affichage pour afficher les onglets qui débordent du menu :
- Défilement : Les visiteurs du site peuvent faire défiler le menu pour voir plus d'onglets.
- Renvoi à la ligne : Une autre ligne est ajoutée pour s'adapter aux autres onglets. Vous pouvez ensuite utiliser le curseur pour ajuster l'espace entre les rangées.
- Direction des onglets : Affichez les onglets du menu de gauche à droite, ou inversement.
- Distribution d'onglet : Décidez de l’étirement du menu d’onglets :
Cela vous a-t-il aidé ?
|