Show Menu
SUJETS×

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

Toutes les pages Web.Retail utilisent le composant Conteneur de mise en forme pour implémenter une conception réactive. Le conteneur offre un système de paragraphe qui permet de positionner des composants sur 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. The component is used in conjunction with the Layout mode in the page editor, which allows you to create and edit your responsive layout dependent on device.

Test

  1. Modifiez la page Arctic Surfing dans la section Experiences de la branche master de langue.
    http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html
  2. Passez à Aperçu pour voir la page telle qu’elle serait affichée pour un internaute. Faites défiler vers le bas pour accéder au contenu de l’article Aloha spirits in Norther Norway .
  3. Redimensionnez la fenêtre de votre navigateur et observez la mise en page s’adapter dynamiquement au redimensionnement.
  4. Passez en mode Mise en page. La barre d’outils de l’émulateur est automatiquement affichée et 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.
  5. 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

For further information, refer to the authoring document Responsive Layout or the administrator document Configuring Layout Container and Layout Mode for complete technical details.