Inhalte aufrufen

Profilbild

Benutzerdefinierte "Trenner" PB


  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
1 Antwort zu diesem Thema

#1 Alexander V

Alexander V

    Erfahrener Benutzer

  • Members
  • 255 Beiträge

Geschrieben: 20 July 2020 - 10:58

Hallo zusammen,

 

wie kann ich eigene "Trenner-Grafiken" hinzufügen?

 

Lg, Alex



#2 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 107 Beiträge

Geschrieben: 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

Angehängte Bilder


  • stefanmueller gefällt das