Ausprobieren von responsivem Layout in We.Retail

Alle Web.Retail-Seiten verwenden die Komponente Layout Container, um reaktionsfähiges Design zu implementieren. Der Layout-Container bietet ein Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster positionieren können. Dieses Raster kann das Layout abhängig von der Größe des Geräts/Fensters und des Formats neu anordnen. Die Komponente wird zusammen mit dem Modus Layout im Seiteneditor verwendet, mit dem Sie Ihr reaktionsfähiges Layout je nach Gerät erstellen und bearbeiten können.

Testen

  1. Bearbeiten Sie die Seite „Arctic Surfing“ im Abschnitt „Erlebnisse“ des Sprachmaster-Zweigs.

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

  2. Wechseln Sie zu Vorschau, um die Seite so anzuzeigen, wie sie für einen Besucher der Website gerendert würde. Führen Sie einen Bildlauf nach unten zum Inhalt des Artikels Aloha-Spirituosen in Nordnorwegen.

    chlimage_1-178

  3. Ändern Sie die Größe des Browserfensters und sehen Sie zu, wie sich das Layout dynamisch an die Größenanpassung anpasst.

    chlimage_1-179

  4. Wechseln Sie in den Layout-Modus. Die Emulator-Symbolleiste wird automatisch angezeigt, sodass Sie Ihr Layout für das Zielgerät planen können.

    Wenn Sie eine Komponente auswählen, werden im Bearbeitungsmenü neben den Größenänderungsgriffen für die Komponente Optionen zum Ein- und Ausblenden angezeigt.

    chlimage_1-180

  5. Durch Greifen und Ziehen des Größenänderungsgriffs der Komponente wird automatisch das Layout-Raster angezeigt, um Sie bei der Größenänderung zu unterstützen.

    chlimage_1-181

Weiterführende Informationen

Weitere Informationen finden Sie im Authoring-Dokument Responsive Layout oder im Administrator-Dokument Konfigurieren des Layout-Containers und des Layoutmodus.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now