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

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 durch Weblayout-Technologien von Cascading Style Sheets (CSS) wie Flexbox und CSS-Raster 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 in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite.
4. Wählen Sie die Registerkarte Layout aus.
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, 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 nach einem bestimmten Container zu suchen.
   Neue Seite	Wählen Sie in der Inhaltsstruktur links neben dem Hauptseitenbereich den Text Ihrer Seite aus. Text 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. Wechseln Sie im Seitenkonfigurationsbereich zur Registerkarte Layout, um das zu verwendende Layout auszuwählen.

      Sie können das aktuelle Layout einer vorhandenen Seite in eine neue ä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. Die folgende Abbildung 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 .
   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.

   

   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 die Seite zwei Slots oder Spalten enthält. 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 Passen Sie UI Builder Seiten mithilfe von -Komponenten an.

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

   So fügen Sie eine Komponente hinzu:	Vorgehensweise
   Aus der Komponentenliste	Klicken Sie in der linken Spalte von UI Builderauf das Toolbox- Symbol. Ziehen Sie eine Komponente aus der Komponentenliste auf Ihre Seite.
   Direkt von Ihrer Seite	Wählen Sie auf Ihrer Seite + aus, und wählen Sie eine Komponente aus der Liste aus. Sie können nach einer Komponente suchen oder durch die Liste scrollen.
   Schwebendes Menü über der Seite	Wählen Sie das schwebende Menü über Ihrer Komponente aus. Wählen Sie Hinzufügen vor oder Hinzufügen nach. Wählen Sie eine Komponente aus der Komponentenliste aus.
   Inhaltsstruktur	Sie können eine Komponente aus der Inhaltsstruktur auf zwei Arten hinzufügen. Wählen Sie unter dem Container in der Inhaltsstruktur +Komponente hinzufügen aus. Wählen Sie dann eine Komponente aus der Komponentenliste aus. Wählen Sie rechts neben der Inhaltsstruktur die Option +Hinzufügen aus, und wählen Sie dann Komponente aus. Wählen Sie dann eine Komponente aus der Komponentenliste aus.

8. Ändern Sie die Layout-Stiloptionen 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 auf den Container in der Inhaltsstruktur oder auf der Seite klicken. Klicken Sie im schwebenden Menü über der Seite auf Layout. Wählen Sie aus, ob Sie Ihre Inhalte entweder als Flex oder als Raster anzeigen möchten. 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	Wählen Sie in der Liste „Anzeigen“ die Option Flexaus. 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, Zeile-Umkehr, Spalteoder Spalte-Umkehr. Inhalt begründen: Wählen Sie eine der folgenden Optionen aus: Flex-Start: Elemente befinden sich am Anfang der Flex-Richtung, ähnlich wie links ausgerichteter Inhalt. Das ist die Standardeinstellung. Flex-Ende: Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechts ausgerichteter Inhalt. Leerzeichen zwischen: Elemente werden gleichmäßig verteilt. Space-around: Elemente werden gleichmäßig mit gleichem Platz um sie herum verteilt. Space-evently: Der Abstand zwischen Elementen ist gleich. Elemente ausrichten: Definiert, wie der 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. Zentrieren: Zentrieren Sie Ihren Inhalt in der Querachse. Baseline: Richten Sie Ihre Inhalte entsprechend Ihrer Baselineausrichtung 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. Rand: Legen Sie den minimalen Abstand zwischen Flexbox-Elementen fest. Abstand: Legen Sie den Abstand für jede Seite Ihrer Flexbox-Elemente fest.
   Wählen Sie Raster aus	Wählen Sie in der Liste „Anzeigen“ die Option Rasteraus. Geben Sie die folgenden Informationen an: Höhe: Legen Sie die Höhe automatisch oder manuell fest. Breite: Legen Sie die Höhe der Rasterelemente automatisch oder manuell fest. Rand: Legen Sie den minimalen Abstand zwischen Rasterelementen fest. Auffüllung: Legen Sie die Auffüllung für jede Seite der Rasterelemente fest.