Vous consultez actuellement l'aide de la version:

AEM permet de réaliser une mise en page réactive pour vos pages à l’aide du composant Conteneur de mises en page.

Vous obtenez ainsi un système de paragraphes qui permet de positionner les composants dans une grille réactive. Cette grille peut réorganiser la mise en page selon l’appareil ou la taille de la fenêtre et le format. Le composant est utilisé avec le mode Mise en page, ce qui permet de créer et de modifier votre mise en page réactive qui est fonction de l’appareil.

Le conteneur de mises en page présente les caractéristiques suivantes :

  • Il permet un alignement horizontal sur la grille et offre aussi la possibilité de placer les composants côte à côte dans la grille et de définir quand ils doivent être réduits ou développés.
  • Il utilise des points d’arrêt prédéfinis (Téléphone ou Tablette, par exemple) pour que vous puissiez définir le comportement du contenu pour l’orientation ou les appareils associés. Vous pouvez par exemple personnaliser la taille du composant ou spécifier si le composant doit être affiché ou non sur des appareils spécifiques.
  • Il peut être imbriqué pour contrôler des colonnes.

L’utilisateur peut ensuite afficher un aperçu du contenu pour des appareils spécifiques à l’aide de l’émulateur.

Selon votre instance, il peut être utilisé en tant que système de paragraphes par défaut de la page ou en tant que composant pouvant être placé dans la page (ou les deux).

Attention :

Bien que le composant Conteneur de mises en page soit disponible dans l’interface utilisateur classique, il n’est entièrement fonctionnel que dans l’interface utilisateur optimisée pour les écrans tactiles.

AEM réalise une mise en page réactive pour vos pages en combinant plusieurs mécanismes :

  • Composant Conteneur de mises en page
    Ce composant est disponible dans l’explorateur de composants. Il fournit un système de paragraphes/grille qui permet d’ajouter et de positionner des composants dans une grille réactive. Il peut être également défini comme système de paragraphes par défaut de votre page.
  • Mode Mise en page
    Lorsque le conteneur de mises en page est positionné dans la page, vous pouvez utiliser le mode Mise en page pour placer le contenu dans la grille réactive.
  • Émulateur
    Permet de créer et de modifier des sites web réactifs qui réorganisent la mise en page en fonction de l’appareil ou de la taille de la fenêtre en redimensionnant les composants de manière interactive. L’utilisateur peut ensuite afficher un aperçu du contenu à l’aide de l’émulateur.

À l’aide de ces mécanismes de grille réactive, vous pouvez effectuer les opérations suivantes :

  • utiliser des points d’arrêt pour définir différentes mises en page en fonction de la largeur d’appareil (associée au type d’appareil et à l’orientation) ;
  • utiliser ces points d’arrêt et les mises en page de contenu pour veiller à ce que le contenu s’ajuste à la taille de la fenêtre du navigateur sur le poste de travail ;
  • utiliser l’alignement horizontal sur la grille (placer les composants dans la grille, les redimensionner selon les besoins, définir quand ils doivent être réduits ou développés pour être côte à côte ou l’un au-dessus de l’autre) ;
  • masquer des composants pour des mises en page d’appareil spécifiques ;
  • contrôler les colonnes.

Selon votre projet, le conteneur de mises en page peut être utilisé en tant que système de paragraphes par défaut pour vos pages ou être disponible (en tant que composant pouvant être ajouté à une page) dans l’explorateur de composants en vue de sa sélection.

Remarque :

L’utilisation des mécanismes ci-dessus est activée par une configuration du modèle. Pour plus d’informations, reportez-vous à la section Configuration d’une mise en page réactive.

Définitions de mise en page, émulation d’appareil et points d’arrêt

Lorsque vous créez le contenu de votre site web, vous voulez être certain que celui-ci sera affiché correctement sur l’appareil utilisé pour le consulter :

Dans AEM, vous pouvez définir des mises en page qui dépendent de la largeur de l’appareil :

  • L’émulateur permet d’émuler ces mises en page sur divers appareils. Tout comme le type de l’appareil, l’orientation, sélectionnée par Rotation du périphérique, peut avoir une incidence sur le point d’arrêt sélectionné lors du changement de largeur.
  • Les points d’arrêt sont des points qui séparent les définitions de mise en page.
    • Ils définissent la largeur maximale (en pixels) de n’importe quel appareil à l’aide d’une mise en page spécifique.
    • Les points d’arrêt sont généralement valides pour plusieurs appareils en fonction de la largeur de leur écran.
    • La plage d’un point d’arrêt s’étend de la gauche jusqu’au point d’arrêt suivant.
    • Vous ne pouvez pas spécifiquement sélectionner le point d’arrêt. La sélection d’un appareil et d’une orientation permet de sélectionner automatiquement le point d’arrêt adéquat.

L’appareil Bureau ne possède pas de largeur spécifique et est associé au point d’arrêt par défaut (c.-à-d. tout ce qui se trouve au-dessus du dernier point d’arrêt configuré).

Remarque :

Il serait possible de définir des points d’arrêt pour chaque appareil, mais cela augmenterait toutefois la charge de travail requise pour la définition des mises en page et la maintenance.

Lorsque (à l’aide de l’émulateur) vous sélectionnez un appareil spécifique pour l’émulation et la définition de la mise en page, le point d’arrêt associé est également sélectionné. Toute modification de mise en page est applicable aux appareils auxquels s’applique le point d’arrêt (appareils placés à gauche du marqueur du point d’arrêt actif, mais avant le marqueur du point d’arrêt suivant).

Par exemple, lorsque vous sélectionnez l’appareil iPhone 6 Plus (défini avec une largeur de 540 pixels) pour l’émulation et la mise en page, le point d’arrêt Téléphone (défini à 768 pixels) est également activé. Toute modification de mise en page apportée à l’appareil iPhone 6 est applicable aux autres appareils sous le point d’arrêt Téléphone, tels que l’iPhone 5 (défini à 320 pixels).

chlimage_1

Sélection d’un appareil à émuler

  1. Ouvrez la page requise en vue de la modifier. Par exemple :

    http://localhost:4502/editor.html/content/geometrixx-media/en.html

  2. Sélectionnez l’icône Émulateur dans la barre d’outils supérieure :

    chlimage_1
  3. La barre d’outils de l’émulateur s’ouvre. Grâce à celle-ci, vous pouvez effectuer les opérations suivantes :

    • effectuer une rotation de l’appareil ;
    • sélectionner un appareil spécifique à partir des marqueurs.
    chlimage_1
  4. Pour sélectionner un appareil spécifique à émuler, vous pouvez effectuer l’une des opérations suivantes :

    • utiliser la liste déroulante ;
    • appuyer ou cliquer sur l’indicateur de l’appareil dans la barre d’outils de l’émulateur.
    chlimage_1
  5. Une fois un appareil spécifique sélectionné, vous pouvez visualiser les éléments suivants :

    • Marqueurs actifs de l’appareil sélectionné (iPad, par exemple)
    • Marqueurs actifs du point d’arrêt adéquat (Tablette, par exemple)
    chlimage_1
    • Pointillés qui représentent la structure de l’appareil actif (iPhone 5, par exemple) :
    chlimage_1

Ajout d’un conteneur de mises en page et de son contenu (mode d’édition)

Un conteneur de mises en page est un système de paragraphes qui présente les caractéristiques suivantes :

  • Il contient d’autres composants.
  • Vous pouvez l’utiliser pour définir la mise en page.
  • Il est réactif face aux modifications.

Remarque :

S’il n’est pas déjà disponible, le conteneur de mises en page doit être explicitement activé pour un système de paragraphes ou une page (en utilisant le mode de conception, par exemple).

  1. Le conteneur de mises en page est disponible en tant que composant standard dans l’explorateur de composants. Vous pouvez le faire glisser depuis l’explorateur de composants jusqu’à l’emplacement requis dans la page. L’espace réservé Faire glisser les composants ici s’affiche alors :

  2. Vous pouvez ensuite ajouter des composants au conteneur de mises en page, qui contiendront le contenu actuel :

    chlimage_1

Sélection et exécution d’une action sur un conteneur de mises en page (mode d’édition)

À l’instar des autres composants, vous pouvez sélectionner un conteneur de mises en page, puis effectuer une opération (copier, couper, supprimer) sur ce dernier (en mode d’édition) :

Attention :

Un conteneur de mises en page étant un système de paragraphes, sa suppression entraîne celle de la grille de mise en page et de tous les composants (et de leur contenu) qu’il contient.

  1. Si vous pointez sur l’espace réservé de la grille, vous devez sélectionner le parent :

    chlimage_1
  2. Si le composant de mise en page est imbriqué, vous devez sélectionner l’instance spécifique sur laquelle vous souhaitez effectuer l’opération (lorsque vous pointez sur les options, une bordure noire indique la sélection sur la page) :

    chlimage_1
  3. Cette opération sélectionne l’ensemble de la grille avec son contenu. La barre d’outils du composant s’affiche ; vous pouvez alors sélectionner une action comme Supprimer :

    chlimage_1

Définition des mises en page (mode Mise en page)

Remarque :

Vous pouvez définir une mise en page distincte pour chaque point d’arrêt (déterminée par l’orientation et le type d’appareil émulé).

Pour configurer la mise en page d’une grille réactive mise en œuvre avec le composant Conteneur de mises en page, vous devez utiliser le mode Mise en page. Dans ce mode, vous pouvez effectuer diverses opérations sur une grille :

  • Redimensionnez les composants de contenu à l’aide des points bleus. Le redimensionnement s’aligne toujours sur la grille. Lors du redimensionnement, la grille d’arrière-plan s’affiche pour faciliter l’alignement :

    chlimage_1

    Remarque :

    Les proportions et les rapports sont conservés lorsque des composants tels que des images sont redimensionnés.

  • Cliquez ou appuyez sur un composant de contenu. La barre d’outils propose les options suivantes :

    • Parent
      Permet de sélectionner l’intégralité du composant Conteneur de mises en pages pour effectuer une opération.
    • Flotter sur une nouvelle ligne
      Le composant est déplacé vers une nouvelle ligne selon l’espace disponible dans la grille.
    • Masquer le composant
      Le composant devient invisible (il peut être restauré à partir de la barre d’outil du conteneur de mises en page).
    chlimage_1
  • En mode Mise en page, appuyez ou cliquez sur Faire glisser les composants ici pour sélectionner l’intégralité du composant. La barre d’outils pour ce mode s’affiche ; par exemple :

    • Parent
      Permet de sélectionner le composant parent.
    • Afficher les composants masqués
      Affiche tous les composants ou des composants individuels. Le chiffre indique le nombre actuel de composants masqués.
      Dans l’exemple ci-après, l’indicateur signale un composant masqué (le composant textuel supérieur).
    • Rétablir la disposition du point d’arrêt
      Rétablit la mise en page par défaut. Aucune mise en page personnalisée n’est donc imposée.
    • Flotter sur une nouvelle ligne
      Déplace le composant d’une position vers le haut si l’espace est suffisant.
    • Masquer le composant
      Masque le composant actif.
    chlimage_1

    Remarque :

    Dans l’exemple ci-dessus, les actions de flottement et de masquage sont disponibles, car ce conteneur de mises en page est imbriqué dans un conteneur de mises en page parent.

    • Afficher les composants
      Sélectionner les composants parents pour afficher le nombre de composants masqués ; par exemple, deux :
    chlimage_1

    Vous avez la possibilité de rétablir les composants masqués en cliquant sur Tout restaurer :

    chlimage_1

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