Modification du contenu de la page à l’aide de l’éditeur de page AEM edit-content

L’éditeur de page d’AEM est un outil puissant pour créer le contenu d’une page. Découvrez comment l’utiliser pour faire glisser et déposer du contenu et modifier le contenu statique.

Vue d’ensemble overview

Vous pouvez exécuter trois actions de base dans l’éditeur de page pour modifier votre contenu :

  1. Ajout de nouveaux composants en les faisant glisser sur la page.
  2. Ajout de nouvelles ressources en les faisant glisser sur la page.
  3. Modification de composants statiques qui existent déjà sur la page.

L’éditeur de page d’AEM fournit une interface utilisateur intuitive pour effectuer ces tâches, en plus de donner accès à des fonctionnalités plus avancées.

En outre, l’éditeur vous permet d’organiser le contenu existant sur votre page en vous permettant de

Ajout de composants adding-components

Vous pouvez faire glisser de nouveaux composants sur votre page en les sélectionnant dans l’explorateur de composants du panneau latéral et en les déposant dans un espace réservé de composant.

Espace réservé au composant component-placeholder

L’espace réservé du composant est un indicateur qui indique où un composant sera positionné lorsque vous le déposerez. Il a deux apparences.

  • Lors de l’ajout d’un nouveau composant à la page (en le faisant glisser depuis l’explorateur de composants), il s’affiche sous forme de zone grise avec les détails du composant que vous importez.

    Espace réservé lors de l’ajout d’un nouveau composant à une page

  • Lorsque déplace un composant existant, il apparaît comme un carré bleu.

    Espace réservé lors du déplacement d’un composant existant sur une page

Dans les deux cas, la cible sélectionnée apparaît sous la forme d’une bordure bleue sous le composant que vous faites glisser. Cible si l’emplacement du composant est placé lorsque vous le relâchez.

Ajout d’un composant à partir de l’explorateur de composants adding-a-component-from-the-components-browser

Vous pouvez ajouter un nouveau composant à l’aide de l’explorateur de composants. L’ espace réservé du composant vous indique où vous positionnez le composant.

  1. Assurez-vous que l'éditeur de page est en mode Édition.
  2. Ouvrez le navigateur de composants component.
  3. Faites glisser le composant requis vers la position requise et la version.
  4. Modifiez le composant nouvellement placé.
NOTE
Sur un appareil mobile, l’explorateur de composants remplit tout l’écran. Quand vous faites glisser un composant, l’explorateur se ferme pour afficher à nouveau la page afin que vous puissiez placer le composant.

Ajout d’un composant à partir du système de paragraphes adding-a-component-from-the-paragraph-system

Vous pouvez ajouter un nouveau composant à l’aide de l’espace réservé Faire glisser les composants ici du système de paragraphes :

  1. Assurez-vous que l'éditeur de page est en mode Édition.

  2. Il existe deux façons de sélectionner et d’ajouter un nouveau composant à partir du système de paragraphes :

    • Sélectionnez l’option Insérer le composant (+) depuis la barre d’outils d’un composant existant ou dans la zone Faire glisser les composants ici.

      Insertion d’un composant

    • Si vous utilisez un ordinateur de bureau, vous pouvez double-cliquer sur la zone Faire glisser les composants ici .

  3. La boîte de dialogue Insérer un nouveau composant s’ouvre pour vous permettre de sélectionner le composant requis. Appuyez ou cliquez sur le composant que vous souhaitez ajouter.

    • Utilisez les filtres de recherche pour trouver votre composant.
    • Pour en savoir plus sur le composant, cliquez sur l’icône d’informations située en regard des noms des composants.

    Boîte de dialogue Insérer un nouveau composant

  4. Le composant sélectionné est ajouté à la cible que vous avez sélectionnée. Modifiez le composant si nécessaire.

Ajout d’une ressource adding-asset

Vous pouvez également ajouter un nouveau composant à la page en faisant glisser une ressource à partir de l’explorateur assets . Cela crée automatiquement un composant du type approprié (et contenant la ressource).

Ce comportement peut être configuré pour votre installation. Pour plus d’informations, consultez le document Guide de référence des composants .

Pour créer un composant en faisant glisser l’un des types de ressources ci-dessus, suivez ces étapes :

  1. Assurez-vous que votre page est en mode Modifier.
  2. Ouvrez l’explorateur de ressources.
  3. Faites glisser le composant jusqu’à la position requise. L’ espace réservé du composant vous indique où le composant est positionné et où une cible s’affichera lorsqu’il sera inséré.
  4. Relâchez la ressource sur la cible. Un composant, approprié au type de ressource, est créé à l’emplacement requis contenant la ressource sélectionnée.
  5. Modifiez le composant si nécessaire.
NOTE
Sur un appareil mobile, l’explorateur de ressources remplit tout l’écran. Quand vous faites glisser une ressource, l’explorateur se ferme pour afficher à nouveau la page. Vous pouvez alors placer la ressource.

Si, lors de l’exploration des ressources, vous estimez qu’il est nécessaire d’apporter une modification rapide à l’une d’elles, vous pouvez lancer directement l’éditeur de ressources à partir de l’explorateur en cliquant sur l’icône d’édition située en regard de son nom.

Modification statique des composants edit-in-place

La sélection d’un composant ouvre la barre d’outils du composant. Cela permet d’accéder à diverses actions pouvant être réalisées sur le composant.

Barre d’outils des composants

Les actions disponibles dans la barre d’outils du composant sont adaptées au composant sélectionné. Vous pouvez voir plus ou moins cela selon le composant sélectionné et ils peuvent être ou non décrits ici.

  • Modifier vous permet de modifier le contenu du composant, souvent sur place. Son comportement dépend du composant.

    Bouton Modifier

  • Configurer vous permet de modifier certains paramètres du composant qui ne sont pas directement liés à son contenu, normalement dans une boîte de dialogue. Son comportement dépend du composant.

    Bouton Configurer

  • Copier copie le composant dans le Presse-papiers pour le coller ailleurs. Le composant d’origine reste inchangé.

    Bouton Copier

  • Couper copie le composant dans le Presse-papiers. Le composant d’origine est supprimé.

    Bouton Couper

  • Supprimer supprime le composant de la page avec votre confirmation.

    Bouton Supprimer

  • Insérer un composant ouvre la boîte de dialogue pour ajouter un nouveau composant.

    Bouton Insérer

  • Coller colle le composant du Presse-papiers sur la page. Si l’original est conservé, cela dépend si vous avez utilisé Copy ou Cut.

    • Vous pouvez coller les composants sur la même page ou sur une autre.
    • Si vous effectuez un collage sur une autre page qui était déjà ouverte avant l’opération de couper/copier, vous devez actualiser la page pour afficher le contenu collé.
    • L’élément collé est collé au-dessus de l’élément pour lequel vous avez sélectionné l’action de collage.
    • L’action de collage ne s’affiche que si du contenu se trouve dans le presse-papiers.

    Bouton Coller

  • Group permet de sélectionner plusieurs composants à la fois. Vous pouvez obtenir le même résultat sur un ordinateur de bureau à l’aide des commandes Ctrl-clic ou Commande-clic.

    Bouton Groupe

  • Parent sélectionne le composant parent du composant sélectionné.

    Bouton Parent

  • Mise en page permet de modifier la mise en page du composant sélectionné.

    • Cela s’applique uniquement au composant sélectionné et n’active pas le mode de mise en page pour la page entière.

    Bouton Mise en page

  • Convertir en variation de fragment d’expérience vous permet de créer un fragment d’expérience à partir du composant sélectionné ou de l’ajouter à un fragment d’expérience existant.

    Bouton Convertir en variation de fragment d’expérience

Boîte de dialogue de modification du composant component-edit-dialog

Certains composants offrent des options de modification supplémentaires au-delà de ce qui est disponible sur place. Vous pouvez ouvrir la boîte de dialogue de modification d’un composant à l’icône Modifier (crayon) de la barre d’outils du composant pour accéder à d’autres options de configuration.

Les options de modification exactes dépendent du composant. Pour certains composants , certaines actions ne seront disponibles qu'en mode plein écran. Par exemple :

  • Composant textuel

    Barre d’outils du composant textuel

  • Composant d’image

    Barre d’outils du composant d’image

Modification des composants en mode Plein écran edit-content-full-screen-mode

De nombreux composants offrent un mode Plein écran pour la modification, accessible avec ce bouton.

Bouton Plein écran

La modification en plein écran permet d’afficher davantage d’options de modification que l’éditeur statique, comme pour le composant d’image.

Composant Image en plein écran

Utilisez le bouton Minimiser pour exister en mode plein écran.

Bouton Réduire

Déplacement de composants moving-components

Pour déplacer un composant :

  1. Sélectionnez le composant à déplacer en appuyant et en maintenant la pression enfoncée ou en cliquant et en maintenant la pression enfoncée.

  2. Faites glisser le composant vers le nouvel emplacement.

    • L’éditeur de page indique la position du composant avec un espace réservé et où le paragraphe peut être déposé avec une cible.

    Déplacement d’un composant

  3. Déposez-le à l’emplacement souhaité.

TIP
Vous pouvez également utiliser un couper/coller pour déplacer un composant.

Modification de la disposition du composant editing-component-layout

Au lieu de basculer à plusieurs reprises entre les modes Modifier et de Disposition pour ajuster un composant, vous pouvez sélectionner l’action Disposition pour un composant afin d’en modifier la mise en page. Cela vous évite de devoir quitter le mode Modifier, ce qui se traduit par un gain de temps.

  1. En mode Modifier de la console Sites, sélectionnez un composant pour afficher la barre d’outils du composant.

  2. Sélectionnez l’action Disposition pour ajuster la disposition du composant.

    Bouton Disposition de la barre d’outils d’un composant

  3. Une fois l’action Mise en page sélectionnée, vous pouvez modifier la mise en page du composant comme vous le feriez en mode Mise en page.

    • Les poignées de redimensionnement du composant s’affichent.
    • La barre d’outils de l’émulateur s’affiche en haut de l’écran.
    • Les actions de mise en page au lieu des actions de modification standard s’affichent dans la barre d’outils du composant.

    Un composant en mode Mise en page

  4. Après avoir apporté les modifications nécessaires à la mise en page, appuyez ou cliquez sur le bouton Fermer dans le menu d’actions du composant pour arrêter la modification de la mise en page du composant et la barre d’outils du composant revient à son état d’édition normal.

    Barre d’outils d’un composant de page

TIP
L’action de mise en page est limitée au composant sélectionné. Par exemple, si vous modifiez la mise en page d’un composant, puis cliquez sur un autre composant, la barre d’outils d’édition standard (et non la barre d’outils de mise en page) s’affiche pour le nouveau composant sélectionné, les poignées de redimensionnement et la barre d’outils de l’émulateur disparaissent.
Si vous devez modifier la disposition globale de la page et affecter ainsi plusieurs composants, basculez vers le mode Disposition.

Modification de l’héritage des composants inherited-components

L’héritage est le mécanisme par lequel le contenu peut être lié, de sorte que la modification de l’un modifie automatiquement l’autre. Les composants hérités peuvent être le produit de divers scénarios :

Vous pouvez annuler et réactiver l’héritage. Selon le composant, ces options sont disponibles dans la barre d’outils du composant, si le composant fait partie d’une Live Copy ou d’un lancement.

  • Annuler l’héritage

    Bouton Annuler l’héritage

  • Réactiver l’héritage si l’héritage est déjà annulé

    Bouton Réactiver l’héritage

  • Déploiement est également disponible dans le plan directeur ou la source Live Copy

    Bouton Déployer

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