Ändern Sie das Layout einer Seite, die in erstellt wurde QuebecOder Rome

Fügen Sie Ihr Layoutdesign hinzu, und ändern Sie es, um das Aussehen Ihrer Seite zu ändern. Wählen Sie aus, wie Komponenten auf einer Seite mithilfe von Weblayout-Technologien für kaskadierende Stylesheets (CSS) angezeigt werden, z. B. Flexbox und CSS-Raster.

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. CSS-Regeln gelten für sie. Sie können das Layout wie folgt ändern.

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 Oder öffnen Sie eine Seite.
4. Wählen Sie aus Layout Registerkarte.
5. Führen Sie je nach Seitentyp einen der folgenden Schritte aus, um einen zu aktualisierenden Container auszuwählen.

   Typ der Seite	Anweisung
   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, finden Sie den Container, den Sie ändern möchten. Wenn Sie viele Komponenten und Container in der Inhaltsstruktur haben, verwenden Sie die Suchleiste, um einen bestimmten Container zu finden.
   Neue Seite	Wählen Sie in der Inhaltsstruktur links neben dem Hauptseitenbereich aus Textkörper Ihrer Seite. Textkörper Ist das Stammelement der Seite.

   Wenn Sie eine neue Seite starten, 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 Bereich Seitenkonfiguration die aus Layout Registerkarte, um das Layout auszuwählen, das Sie verwenden möchten.

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

      Sie können auch das Layout für einen Container festlegen. Das folgende Bild zeigt die Layoutoptionen für den 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 auswählen .
   Zum Ändern einer vorhandenen Seite zeigt das folgende Video, wie Sie das Containerlayout von drei in vier Spalten ändern und dann der vierten Spalte eine neue Komponente hinzufügen können.

   

   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

   

7. Fügen Sie Komponenten zu Slots hinzu.
   Sie erstellen Ihre Seite mit Containerkomponenten. Weitere Informationen finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.

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

   Zum Hinzufügen einer Komponente	Gehen Sie folgendermaßen vor
   Direkt von Ihrer Seite (Option 1)	Wählen Sie das Symbol „Inhalt hinzufügen (plus)“ aus, und wählen Sie aus Komponenten Und wählen Sie dann eine Komponente aus.
   Direkt von Ihrer Seite (Option 2)	Wählen Sie in einem Spaltenlayout oder einer Komponente das Symbol „Hinzufügen vor“ (plus) oder „Hinzufügen nach“ (plus) aus, und wählen Sie dann eine Komponente aus.
   Aus der Inhaltsstruktur	Wählen Sie in der Inhaltsstruktur aus + Inhalt hinzufügen Und wählen Sie dann eine Komponente aus.
   Aus dem Floating-Menü über der Seite	Wählen Sie in einem Spaltenlayout oder einer Komponente das Menüsymbol aus, und wählen Sie aus Hinzufügen vor Oder Hinzufügen nach , Und wählen Sie dann eine Komponente aus.

8. Ändern Sie die Layoutstiloptionen auf eine der folgenden Arten.

   Option	Anweisung
   Ändern Sie den Layoutstil	Klicken Sie auf einen Container, für den Sie das Layout ändern möchten. Sie können in der Inhaltsstruktur auf den Container oder auf den Container auf der Seite klicken. Klicken Sie im Floating-Menü über der Seite auf Layout . Wählen Sie aus, ob Ihr Inhalt als Flex oder Raster angezeigt werden soll. Weitere Informationen zu Flex- oder Rasteroptionen finden Sie unter Verwenden von Flexbox-Layouts in UI BuilderOder Verwenden Sie CSS-Rasterlayouts, um eine Seite zu erstellen.
   Wählen Sie Flex	Wählen Sie in der Liste Anzeigen die Option aus Flex . Wählen Sie die folgenden Optionen basierend darauf aus, wie Sie Ihren Containerinhalt auf der Seite anzeigen möchten. Die Optionen können auch im Feld CSS-Stile eingegeben werden: Flex-Richtung: Wählen Sie aus Zeile , Zeilenumkehrung , Spalte , Oder Spalte umkehren . Inhalt begründen: Wählen Sie eine der folgenden Optionen aus: Flex-Start : Elemente befinden sich am Anfang der Flex-Richtung, ähnlich wie linksausgerichtete Inhalte. Das ist die Standardeinstellung. Flexibles Ende : Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechtsgerichtete Inhalte. Abstand zwischen : Elemente werden gleichmäßig verteilt. Platz um : Elemente werden gleichmäßig verteilt und haben gleichen Platz um sie herum. Platzgleichmäß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 : Erweitern Sie Ihren Inhalt, um den Container zu füllen. Das ist die Standardeinstellung. Flex-Start : Platzieren Sie Ihren Inhalt am Anfang der Querachse. Flexibles Ende : Platzieren Sie Ihren Inhalt am Ende der Querachse. Mitte : Zentrieren Sie Ihren Inhalt auf der Querachse. Baseline : Richten Sie Ihren Inhalt wie Ihre Baseline-Ausrichtung aus. Höhe: Legen Sie die Höhe automatisch oder manuell fest. Breite: Legen Sie die Höhe Ihrer Flexbox-Elemente automatisch oder manuell fest. Marge: Legen Sie Ihren minimalen Abstand zwischen Flexbox-Elementen fest. Auffüllung: Legen Sie die Auffüllung für jede Seite Ihrer Flexbox-Elemente fest.
   Wählen Sie Raster Aus	Wählen Sie in der Liste Anzeigen die Option aus Raster . Geben Sie die folgenden Informationen an: Höhe: Legen Sie die Höhe automatisch oder manuell fest. Breite: Legen Sie die Höhe Ihrer Rasterelemente automatisch oder manuell fest. Marge: Legen Sie Ihren minimalen Abstand zwischen Rasterelementen fest. Auffüllung: Legen Sie den Abstand für jede Seite Ihrer Rasterelemente fest.