> For the complete documentation index, see [llms.txt](https://docs-sw5.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-sw5.zenit.design/plugins/banner-mapping-advanced/erstellen-eines-bild-mappings.md). # Erstellen eines Bild-Mappings Das Plugin Banner Mapping Advanced greift auf die erstellten Mappings der Einkaufswelten Banner zu. Das Mapping ist eine Standard-Funktion von Shopware und kann in den Einkaufswelten Bannern Elementen erstellt werden. Navigiere dazu unter **Marketing** > **Einkaufswelten**. Hier kannst Du eine bestehende Einkaufswelt bearbeiten oder eine neue Einkaufswelt anlegen. (Weitere Informationen zum Anlegen einer Einkaufswelt findest Du hier: ) Nachdem Du eine Einkaufswelt angelegt hast kannst Du ein Banner Element im Raster der Einkaufswelt platzieren. Über die Felder des Elementes kannst Du ein Bild hochladen, welches als Banner genutzt wird. ![](/files/-MJBXk7aU2P8vgdcynm8) Im Banner Element kannst Du ein Banner einbinden und entsprechend verlinken, das Link-Ziel definieren, einen Titel vergeben und eine CSS-Klasse auf das Element setzen. Wenn hier ein Banner hochgeladen wird, erscheint dies als Vorschau im unteren Bereich des Elements. Die Vorschau enthält ein 3x3 Raster, dies erfährt Bedeutung, wenn Deine Einkaufswelt den fluiden Effekt nutzt. Der Effekt sieht vor, Elemente immer zu füllen, dazu wird an einigen Stellen auch Bildmaterial abgeschnitten. Über das Setzen des Rasters kann hierzu ein Ausgangpunkt für den Zoom verwendet werden. So wird sichergestellt, dass der wichtigste Inhalt des Bildes stets zu sehen bleibt. Setze diese Einstellung durch Klicken in das entspechende Feld im Raster. Weiter kann im Banner Element noch die Mapping-Funktion genutzt werden. Dadurch ist es möglich, einzelne Bereiche des Banners zu verlinken und z.B. auf verschiedene Artikeldetailseiten zu verweisen. Per Klick auf **Bild-Mapping anlegen:** öffnet sich die folgende Ansicht: ![](/files/-MJBXo7RRlEna7UnpwCY) Durch Klicken auf den Button "**Neues Mapping Anlegen**" **(A)** können beliebig viele Mappings angelegt werden. Diese erscheinen als Liste unterhalb des Bildes **(B)**. Im Folgenden erscheint ein Rechteck **(1)**, welches über die Ziehpunkte verschoben und vergrößert oder verkleinert werden kann: ![](/files/-MJBXs13WhvRhhqhJclz) Hier wird das Banner in Originalgröße angezeigt und Du kannst nun neue Mappings erstellen. Diese kannst Du frei auf dem Banner **(1)** platzieren und über die dazugehörige Zeile im Mapping **(2)** verlinken. Hierbei kann der **(3)** Link-Typ (intern, extern), **(4)** Titel, sowie **(5)** "Titel als Tooltipp" konfiguriert werden. Das Mapping verhält sich analog zum Zoom. Es zoomt also dynamisch mit, sodass die Positionen im Bild weiterhin bestehen bleiben. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs-sw5.zenit.design/plugins/banner-mapping-advanced/erstellen-eines-bild-mappings.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.