Trying out Responsive Layout in We.Retail

Last update: April 17, 2024

CREATED FOR:

  • Developer

All We.Retail pages use the Layout Container component to implement responsive design. The layout container provides a paragraph system that lets you position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layout mode in the page editor, which lets you create and edit your responsive layout dependent on device.

Trying it out

  1. Edit the Arctic Surfing page in the Experiences section of the language master branch.

    http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html

  2. Switch to Preview to see the page as it would be rendered to a visitor of the website. Scroll down to the content of the article Aloha spirits in Norther Norway.

    chlimage_1-178

  3. Resize your browser window and watch as the layout adapts dynamically to the resizing.

    chlimage_1-179

  4. Switch to Layout mode. The emulator toolbar is automatically shown, allowing you to plan your layout per targeted device.

    Selecting a component displays floating and hiding options in the edit menu along with resizing handles for the component.

    chlimage_1-180

  5. Grabbing and dragging the resize handle of the component automatically shows the layout grid to assit you with the resizing.

    chlimage_1-181

Further Information

For more information, see the authoring document Responsive Layout or the administrator document Configuring Layout Container and Layout Mode for complete technical details.

Experience Manager