---
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


---

Passen Sie das Layout für Responsive Authoring an
=================================================

Passen Sie das Layout für Responsive Authoring an {#ariaid-title1}
==================================================================

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

Erfahren Sie, wie Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren das Layout anpassen können, um das Erscheinungsbild der Seite bei kleineren Größen zu verbessern.

Vorbereitungen
--------------

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird
---------------------------------------------

Eine Methode zur Verbesserung der Anwenderfreundlichkeit von Seiten besteht darin, Komponenten anzupassen, indem das Layout über Haltepunkte hinweg angepasst wird. Es gibt zahlreiche Optionen zum Anpassen des Layouts. In diesem Verfahren passen Sie das Layout der Registerkartenkomponente für den mobilen Formfaktor an.  
Die meisten Spaltenlayoutoptionen im Eigenschaftenbereich können für verschiedene Formfaktoren bearbeitet werden. Die folgenden Optionen haben jedoch formfaktorübergreifende globale Werte:

* Anzahl der Spalten
* OptionSpalten unterhalb stapeln (Pixel).
* Alle Optionen unter Eingabehilfe
{#responsive-authoring-adjust-layout__ul_wyz_v3p_lcc}

Prozedur
--------

1. Navigieren zu AlleNow-Experience-FrameworkUI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie Erstellen \> Experiencewählen.  
   Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält.").
3. Erstellen Sie eine Seite von Grund auf neu mit reaktionsfähiger Dokumenterstellung.  
   Weitere Informationen zum Erstellen einer Seite finden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen.").
4. Überprüfen Sie oben, ob das Symbol für den Desktop-Formfaktor ausgewählt ist.  
   ![Schwarzer Pfeil, der auf das Symbol für den Desktop-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.]()
5. Wählen Sie in der Phase + Inhalt hinzufügenaus.
6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
7. Fügen Sie die Registerkartenkomponente hinzu.
   1. Wählen Sie das Symbol + in der Mitte der Spalte in der Phase aus.
   2. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Registerkarten, und wählen Sie sie aus.
   3. Wählen Sie Speichern.
   {#responsive-authoring-adjust-layout__substeps_am5_1rv_sbc}
8. Bearbeiten Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Namen der ersten Registerkarte, indem Sie das Bearbeitungssymbol auswählen.  
9. Geben Sie unter Registerkartenbezeichnung<kbd class="ph userinput">den Wert Registerkarte 1</kbd>ein.
10. Geben Sie im Feld Registerkarten-ID<kbd class="ph userinput">tab_1</kbd>ein
11. Wählen Sie Speichern.
12. Fügen Sie eine zweite Registerkarte hinzu.
    1. Wählen Sie auf der Registerkarte Konfigurieren die Option + Hinzufügen neben Registerkartenaus.
    2. Wählen Sie In einem leeren Container starten und dann Weiteraus.
    3. Geben Sie unter Registerkartenbezeichnung<kbd class="ph userinput">den Wert Registerkarte 2</kbd>ein.
    4. Überprüfen Sie, ob die Registerkarten-ID automatisch mit tab_2ausgefüllt wurde.  
    5. Wählen Sie Erstellen aus.
    {#responsive-authoring-adjust-layout__substeps_z3n_1cn_5bc}
13. Fügen Sie eine dritte Registerkarte hinzu, indem Sie Schritt 12 wiederholen. Benennen Sie die Registerkarte in Schritt 12c <kbd class="ph userinput">mit Tab 3</kbd>.
14. Überprüfen Sie, ob Ihre Inhaltsstruktur und Seite korrekt sind.  
15. Wählen Sie das Symbol für den Tablet-Formfaktor.  
    ![Schwarzer Pfeil, der auf das Symbol für den Tablet-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.]()

    Der Abstand und die Position der Registerkarten sehen anhand der Tablet-Breite gut aus.
16. Wählen Sie das Symbol für den mobilen Formfaktor.  
    ![Schwarzer Pfeil, der auf das Symbol für den mobilen Formfaktor oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.]()

    Die Registerkarten nehmen bei geringerer Größe mehr Platz ein.

17. Ändern Sie das Layout der Registerkarten nur für die mobile Größe.
    1. Wählen Sie in der Inhaltsstruktur Spalte 1 unter Spaltenlayout 1aus.
    2. Wählen Sie im Konfigurationsbereich unter Richtungdas Zeilensymbol aus.  
    3. Wählen Sie Speichern.

    {#responsive-authoring-adjust-layout__substeps_mf2_tzm_5bc}  
    Die Phase wird automatisch aktualisiert und zeigt an, dass Registerkarte 1 sichtbar ist und dass ein neues Dropdownmenü vorhanden ist.

18. Wählen Sie Vorschau.
19. Wählen Sie Mehr aus.  
    Die beiden anderen Registerkarten sind verfügbar.

20. Wählen Sie die Symbole für den Desktop- und Tablet-Formfaktor aus, um anzuzeigen, dass das Dropdown-Menü Mehr nicht angezeigt wird.
21. Wählen Sie zum Schließen der Überlagerung Vorschau das X aus.