Best Answer Marcel Schmidt , 20 July 2020 - 20:35
Hallo Alex,
das ist an der Stelle etwas aufwendiger als einfach eine Grafik hinzuzufügen.
Du findest in deinem Shop-Verzeichnis unter Plugins > SmartStore.PageBuilder > Views > Story > OverlayTemplates > Dividers
alle Divider, die out-of-the-box dabei sind. Diese .cshtml Dateien beinhalten die nötige HTML-Klassenstruktur und Pfad angaben für das SVG-Trennelement.
Dies sieht für "Hills1" so aus:
@model DividerOverlay
<svg xmlns="http://www.w3.org/2000/svg" class="divider" viewBox="0 0 1280 140" preserveAspectRatio="none"><g class="divider-g"><path class="divider-path divider-o1" d="M0 47.44L170 0l626.48 94.89L1110 87.11l170-39.67V140H0V47.44z" /><path class="divider-path" d="M0 90.72l140-28.28 315.52 24.14L796.48 65.8 1140 104.89l140-14.17V140H0V90.72z" /></g></svg>
Nun, du könntest z.B: diese Datei kopieren und die path tags mit deinen Pfad-angaben füllen.
Du kannst nun z.B. die Pfadwerte von einem deiner SVGs nehmen. Du erhalten die Pfaddaten wenn du z.B. das SVG im Browser öffnest und du dir den Quellcode anschaust.
Die Klassen divider-o1 bis divider-o4 bestimmen halbtransparente flächen. Dies kannst du ignorieren wenn dein SVG nur aus einem path-Element besteht.
U.u. müssen die Daten bei viewbox und aspectRatio modifiziert werden.
Anbei ein kleiner, nicht schöner, custom Divider.
Eine genauere Erläuterung bezüglich custom Divider wird demnächst zur Dokumentation hinzugefügt.
Beste Grüße
Go to the full post
