---
sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - de-DE

ft:publication_title :

    - Yokohama Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Komponenten in UI Builder-Seiten organisieren
=============================================

Komponenten in UI Builder-Seiten organisieren {#ariaid-title1}
==============================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer

Spaltenlayouts zum Organisieren von Komponenten auf einer Seite UI Builder. Erfahren Sie, wie Spaltenlayouts in UI Builderverwendet werden.

Mit Spaltenlayouts können Sie nützliche und visuell ansprechende Seiten in einer Experience erstellen. Ein Spaltenlayout ist eine Art von flexiblem Container, der Komponenten enthalten kann. Spaltenlayouts können Spalten mit gleichen oder unterschiedlichen Breiten enthalten. Sie können das Spaltenlayout als Ganzes und die einzelnen Spalten innerhalb des Layouts konfigurieren. Legen Sie beispielsweise für ein Spaltenlayout und für die einzelnen Spalten innerhalb des Layouts eine andere Rahmenbreite und -farbe fest. Spaltenlayouts können leere Spalten auf einer Seite UI Builder enthalten, um Leerraum zu erstellen. Verwenden Sie mehrere Spaltenlayouts auf einer Seite. Zum Beispiel könnte ein zweispaltiges Layout einen Header und ein Bild enthalten, während ein dreispaltiges Layout darunter weitere Komponenten wie eine Liste und ein Formular enthalten könnte.

Denken Sie über das Layout Ihrer Seite nach, bevor Sie mit dem Erstellen beginnen. Analysieren Sie, was Sie erreichen möchten und wie komplex das Seitenlayout sein muss. Diese Fragen bestimmen, welche Art von Spaltenlayout oder -layouts Sie verwenden sollten.

Für Spaltenlayouts in UI Builder werden standardbasierte CSS-Regeln (Cascading Style Sheets) und Weblayout-Technologien wie Flexbox, CSS-Raster und absolute Positionierung verwendet. Was auch immer Sie in CSS tun können, können Sie hier tun. Besuchen Sie [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS), um mehr über CSS zu erfahren.  
Hinweis:  
Wenn Sie über vorhandene UI Builder -Seiten verfügen, die in einem früheren Release (Utah oder Tokyo) erstellt wurden, können Sie ein Upgrade auf Vancouver oder Washington DC durchführen und den Seiten Spaltenlayouts hinzufügen.
* **[Spaltenlayouts](https://servicenow-prod.fluidtopics.net/tKEUQCHvqBYbAXwd89uDGw#column-layout)**   
  Spaltenlayouts werden zum Entwerfen und Organisieren von UI Builder -Seiten verwendet.
* **[Upgrade von Layouts in UI Builder](https://servicenow-prod.fluidtopics.net/oK8s4amH7HpLxbBcRBFD6A#upgrade-layout-uib)**   
  Aktualisieren Sie in Quebec und Rome erstellte Layouts auf das neue Layoutsystem.
* **[Verwenden von Flexbox-Layouts in UI Builder](https://servicenow-prod.fluidtopics.net/D4K20wrj5~DS4bhNapeVCQ#flexbox-uib)**   
  Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.
* **[Verwenden von CSS-Rasterlayouts zum Erstellen einer Seite](https://servicenow-prod.fluidtopics.net/YQp112Qtvaxz4INA6VOoAg#css-grid-uib)**   
  Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.
* **[Ändern Sie das Layout einer in Quebec oder Romeerstellten Seite.](https://servicenow-prod.fluidtopics.net/vC3pWtm3SLW4F4HJ0vxezw)**   
  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.