Configuration du conteneur et du mode de disposition
Découvrez comment configurer le conteneur et le mode de disposition pour activer les dispositions réactives pour les auteurs de contenu.
TIP- Pour les personnes créant du contenu, les détails sur l’utilisation des fonctionnalités de conception réactive sur une page de contenu sont disponibles dans le document Disposition réactive.
- Pour les développeurs, les détails du conteneur de disposition et de la grille réactive sont décrits dans le document The Responsive Design qui fournit des conseils et des astuces pour l’utilisation des conteneurs de disposition et de la grille réactive lors de la conception de votre site.
Vue d’ensemble
La disposition réactive est un mécanisme qui permet de réaliser un design web réactif. Cela permet à l’auteur de contenu de créer des pages web dont la disposition et les dimensions dépendent des appareils utilisés par leurs utilisateurs.
AEM effectue une mise en page réactive de vos pages en combinant plusieurs mécanismes :
-
Conteneur de disposition - Ce composant fournit un système de paragraphes/grille qui vous permet d’ajouter et de positionner des composants dans une grille réactive.
-
Il peut être utilisé comme système de paragraphes (parsys) par défaut pour votre page et mis à la disposition des créateurs dans l’explorateur de composants.
-
Le composant par défaut Conteneur de disposition est défini sous
/libs/wcm/foundation/components/responsivegrid. -
Vous pouvez définir des conteneurs de mise en page en tant que :
- composant que l’utilisateur ou l’utilisatrice peut ajouter à une page ;
- système de paragraphes par défaut de la page ;
- En tant que composant et système de paragraphes (parsys) par défaut.
- Le conteneur de dispositions peut être utilisé de manière standard pour la page, tout en permettant à l’utilisateur d’y ajouter d’autres conteneurs de mises en page, par exemple, pour contrôler les colonnes.
-
-
Mode Disposition - Une fois que le conteneur de dispositions est positionné sur la page, vous pouvez utiliser le mode Disposition pour positionner le contenu dans la grille réactive.
-
Émulateur - Permet de créer et de modifier des sites réactifs qui réorganisent la disposition en fonction de la taille de l’appareil ou de la fenêtre en redimensionnant les composants de manière interactive. L’utilisateur ou l’utilisatrice peut alors voir comment le contenu est rendu à l’aide de l’émulateur.
Grâce à ces mécanismes de grille réactive, vous pouvez :
- Utilisez des points d’arrêt (qui indiquent le regroupement des appareils) pour définir différents comportements de contenu en fonction de la mise en page de l’appareil.
- Masquez les composants en fonction du groupe d’appareils (définissez sur quel point d’arrêt un composant sera masqué).
- Utilisez l’accrochage horizontal à la grille (placez les composants dans la grille, redimensionnez-les si nécessaire, définissez quand ils doivent être réduits ou déplacés pour être côte à côte ou au-dessus/en dessous).
- Contrôlez les colonnes.
NOTEActivation de l’émulateur
L’archétype de projet et le modèle de site standard sont déjà activés pour utiliser l’émulateur. Si vous avez développé votre propre contenu non basé sur les composants principaux ou l’archétype, consultez le document Responsive Design pour plus d’informations sur la manière de développer vos composants lors de l’utilisation de ces fonctionnalités.
Activation du mode Disposition pour votre site
Le mode Disposition permet d’utiliser l’émulateur pour ajuster la disposition de votre contenu pour différents appareils. L’exemple de site WKND est déjà activé pour le mode Disposition. Pour activer votre propre site, procédez comme suit.
Configurer les points d’arrêt
Les points d’arrêt sont essentiels au Responsive Design et définissent comment et quand le contenu est ajusté sur l’appareil cible. Toutefois, faites attention, car chaque point d’arrêt que vous introduisez génère du travail supplémentaire pour que vos auteurs puissent s’adapter au contenu. Souvent, deux points d’arrêt peuvent suffire, y compris le point d’arrêt par défaut qui est toujours présent. Adobe recommande de ne pas créer plus de trois points d’arrêt, y compris la valeur par défaut, c’est-à-dire de ne pas créer plus de deux nœuds sous cq:responsive/breakpoint.
-
Les points d’arrêt ont un titre et une largeur :
- Le titre décrit le regroupement de périphériques génériques, avec orientation si nécessaire.
- Par exemple,
phone,tablet.
- Par exemple,
- La largeur définit la largeur maximale en pixels pour ce groupe d’appareils générique.
- Par exemple, si la largeur du téléphone du point d’arrêt est de 768, elle correspond à la largeur maximale de la mise en page utilisée pour un appareil téléphonique ;
- Le titre décrit le regroupement de périphériques génériques, avec orientation si nécessaire.
-
Les points d’arrêt peuvent être définis :
- dans le modèle de page, à partir duquel les paramètres sont copiés dans les pages créées avec ce modèle ;
- sur le nœud de page, à partir duquel les paramètres sont hérités par toutes les pages enfants.
-
Les points d’arrêt sont visibles en tant que marqueurs en haut de l’éditeur de page lorsque vous utilisez l’émulateur.
-
Les points d’arrêt sont hérités de la hiérarchie de nœud parent et peuvent être remplacés à volonté.
-
Il existe un point d’arrêt par défaut (prêt à l’emploi) qui couvre tout ce qui se trouve au-dessus du dernier point d’arrêt configuré.
-
Les points d’arrêt peuvent être définis au moyen de CRXDE Lite ou de code XML.
Des points d’arrêt doivent être pris en compte pour les projets nouveaux et existants.
-
Si vous configurez un nouveau projet, vous devez ajouter des points d’arrêt aux modèles.
-
Si vous migrez un projet existant (avec du contenu existant), vous devez :
- Ajoutez des points d’arrêt aux modèles.
- Ajoutez les mêmes points d’arrêt aux pages existantes.
En raison de l’héritage, il vous suffit de le faire pour la page racine de votre contenu.
