Testen von responsivem Layout in We.Retail trying-out-responsive-layout-in-we-retail

CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Alle We.Retail-Seiten verwenden die Layout-Container-Komponente, um responsives 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 entsprechend der Geräte-/Fenstergröße und dem Format neu anordnen. Die Komponente wird zusammen mit dem Layout-Modus im Seiteneditor verwendet, mit dem Sie das responsive Layout je nach Gerät erstellen und bearbeiten können.

Testen trying-it-out

  1. Bearbeiten Sie die Seite Arktisches Surfen im Abschnitt Erlebnisse des Übergeordneten Sprachzweigs.

    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. Blättern Sie 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 jedes 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 further-information

Weitere Informationen und umfassende technische Details finden Sie im Dokument Responsives Layout oder im Administrator-Dokument Konfigurieren von Layout-Container und Layout-Modus.

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e