{"id":9865,"date":"2022-01-05T10:27:57","date_gmt":"2022-01-05T10:27:57","guid":{"rendered":"https:\/\/www.bay20.com\/?p=9865"},"modified":"2025-04-24T15:20:11","modified_gmt":"2025-04-24T09:35:11","slug":"wie-erstelle-ich-ein-neues-layout-in-shopware-6","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-erstelle-ich-ein-neues-layout-in-shopware-6\/","title":{"rendered":"Wie kann ich ein neues Layout in Shopware 6 erstellen?"},"content":{"rendered":"\n

By default, shopware provide some layout that we can use. But to create a new custom layout according to your need in shopware 6. You can follow the below steps:<\/p>\n\n\n\n

Schritt 1: <\/strong>Melden Sie sich im Admin-Panel an und gehen Sie zu Inhalt > Einkaufserlebnisse.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Schritt 2: <\/strong>Klicken Sie auf die Schaltfl\u00e4che \u201eNeues Layout erstellen\u201c<\/strong>, um ein neues Layout zu erstellen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Schritt 3: <\/strong>Jetzt m\u00fcssen Sie den Layout-Typ ausw\u00e4hlen. W\u00e4hlen Sie einen davon nach Ihrem Bedarf<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
  1. Shop-Seite: <\/strong>Alle Serviceseiten des Shops werden als Shopseite bezeichnet. Z.B.: AGB-Seite, Kontaktformular und Versandbedingungen.<\/li>
  2. Landing Page: <\/strong>Sie bietet Ihnen eine breite Palette an Gestaltungs- und Marketingm\u00f6glichkeiten in Ihrem Shop. Dies k\u00f6nnen Themenseiten sein, auf denen Marketing betrieben werden kann.<\/li>
  3. Auflistungsseite:<\/strong> Sie ist im Grunde eine Produktauflistungsseite. Auf einer Auflistungsseite k\u00f6nnen Sie dynamisch Texte aus der entsprechenden Kategorie anzeigen.<\/li>
  4. Produktseite: <\/strong>Jedes Produkt hat eine eigene Produktseite, auf der alle Informationen \u00fcber dieses Produkt zu finden sind und auf der das Produkt in den Warenkorb gelegt werden kann.<\/li><\/ol>\n\n\n\n

    Hinweis: Diese verschiedenen Layout-Typen helfen Ihnen, vorhandene Layouts schneller zu finden. Sie k\u00f6nnen den Layout-Typ auch nachtr\u00e4glich jederzeit \u00fcber die Layout-Einstellungen \u00e4ndern. Ich werde ein Shop-Seitenlayout erstellen, um Ihnen zu zeigen, wie es erstellt wird.<\/strong><\/p>\n\n\n\n

    Schritt 4: <\/strong>W\u00e4hlen Sie den gew\u00fcnschten Abschnittstyp. Abschnitte unterteilen Ihre Arbeitsfl\u00e4che in Bereiche und helfen Ihnen, kreativer zu sein. Sie k\u00f6nnen verschiedene Abschnitte kombinieren und sie jederzeit verschieben oder l\u00f6schen.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    1. Seitenleiste: <\/strong>Die Seitenleiste kann verwendet werden, um die Kategorienavigation, Filter oder beides anzuzeigen.<\/li>
    2. Volle Breite: <\/strong>Sie deckt den gesamten Bereich zur Gestaltung des Layouts ab.<\/li><\/ol>\n\n\n\n

      Schritt 5: <\/strong>Nach der Auswahl des Abschnittstyps. Geben Sie den Namen des Layouts ein und klicken Sie auf die Schaltfl\u00e4che \u201eLayout erstellen\u201c.<\/strong><\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 6: <\/strong>Klicken Sie auf das Plus-Symbol ( + )<\/strong>, um die Optionen f\u00fcr die Blockkategorie auszuw\u00e4hlen.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 7: – <\/strong>Es gibt verschiedene Optionen f\u00fcr die Blockkategorien: Text, Bilder, Video, Text & Bilder, Handel, Seitenleiste, Formular. <\/strong>Sie k\u00f6nnen eine von ihnen je nach Ihren Anforderungen ausw\u00e4hlen.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 8: <\/strong>Ich w\u00e4hle die Option Bilder. In der Kategorie \u201eBl\u00f6cke\u201c sind verschiedene vordefinierte Bl\u00f6cke verf\u00fcgbar.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 9: <\/strong>Sie k\u00f6nnen sie per Drag & Drop in den Editor ziehen und an der gew\u00fcnschten Stelle platzieren.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 10: <\/strong>Klicken Sie auf die Option \u201eEinstellung\u201c<\/strong>, um die Bilder hinzuzuf\u00fcgen.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 11: <\/strong>Klicken Sie auf die Schaltfl\u00e4che Datei hochladen, um ein Bild hinzuzuf\u00fcgen. Nachdem Sie das Bild hochgeladen haben, klicken Sie auf die Schaltfl\u00e4che \u201eFertig\u201c<\/strong>.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 12: <\/strong>Klicken Sie nun auf die Schaltfl\u00e4che Speichern<\/strong>, um den gesamten Fortschritt zu speichern und das von Ihnen erstellte Layout im Frontend anzuzeigen.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 13: <\/strong>Gehen Sie zu Kataloge>Kategorien<\/strong> und klicken Sie auf die Kategorie, der Sie dieses Layout zuordnen m\u00f6chten. Ich werde dieses Layout der Kategorie \u201eDemo\u201c<\/strong> zuweisen.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 14: <\/strong>Gehen Sie zur Option Layout<\/strong> und klicken Sie auf die Schaltfl\u00e4che Layout \u00e4ndern<\/strong>, um das aktuelle Layout zu \u00e4ndern, das der Kategorie Demo zugeordnet ist.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 15:<\/strong> W\u00e4hlen Sie das Layout, das wir in den obigen Schritten erstellt haben, und klicken Sie auf die Schaltfl\u00e4che Speichern.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Schritt 16: <\/strong>Klicken Sie nun auf die Schaltfl\u00e4che Speichern <\/strong>der Kategorien.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Ergebnis<\/strong><\/p>\n\n\n\n

      \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

      Shopware provide some layout that we can use. But to create a new custom layout according to your need in shopware 6.<\/p>\n","protected":false},"author":74,"featured_media":9939,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,115,91],"tags":[],"class_list":["post-9865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-6","category-shopware-6-anleitungen"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=9865"}],"version-history":[{"count":10,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9865\/revisions"}],"predecessor-version":[{"id":16432,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9865\/revisions\/16432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/9939"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=9865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=9865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=9865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}