Panneau latéral de l’éditeur de page side-panel

Découvrez comment utiliser le panneau latéral dans l’éditeur d’AEM Sites 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.

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 Composants dans le panneau latéral pour accéder au navigateur Composants.

L’aspect et la gestion de l’interface utilisateur 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, la page en cours de modification est entièrement recouverte.

Pour ajouter un composant à votre page, sélectionnez-le, 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.

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.

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

Dans le navigateur Composants les composants sont représentés par les éléments suivants :

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

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

Pour plus d’informations sur les composants disponibles, voir Console Composants

Explorateur de ressources assets-browser

Le navigateur Assets affiche toutes les ressources assets qui peuvent être utilisées sur la page active.

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

Le défilement infini permet de développer la liste des ressources selon les besoins.

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 appareil mobile, la page en cours de modification est entièrement recouverte.

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.

Poste de travail desktop-device-assets-browser

Lors de l’ouverture de 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 ressource requise et faites-la glisser vers le composant ou l’emplacement requis.

Utiliser le 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 :

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

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.

Arborescence de contenu content-tree

L’Arborescence de contenu donne une vue d’ensemble de tous les composants de la page dans une hiérarchie, afin que vous puissiez voir en un coup d’œil comment la page est composée.

Appuyez ou cliquez sur l’onglet Arborescence de contenu pour accéder à l’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.

Une page pouvant facilement être composée de nombreux composants du même type, 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.

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

Une page de base basic-page

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

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 lancer la boîte de dialogue de modification du composant.

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, possède 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 de contenu associé.