Spaltenlayouts

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 9 Minuten Lesedauer

    • Spaltenlayouts werden zum Entwerfen und Organisieren verwendet UI BuilderSeiten.

    Dieses Video zeigt Ihnen, wie Sie den folgenden Eingriff durchführen.

    Mit Spaltenlayouts können Sie nützliche und visuell ansprechende Seiten in einer Experience erstellen. Ein Spaltenlayout ist eine Art flexibler Container, der Komponenten enthalten kann. Spaltenlayouts sind einfache, vorkonfigurierte Layouts, mit denen Sie schnell eine effiziente und attraktive Seite entwerfen können. Es ist nützlich, die Struktur der Seite mit Spaltenlayouts zu definieren und festzulegen, bevor Komponenten hinzugefügt werden.

    Spaltenlayouts können Spalten mit gleicher oder unterschiedlicher Breite haben.

    Beispiele für Spaltenlayouts, die in UI Builder verfügbar sind.

    Sie können das Spaltenlayout als Ganzes und die einzelnen Spalten innerhalb des Layouts konfigurieren. Legen Sie beispielsweise eine andere Rahmenbreite und -Farbe für ein Spaltenlayout und für die einzelnen Spalten im Layout fest.

    UI Builder-Seite mit einem einspaltigen Layout, das eine Überschrift und dann ein dreispaltiges Layout darunter enthält.

    Hinweis:
    Derzeit wird das Ausblenden/Anzeigen von Spalten in einem Spaltenlayout basierend auf Bedingungen nicht unterstützt.

    Fügen Sie ein Spaltenlayout hinzu

    Fügen Sie ein Spaltenlayout in hinzu UI BuilderZum Erstellen einer Struktur und Organisieren von Komponenten auf einer Experience-Seite.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
    4. Wählen Sie Aus + Inhalt hinzufügen In der Inhaltsstruktur.
    5. Wählen Sie eine der aus Standard Optionen auf Layouts Registerkarte.
      Floating-Komponentenmenü in UI Builder mit der angezeigten Registerkarte „Layouts“, in der die Optionen für das grundlegende Spaltenlayout aufgeführt sind.
      Das Spaltenlayout wird in der Phase angezeigt, damit Sie den Spalten Komponenten hinzufügen können. Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.Spaltenlayout mit drei leeren Spalten.
    6. Fügen Sie zusätzliche Spaltenlayouts oben oder unten hinzu.
      • Wählen Sie in der Inhaltsstruktur einen Spaltenlayoutnamen aus, und halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus. Wählen Sie dann aus Hinzufügen vor Oder Hinzufügen nach Aus der Liste und wählen Sie ein Layout aus.

        Inhaltsstruktur mit ausgewähltem Spaltenlayout-Menüsymbol, das die Optionen anzeigt, die vor oder nach dem ausgewählten Spaltenlayout hinzugefügt werden sollen.

      • Wählen Sie in der Phase ein Spaltenlayout aus, und wählen Sie dann das Pluszeichen oben oder unten aus.

        Vorhandenes zweispaltiges Layout mit Pluszeichen-Symbolen, um zusätzliche Spaltenlayouts hinzuzufügen.

    Konfigurieren Sie Spaltenlayouts

    Konfigurieren Sie Spaltenlayouts in UI BuilderUm die entsprechende Anzahl von Spalten und das gewünschte Aussehen auf einer Experience-Seite hinzuzufügen.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
    4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
    5. Fügen Sie (maximal sechs) Spalten mithilfe der Inhaltsstruktur, der Phase oder des Konfigurationsbereichs hinzu.
      • Wählen Sie in der Inhaltsstruktur einen Spaltennamen aus, halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte aus, und wählen Sie dann aus Fügen Sie eine Spalte vor hinzu Oder Fügen Sie eine Spalte nach hinzu Aus der Liste.

        Inhaltsstruktur mit ausgewähltem Spaltenmenüsymbol, das die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte anzeigt.

      • Wählen Sie in der Phase eine einzelne Spalte aus, wählen Sie das Menüsymbol neben dem Spaltennamen aus, und wählen Sie dann aus Fügen Sie eine Spalte vor hinzu Oder Fügen Sie eine Spalte nach hinzu Aus der Liste.

        Phase, die mit ausgewähltem Spaltenmenüsymbol angezeigt wird und die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte anzeigt.

      • Wählen Sie in der Phase eine Spalte aus, halten Sie sie gedrückt (oder klicken Sie mit der rechten Maustaste), und wählen Sie dann aus Fügen Sie eine Spalte vor hinzu Oder Fügen Sie eine Spalte nach hinzu Aus der Liste.

        Phase mit geöffnetem Spaltenmenü und schwarzen Pfeilen, die auf die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte verweisen.

      • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und wählen Sie dann in der Phase das Plussymbol + aus, um rechts vom Spaltenlayout Spalten hinzuzufügen.

        Phase mit ausgewähltem Spaltenlayout und einem schwarzen Pfeil, der auf das Plussymbol zeigt, um zusätzliche Spalten hinzuzufügen.

      • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und verwenden Sie dann im Konfigurationsbereich das ++-Symbol neben Spalten Zum Hinzufügen von Spalten auf der rechten Seite des Spaltenlayouts.

        Konfigurationsbereich für Spaltenlayout mit schwarzem Pfeil, der auf die Option für Layoutspalten verweist.

      Hinweis:
      Spalten können ineinander geschachtelt werden, aber diese Komplexität ist auf Seiten nicht häufig erforderlich.
    6. Benennen Sie eine Spalte um, indem Sie die Spaltenbezeichnung aus der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich bearbeiten.
      • Wählen Sie in der Inhaltsstruktur einen Spaltennamen aus, und halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte aus Umbenennen .
      • Wählen Sie in der Phase das Menüsymbol neben einem Spaltennamen aus, und wählen Sie aus Umbenennen .
      • Wählen Sie im Konfigurationsbereich das Informationssymbol neben dem Spaltennamen aus.

        Pfeil, der auf das Symbol für Spaltennameninformationen im Konfigurationsbereich und ein Popup-Fenster mit dem Spaltenbezeichnungsfeld zeigt.

      Das Umbenennen von Spalten kann Ihnen helfen, zwischen verschiedenen Spalten in der Phase und in der Inhaltsstruktur zu unterscheiden. Wenn Sie eine komplexe Seite mit vielen Spaltenlayouts und Spalten haben, ist es nützlich, Spalten umzubenennen.
    7. Um die Breite einer Spalte in einem Layout zu ändern, wählen Sie das Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und ziehen Sie dann eine Spaltentrennlinie auf der Phase nach links oder rechts, um die Spalte schmaler oder breiter zu machen.
      Animation, die zeigt, wie die Größe einer Spalte durch Ziehen der Spaltentrennung geändert wird.
      Die Breitenprozentsätze oben in den Spalten ändern sich automatisch, wenn Sie die Spaltentrennlinie ziehen. Die Prozentsätze ergeben 100% %. Beachten Sie beim Ändern der Größe einer Spalte, wie viel Platz die Komponente oder Komponenten innerhalb der Spalte benötigen. Listen- und Formularkomponenten werden beispielsweise in engen Spalten normalerweise nicht gut angezeigt.
    8. Verteilen Sie Spalten in einem Layout gleichmäßig über die horizontale mithilfe der Inhaltsstruktur, der Phase oder des Konfigurationsbereichs.
      • Wählen Sie in der Inhaltsstruktur einen Spaltenlayoutnamen aus, halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus, und wählen Sie dann aus Spalten gleichmäßig verteilen Aus der Liste.
      • Wählen Sie in der Phase ein Spaltenlayout aus, wählen Sie das Menüsymbol neben dem Namen des Spaltenlayouts aus, und wählen Sie dann aus Spalten gleichmäßig verteilen Aus der Liste.
      • Wählen Sie ein Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und wählen Sie im Konfigurationsbereich aus Spalten gleichmäßig verteilen .
    9. Ordnen Sie Spalten (einschließlich ihres Inhalts) innerhalb eines Spaltenlayouts mithilfe der Inhaltsstruktur oder der Phase neu an.
      • Wählen Sie in der Inhaltsstruktur die Spalte aus, und ziehen Sie sie an eine andere Position (eine blaue horizontale Linie zeigt an, wo die Spalte abgelegt werden kann).

        Pfeil, der von der Spalte in der Inhaltsstruktur an die neue Position in der Struktur zeigt, die mit einer blauen horizontalen Linie gekennzeichnet ist.

      • Wählen Sie in der Phase einen Spaltenheader aus, ziehen Sie die Spalte an eine andere Position, und legen Sie die Spalte in der durch eine vertikale magentafarbene Linie definierten Ablagezone ab.

        Pfeil, der vom Spaltenheader in der Phase auf eine Abwurfzone verweist, die durch einen vertikalen magentafarbenen Balken gekennzeichnet ist.

      Wenn Sie die Spalte in der Inhaltsstruktur neu anordnen, wird die Phase aktualisiert, und wenn Sie in der Phase neu anordnen, wird die Inhaltsstruktur aktualisiert.
    10. Geben Sie den Platz zwischen Spalten aus der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich an.
      • Wählen Sie in der Inhaltsstruktur einen Spaltenlayoutnamen aus, halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus Layout Aus der Liste und wählen Sie eine Größenoption in aus Spaltenlücke .
      • Wählen Sie in der Phase ein Spaltenlayout aus, wählen Sie das Menüsymbol neben dem Namen des Spaltenlayouts aus, und wählen Sie aus Layout Aus der Liste und wählen Sie eine Größenoption in aus Spaltenlücke .
      • Wählen Sie ein Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und wählen Sie im Konfigurationsbereich eine Größenoption in aus Spaltenlücke .

        Komponentenbereich mit Spaltenlückenfeld erweitert, um Optionen anzuzeigen.

    11. Wählen Sie das Struktursymbol aus, um zu einer anderen Inhaltsebene zu navigieren, z. B. von einer Spalte zum übergeordneten Spaltenlayout oder einer untergeordneten Komponente.
      Pfeil, der auf das Struktursymbol zum Navigieren von Spaltenlayouts, Spalten und Komponenten in der Phase zeigt.
    12. Löschen Sie Spalten aus der Inhaltsstruktur oder der Phase.
      • Wählen Sie in der Inhaltsstruktur einen Spaltennamen aus, halten Sie ihn gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte aus, und wählen Sie dann aus Löschen Sie die Spalte Aus der Liste.
      • Wählen Sie in der Phase eine einzelne Spalte aus, wählen Sie das Menüsymbol neben dem Spaltennamen aus, und wählen Sie dann aus Löschen Sie die Spalte Aus der Liste.
      • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und verwenden Sie dann im Konfigurationsbereich das Minus-Symbol – neben Spalten Zum Entfernen von Spalten auf der rechten Seite des Spaltenlayouts.
      Informationen zum Bearbeiten des Spaltenabstands finden Sie unter Legen Sie den Abstand zwischen Komponenten in Spalten fest.

    Legen Sie den Abstand zwischen Komponenten in Spalten fest

    In UI Builder, Wenn eine Spalte mehrere Komponenten enthält, legen Sie den Abstand zwischen den Komponenten fest.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
    4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
    5. Fügen Sie innerhalb einer einzelnen Spalte zwei Komponenten hinzu
      1. Identifizieren Sie in der Inhaltsstruktur eine Spalte, und wählen Sie aus + Inhalt hinzufügen Unter dem Spaltennamen.
      2. Wählen Sie im Toolbox-Fenster eine Komponente aus, z. B. Avatar .
      3. Bewegen Sie in der Inhaltsstruktur den Mauszeiger über den Namen der Komponente, die Sie gerade hinzugefügt haben, wählen Sie das Symbol „Menü öffnen“ (drei vertikale Punkte) aus, und wählen Sie aus Hinzufügen nach .
        In der Inhaltsstruktur ein Pfeil, der auf das Symbol „Menü öffnen“ für die Avatar-Komponente verweist, und ein zweiter Pfeil, der auf die Option „Hinzufügen nach“ im Floating-Menü verweist.
      4. Wählen Sie im Toolbox-Fenster eine andere Komponente aus, z. B. Schaltfläche .
    6. Wählen Sie Speichern.
    7. Wählen Sie in der Inhaltsstruktur die Spalte aus, der Sie die beiden Komponenten hinzugefügt haben.
    8. Wählen Sie im Konfigurationsbereich eine Größenoption in aus Lücke .
      Im Konfigurationsbereich ein Pfeil, der auf das Feld „Lücke“ und ein zweiter Pfeil auf das Dropdown-Menü „Lücke“ mit verschiedenen Größen zeigt.
    9. Um eine genaue Lückengröße in Pixeln anzugeben, bewegen Sie den Mauszeiger über Lücke Feld auswählen Anwenderdefinierten Wert verwenden Symbol (Bleistift), und geben Sie eine Zahl ein, z. B. 300 px .
      Im Konfigurationsbereich ein schwarzer Pfeil, der auf das Lückenfeld und ein zweiter schwarzer Pfeil auf das Symbol „anwenderdefinierten Wert verwenden“ zeigt.
    10. Um zwischen dem Stapeln der Komponenten und dem Platzieren nebeneinander in der Spalte zu wechseln, wählen Sie aus Zeile Oder Spalte Symbol in Richtung .
      Im Konfigurationsbereich ein schwarzer Pfeil, der auf das Richtungsfeld verweist, und ein zweiter schwarzer Pfeil, der auf die Zeilen- und Spaltensymbole verweist.

      Um die Reihenfolge und Platzierung der Komponenten in der Spalte umzukehren, wählen Sie aus Erweitert (Drei horizontale Punkte) Symbol in Richtung , Und wählen Sie dann aus Umgekehrt Option.

      Im Konfigurationsbereich ein schwarzer Pfeil, der auf das Richtungsfeld zeigt, und ein zweiter schwarzer Pfeil, der auf das Symbol für erweiterte Richtung zeigt.

    Legen Sie erweiterte Spaltenlayoutoptionen fest

    Legen Sie erweiterte Spaltenlayoutoptionen in fest UI BuilderEinschließlich Stapelbreite und Spaltenlayouthöhe.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
    4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
    5. Wählen Sie ein Spaltenlayout aus, das mindestens zwei Spalten in der Inhaltsstruktur enthält.
      Inhaltsstruktur mit ausgewähltem Spaltenlayout.
    6. Um eine Stapelbreite festzulegen, wechseln Sie zu Konfigurationsbereich > Layout Und wählen Sie aus Erweiterte Layoutoptionen anzeigen .
      Hinweis:
      Durch das Festlegen einer Stapelbreite können Sie steuern, wie eine Seite mit Spaltenlayouts in einem schmalen Browserfenster, Tablet oder Mobilgerät aussieht.
      Konfigurationsbereich mit schwarzem Pfeil, der zum Anzeigen des Links für erweiterte Layoutoptionen zeigt.
    7. Geben Sie eine Breite in ein Stapelspalten unten .
    8. Wählen Sie Speichern.
    9. Um die aktualisierte Stapelbreite zu testen, wählen Sie den Pfeil neben aus Vorschau Und wählen Sie aus Öffnen Sie den URL-Pfad .
    10. Reduzieren Sie die Breite des Browserfensters auf weniger als die von Ihnen angegebene Stapelbreite, um sicherzustellen, dass sich die Spalten auf der rechten Seite unter die erste Spalte verschieben.
    11. Schließen Sie die Browserregisterkarte, die mit dem URL-Pfad geöffnet wurde.
    12. Um die Höhe des Spaltenlayouts zu steuern, wählen Sie ein Spaltenlayout mit zwei oder mehr Spalten in der Inhaltsstruktur aus, und wechseln Sie zu Konfigurationsbereich > Layout , Und wählen Sie aus Erweiterte Layoutoptionen anzeigen .
      Hinweis:
      Das Festlegen der Höhe ist nützlich, wenn Ihr Spaltenlayout eine Komponente enthält, die groß sein kann, z. B. die Listenkomponente.
    13. Unter Größenanpassung , Geben Sie Zahlen in eine oder mehrere der Optionen ein ( Höhe , Min. H , Und Max. H ) Und legen Sie die Größeneinheit fest (z. B. px , % , Oder EM ).
      Konfigurationsbereich mit schwarzem Pfeil, der auf die erweiterte Größenanpassungsoption verweist.
    14. Wählen Sie Speichern.
    15. Um die aktualisierte Größenanpassung zu testen, wählen Sie den Pfeil neben aus Vorschau Und wählen Sie aus Öffnen Sie den URL-Pfad .
    16. Reduzieren und erweitern Sie die Höhe des Browserfensters, um die angegebenen Werte zu testen.
    17. Schließen Sie die Browserregisterkarte, die mit dem URL-Pfad geöffnet wurde.