Panneau latéral Éditeur de page side-panel

Découvrez comment utiliser le panneau latéral dans l’éditeur de sites d’AEM pour ajouter des composants et des ressources à votre page.

Modes du panneau latéral modes

Le panneau latéral est toujours accessible dans l’éditeur de page en appuyant ou en cliquant sur l’icône Activer/désactiver le panneau latéral dans la barre d’outils de l’éditeur de page.

Bascule du panneau latéral

Lorsque vous ouvrez le panneau latéral, il s’ouvre en glissant depuis le côté gauche et vous pouvez ensuite choisir parmi trois onglets importants :

Explorateur de composants components-browser

Les composants sont les blocs de création utilisés pour créer du contenu avec l’éditeur de page d’AEM. Vous placez plusieurs composants sur une page et configurez leurs options pour créer votre page de contenu.

L’explorateur de composants présente tous les composants que vous pouvez utiliser sur la page active. Vous pouvez les faire glisser à l’emplacement approprié, puis les modifier pour ajouter votre contenu.

Appuyez ou cliquez sur l’onglet Components dans le panneau latéral pour accéder au navigateur Components .

Icône du navigateur de composants dans le panneau latéral

L’aspect et la gestion de l’appareil dépendent du type d’appareil utilisé.

Appareil mobile mobile-device-components-browser

Lors de l’ouverture de l’explorateur de composants sur un appareil mobile, il couvre entièrement la page en cours de modification.

Pour ajouter un composant à votre page, sélectionnez-le et faites-le glisser et déplacez-le vers la droite. L’explorateur de composants se ferme pour afficher à nouveau la page, où vous pouvez positionner le composant.

Explorateur de composants sur mobile

NOTE
Un appareil mobile est détecté lorsque la largeur est inférieure à 1 024 px.

Poste de travail desktop-device-components-browser

Lors de l’ouverture de l’explorateur de composants sur un ordinateur de bureau, il s’affiche sur le côté gauche de la fenêtre.

Pour ajouter un composant à votre page, cliquez sur le composant requis et faites-le glisser vers l’emplacement requis.

Explorateur de composants sur bureau

Utilisation de l’explorateur de composants using-component-browser

Les composants du navigateur Components sont représentés par :

  • Nom du composant

  • Groupe de composants (en gris)

  • Icône ou abréviation

    • Les icônes des composants standard sont monochromes.
    • Les abréviations correspondent toujours aux deux premiers caractères du nom du composant.

Dans la barre d’outils supérieure de l’explorateur de composants, vous pouvez effectuer les opérations suivantes :

  • Filtrer les composants par nom
  • Restreindre l’affichage à un groupe spécifique à l’aide de la liste déroulante.

Pour obtenir une description plus détaillée du composant, vous pouvez sélectionner l’icône d’informations en regard du composant dans le navigateur Composants (le cas échéant). Par exemple, pour le fragment de contenu  :

Informations de l’explorateur de composants

Pour plus d’informations sur les composants disponibles, voir la console de composants.

Explorateur de ressources assets-browser

Le navigateur Assets affiche toutes les ressources disponibles sur votre page actuelle.

Appuyez ou cliquez sur l’onglet Assets du panneau latéral pour parcourir les ressources.

Bouton de l’explorateur de ressources

Le défilement illimité permet de développer la liste des ressources selon les besoins au fur et à mesure que vous faites défiler l’écran.

Explorateur de ressources

L’aspect et la gestion de l’explorateur dépendent du type d’appareil utilisé :

Appareil mobile mobile-device-assets-browser

Lors de l’ouverture de l’explorateur de ressources sur un périphérique mobile, il couvre entièrement la page en cours de modification.

Pour ajouter une ressource à votre page, sélectionnez-la et faites-la glisser, puis déplacez-la vers la droite. L’explorateur de ressources se ferme pour afficher à nouveau la page, où vous pouvez ajouter la ressource au composant requis.

Explorateur de ressources sur mobile

NOTE
Un appareil mobile est détecté lorsque la largeur est inférieure à 1 024 px.

Poste de travail desktop-device-assets-browser

Lorsque vous ouvrez l’explorateur de ressources sur un ordinateur de bureau, il s’ouvre sur le côté gauche de la fenêtre.

Pour ajouter une ressource à votre page, sélectionnez-la et faites-la glisser vers le composant ou l’emplacement requis.

Explorateur de ressources sur bureau

Utilisation du navigateur Assets using-assets-browser

Pour ajouter une ressource à votre page, sélectionnez-la et faites-la glisser jusqu’à l’emplacement souhaité. Il peut s’agir des éléments suivants :

  • d’un composant existant du type approprié.
    • Par exemple, vous pouvez faire glisser une ressource de type image sur un composant Image ;
  • d’un espace réservé dans le système de paragraphes où créer un composant du type approprié :
    • Par exemple, vous pouvez faire glisser une ressource de type image sur le système de paragraphes afin de créer un composant Image.
NOTE
Le glissement et le dépôt de ressources sont disponibles pour des ressources et des types de composants spécifiques. Reportez-vous à Insertion d’un composant à l’aide de l’explorateur de ressources pour plus d’informations.

Dans la barre d’outils supérieure de l’explorateur de ressources, vous pouvez filtrer les ressources en procédant comme suit :

  • Nom
  • Chemin
  • Type de ressource tel que les images, les vidéos, les documents, les paragraphes, les fragments de contenu et les fragments d’expérience
  • Caractéristiques des ressources, telles que l’orientation et le style
    • Disponible uniquement pour certains types de ressources

Si vous devez modifier rapidement une ressource, vous pouvez lancer l’éditeur de ressources directement depuis l’explorateur de ressources en cliquant sur l’icône Modifier affichée en regard du nom de la ressource.

Bouton Modifier la ressource

Arborescence de contenu content-tree

L’ arborescence de contenu donne un aperçu de tous les composants de la page dans une hiérarchie afin que vous puissiez voir en un coup d’oeil comment la page est composée.

NOTE
L’arborescence de contenu n’est pas disponible si vous modifiez une page sur un appareil mobile (si la largeur de l’explorateur est inférieure à 1 024 px).

Appuyez ou cliquez sur l’onglet Arborescence de contenu pour accéder à l’arborescence de contenu.

Bouton Arborescence de contenu

Une fois ouvert, vous pouvez voir une représentation en arborescence de votre page ou modèle. Il est ainsi plus simple de comprendre comment son contenu est structuré de manière hiérarchique. En outre, sur une page complexe, il est plus facile de passer d’un composant à l’autre de la page.

Arborescence de contenu

Une page peut facilement être composée de plusieurs composants du même type. Par conséquent, l’arborescence de contenu affiche un texte descriptif (en gris) après le nom du type de composant (en noir). Le texte descriptif provient des propriétés courantes du composant, telles que le titre ou le texte.

Les types de composants sont affichés dans la langue de l’utilisateur ou de l’utilisatrice, tandis que le texte descriptif du composant dépend de la langue de la page.

Cliquez sur le chevron en regard d’un composant pour réduire ou développer ce niveau.

Extension du chevron de l’arborescence de contenu

Cliquez sur le composant pour le mettre en surbrillance dans l’éditeur de page. Les actions disponibles dépendent de l’état de la page. Par exemple :

Une page de base basic-page

Les composants d’une page de base auront les options habituelles.

Arborescence de contenu mise en surbrillance

Si le composant sur lequel vous cliquez est éditable, une icône de clé à molette s’affiche à droite du nom. Cliquez sur cette icône pour ouvrir la boîte de dialogue de modification du composant.

Bouton Modifier l’arborescence de contenu

Une Live Copy live-copy

Une page qui fait partie d’une Live Copy, où les composants sont hérités d’une autre page, aura différentes options.

Explorateur de contenu associé associated-content-browser

Si votre page contient des fragments de contenu, vous avez également accès au navigateur pour le contenu associé.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab