Ändern Sie das Layout einer in Quebec oder Romeerstellten Seite.

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 4 Minuten Lesedauer

    • Fügen Sie Ihr Layoutdesign hinzu, und ändern Sie es, um das Erscheinungsbild Ihrer Seite zu ändern. Wählen Sie aus, wie Komponenten auf einer Seite mithilfe von Weblayout-Technologien Cascading Style Sheets (CSS) wie Flexbox und CSS Grid angezeigt werden.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Layouts steuern, welche Container und Komponenten auf einer Seite verfügbar sind und wo sie sich befinden. Für sie gelten CSS-Regeln. Sie können das Layout wie folgt ändern.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Erstellen oder öffnen Sie eine Seite.
    4. Wählen Sie die Registerkarte Layout.
    5. Führen Sie je nach Seitentyp einen der folgenden Schritte aus, um einen zu aktualisierenden Container auszuwählen.
      Typ der SeiteAnweisung
      Vorhandene Seite Wählen Sie den Container auf Ihrer Seite aus, für den Sie das Layout ändern möchten.
      Hinweis:
      Alternativ können Sie den Container in der Inhaltsstruktur links neben dem Hauptseitenbereich auswählen. Wenn sich die Seitenstruktur in der strukturierten Struktur befindet, können Sie den Container, den Sie ändern möchten, leichter finden. Wenn die Inhaltsstruktur viele Komponenten und Container enthält, verwenden Sie die Suchleiste, um einen bestimmten Container zu finden.
      Neue Seite Wählen Sie in der Inhaltsstruktur links neben dem Hauptseitenbereich den Textkörper Ihrer Seite aus.

      DerTextkörper ist das Stammelement der Seite.

      Pfeil, der auf das Element „text“ in der Inhaltsstruktur zeigt.
      Wenn Sie eine neue Seite beginnen, können Sie das Layout auf Seitenebene und später auf Containerebene auswählen. Wenn Sie nicht der Besitzer einer vorhandenen Seite sind, beachten Sie die Auswirkungen einer Änderung des Layouts auf Seitenebene.
    6. Ändern Sie das Layout Ihres Containers.
      1. Wählen Sie im Seitenkonfigurationsbereich die Registerkarte Layout aus, um das zu verwendende Layout auszuwählen.

        Sie können das aktuelle Layout einer vorhandenen Seite in ein neues ändern. Beispielsweise können Sie in einem Layout mit drei Spalten auf das Layout mit vier Spalten klicken, um das Layout zu ändern.

        Sie können auch das Layout für einen Container festlegen. Die folgende Abbildung zeigt die Layoutoptionen für UI Builder.

        Layoutoptionen für UI Builder.
      2. Wenn Sie eine Seite erstellen, fügen Sie den neuen Bereichen in Ihrem Layout Komponenten hinzu.
      3. Klicken Sie auf Speichern.
      4. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie die Schaltfläche Vorschau wählen, die Ihre Seite zur Laufzeit öffnet. Dies ist eine Vorschau der Darstellung der Seite auf einer Webseite..
      Um eine vorhandene Seite zu ändern, zeigt das folgende Video, wie Sie das Containerlayout von drei auf vier Spalten ändern und dann der vierten Spalte eine neue Komponente hinzufügen können.
      Ändern des Layouts einer vorhandenen Seite.
      Zum Festlegen des Layouts einer neuen Seite zeigt das folgende Video, wie Sie das gewünschte Layout für die Seite festlegen. Sie können beispielsweise festlegen, dass Ihre Seite zwei Slots oder Spalten hat. Anschließend können Sie jedem Slot Container hinzufügen und das Layout für jeden Container ändern. Sie können das Layout auch auf Containerebene festlegen, nachdem Sie Ihrer Seite Container hinzugefügt haben.
      Abbildung : 1. Ändern Sie das Layout einer Seite
      Ändern des Layouts einer Seite
    7. Fügen Sie Komponenten zu Slots hinzu.
      Sie erstellen Ihre Seite mit Containerkomponenten. Weitere Informationen finden Sie unter Passen Sie die Seiten UI Builder mithilfe von Komponenten an.

      Sie können Komponenten auf eine der folgenden Arten hinzufügen.

      Zum Hinzufügen einer Komponente Vorgehensweise
      Direkt von Ihrer Seite (Option 1)

      Wählen Sie das Symbol zum Hinzufügen von Inhalten (Plus), wählen Sie die Registerkarte Komponenten und dann eine Komponente aus.

      Symbol „Inhalt hinzufügen“ in der Phase ausgewählt, in der das Toolbox-Fenster mit ausgewählter Registerkarte „Komponenten“ angezeigt wird.
      Direkt von Ihrer Seite (Option 2)

      Wählen Sie bei einem Spaltenlayout oder einer Komponente das Symbol „Vor“ (Plus) oder „Nach“ (Plus) hinzufügen, und wählen Sie dann eine Komponente aus.

      Animation, die zeigt, wie das Symbol „+ Hinzufügen“ für eine Komponente ausgewählt und eine Komponente hinzugefügt wird.
      Aus der Inhaltsstruktur

      Wählen Sie in der Inhaltsstruktur + Inhalt hinzufügen und anschließend eine Komponente aus.

      Schwarzer Pfeil, der auf die Option „+ Inhalt hinzufügen“ in der Inhaltsstruktur neben dem Toolbox-Fenster mit ausgewählter Registerkarte „Komponenten“ zeigt.
      Über das unverankerte Menü oberhalb der Seite

      Wählen Sie in einem Spaltenlayout oder einer Komponente das Menüsymbol, dann Hinzufügen vor oder Hinzufügen nach, und wählen Sie dann eine Komponente aus.

      Pfeil, der auf das erweiterte Menü in der Phase zeigt.
    8. Ändern Sie die Layout-Stiloptionen auf eine der folgenden Arten.
      OptionAnweisung
      Ändern Sie den Layoutstil
      1. Klicken Sie auf einen Container, für den Sie das Layout ändern möchten.

        Sie können auf den Container in der Inhaltsstruktur oder auf den Container auf der Seite klicken.

      2. Klicken Sie im unverankerten Menü über der Seite auf Layout.
        Position des Symbols „Layout ändern“ im unverankerten Menü.
      3. Wählen Sie, ob Ihre Inhalte entweder Flex oder Raster angezeigt werden sollen. Weitere Informationen zu Flex- oder Rasteroptionen finden Sie unter Verwenden von Flexbox-Layouts in UI Builder oder Verwenden von CSS-Rasterlayouts zum Erstellen einer Seite.
      Wählen Sie Flex
      1. Wählen Sie in der Liste Anzeigen die Option Flexaus.
        Flex- oder Rasteroption in einer Dropdownliste.
      2. Wählen Sie die folgenden Optionen aus, je nachdem, wie Sie Ihren Containerinhalt auf der Seite anzeigen möchten. Die Optionen können auch in das Feld „CSS-Stile“ eingegeben werden:
        • Flex-Richtung: Wählen Sie zwischen Zeile, Zeilenumkehr, Spalteoder Spaltenumkehraus.
        • Inhalt begründen: Wählen Sie eine der folgenden Optionen aus:
          • Flex-start: Elemente befinden sich am Anfang der Flex-Richtung, ähnlich wie linksbündiger Inhalt. Das ist die Standardeinstellung.
          • Flex-Ende: Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechtsbündiger Inhalt.
          • Abstand zwischen: Elemente werden gleichmäßig verteilt.
          • Platz um: Elemente werden gleichmäßig mit gleichem Platz um sie herum verteilt.
          • Flächengleichmäßig: Der Abstand zwischen Elementen ist gleich.
        • Elemente ausrichten: Definiert, wie Ihr Flex-Inhalt entlang der Querachse angezeigt werden soll. Die Auswahlmöglichkeiten lauten wie folgt:
          • Dehnen: Dehnen Sie Ihren Inhalt, um den Container zu füllen. Das ist die Standardeinstellung.
          • Flex-start: Platzieren Sie Ihre Inhalte am Anfang der Querachse.
          • Flex-Ende: Platzieren Sie Ihre Inhalte am Ende der Querachse.
          • Zentriert: Zentrieren Sie Ihren Inhalt an der Querachse.
          • Baseline: Richten Sie Ihre Inhalte entsprechend Ihrer Baseline-Ausrichtung aus.
        • Höhe: Stellen Sie die Höhe automatisch oder manuell ein.
        • Breite: Legen Sie die Höhe Ihrer Flexbox-Elemente automatisch oder manuell fest.
        • Rand: Legen Sie Ihren Mindestabstand zwischen Flexbox-Elementen fest.
        • Abstand: Legen Sie den Abstand für jede Seite Ihrer Flexbox-Elemente fest.
        Flex-Stiloptionen.
      Wählen Sie Raster aus
      1. Wählen Sie in der Liste Anzeigen die Option Rasteraus.
        Raster aus der Liste „Anzeigen“ ausgewählt.
      2. Geben Sie die folgenden Informationen an:
        • Höhe: Stellen Sie die Höhe automatisch oder manuell ein.
        • Breite: Stellen Sie die Höhe Ihrer Rasterelemente automatisch oder manuell ein.
        • Rand: Legen Sie den Mindestabstand zwischen Rasterelementen fest.
        • Abstand: Legen Sie den Abstand für jede Seite Ihrer Rasterelemente fest.