Test d’une mise en page en responsive design dans We.Retail

Toutes les pages We.Retail utilisent le composant Conteneur de mises en page pour implémenter le responsive design. Le conteneur de mises en page fournit un système de paragraphes qui vous permet de positionner des composants dans une grille réactive. Cette grille peut réorganiser la mise en page en fonction de l’appareil/de la taille de fenêtre et du format. Le composant est utilisé conjointement avec la fonction Disposition dans l’éditeur de page, qui vous permet de créer et de modifier votre mise en page réactive en fonction de l’appareil.

Essayer de le faire

Modifiez la page Arctic Surfing dans la section Expériences de la branche principale de langue.

http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html
Passez à Aperçu pour voir la page telle qu’elle serait affichée pour un internaute. Faites défiler jusqu’au contenu de l’article Esprit Aloha dans le nord de la Norvège.
Redimensionnez la fenêtre de votre navigateur et observez la mise en page s’adapter dynamiquement au redimensionnement.
Passez en mode Mise en page. La barre d’outils de l’émulateur s’affiche automatiquement, ce qui vous permet de planifier votre mise en page par appareil ciblé.

La sélection d’un composant affiche des options de flottement et de masquage dans le menu d’édition, ainsi que des poignées de redimensionnement pour le composant.
En saisissant et en faisant glisser la poignée de redimensionnement du composant, la grille de mise en page s’affiche automatiquement pour vous assister lors du redimensionnement.

Informations supplémentaires

Pour plus d’informations, reportez-vous au document relatif à la création Mise en page en responsive design ou au document administrateur Configuration du conteneur de mise en pages et du mode Mise en page pour obtenir des détails techniques complets.