Découvrez comment afficher et mettre en forme un ensemble de contenus associés à l’aide des widgets Panneau à onglets et Panneau Accordéon dans Adobe Muse.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Ajout d’un widget Panneau à onglets

  1. Ouvrez le panneau Bibliothèque de widgets (Fenêtre > Bibliothèque de widgets). Développez les panneaux, puis sélectionnez le widget Panneau à onglet. Faites glisser le widget de la Bibliothèque de widgets vers votre panneau de conception.

    Le widget Panneau à onglets affiche le formatage par défaut lorsque vous le faites glisser sur une page.
    Le widget Panneau à onglets affiche le formatage par défaut lorsque vous le faites glisser sur une page.

  2. Cliquez trois fois sur l’onglet supérieur, sur le côté droit. Le premier clic permet de sélectionner l’ensemble du panneau à onglets, le second clic permet de sélectionner le conteneur d’onglets, et le troisième onglet clic permet de sélectionner l’onglet sur le côté droit.

    Examinez l’indicateur de sélection pour savoir quels sont les sous-éléments du widget actuellement sélectionnés. Appuyez sur Supprimer (Mac) ou Retour arrière (Windows) pour supprimer le troisième onglet. Une fois cette modification effectuée, il ne reste que deux onglets. Cliquez sur un emplacement éloigné, sur n’importe quel autre endroit de la page.

  3. Cliquez à nouveau sur le widget pour sélectionner l’ensemble du panneau à onglets. Faites glisser les poignées pour redimensionner l’ensemble du widget à une largeur de 840 et une hauteur de 645. Lorsque vous faites glisser les poignées, vous pouvez vous reporter aux mesures qui apparaissent.

    Vous pouvez également examiner le panneau Transformation pour connaître les valeurs des champs L (largeur) et H (hauteur).

    Examinez les champs Largeur et Hauteur pour vérifier les dimensions du widget redimensionné.
    Examinez les champs Largeur et Hauteur pour vérifier les dimensions du widget redimensionné.

  4. Utilisez l’outil de sélection pour positionner le widget Panneau à onglets sur la page, dans la partie supérieure et centré verticalement.

  5. Cliquez sur la partie supérieure du centre de l’interface d’ancrage du panneau Contrôle, pour y ancrer le widget Panneau à onglets. Pour plus d’informations sur l’ancrage des objets afin d’empêcher leur défilement, voir ce lien.

  6. Le widget Panneau à onglets étant toujours sélectionné, cliquez sur l’onglet de gauche pour sélectionner le conteneur d’onglets (l’élément qui contient les deux onglets du haut). Utilisez l’outil de sélection pour faire glisser la poignée centrale vers le bas, jusqu’à ce que la hauteur soit de 98 pixels environ.

    Dans le panneau Espacement, définissez les valeurs suivantes, présentées sur l’image ci-dessous :

    • Gauche : 220
    • Droite : 220
    • Bas : 2
    • Hauteur de la gouttière : 10
    Définissez les valeurs d’espacement pour le conteneur d’onglets dans le panneau Espacement.
    Définissez les valeurs d’espacement pour le conteneur d’onglets dans le panneau Espacement.

  7. Une fois ces modifications effectuées, utilisez l’outil de sélection pour faire glisser l’ensemble du widget Panneau à onglets tout en haut de la page, de sorte que le haut du panneau à onglets vienne buter contre le bas du rectangle d’en-tête sans aucun espace vertical entre les deux.

    Vous pouvez, si nécessaire, effectuer un zoom avant pour obtenir une vue détaillée de l’alignement des éléments. Redéfinissez le facteur de zoom sur 100 % lorsque vous avez terminé.

Application d’un style au widget Panneau à onglets

Maintenant que vous avez ajouté le widget Panneau à onglets, la section suivante explique la mise à jour des styles permettant de concevoir les deux onglets.

  1. Cliquez trois fois sur l’onglet de gauche pour le sélectionner. Ouvrez le panneau Etats et sélectionnez l’état Normal. Utilisez le menu Fond pour définir la couleur du fond. Définissez l’épaisseur sur 0.

  2. Sélectionnez l’état Survol dans le panneau Etats. Définissez la couleur du fond pour l’état Survol de l’onglet sur 571E00. Notez que lorsque vous définissez la couleur du fond pour l’état Survol, l’état Clic est automatiquement mis à jour.

    Sélectionnez l’état Actif et appliquez la même couleur de fond à l’onglet alors qu’il est dans cet état. L’état Normal est à présent rempli à l’aide de la couleur de fond sélectionnée à l’étape précédente, et les trois autres états sont remplis avec la couleur 571E00.

  3. Cliquez à nouveau sur l’onglet de gauche pour sélectionner l’étiquette. L’indicateur de sélection affiche le mot Etiquette lorsqu’elle est sélectionnée. Sélectionnez l’état Normal dans le panneau Etats, puis utilisez le panneau Texte pour définir les attributs suivants, tels que présentés sur l’image ci-dessous :

    • Police web : Kaushan Script (ou n’importe quelle police de script de votre choix)
    • Taille de la police : 26Color : #70909D (vous pouvez renommer cette couleur. Par exemple, blue-menu)
    • Interligne : 120 %
    • Alignement : centré
    Définissez le style du texte de l’étiquette en mettant à jour les paramètres définis dans le panneau Texte.
    Définissez le style du texte de l’étiquette en mettant à jour les paramètres définis dans le panneau Texte.

  4. L’étiquette étant toujours sélectionnée, cliquez sur le bouton Nouveau style situé en bas du panneau Styles de paragraphe. Pour réappliquer ce formatage chaque fois que vous le souhaitez, d’un simple clic, renommez ce nouveau style de paragraphe. Par exemple, head-tabs.

  5. Sur le panneau Etats, vous noterez que la mise en forme appliquée à l’étiquette à l’état Normal, qui est sélectionnée, est également appliquée aux états Survol et Clic. Sélectionnez l’état Actif, puis cliquez à nouveau sur le style de paragraphe head-tabs pour appliquer la mise en forme à l’état Actif. A présent, tous les états des deux onglets ont été mis en forme.

    Sélectionnez à nouveau l’état Normal.

  6. Utilisez l’outil Texte pour sélectionner le texte de l’étiquette dans tous les onglets, puis entrez des noms adaptés pour vos étiquettes.

  7. Si vous sélectionnez l’onglet de gauche et examinez le panneau Etats, vous verrez la mise en forme finale appliquée à chaque onglet et à chaque étiquette. Cliquez sur l’onglet de droite et notez que les états présentent un aspect identique, à l’exception du contenu du texte de chaque onglet.

    Vérifiez la mise en forme de chaque onglet dans le panneau Etats d’Adobe Muse.
    Vérifiez la mise en forme de chaque onglet dans le panneau Etats.

Ajout de blocs de texte à la zone de contenu d’un widget Panneau à onglets

  1. Prenez quelques instants pour cliquer plusieurs fois sur les deux onglets, qui ont des étiquettes différentes. Le texte de l’espace réservé pour les deux onglets est différent, de sorte que vous pouvez déterminer si l’un des conteneurs est affiché tandis que l’autre est masqué.

  2. Cliquez sur l’onglet de droite dans votre widget. Lorsque l’onglet de droite est sélectionné, la zone de contenu correspondante s’affiche en-dessous de l’onglet. Ce comportement se produit également dans la vue Conception lors de l’édition la page et sur le site web publié. Les widgets Panneau à onglets sont ainsi très utiles, car vous pouvez afficher efficacement beaucoup plus de contenu au sein d’une seule page.

  3. Sélectionnez la zone de contenu pour les onglets. L’indicateur de sélection affiche les mots Zone de contenu lorsqu’elle est sélectionnée. Sélectionnez le fichier image de l’espace réservé et appuyez sur Supprimer (Mac) ou Retour arrière (Windows) pour le supprimer.

  4. Utilisez l’outil Texte pour sélectionner l’en-tête du texte de l’espace réservé existant. Sélectionnez le texte de l’en-tête en gras, Mauris sit amet, et supprimez-le.

  5. Basculez temporairement d’Adobe Muse vers votre bureau. Ouvrez le dossier des fichiers d’exemples et localisez le fichier nommé text-about-our-story.txt. Double-cliquez sur le fichier pour l’ouvrir dans un éditeur de texte. Copiez la première partie de la page, vers le haut, jusqu’à la ligne ...crafted through years of baking for friends and family.

  6. Revenez à Muse. Utilisez l’outil Texte pour sélectionner le texte de l’espace réservé existant. Collez le contenu du texte que vous avez copié dans le bloc de texte. Laissez une ligne et un retour supplémentaires et revenez à la partie supérieure du bloc de texte.

  7. Le bloc de texte étant sélectionné, utilisez le panneau Texte pour choisir les paramètres afin de formater votre texte. Par exemple, vous pouvez choisir les paramètres suivants :

    • Police : Droid Serif
    • Corps de la police : 14
    • Couleur : #222222
    • Alignement : à gauche
    • Interligne : 120 %
  8. Le texte étant toujours sélectionné, cliquez sur le bouton Nouveau style situé au bas du panneau Styles de paragraphe. Double-cliquez sur le nouveau style de paragraphe et renommez­le. Par exemple, body. Il sera alors plus facile de réappliquer la même mise en forme à un autre contenu de texte.

  9. Dans le panneau Nuancier, double-cliquez sur la valeur de couleur #222222 et renommez-la. Par exemple, katieblack.

  10. Dans le panneau Contrôle, définissez la couleur du contour de la zone de texte sur #222222 (katieblack) et définissez son épaisseur sur 5 pixels.

  11. Utilisez le menu Fond pour définir la couleur de fond de la zone de texte sur une couleur beige clair (#F8F3E2). Cliquez sur le dossier situé à côté de la section Image et parcourez l’arborescence pour sélectionner le fichier nommé bg-texture.png, qui se trouve dans le dossier des fichiers d’exemples. Définissez le menu Ajustement sur : Mosaïque.

  12. Dans le panneau Espacement, définissez les espacements gauche et droit. Par exemple, vous pouvez définir l’espacement gauche sur 24 et l’espacement droit sur 15.

    Définissez les valeurs d’espacement afin de créer l’espace visuel autour de la copie du texte collé.
    Définissez les valeurs d’espacement afin de créer l’espace visuel autour de la copie du texte collé.

  13. Vous allez ensuite ajouter du contenu à chacun des conteneurs de zone de contenu correspondant à chacun des onglets.

    Utilisez l’outil de sélection pour redimensionner la zone de texte. Faites-la glisser sur la gauche du conteneur, puis utilisez les poignées pour développer sa largeur à environ la moitié de l’espace de la zone de contenu disponible (environ 390 pixels de large sur 381 pixels de haut).

Duplication de blocs de texte dans un widget Panneau à onglets

Vous allez ensuite dupliquer la zone de texte existante, afin de créer une deuxième zone de texte qui remplit la partie droite de la zone de contenu.

  1. Utilisez l’outil de sélection pour sélectionner le bloc de texte. Maintenez la touche Option (Mac) ou Alt (Windows) enfoncée pendant que vous faites glisser une copie du bloc de texte sur le côté droit de la zone de contenu (voir l’image ci-dessous).

    Utilisez les repères d’alignement qui s’affichent pour vous assurer que le bloc de texte droit est aligné horizontalement par rapport au bloc de texte gauche.

    Dupliquez le bloc de texte existant, afin de créer une seconde colonne sur le côté droit.
    Dupliquez le bloc de texte existant, afin de créer une seconde colonne sur le côté droit.

  2. Basculez temporairement d’Adobe Muse vers le programme d’édition de texte qui contient le contenu de votre widget Panneau à onglets. Copiez le contenu à coller dans votre onglet dupliqué.

  3. Revenez à Muse. Supprimez tout le texte existant dans le bloc de texte droit dupliqué. Collez le nouveau contenu de texte que vous avez copié dans le presse-papiers.

  4. Utilisez, si nécessaire, l’outil de sélection pour positionner les deux blocs de texte afin qu’ils soient alignés et centrés dans la zone de contenu, à l’emplacement souhaité.

  5. Le bloc de texte étant toujours sélectionné, appuyez une fois sur la touche Echap afin de sélectionner la zone de contenu de l’onglet dupliqué. Définissez l’épaisseur du contour sur 0 et la couleur de fond sur Aucun.

La copie des blocs de texte est presque terminée. La dernière partie explique l’ajout d’une petite image qui s’intègre au texte du bloc de texte de gauche.

Utilisation du panneau Accordéon

Les widgets du panneau Accordéon sont utiles lorsque vous souhaitez insérer beaucoup de contenu dans une zone plus petite de l’écran. Le comportement de réduction et de développement permet aux visiteurs de cliquer sur un panneau et de voir le contenu correspondant s’afficher. Outre les sites de bureau, les widgets du panneau Accordéon sont souvent utilisés pour afficher du contenu dans les mises en page mobiles.

Dans cette section, vous allez apprendre à ajouter du contenu aux pages individuelles dans votre site. Vous allez travailler avec un autre type de widget, appelé un widget accordéon. Les widgets de panneau (les deux widgets de panneaux accordéon et à onglets) sont très utiles, car ils permettent d’afficher sur une page plus de contenu dans une zone en réalité plus petite de l’écran.

  1. Ouvrez votre projet en mode Conception et commencez à le modifier.

  2. Choisissez Fichier > Importer. Dans la boîte de dialogue Importer, naviguez jusqu’au dossier dans lequel se trouvent vos ressources et sélectionnez le fichier d’image dont vous avez besoin. Cliquez sur Sélectionner, puis cliquez une fois en haut de la page pour importer l’image à sa taille originale sur la page comme texte d’en-tête. Vous allez ajouter le widget Accordéon au-dessous de cet en-tête.

Ajout d’un widget Accordéon à une page web

  1. Ouvrez la bibliothèque de widgets. (Choisissez la commande Fenêtre > Bibliothèque de widgets pour l’ouvrir. Ou, si la bibliothèque est déjà ouverte, cliquez sur l’onglet supérieur pour rendre la bibliothèque de widgets active dans l’ensemble de panneaux ancrés.)

  2. Cliquez sur Panneaux pour développer la liste des widgets Panneau. Sélectionnez le widget Accordéon. Faites glisser le widget accordéon sur la page et placez-le dans le côté supérieur gauche de la zone de contenu de la page.

    Faites glisser et déposez le widget Accordéon sur la page Adobe Muse.
    Faites glisser et déposez le widget Accordéon sur votre page.

  3. A l’aide de l’outil de sélection, sélectionnez les différents composants du widget. A mesure que vous sélectionnez le widget en entier, l’indicateur de sélection situé dans le coin supérieur gauche du panneau de configuration affiche le mot « Widget ». A mesure que vous continuez à cliquer, vous remarquerez que l’indicateur de sélection se met à jour et vous informe que vous avez sélectionné un conteneur ou un bloc de texte. L’indicateur de sélection vous indique la partie du widget actuellement sélectionnée.

    Pour désélectionner cet élément d’un widget, vous pouvez appuyer une fois sur la touche Echap pour sortir de la sélection courante et remonter d’un niveau, ou plusieurs fois pour sortir des éléments imbriqués un niveau à la fois. Sinon, vous pouvez simplement cliquer hors du widget et dans une autre partie de la page.

    Par défaut, le widget accordéon dispose de deux panneaux. Le panneau supérieur affiche le nom d’onglet d’espace réservé Lorem 1 et le panneau inférieur, Ipsum 2.

  4. Ouvrez la boîte de dialogue des options de widget en cliquant sur l’icône à flèche bleue ronde. Vérifiez que l’option Modifier ensemble est activée. Cette option permet de s’assurer que toute modification effectuée dans un nom d’onglet de l’accordéon est appliquée à tous les onglets.

    Assurez-vous que l’option Modifier ensemble est cochée dans le panneau Options des widgets Accordéon.
    Assurez-vous que l’option Modifier ensemble est cochée dans le panneau Option des widgets Accordéon.

  5. A l’aide de l’outil de sélection, cliquez une fois sur le widget pour le sélectionner, puis faites glisser la poignée droite vers la droite pour augmenter la largeur du widget, en l’élargissant assez pour couvrir deux colonnes, comme le montre l’image ci-dessous.

    Faites glisser la poignée dans le widget pour développer le widget sur deux colonnes.
    Alors que le widget est sélectionné, faites glisser la poignée de droite pour le développer afin de couvrir deux colonnes.

  6. Cliquez sur le signe plus (+) situé en bas du widget, dessous Ipsum 2, pour ajouter un troisième panneau. Le troisième panneau affiche le nom d’onglet d’espace réservé Ipsum 3.

A la section suivante, vous allez apprendre à importer du contenu textuel dans un panneau du widget accordéon pour le renseigner. Mais tout d’abord, vous allez mettre à jour le nom d’onglet supérieur qui s’affiche au-dessus du premier panneau dans le widget accordéon.

Ajout de texte dans le widget Panneau Accordéon

  1. Utilisez l’outil de sélection pour sélectionner le bloc de texte de l’onglet supérieur, actuellement nommé Lorem 1. Cliquez une fois sur « Lorem 1 » pour sélectionner le widget entier et développez le conteneur correspondant à l’onglet supérieur, puis cliquez dans le texte Lorem 1 pour sélectionner le bloc de texte. Les mots « Bloc de texte » sont affichés dans l’indicateur de sélection lorsque le bloc de texte est sélectionné.

  2. Double-cliquez sur le texte de l’espace réservé « Lorem 1 » pour le modifier, puis saisissez le texte de votre choix.

  3. Sélectionnez le conteneur plus grand de couleur gris clair sous le premier onglet. Utilisez l’outil de texte pour ouvrir une zone de texte en la faisant glisser dans le conteneur plus grand.

  4. Dans le nouveau bloc de texte, tapez le texte d’en-tête.

Remplissage des onglets supérieurs du widget Accordéon à l’aide d’images d’arrière-plan

  1. Sélectionnez l’onglet supérieur du widget Accordéon qui affiche l’en-tête.

  2. Cliquez sur le bouton à flèche bleue arrondie pour ouvrir le menu Options. Désélectionnez l’option Modifier ensemble. Cliquez en dehors du menu Options pour le fermer.

  3. Cliquez deux fois sur l’onglet supérieur pour que l’indicateur de sélection affiche les mots « Bloc de texte ». Avec le bloc de texte de l’onglet supérieur sélectionné, cliquez sur le lien Fond dans le panneau de configuration pour ouvrir le menu Fond. Cliquez sur le sélecteur de couleurs et définissez la couleur de remplissage sur aucune, au lieu de la couleur gris foncé par défaut.

  4. Cliquez sur l’icône de dossier située dans la section d’image pour ouvrir la boîte de dialogue d’importation. Accédez à votre dossier de ressources et sélectionnez l’image que vous souhaitez ajouter.

  5. Ouvrez le panneau d’espacement. Appuyez et maintenez la flèche vers le haut enfoncée dans la section Marge inférieure : G (gauche) pour augmenter l’espace avant l’en-tête afin de centrer le texte sur l’image d’arrière-plan pour l’onglet.

    Configuration de l’espacement pour le widget Accordéon widgets dans Adobe Muse
    Utilisez le panneau Espacement pour augmenter la marge intérieure de gauche et centrer le texte dans l’accordéon.

Le premier onglet du widget accordéon est terminé.

Si vous avez désactivé le paramètre Modifier ensemble lors de la modification du premier onglet, les modifications n’apparaissent pas pour les autres onglets. Vous devez appliquer un style séparément aux autres onglets de votre widget Panneau Accordéon.

Rotation de widgets Accordéon

Par défaut, les widgets du panneau Accordéon sont configurés pour afficher les panneaux d’étiquette en haut et les zones de contenu en-dessous, avec une orientation verticale.

Par défaut, les widgets Accordéon dans Adobe Muse s’affichent verticalement.
Lorsque vous ajoutez un widget du panneau Accordéon à une page, il est affiché verticalement.

Pour créer un curseur horizontal à l’aide du widget Accordéon, procédez comme suit :

  1. Dans le mode Conception, ouvrez la bibliothèque de widgets et développez la section Panneaux.

  2. Sélectionnez l’option Accordéon dans la section Panneaux et faites-la glisser sur la page.

  3. A l’aide de l’outil Sélection, cliquez une fois pour sélectionner le widget entier. L’indicateur de sélection situé en haut à gauche du panneau Contrôle affiche le mot : Accordéon.

  4. En maintenant enfoncée la touche Maj pendant la rotation, vous conservez les proportions afin de déplacer le widget par incréments de 45°. Une info-bulle indique la valeur actuelle de rotation pendant que vous faites pivoter le widget.

    Tournez le widget de -90° ou de +90°, en fonction du sens dans lequel vous choisissez de faire pivoter l’accordéon.
    Tournez le widget de -90° ou de +90°, en fonction du sens dans lequel vous choisissez de faire pivoter l’accordéon.

  5. Après la rotation du widget, cliquez sur le lien Aperçu ou prévisualisez la page dans un navigateur pour vérifier que l’accordéon agrandit ou réduit toujours les panneaux comme prévu. Vérifiez si les conteneurs d’étiquettes sont préétablis pour afficher la zone de contenu correspondante lorsque l’utilisateur clique dessus.

    Il ne reste plus qu’à renseigner les étiquettes et les conteneurs de la zone de contenu avec le contenu qui est orienté vers le haut au lieu d’un affichage latéral.

    Procédez comme suit pour afficher le contenu textuel dans les zones de contenu. Utilisez la technique décrite ci-dessus pour faire pivoter le champ de texte dans un conteneur de la zone de contenu.

     

  6. Cliquez deux fois sur le texte par défaut dans la zone de contenu. Le premier clic permet de sélectionner l’ensemble du widget Accordéon, le second permet de sélectionner le conteneur de la zone de contenu. Lorsque la zone de contenu est sélectionnée, utilisez l’outil Sélection pour augmenter la taille de la zone de contenu, en cliquant et en déplaçant les poignées de redimensionnement.

  7. Avec la zone de contenu toujours sélectionnée, cliquez de nouveau pour sélectionner le bloc de texte figurant dans la zone de contenu. Placez votre curseur près de l’un des coins du bloc de texte jusqu’à afficher le curseur de rotation. Maintenez la touche Maj enfoncée tout en faisant pivoter le bloc de texte de 90 degrés, comme le widget externe.

    Faites pivoter le texte de l’espace réservé existant si vous souhaitez afficher le texte dans la zone de contenu.
    Faites pivoter le texte de l’espace réservé existant si vous souhaitez afficher le texte dans la zone de contenu.

  8. Après avoir fait pivoter le bloc de texte, utilisez l’outil Sélection pour le repositionner dans la zone de contenu. Utilisez l’outil Texte pour remplacer le texte d’espace réservé par le texte réel que vous souhaitez afficher puis utilisez les options de mise en forme du texte dans le panneau Contrôle et le panneau Texte pour personnaliser le style du texte (ou appliquez des styles de paragraphe pour mettre à jour son apparence).

  9. Importez des images, dessinez des rectangles ou intégrez du contenu HTML pour remplir les conteneurs de la zone de contenu selon vos besoins. Vous n’avez pas besoin de faire pivoter ce contenu parce qu’il est automatiquement placé à la verticale dans le conteneur pivoté.

Mise à jour du texte dans les conteneurs d’étiquettes

Pour mettre à jour le texte dans les conteneurs d’étiquettes, vous disposez de plusieurs options.

Si les étiquettes sont courtes et que vous voulez que le texte reste « en longueur » (pour simuler les livres sur une étagère, par exemple), vous pouvez utiliser l’outil Texte pour sélectionner le texte de l’espace réservé existant et saisir les étiquettes souhaitées (voir l’image ci-dessous).

Modifiez le texte de l’étiquette à l’aide de l’outil Texte pour les widgets Accordéon.
Modifiez le texte de l’étiquette à l’aide de l’outil Texte pour les widgets Accordéon.

Si vous ne souhaitez pas utiliser des étiquettes de texte, il vous suffit de supprimer le texte de l’espace réservé existant dans les conteneurs d’étiquettes, puis d’utiliser les options de mise en forme du panneau Contrôle ou du panneau Fond (avec le panneau Etats) pour appliquer une couleur différente à chaque étiquette (voir l’image ci-dessous). Pour mettre à jour l’aspect de chaque conteneur d’étiquettes individuellement, cliquez sur le bouton fléché bleu pour accéder au menu Options et désactiver l’option Modifier ensemble.

Utilisez le menu Fond et les options de mise en forme du texte pour coder les conteneurs d’étiquettes et le texte correspondant avec des couleurs.
Utilisez le menu Fond et les options de mise en forme du texte pour coder les conteneurs d’étiquettes et le texte correspondant avec des couleurs.

Une autre solution consiste à utiliser un programme de retouche d’images pour créer des images qui sont insérées dans les panneaux d’étiquettes. Importez les images sur la page, coupez-les, sélectionnez le texte de l’étiquette à l’aide de l’outil Texte, puis collez les images dans les conteneurs d’étiquettes. Si besoin, les images peuvent contenir du texte vertical (voir l’image ci-dessous).

Insérez des images avec du texte vertical dans les conteneurs d’étiquettes.
Insérez des images avec du texte vertical dans les conteneurs d’étiquettes.

Ajout de liens d’ancrage dans les Panneaux Accordéon

Vous pouvez lier n’importe quel élément de page aux widgets Accordéon en ajoutant des liens d’ancrage dans les panneaux Accordéon. Lisez ce qui suit pour découvrir comment ajouter des liens d’ancrage aux widgets Accordéon :

  1. Sélectionnez le widget Accordéon dans lequel vous souhaitez ajouter le lien d’ancrage. Cliquez sur l’onglet dans lequel vous souhaitez ajouter le lien.

  2. Cliquez sur l’outil Point d’ancrage pour charger un lien d’ancrage dans le Pistolet de placement.

    Sélectionnez l’outil Point d’ancrage dans le panneau Outils.
    Sélectionnez l’outil Point d’ancrage dans le panneau Outils.

  3. Placez le lien d’ancrage dans le widget Accordéon.

    Une fenêtre pour renommer le point d’ancrage s’affiche. Saisissez un nom approprié pour votre point d’ancrage, puis cliquez sur OK.

    Placez le lien d’ancrage dans le widget Accordéon.
    Placez le lien d’ancrage dans le widget Accordéon.

    Vous pouvez maintenant relier ce point d’ancrage à n’importe quel élément de n’importe quelle page de votre site web.

  4. Pour relier un élément de page à ce point d’ancrage, sélectionnez l’élément de page à relier. Dans le menu déroulant Hyperliens situé dans la partie supérieure de l’écran, sélectionnez le point d’ancrage que vous avez créé.

    Sur votre site publié, dès que vous cliquez sur l’élément de page en question, la page affiche l’onglet Accordéon où vous avez placé le lien d’ancrage.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne