Freigeben über


Themenübersicht

Hinweis

In Power Apps-Portale ist die Funktion Standarddesign aktivieren auf Aus eingestellt. Wenn Sie diese Funktion aktivieren, können Sie Standardthemen verwenden, die Voreinstellungen genannt werden. Sie können auch Kopien der voreingestellten Designs für zusätzliche Anpassungen erstellen.

In diesem Artikel werden Sie durch die Funktion für grundlegende Designs geführt. Informationen zur erweiterten Anpassung von Designs finden Sie unter CSS bearbeiten.

Grundlegende Themen für vorhandene Portale aktivieren

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Navigationsbereich Apps und dann das Portal aus.

    Apps und ein Portal auswählen

  3. Wählen Sie Weitere Befehle (...) und dann Bearbeiten aus.

    Ein Portal bearbeiten

  4. Wählen Sie im linken Navigationsbereich Designs aus und aktivieren Sie dann die Umschalttaste Standarddesign aktivieren.

    Standarddesigns aktivieren

Ändern Sie das Design für Ihr Portal

Sie können jedes vorhandene Design in Ihrem Portal auf ein Standarddesign festlegen.

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Navigationsbereich Apps und dann das Portal aus.

  3. Wählen Sie Weitere Befehle (...) und dann Bearbeiten aus.

  4. Wählen Sie im Komponentenbereich Design aus.

    Designsymbol auswählen

  5. Wählen Sie ein Standarddesign aus den verfügbaren Voreinstellungen aus (in unserem Beispiel haben wir Grün ausgewählt).

    Ein Standarddesign auswählen

Das ausgewählte Design wird auf Ihr Portal angewendet.

Angewendetes Design

Hinweis

Wählen Sie nach dem Ändern des Designs oder der Designeigenschaften wie Farben in Studio die Option Website durchsuchen aus, um die Änderungen in einer separaten Browserregisterkarte anzuzeigen. Wenn Sie mit dieser Methode mehrere Änderungen vornehmen und zu verschiedenen Seiten im Browser wechseln, kann der veraltete Browser-Cache dazu führen, dass Ihr Browser Designänderungen anzeigt, die nicht aktuell sind. Verwenden Sie in diesem Fall STRG+F5, um die Seite neu zu laden.

Erstellen eines neuen Designs

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Navigationsbereich Apps und dann das Portal aus.

  3. Wählen Sie Weitere Befehle (...) und dann Bearbeiten aus.

  4. Wählen Sie im Komponentenbereich Design aus.

  5. Wählen Sie Neues Design aus.

    Erstellen eines neuen Designs

Designdetails bearbeiten

Sie können den Namen, die Beschreibung, die Farbe und andere Typografieeinstellungen des Designs in Power Apps Studio aktualisieren.

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Navigationsbereich Apps und dann das Portal aus.

  3. Wählen Sie Weitere Befehle (...) und dann Bearbeiten aus.

  4. Wählen Sie aus dem Komponentenbereich Design aus.

  5. Wählen Sie das aktuell angewendete Design aus oder wählen Sie ein neues Design aus den Voreinstellungen aus. Durch Auswahl eines Designs wird der Detailbereich auf der rechten Seite Ihres Arbeitsbereichs geöffnet.

    Designdetails

  6. Bearbeiten Sie Designdetails wie Name, Beschreibung und Farbe für verschiedene Bereiche.

    Farboption Betroffene Bereiche
    Primär Farbe von Links und Schaltflächen.
    Überschrift Hintergrundfarbe für Kopfzeile.
    Kopfzeilenmenü-Text Textfarbe für das Kopfzeilenmenü.
    Mauszeiger des Kopfzeilenmenüs Hintergrundfarbe von Menüelementen, wenn der Mauszeiger darauf zeigt.
    Textkörperhintergrund Hintergrundfarbe für den Textbereich.
    Fußzeilenhintergrund Hintergrundfarbe für die Fußzeile.
    Fußzeilentext Textfarbe für Fußzeile.
  7. Speichern und veröffentlichen Sie die Änderungen.

Ein voreingestelltes Design kopieren

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Navigationsbereich Apps und dann das Portal aus.

  3. Wählen Sie Weitere Befehle (...) und dann Bearbeiten aus.

  4. Wählen Sie aus dem Komponentenbereich Design aus.

  5. Wählen Sie das Thema aus den Voreinstellungen aus, das Sie kopieren möchten, wählen Sie ... und dann Anpassen aus.

    Voreingestelltes Design kopieren

  6. Aktualisieren Sie die Designdetails wie im vorherigen Abschnitt beschrieben, und speichern Sie das Design.

SaaS-Variablen

SaaS ist eine Stylesheet-Sprache mit vollständig CSS-kompatibler Syntax. Wenn Sie die Funktion „Standarddesign aktivieren“ aktivieren, können Sie anstelle von Werten zum Konfigurieren von Designfarben SaaS-Variablen verwenden.

Wenn Sie beispielsweise die Farbe der Kopfzeile 25 Prozent heller als die Primärfarbe einstellen möchten, können Sie anstelle einer bestimmten Farbe den folgenden Wert verwenden:

lighten($primaryColor, 25%);

SaaS-Beispiel

Sie können die folgenden SaaS-Variablen mit grundlegenden Themen verwenden:

Farboption SaaS-Variablenname
Primär $primaryColor
Überschrift $headerColor
Kopfzeilenmenü-Text $headerMenuTextColor
Mauszeiger des Kopfzeilenmenüs $headerMenuHoverColor
Textkörperhintergrund $bodyBackground
Fußzeilenhintergrund $footerColor
Fußzeilentext $footerTextColor

Reihenfolge der SaaS-Variablen

SaaS-Variablen arbeiten von oben nach unten. Sie können die Farbe der Kopfzeile auf lighten($primaryColor, 25%); festlegen. Sie können jedoch die Primärfarbe nicht auf lighten($headerColor, 25%); festlegen, da sich Kopfzeile in der Liste der Farboptionen unter Primär befindet.

Überlegungen zum Standarddesign

  • Sie können nicht zwei Designs mit demselben Designnamen oder demselben Namen der Designdatei haben.
  • Jeder manuell eingegebene Farbwert muss für eine gültige Farbe gelten.
  • Das Wechseln des CSS für voreingestellte Designs wird nicht unterstützt.
  • Das empfohlene Kontrastverhältnis für Vordergrund- und Hintergrundfarbe beträgt 4.5: 1, um die Zugänglichkeit zu gewährleisten.

Nächste Schritte

Design-CSS bearbeiten

Siehe auch

Power Apps Portale Studio
Websites erstellen und verwalten
WYSIWYG-Editor

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).