Onglets : Comment créer une boîte avec des onglets ou un menu déroulant

* decoration

Dans le présent tutoriel, on vous apprendra à créer une boîte avec des onglets ou un menu déroulant qui permettent aux utilisateurs de passer facilement d'un contenu à l'autre, comme l'illustre l'exemple ci-dessus.

Prérequis

Aux fins du présent tutoriel, vous devez répondre aux critères suivants :

  1. Vous devez avoir un rôle de webmestre ou un rôle supérieur sur votre site.
  2. Vous devez savoir plus ou moins comment créer et manipuler des fragments de contenu, des mini-panneaux et des pages de panneaux.

    Exemples

    Voici quelques exemples d'onglets ou de listes déroulantes sur des sites Web de l'Université d'Ottawa qui tirent parti de la méthode décrite dans le présent article.

    Étape 1 : Créer le contenu qui servira d'onglets

    La toute première étape consiste à déterminer le type de contenu que vous souhaitez afficher sous chaque onglet. En général, pour des blocs de texte, il suffit de créer des fragments de contenu généraux à cette fin. Néanmoins, vous pourriez également utiliser d'autres choses comme des mini-panneaux ou des listes de contenu dynamiques pour chaque onglet.

    Aux fins du présent tutoriel, on travaillera avec des fragments de contenu généraux.

    1. Dans la barre administrative noire, cliquez sur Contenu.
    2. Dans le coin supérieur droit de l'écran, cliquez sur l'onglet Fragments.
    3. En haut de la page, cliquez sur le lien Ajouter un fragment de contenu, puis sélectionnez le General Content Snippet (fragment de contenu général).
    4. Remplissez les champs du formulaire qui s'affiche commet suit :
      1. Titre : Laissez ce champ vide. Le titre de l'onglet sera tiré d'ailleurs.
      2. Corps : Saisissez le contenu principal d'un onglet dans le champ Corps.
      3. Étiquette : Saisissez une étiquette administrative. En général, on conseille de suivre le format suivant : « Nom de la page - Nom du contenu ».
      4. Message du journal de révision : Saisissez une description de vos modifications dans le journal de révision.
    5. Une fois que vous avez terminé, cliquez sur le bouton Enregistrer et répétez ces étapes pour chaque onglet dont vous avez besoin.

    Étape 2 : Créer un mini-panneau et formater le contenu en tant qu'onglets

    1. Dans la barre administrative noire, cliquez sur Structure puis allez à Mini-panneaux.
    2. En haut de la page, cliquez sur le lien Ajouter pour créer un mini-panneau et procédez comme suit.
    3. Paramètres : Saisissez le titre administratif du mini-panneau. Par exemple, « Nom de page - Group d'onglets - Mini panel ». Cliquez ensuite sur le bouton Continuer.
    4. Contexte : Sautez cette étape et cliquez sur Continuer.
    5. Affichage : Réglez la Catégorie à « uOttawa - 1 rangée » et sélectionnez la mise en page « B ». Cliquez sur Continuer.
    6. Contenu :
      1. Cliquez sur la roue dentée dans le coin supérieur gauche de la région Centre. Dans la liste déroulante, sélectionnez Ajouter du contenu et ajoutez le contenu que vous souhaitez utiliser comme onglets. Pour ce tutoriel, repérez les fragments de contenu que vous avez créés à l'étape 1 et ajoutez-les avec le mode d'affichage « Corps du contenu ».
      2. La prochaine étape consiste à ajouter du style à chacun des fragments que vous venez d'ajouter. Pour cela, cliquez sur la roue dentée dans le coin supérieur droit de l'un des fragments. Dans le menu déroulant, sous Style, cliquez sur Changer. Une fenêtre s'affichera. Sélectionnez Styles de composants, puis cliquez sur le bouton Suivant.
      3. Dans la page qui suit, réglez l'option Mode d'affichage à « Onglet ». Trois boîtes s'afficheront. Saisissez le titre anglais et le titre français dans les champs respectifs en haut de la fenêtre; ce titre deviendra le titre de l'onglet. Ensuite, dans le champ Ancre du mode d'affichage, insérez un nom d'ancre qui peut être utilisé pour lier directement à cette section (p. ex. .../nom-de-page#nom-d-ancre). Évitez tous les accents, les espaces et la ponctuation.
      4. Une fois que vous avez terminé, cliquez sur le bouton Enregistrer.
      5. Répétez les trois étapes ci-dessus pour chaque élément (fragment) que vous avez ajouté au mini-panneau.
      6. Ensuite, cliquez sur la roue dentée dans le coin supérieur gauche de la région Centre (oui, celle de gauche). Dans la liste déroulante, sous Style, cliquez sur Changer. Une fenêtre s'affichera. Sélectionnez Styles de composants et cliquez sur le bouton Suivant. Configurez ensuite les options suivantes :
        • Afficher le titre? : Au besoin, sélectionnez « Oui » et fournissez les titres anglais et français du mini-panneau entier (p. ex., dans l'exemple en haut de l'article, on a mis « Foire alimentaire du UCU ») .
        • Format : Réglez le format à « Groupe d'onglets » (Tab Group).
        • Variante : La variant « Classic, Left-aligned » donnera une liste d'onglets horizontale comme dans l'image plus haut. La variante « Condensed with Lis t» produira un menu déroulant avec une liste secondaire de liens.
        • Type de conteneur : Si vous le voulez, réglez le type à « Full ».
        • Espacement : Configurez l'espacement comme nécessaire.
    7. Une fois que vous avez terminé, enregistrez le mini-panneau. Ne vous inquiétez pas des messages d'erreur qui s'affichent; vous pouvez les négliger sans risque.

    Étape 3 : Ajouter le mini-panneaux à une page

    1. Naviguez à Structure, puis Pages.
    2. Repérez la page à laquelle vous souhaitez ajouter la boîte d'onglets que vous avez créée, puis cliquez sur le lien Modifier.
    3. Dans le menu de gauche, cliquez sur Contenu.
    4. Cliquez sur la roue dentée située dans le coin supérieur gauche de l'une des régions et, dans la liste déroulante, sélectionnez Ajouter du contenu.
    5. Une nouvelle fenêtre s'affichera. Dans le menu de gauche de celle-ci, cliquez sur Mini-panneaux et sélectionnez le mini-panneau que vous avez créé plus tôt à l'étape 2.
    6. Une fois que vous avez terminé, vous pouvez simplement enregistrer vos modifications en cliquant sur le bouton Mettre à jour et enregistrer.
    » Envoyer vos commentaires
      Sujets: 
    • Soutien
      Types: 
    • Tutoriels
    Haut de page