Passen Sie Stile für Responsive Authoring an

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Erfahren Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren, wie Sie Stiloptionen ändern, um die Nutzbarkeit 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 Nutzbarkeit von Seiten besteht darin, Komponenten mit unterschiedlichen Stilen über Haltepunkte hinweg anzupassen. Es gibt zahlreiche Optionen zum Bearbeiten von Stilen. In diesem Verfahren bearbeiten Sie den Rand um die stilisierte Textkomponente und reduzieren die Textgröße, um bei kleineren Formfaktoren weniger Platz zu benötigen.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI 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.
    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.
    4. Überprüfen Sie oben, ob das Symbol für die reaktionsfähige Desktoperstellung 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ügen aus.
    6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
    7. Fügen Sie die stilisierte Textkomponente 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 Stilisierter Text, und wählen Sie sie aus.
      3. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.
      4. Doppelklicken Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren in das Feld Text (oder verwenden Sie die Tastenkombination), um den Standardtext auszuwählen.
      5. Ersetzen Sie den Standardtext, indem Sie Admin Center für Arbeitsbereich für kritische Vorgänge eingeben.

        Konfigurationsbereich für stilisierte Textkomponente mit schwarzen Pfeil, der auf das 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 Stilisierter Text 1aus.
      2. Wählen Sie im Konfigurationsbereich die Registerkarte Stile.
      3. WählenSie unter Abstand die Option Randaus.
      4. Wählen Sie in der Liste Groß aus.

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

      5. Wählen Sie unter Ausrichtungdas Symbol Mitte aus.

        Konfigurationsbereich für stilisierte Textkomponente mit schwarzen Pfeil, der auf das Symbol in der Mitte für das Ausrichtungsfeld zeigt.

      6. Wählen Sie Speichern.
      Die Phase wird automatisch aktualisiert, wobei der zusätzliche Leerraum um die stilisierte Textkomponente angezeigt und zentriert wird.
    9. 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 Größe der Überschrift der stilisierten Textkomponente entsprechen der Tablet-Größe.

    10. 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 stilisierte Textkomponente nimmt bei geringerer Größe viel vertikalen Platz ein.

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

    11. Entfernen Sie den zusätzlichen Randbereich, und verkleinern Sie die Überschrift nur für den mobilen Formfaktor.
      1. Wählen Sie in der Inhaltsstruktur Stilisierter Text 1aus.
      2. Wählen Sie im Konfigurationsbereich die Registerkarte Stile.
      3. WählenSie unter Abstand die Option Randaus.
      4. Wählen Sie 0 in der Liste aus.
      5. Wählen Sie die Registerkarte Konfigurieren aus.
      6. Wählen Sie auf der Registerkarte HTMLdie Option H3aus.
      7. Wählen Sie Speichern.
      Die Phase wird automatisch aktualisiert und zeigt an, dass die stilisierte Textkomponente weniger Platz benötigt.

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

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