Passen Sie Stile für reaktionsfähiges Authoring an

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Erfahren Sie beim Erstellen von Seiten mit reaktionsfähigem Authoring für verschiedene Formfaktoren, wie Sie Stiloptionen ändern, um die Nutzbarkeit der Seite bei kleineren Größen zu erhöhen.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Eine Methode zur Erhöhung der Seitennutzbarkeit besteht darin, Komponenten mithilfe verschiedener Stile über Haltepunkte hinweg anzupassen. Es gibt zahlreiche Optionen zum Bearbeiten von Stilen. Bearbeiten Sie in diesem Verfahren den Rand um die stilisierte Textkomponente, und reduzieren Sie die Textgröße, damit bei kleineren Formfaktoren weniger Platz verbraucht wird.

    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 Sie eine Seite von Grund auf mit reaktionsfähiger Erstellung.
      Weitere Informationen zum Erstellen einer Seite finden Sie unter Erstellen Sie eine Seite in UI Builder .
    4. Überprüfen Sie oben, ob das Symbol für reaktionsfähige Desktoperstellung ausgewählt ist.
      Schwarzer Pfeil, der auf das Desktop-Formfaktor-Symbol oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.
    5. Wählen Sie in der Phase aus + Inhalt hinzufügen .
    6. Auf Layouts Registerkarte auswählen Einzelne Spalte .
    7. Fügen Sie die stilisierte Textkomponente hinzu.
      1. Wählen Sie aus + Symbol in der Mitte der Spalte in der Phase.
      2. Auf Komponenten Suchen und wählen Sie aus Stilisierter Text Komponente.
      3. Wählen Sie im Konfigurationsbereich aus Keine: Konfigurieren Sie die Komponente manuell .
      4. Im Konfigurationsbereich auf Konfigurieren Doppelklicken Sie auf die Registerkarte (oder verwenden Sie die Tastenkombination) in Text Feld zum Auswählen des Standardtexts.
      5. Ersetzen Sie den Standardtext durch Eingabe Administrator-Center Für Arbeitsbereich Für Kritische Vorgänge .

        Konfigurationsbereich für stilisierte Textkomponente mit schwarzem Pfeil, der auf Textfeld zeigt.

      6. Wählen Sie Speichern.
    8. Fügen Sie etwas Platz um die stilisierte Textkomponente hinzu, und zentrieren Sie sie.
      1. Wählen Sie in der Inhaltsstruktur aus Stilisierter Text 1 .
      2. Wählen Sie im Konfigurationsbereich aus Stile Registerkarte.
      3. In Abstand , Auswählen Marge .
      4. Wählen Sie Aus Groß In der Liste.

        Konfigurationsbereich für stilisierte Textkomponente mit schwarzem Pfeil, der auf die Randoption zeigt, und Option für große Größe.

      5. In Ausrichtung , Wählen Sie das Symbol in der Mitte aus.

        Konfigurationsbereich für stilisierte Textkomponente mit schwarzem Pfeil, der auf das mittlere Symbol für das Ausrichtungsfeld zeigt.

      6. Wählen Sie Speichern.
      Die Phase wird automatisch aktualisiert, zeigt den zusätzlichen Leerraum um die stilisierte Textkomponente an und zentriert sie.
    9. Wählen Sie das Tablet-Formfaktor-Symbol aus.

      Schwarzer Pfeil, der auf das Tablet-Formfaktorsymbol oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

      Der Abstand und die Überschriftengröße der stilisierten Textkomponente sehen bei der Tabletgröße gut aus.

    10. Wählen Sie das Symbol für den mobilen Formfaktor aus.

      Schwarzer Pfeil, der auf das Symbol für den mobilen Formfaktor oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

      Die stilisierte Textkomponente verwendet viel vertikalen Platz bei kleinerer Größe.

      Seite, die im mobilen Formfaktor angezeigt wird, mit großem Rand um die stilisierte Textkomponente und H1-Überschriftengröße.

    11. Entfernen Sie den zusätzlichen Margenbereich, und machen Sie die Überschrift nur für den mobilen Formfaktor kleiner.
      1. Wählen Sie in der Inhaltsstruktur aus Stilisierter Text 1 .
      2. Wählen Sie im Konfigurationsbereich aus Stile Registerkarte.
      3. In Abstand , Auswählen Marge .
      4. Wählen Sie Aus 0 In der Liste.
      5. Wählen Sie aus Konfigurieren Registerkarte.
      6. In HTML-Registerkarte , Auswählen H3 .
      7. Wählen Sie Speichern.
      Die Phase wird automatisch aktualisiert und zeigt an, dass die stilisierte Textkomponente weniger Platz verbraucht.

      Seite, die im mobilen Formfaktor angezeigt wird, mit einem Rand von null um die stilisierte Textkomponente und einer reduzierten Überschriftengröße.

    12. Wählen Sie das Tablet und die Desktop-Formfaktor-Symbole oben aus, um zu bestätigen, dass keine Änderungen an den größeren Formfaktoren vorgenommen wurden.