DokumentationAEM 6.5Benutzerhandbuch

Verwenden des Layout-Modus zum Ändern der Größe von Komponenten use-layout-mode-to-resize-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Benutzende
  • Entwickler

Mit der Authoring-Oberfläche des Web-Kanals für interaktive Kommunikation können Sie mithilfe des Layout-Modus die Größe von Komponenten ändern. Indem Sie blaue Punkte per Drag-und-Drop in Spalten ziehen, können Sie den Start- und Endpunkt zur Positionierung der Komponenten definieren. Die blauen Punkte werden nach dem Tippen auf die Komponente im responsiven Raster angezeigt. Das responsive Raster besteht aus 12 gleichen Spalten. Die weiße und blaue Farbschattierung in alternativen Spalten setzt die Spalten voneinander ab.

Sie können den Layout-Modus verwenden, um die Größe von Komponenten für alle Gerätetypen wie Desktopcomputer, Tablet, Smartphone und andere kleinere Geräte zu ändern. Das Tablet leitet die Layout-Konfiguration automatisch von der Desktopversion ab und die kleineren Geräte leiten die Layout-Konfiguration vom Smartphone ab. Sie können die automatisch abgeleiteten Konfigurationen jedoch überschreiben, um für jeden Gerätetyp eine andere Konfiguration zu definieren.

NOTE
Wenn Sie den Web-Kanal mit Druckkanal als Master für eine interaktive Kommunikation erstellen, umfassen die für die Größenanpassung verfügbaren Komponenten auch die Teilformulare und Felder, die automatisch im Web-Kanal mithilfe des Druckkanals generiert werden. Der Web-Kanal behält im Layout-Modus das Layout für die Elemente des Druckkanals bei.

Zugriff auf Layout-Modus access-layout-mode

Wählen Sie Layout aus der Dropdown-Liste, die oben in der Authoring-Oberfläche für die interaktive Kommunikation neben der Option Vorschau angezeigt wird. Das Formular wird im Layout-Modus angezeigt.

  1. Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager  >  Formulare  >  Formulare und Dokumente.

  2. Erstellen Sie eine Interaktive Kommunikation oder öffnen Sie eine bestehende.

  3. Wählen Sie Layout aus der Dropdownliste, die oben neben der Option Vorschau angezeigt wird. Das Formular wird im Layout-Modus angezeigt.

    Layout-Modus für interaktive Kommunikationen

Anpassen der Größe von Komponenten resize-components

  1. Wählen Sie im Layout-Modus die Komponente aus, deren Größe geändert werden soll. Die blauen Punkte werden am Beginn und am Ende des responsiven Rasters angezeigt.

  2. Ziehen Sie die blauen Punkte mit der Maus, um die Position der Komponente im responsiven Raster zu definieren.

    Ändern der Größe mit dem Layout-Modus

    Die Symbolleiste, die nach dem Tippen auf Komponenten angezeigt wird, besteht aus folgenden Optionen:

    • Übergeordnet: Wählen Sie das übergeordnete Element einer Komponente aus.
    • In neue Zeile verschieben: Versetzt die Komponente in die nächste Zeile, wenn sich mehrere Komponenten in derselben Zeile befinden.

    Sie können alle Größenänderungen rückgängig machen und das Standard-Layout auf den Bereich anwenden, der skalierte Komponenten enthält, indem Sie die Option Breakpoint-Layout zurücksetzen ( Breakpoint zurücksetzen verwenden). Wählen Sie das übergeordnete Element der skalierten Komponente aus, um die Option anzuzeigen.

    note note
    NOTE
    Sie können die Größe von Tabellenspalten, Symbolleisten, Symbolleistenschaltflächen und Zielbereichskomponenten mit dem Layout-Modus nicht ändern. Verwenden Sie den Stilmodus, um die Größe dieser Komponenten zu ändern.

Beispiel example

Ziel: Sie möchten in einer interaktiven Kommunikation eine Tabellenkomponente und eine Bildkomponente einfügen und sie parallel zueinander positionieren.

  1. Fügen Sie die Tabellen- und Bildkomponenten mithilfe des Bearbeitungsmodus im Web-Kanal einer interaktiven Kommunikation ein. Die Bildkomponente wird nach der Tabellenkomponente angezeigt.

  2. Wechseln Sie in den Layout-Modus und wählen Sie die Tabellenkomponente aus. Die blauen Punkte zur Größenanpassung der Komponente werden in den Spalten 1 und 12 angezeigt.

  3. Ziehen Sie per Drag-und-Drop den blauen Punkt von Spalte 12 in Spalte 6 des responsiven Rasters.

    Definieren des Endpunkts der Tabelle

  4. Wählen Sie analog dazu die Bildkomponente und ziehen Sie per Drag-und-Drop den blauen Punkt von Spalte 1 in Spalte 7 des responsiven Rasters. Die Tabellen- und Bildkomponenten werden parallel zueinander angezeigt.

    Tabelle und Bild parallel im Layout-Modus

    Sie können die Bildkomponente und dann die Option In neue Zeile platzieren auswählen, die in der Symbolleiste verfügbar ist, um die Bildkomponente zur nächsten Zeile zu verschieben.

Ändern der Größe von Bereichen resize-panels-layout-mode

Führen Sie folgende Schritte aus, wenn Sie die Größe des gesamten Bereichs statt der Größe einzelner Komponenten ändern möchten:

  1. Wählen Sie eine der Komponenten im Bereich aus, dessen Größe Sie ändern möchten. Wählen Sie Übergeordnetes Element auswählen und dann die erste Option in der Dropdown-Liste aus, wenn der Bereich der Komponente direkt übergeordnet ist.

    Die blauen Punkte werden am Beginn und am Ende des responsiven Rasters angezeigt.

  2. Ziehen Sie die blauen Punkte mit der Maus, um die Position des Bereichs im responsiven Raster zu definieren.
    Sie können die Schritte 1 und 2 wiederholen und mit Übergeordnetes Element auswählen den Bereich mit der Größenanpassung zur nächsten Zeile verschieben.

Definieren eines mehrspaltigen Layouts für einen Bereich

Führen Sie folgende Schritte aus, um die Anzahl der Spalten für einen Bereich zu definieren:

  1. Wählen Sie im Modus Bearbeiten den Bereich und dann Konfigurieren aus. Wählen Sie anschließend Responsiv – alles auf der Seite ohne Navigation aus der Dropdown-Liste Bereichs-Layout aus.

  2. Wählen Sie Speichern , um die Eigenschaften zu speichern.

  3. Wählen Sie im Modus Layout eine der Komponenten im Bereich, dann Übergeordnetes Element auswählen und anschließend den Bereich aus.

  4. Wählen Sie mit mehreren Spalten und dann die Spaltenanzahl aus der Dropdown-Liste aus. Die Anzahl der Spalten kann zwischen 1 und 12 liegen. Der Bereich wird in ein mehrspaltiges Layout unterteilt.

mehrere Spalten im Layout-Modus

Deaktivieren des Layout-Modus für Formulare mit altem responsivem Layout disable-layout-mode-for-forms-with-old-responsive-layout

Sie können den Layout-Modus für Formulare mit altem responsivem Layout deaktivieren, indem Sie die Eigenschaften der im Formular verwendeten Vorlage bearbeiten.

Gehen Sie wie folgt vor, um den Layout-Modus zu deaktivieren:

  1. Wählen Sie Tools > Allgemein > Vorlagen und öffnen Sie die Vorlage, die im Formular im Modus Bearbeiten verwendet wird.

  2. Wählen Sie den Dokument-Container im linken Fensterbereich und dann  Richtlinie aus.

    Deaktivieren des Layout-Modus

  3. Wählen Sie die Registerkarte Layout-Einstellungen und dann Layout-Modus deaktivieren aus.

  4. Wählen Sie Änderungen speichern , um die Vorlageneigenschaften zu speichern.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2