Sie sehen sich Hilfeinhalte der folgenden Version an:

AEM ermöglicht das Erstellen eines responsiven Layouts für Ihre Seiten mit der Komponente Layout-Container.

Dieses liefert ein Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und 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 Layout-Modus verwendet, in dem Sie Ihr responsives Layout geräteabhängig erstellen und bearbeiten können.

Der Layout-Container:

  • Bietet horizontales Ausrichten am Raster zusammen mit der Möglichkeit Komponenten im Raster nebeneinander zu platzieren und zu definieren wann ein Reduzieren/Umfließen stattfinden soll.
  • Verwendet vordefinierte Breakpoints (z. B. Smartphone, Tablet), mit denen Sie das erforderliche Verhalten des Inhalts für die Geräte bzw. deren Ausrichtung definieren können. Sie können z. B. die Größe der Komponente anpassen oder festlegen, ob die Komponente auf bestimmten Geräten sichtbar ist.
  • Kann für die Spaltensteuerung verschachtelt werden.

Der Benutzer kann sich mit dem Emulator ansehen wie der Inhalt für bestimmte Geräte gerendert wird.

Abhängig von Ihrer Instanz kann es als Standardabsatzsystem für die Seite oder als Komponente verwendet werden, die verfügbar ist, um auf der Seite ausgelassen zu werden (oder beides).

Vorsicht:

Auch wenn die Layout-Container-Komponente in der klassischen Benutzeroberfläche verfügbar ist, steht der vollständige Funktionsumfang nur in der Touch-optimierten Benutzeroberfläche zur Verfügung.

AEM realisiert das responsive Layout für Ihre Seiten mithilfe einer Kombination von Mechanismen:

  • Komponente Layout-Container
    Diese Komponente ist im Komponenten-Browser verfügbar. Sie bietet ein Raster-Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Dieses kann auf Ihrer Seite auch als Standardabsatzsystem festgelegt werden.
  • Layout-Modus
    Sobald der Layout-Container auf der Seite positioniert ist, können Sie im Layout-Modus Inhalte im responsiven Raster positionieren.
  • Emulator
    Hiermit können Sie responsive Websites erstellen und bearbeiten, deren Layout durch eine interaktive Größenanpassung der Komponenten an die Größe des Geräts oder Fensters angepasst wird. Der Benutzer kann sich mit dem Emulator ansehen wie der Inhalt für bestimmte Geräte gerendert wird.

Dieser responsive Rastermechanismus bietet folgende Möglichkeiten:

  • Verwendung von Breakpoints zur Definition verschiedener Inhaltslayouts basierend auf der Gerätebreite (nach Gerätetyp und -ausrichtung).
  • Verwendung derselben Breakpoints und Inhaltslayouts, um sicherzustellen, dass Ihr Inhalt an die Größe des Browserfensters auf dem Desktop angepasst wird.
  • Horizontale Ausrichtung am Raster (platzieren Sie Komponenten im Raster, passen Sie die Größe an, definieren Sie wann ein Reduzieren/Umfließen daneben oder drüber/darunter stattfinden soll).
  • Ausblenden von Komponenten für bestimmte Gerätelayouts.
  • Realisieren einer Spaltensteuerung.

Abhängig von Ihrem Projekt können Sie den Layout-Container als Standardabsatzsystem für Ihre Seiten nutzen oder ihn (als Komponente, die zur Seite hinzugefügt werden kann) als Auswahl im Komponenten-Browser verfügbar machen.

Hinweis:

Die Verwendung des obigen Mechanismus wird durch die Konfiguration der Vorlage aktiviert. Weitere Informationen finden Sie im Beitrag zum Konfigurieren des responsiven Layouts.

Layout-Definitionen, Geräteemulation und Breakpoints

Wenn Sie den Inhalt Ihrer Website erstellen, möchten Sie sicherstellen, dass Ihr Inhalt auf dem für die Anzeige verwendeten Gerät angemessen angezeigt wird.

AEM ermöglicht die Definition von Layouts, die von der Breite des Geräts abhängig sind:

  • Mit dem Emulator können Sie diese Layouts auf verschiedenen Geräten emulieren. Genau wie der Gerätetyp kann sich auch die durch Gerät drehen ausgewählte Ausrichtung auf den ausgewählten Breakpoint auswirken, da sich die Breite ändert.
  • Breakpoints sind Punkte, die die Layout-Definitionen trennen.
    • Sie definieren die maximale Breite (in Pixel) der Geräte, die ein bestimmtes Layout verwenden.
    • Breakpoints gelten in der Regel für eine Auswahl an Geräten und hängen von der Breite der Displays ab.
    • Ein Breakpoint reicht nach links bis zum nächsten Breakpoint.
    • Sie können den Breakpoint nicht spezifisch auswählen - durch die Auswahl eines Geräts und einer Ausrichtung wird der entsprechende Breakpoint automatisch ausgewählt.

Das Gerät Desktop, das keine bestimmte Breite besitzt und sich auf den Standard-Breakpoint bezieht (d. h.auf alles über dem letzten konfigurierten Breakpoint).

Hinweis:

Es wäre möglich, Breakpoints für jedes einzelne Gerät zu definieren, dies würde den Aufwand für die Layout-Definition und die Wartung jedoch drastisch vergrößern.

Wenn Sie mit dem Emulator ein bestimmtes zu emulierendes Gerät und die Layout-Definition auswählen, wird auch der zugehörige Breakpoint hervorgehoben. Alle von Ihnen durchgeführten Änderungen des Layouts wirken sich auch auf andere Geräte aus, für die derselbe Breakpoint gilt. D. h. auf alle links vom aktiven Breakpoint bis zum nächsten Breakpoint platzierten Geräte.

Wenn Sie z. B. das Gerät iPhone 6 Plus für die Emulation und das Layout auswählen (das mit einer Breite von 540 Pixel definiert ist), wird auch der Breakpoint Telefon (768 Pixel) aktiviert. Alle Änderungen des Layouts, die Sie für das iPhone 6 durchführen, gelten auch für die anderen Geräte unter dem Breakpoint Telefon, wie das iPhone 5 (mit 320 Pixel definiert).

Auswahl eines zu emulierenden Geräts

  1. Öffnen Sie die gewünschte Seite für die Bearbeitung. Beispiel:

    http://localhost:4502/editor.html/content/geometrixx-media/en.html

  2. Wählen Sie auf der oberen Symbolleiste das Symbol Emulator aus:

  3. Die Emulator-Symbolleiste wird geöffnet. Hier können Sie folgende Aktionen durchführen:

    • Gerät drehen
    • Ein bestimmtes Gerät über die Markierungen auswählen
  4. Um ein bestimmtes Gerät für das Emulieren auszuwählen, können Sie wie folgt vorgehen:

    • Verwenden Sie die Dropdown-Auswahl.
    • Tippen/klicken Sie auf der Emulator-Symbolleiste auf das Gerätezeichen.
  5. Nachdem Sie ein bestimmtes Gerät ausgewählt haben, sind folgende Möglichkeiten verfügbar:

    • Die aktive Markierung für das ausgewählte Gerät anzeigen, z. B. iPad
    • Die aktive Markierung für den entsprechenden Breakpoint anzeigen, z. B. Tablet
    • Die gepunktete Linie anzeigen, die den Umbruch für das aktuelle Gerät anzeigt, z. B. iPhone 5:

Hinzufügen eines Layout-Containers und seiner Inhalte (Bearbeitungsmodus)

Ein Layout-Container ist ein Absatzsystem mit folgenden Eigenschaften:

  • Enthält andere Komponenten
  • Kann zur Definition des Layouts verwendet werden
  • Reagiert auf Änderungen

Hinweis:

Falls er noch nicht verfügbar ist, muss der Layout-Container explizit für ein Absatzsystem/eine Seite aktiviert werden (z. B. über den Design-Modus).

  1. Der Layout-Container ist als Standardkomponente im Komponenten-Browser verfügbar. Von hier können Sie ihn an die gewünschte Position auf der Seite ziehen - danach wird der Platzhalter Komponenten hierher ziehen angezeigt.

  2. Anschließend können Sie Komponenten zum Layout-Container hinzufügen. Diese Komponenten enthalten dann den eigentlichen Inhalt:

Auswählen und Bearbeiten eines Layout-Containers (Bearbeitungsmodus)

Wie andere Komponenten können Sie einen Layout-Container im Bearbeitungsmodus auswählen und bearbeiten - kopieren, ausschneiden, löschen:

Vorsicht:

Da ein Layout-Container ein Absatzsystem ist, werden beim Löschen der Komponente sowohl das Layout-Raster als auch sämtliche im Container vorhandenen Komponenten und deren Inhalte gelöscht.

  1. Wenn Sie den Mauszeiger auf den Rasterplatzhalter bewegen, müssen Sie das Übergeordnete Element auswählen:

  2. Wenn die Layout-Komponente verschachtelt ist, müssen Sie die konkrete Instanz auswählen, die Sie bearbeiten möchten (wenn Sie den Mauszeiger auf die Optionen bewegen, zeigt ein schwarzer Rahmen die Auswahl auf der Seite an):

  3. Dadurch wird das gesamte Raster mit den Inhalten markiert. Die Komponenten-Symbolleiste wird angezeigt. Hier können Sie eine Aktion auswählen, z. B. Löschen:

Definieren von Layouts (Layout-Modus)

Hinweis:

Sie können für jeden Breakpoint (der durch den emulierten Gerätetyp und die Ausrichtung bestimmt wird) ein eigenes Layout definieren.

Das Layout eines mit dem Layout-Container implementierten responsiven Rasters muss im Layout-Modus konfiguriert werden. Von hier aus können Sie verschiedene Aktionen auf ein Raster anwenden.

  • Passen Sie die Größe der Inhaltskomponenten mithilfe der blauen Punkte an. Die Größenanpassung wird immer am Raster ausgerichtet. Während der Größenanpassung wird im Hintergrund das Raster sichtbar, das die Ausrichtung erleichtert:

    Hinweis:

    Wenn Sie die Größe von Komponenten wie Bildern ändern, bleiben die Proportionen und Seitenverhältnisse erhalten.

  • Wenn Sie auf eine Inhaltskomponente klicken/tippen, bietet Ihnen die Symbolleiste folgende Möglichkeiten:

    • Übergeordnetes Element
      Ermöglicht die Auswahl der gesamten Layout-Container-Komponente, um diese insgesamt zu bearbeiten.
    • In neue Zeile verschieben
      Die Komponente wird abhängig von dem innerhalb des Rasters verfügbaren Platz in eine neue Zeile verschoben.
    • Komponente ausblenden
      Die Komponente wird unsichtbar (sie kann über die Symbolleiste des Layout-Containers wiederhergestellt werden).
  • Im Layout-Modus können Sie auf Komponenten hierher ziehen tippen/klicken, um die gesamte Komponente auszuwählen. Dadurch wir die Symbolleiste für diesen Modus angezeigt. Beispiel:

    • Übergeordnetes Element
      Wählt die übergeordnete Komponente aus.
    • Verborgene Komponenten einblenden
      Alle oder einzelne Komponenten einblenden. Die Zahl gibt an, wie viele Komponenten aktuell ausgeblendet sind.
      Im folgenden Beispiel zeigt das Zeichen an, dass eine Komponente ausgeblendet ist (die obere Text-Komponente).
    • Breakpoint-Layout zurücksetzen
      Kehrt zum Standardlayout zurück. Dies bedeutet, dass kein benutzerdefiniertes Layout vorgegeben wird.
    • In neue Zeile verschieben
      Verschiebt die Komponente um eine Position nach oben, wenn der Leerraum dies erlaubt.
    • Komponente ausblenden
      Blendet die aktuelle Komponente aus.

    Hinweis:

    Im obigen Beispiel sind die Aktionen zum Verschieben und Ausblenden verfügbar, weil dieser Layout-Container in einem übergeordneten Layout-Container verschachtelt ist.

    • Ausgeblendete Komponenten
      Wählen Sie die übergeordneten Komponenten aus, um die Anzahl der enthaltenen ausgeblendeten Komponenten anzuzeigen, z. B. zwei:

    Sie können die ausgeblendeten Komponenten wiederherstellen, indem Sie Alle wiederherstellen auswählen:

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie