DokumentationCommerceInhalt und Design

Designs

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Admin
  • Benutzende

Ein Design ist eine Sammlung von Dateien, die die visuelle Präsentation Ihres Stores bestimmen. Wenn Sie Commerce zum ersten Mal installieren, basieren die Designelemente des Stores auf dem Design Standard . Zusätzlich zum ursprünglichen Standarddesign, das mit Ihrer Commerce -Installation geliefert wird, gibt es eine Vielzahl von verfügbaren Designs, die Sie im Ist-Zustand verwenden oder Ihren Anforderungen entsprechend ändern können.

Ein responsives Design passt das Seitenlayout an den Ansichtsport des Geräts an. Das Muster Luma hat ein flexibles, responsives Layout, das vom Desktop, Tablet oder Mobilgerät aus angezeigt werden kann.

Commerce Designs umfassen Layout-Dateien, Vorlagendateien, Übersetzungsdateien und Skins. Eine Skin ist eine Sammlung unterstützender CSS-, Bilder- und JavaScript-Dateien, die zusammen die visuelle Präsentation und Interaktionen erstellen, die Ihre Kunden beim Besuch Ihres Stores erleben. Designs und Skins können von einem Entwickler oder Designer angepasst werden, der mit dem Design von Commerce vertraut ist und Zugriff auf Ihren Server hat. Weitere Informationen finden Sie im Frontend-Entwicklerhandbuch.

Luma-Design

Standarddesign

Das responsive Design Magento Blank rendert die Anzeige Ihrer Storefront für verschiedene Geräte und enthält Best Practices für Desktop-, Tabellen- und Mobilgeräte. Einige Designs sind nur für die Verwendung mit bestimmten Geräten vorgesehen. Wenn Commerce eine bestimmte Browser-ID oder einen Benutzeragenten erkennt, wird das für den jeweiligen Browser konfigurierte Design verwendet. Die Suchzeichenfolge kann auch mit Perl-kompatible reguläre Ausdrücke (PCRE) enthalten.

Designs

Filtern des Themenrasters

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Themes.

  2. Klicken Sie auf Filters.

  3. Geben Sie einen ID-Bereich, einen Designnamen (oder Titel), einen Ordnerpfad oder ein übergeordnetes Design ein.

  4. Klicken Sie auf Apply Filters , um die Liste der Designs zu aktualisieren.

Aktuelle Designeinstellungen anzeigen

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Themes.

  2. Suchen Sie in der Liste der installierten Designs das Thema, das Sie untersuchen möchten, und klicken Sie auf die Zeile, um die Einstellungen anzuzeigen.

  3. Um eine Beispielseite anzuzeigen, klicken Sie auf "Theme Preview Image".

Design-Vorschau anzeigen

Anwenden eines Standarddesigns

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Suchen Sie die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Legen Sie unter Default Theme ​ Applied Theme ​den Wert fest, den Sie für die aktuelle Ansicht verwenden möchten.

    Angewandtes Design {width="600" modal="regular"}

  4. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

Hinzufügen einer Benutzeragenten-Regel

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Klicken Sie unter Design Rule ​auf Add New User Agent Rule.

    Designregel {width="600" modal="regular"}

  3. Geben Sie für "Search String"die Browser-ID für das jeweilige Gerät ein.

    Suchzeichenfolgen werden in der Reihenfolge ihrer Eingabe zugeordnet. Geben Sie beispielsweise für Firefox Folgendes ein:

    /^mozilla/i

  4. Wiederholen Sie den Vorgang, um weitere Geräte aufzurufen.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de