Mit Stilvoreinstellungen arbeiten

Artikel
07/30/2024

In diesem Artikel wird beschrieben, wie Sie mit vordefinierten Stilen in Microsoft Dynamics 365 Commerce Site Builder arbeiten.

Ein voreingestellter Stil ist ein gespeicherter Satz aller autorisierbaren Stilwerte für das Thema einer Site. Es kann verwendet werden, um das Aussehen einer Site sofort vom Site Builder aus zu ändern. Mit Stilvoreinstellungen können Commerce Site Builder-Autoren schnell eine Reihe von Stilwerten auf ihrer Website ändern, in der Vorschau anzeigen und aktivieren, ohne Cascading Style Sheets verwenden zu müssen (CSS) oder Themen bereitstellen. Schriftstile, Schaltflächenstile und Site-Farben sind typische Beispiele für Stilvariablen, die über Stilvoreinstellungen verwaltet werden können.

Der Satz von Stilvariablen, der auf einer Site verfügbar ist, wird durch die Themen- und Modulbibliothek bestimmt, die für den Mandanten einer Site bereitgestellt wird. Mit dem Dynamics 365 Commerce Online Software Development Kit (SDK) können Entwickler so viele (oder so wenige) autorisierbare Stilvariablen implementieren, wie sie für ein bestimmtes Thema benötigen. Durch die Aktivierung weiterer Stilvariablen kann ein Theme-Entwickler den Autoren des Site Builders die endgültige Auswahl der Site-Stile überlassen. Daher können Nichtentwickler mithilfe des Toolset Site-Stile aktualisieren und in der Vorschau anzeigen. Die Funktion ist auch für alle Szenarien nützlich, in denen direkte Änderungen an Themen oder CSS unnötigen Overhead verursacht.

Für Themen, für die autorisierbare Stilvariablen aktiviert sind, ist eine Standardstilvoreinstellung erforderlich. Sie können optional zusätzliche voreingestellte Optionen als Teil eines bereitgestellten Themenpakets enthalten. Beispielsweise kann ein Thema bereitgestellt werden, für das eine einzige Standardvoreinstellung im Stil modern light festgelegt ist. Alternativ kann es neben der Standardvoreinstellung zusätzliche Stilvoreinstellungsoptionen enthalten, z. B. „modern dunkel“, „klassisch hell“ oder „klassisch dunkel“. Diese integrierten Themenvorgaben werden von Entwicklern erstellt und können als Ausgangspunkte für neue Website-Designs verwendet werden.

Im Site Builder können Autoren unter den integrierten Voreinstellungen eines Themas auswählen oder mithilfe der aktivierten Stilvariablen ihre eigenen Stilvoreinstellungen und Anpassungen erstellen. Eine Stilvoreinstellung kann im Site Builder in der Vorschau angezeigt werden, bevor sie auf der Live-Site aktiviert wird. Nachdem die Stiländerungen eines Autors überprüft wurden, kann die Stilvoreinstellung für die Live-Site auf aktiv gesetzt werden.

Vorschau einer Stilvoreinstellung

Führen Sie die folgenden Schritte aus, um eine Vorschau einer Stilvoreinstellung auf Ihrer Site im Site Builder anzuzeigen.

Gehen Sie im linken Navigationsbereich Ihrer Site zu Seiteneinstellungen > Design.
Auf der Registerkarte Stilvoreinstellungen oben im Design-Editor in der Liste Verfügbare Voreinstellungen wählen Sie eine Voreinstellung und wählen Sie dann Ansicht, um zum voreingestellten Editor zu gehen.

Wenn derzeit keine Voreinstellungen in der Liste Verfügbare Voreinstellungen vorhanden sind, gehen Sie zu Erstellen Sie eine benutzerdefinierte Stilvoreinstellung für Informationen zum Erstellen einer benutzerdefinierten Stilvoreinstellung.

Notiz

Voreinstellungen, die im Thema enthalten waren, sind mit einem eingbauten Zeichen angegeben. Diese integrierten Voreinstellungen sind schreibgeschützt. Um eine integrierte Voreinstellung als neue anpassbare Voreinstellung zu kopieren, wählen Sie die Schaltfläche mit den Auslassungspunkten (..) für die Voreinstellung und wählen Sie dann Speichern als.
Wählen Sie in der Befehlsleiste Vorschau aus.
Wählen Sie eine URL von Ihrer Site aus, die zur Vorschau der Stilvoreinstellung verwendet werden soll, und wählen Sie dann aus OK.
Wählen Sie die kanalspezifische und länderspezifische URL-Variante für die Vorschau aus, indem Sie den Namen der Variante auswählen. Ein neues Vorschau-Browserfenster wird geöffnet, in dem die ausgewählte Stilvoreinstellung auf die angegebene Seite angewendet wird.

Notiz

Die Vorschau-URL ist dauerhaft und authentifiziert. Daher können Sie sie kopieren, einfügen und zur Überprüfung an andere authentifizierte Mitarbeiter senden, bevor Sie sie auf Ihrer Live-Site auf aktiv setzen. Die Vorschau-URL ist auch nützlich, um Stile auf verschiedenen Geräten, in verschiedenen Browsern und auf verschiedenen Bildschirmen zu überprüfen.

Tipp

Während Sie eine Stilvoreinstellung bearbeiten, ist es möglicherweise hilfreich, das Vorschau-Browserfenster in einem separaten Browserfenster geöffnet zu lassen, damit Sie Ihre Änderungen schnell überprüfen können. Nachdem Sie Ihre Änderungen in einer Voreinstellung gespeichert haben, aktualisieren Sie das geöffnete Vorschau-Browserfenster, um die Benutzererfahrung zu überprüfen.

Erstellen Sie eine benutzerdefinierte Stilvoreinstellung

Um einen benutzerdfinierten Stil im Site Builder voreinzuzstellen, folgen Sie diesen Schritten.

Gehen Sie im linken Navigationsbereich Ihrer Site zu Seiteneinstellungen > Design.
Auf der Registerkarte Stilvoreinstellungen wählen Sie oben im Design-Editor in der Befehlsleiste die Registerkarte Neue Voreinstellung.
Geben Sie einen Namen und eine neue Beschreibung für die neue Voreinstellung ein und wählen Sie Speichern. Es wird eine neue anpassbare Voreinstellung erstellt, die die Standardwerte des Themas als Ausgangspunkt verwendet.

Notiz

Sie können auch eine neue benutzerdefinierte Stilvoreinstellung aus einer vorhandenen Voreinstellung erstellen, indem Sie auf die Schaltfläche mit den Auslassungspunkten (...) für diese Voreinstellung klikcne und dann Speichern als auswählen. Alternativ wählen Sie Speichern als in der Befehlsleiste im voreingestellten Editor.

Ändern Sie globalen und Modultyp-Stilwerte

Einige Stilvariablen eines Themas werden von mehreren Modultypen gemeinsam genutzt. Diese Stilvariablen werden als globale Stilvariablen bezeichnet. Beispiele hierfür sind primäre Site-Farben, Standard-Schriftstile und Schaltflächenstile. Durch Festlegen globaler Variablen können Sie das Erscheinungsbild für viele verschiedene Modultypen ändern.

Einige Stilwerte können für einen Modultyp eindeutig sein oder müssen optional einen globalen Standardwert überschreiben. Wenn das Design einer Site Modultyp-Stilvariablen implementiert hat, können Site Builder-Autoren den Stil eines Modultyps unabhängig von den globalen Einstellungen anpassen. Modultypvariablen können die globalen Stilvariablen in einem Thema entweder erweitern oder überschreiben.

Notiz

Die Hierarchie der Stilwerte in einer Site verhält sich wie folgt. Stilwerte, die weiter rechts angezeigt werden, überschreiben die Stilwerte links davon.

Standardwerte des Themas < Globale Stilwerte < Modultyp-Stilwerte < CSS überschreiben

Führen Sie die folgenden Schritte aus, um die globalen Werte oder die Modultypwerte einer Stilvoreinstellung im Site Builder zu ändern.

Gehen Sie im linken Navigationsbereich Ihrer Site zu Seiteneinstellungen > Design.
Auf der Registerkarte Stilvoreinstellungen wählen Sie oben im Design-Editor die Registerkarte Anzeige für jede Stilvoreinstellung an, um zum Voreinstellungseditor zu gehen.
Wählen Sie Vorschau und befolgen Sie anschließend die Schritte zur URL-Auswahl, um eine Vorschau des vollständigen Browserfensters für Ihre Voreinstellung zu öffnen. Lassen Sie dieses Vorschau-Browserfenster geöffnet.
Wählen Sie im voreingestellten Editor oben rechts Bearbeiten aus.
Verwenden Sie die Steuerelemente für Stilvariablen im Editor, um einige globale Stilwerte zu ändern.
Oben im Editor auf der Registerkarte Module wählen Sie die Registerkarte Global und wählen Sie einen Modultyp, der gestaltet werden muss.
Verwenden Sie die Stilsteuerelemente, um einige Werte für den Modultyp zu ändern.
Wenn Sie eine Vorschau Ihrer Änderungen anzeigen möchten, wählen Sie speichern in der Befehlsleiste.
Kehren Sie zum geöffneten Vorschau-Browserfenster zurück und aktualisieren Sie es. Die Vorschau des vollständigen Browserfensters ist nützlich, um Stiländerungen an verschiedenen Ansichts-Haltepunkten, in verschiedenen Browsern und auf verschiedenen Geräteplattformen zu überprüfen.
Wenn alle Änderungen abgeschlossen und validiert wurden, wählen Sie Beenden Sie die Bearbeitung oben rechts im Editor.

Notiz

Wenn Sie die Stilvoreinstellung bearbeiten, die derzeit auf Ihrer Site aktiv ist, sehen Sie ein blaues aktives Abzeichen im Editor. Dieses Abzeichen zeigt an, dass die Voreinstellung derzeit auf Ihrer Website aktiv ist. Wenn Sie die aktive Voreinstellung ändern, wählen Sie Veröffentlichen, um diese Änderungen auf Ihre Live-Site zu übertragen.

Aktivieren Sie eine neue Stilvoreinstellung auf Ihrer Live-Site

Führen Sie die folgenden Schritte aus, um eine Stilvoreinstellung als neue aktive Voreinstellung auf Ihrer Site festzulegen.

Wählen Sie Als aktive Schaltfläche einstellen an einem dieser Orte:
- Die Befehlsleiste im Stilvoreinstellungseditor
- Das Auslassungsmenü (...) für alle verfügbaren Voreinstellungen in der Hauptansicht auf der Registerkarte Stilvoreinstellungen unter Seiteneinstellungen > Design

Die Stilwerte der Voreinstellung werden auf Ihrer öffentlich zugänglichen Website aktiviert.