Digital Publishing

Einleitung

Mit Digital Publishing kannst du ganz einfach ansprechende Banner erstellen, ohne dass du dafür eine Grafik-Software oder HTML-Kenntnisse benötigst. Dabei kann ein Banner neben Bildern oder farbigen Flächen auch HTML-Text oder Buttons enthalten.

Installation

Die Installation des Plugins erfolgt wie gewohnt über den Plugin Manager. Weitere Informationen findest Du hier. Nach der Installation sollte das Backend einmal neu geladen werden, damit das Modul unter Marketing > Digital Publishing angezeigt wird.

Grundlegendes

Ein DigitalPublishing-Banner besteht im Grunde aus drei über- bzw. ineinander liegenden "Arbeitsflächen":

  • Das Banner selber, dem Du ein Hintergrundbild oder -farbe geben kannst.
  • Darin kannst Du eine beliebige Anzahl Ebenen erstellen. Ebenen beeinflussen sich nicht gegenseitig, sondern werden übereinander gestapelt.
  • Eine Ebene wiederum kann eine beliebige Anzahl Elemente (Text/Bild/Button) beinhalten. Elemente verhalten sich relativ zueinander, jedes Element wird in einer neuen Reihe unterhalb des vorherigen Elementes angeordnet.

Das Modul

Das Modul erscheint nach dem Öffnen wie folgt:

  • Neues Banner (1): Erstellt ein neues Banner, welches auch in der darunter liegenden Tabelle angezeigt wird.
  • Bannerliste (2): Hier werden Dir alle vorhandenen Banner angezeigt.
  • Suche (3): Hier kannst Du die Bannerliste nach Namen durchsuchen.
  • Informationen / Vorschaubereich (4): In diesem Bereich wird bei Klick auf ein Banner nicht nur die Vorschau angezeigt, sondern auch ein Template-Code ausgegeben, mit dem das Banner manuell in ein Template eingebunden werden kann.

Ein Banner anlegen

Wenn Du ein neues Banner erstellst, öffnet sich ein (noch unbenannter) Tab. Sobald dem Banner ein Name gegeben wurde, ändert sich dies automatisch.
Das Tab teilt sich in zwei Bereiche auf. Auf der linken Seite kann das Banner konfiguriert werden, auf der rechten Seite findet sich die Vorschau.

  • Neue Ebene (1): Über diesen Button legst Du eine neue Ebene an. Eine Ebene wird später die verschiedenen Elemente wie Text, Bilder oder Buttons enthalten.
  • Neues Element (2): Hierüber kannst Du einer Ebene neue Elemente hinzufügen. Dieser Button wird erst klickbar, wenn sie sich in einer Ebene befinden, da sie nur innerhalb einer Ebene ein Element platzieren können.
  • Baumstruktur (3): In diesem Bereich werden alle Ebenen und Elemente die ein Banner beinhaltet, in einer Baumstruktur angezeigt.
  • Einstellungen (4): Hier werden die Grundeinstellungen eines Banner bzw. der Ebenen und Elemente angezeigt.
  • Vorschau (5): Hier wird die Vorschau des Banners angezeigt. Diese Vorschau ist live und aktualisiert sich automatisch, wenn Du die Einstellungen änderst oder neue Elemente einfügst. Das Vorschau-Fenster kann durch anfassen der blauen Balken in der Größe verändert werden.
  • Test Größen (6): Hier finden sich einige vordefinierte Größen bzw. Seitenverhältnisse zum schnellen Testen in der Vorschau.

Die Einstellungen

1. Banner

Das Banner stellt die Grundfläche des Digital Publishing dar. Es gibt den Rahmen für Ebenen und Elemente vor und beinhaltet das Hintergrundbild- / farbe.

  • Name: Definiert den Namen des gesamten Banners.
  • Hintergrund: Hier kannst Du zwischen Bild und Farbe wählen.
  • Bild
    Bei Bildern kann zwischen den Modi Füllen und Wiederholen gewählt werden. Bei letzterem wird das Bild in seinen Original-Abmessungen ausgegeben und von oben links nach unten recht wiederholt (entspricht der CSS-Eigenschaft background-repeat: repeat).
    Der Modus Füllen entspricht der CSS-Eigenschaft background-size: cover . Dafür kann auch noch eine Ausrichtung des Fokus bestimmt werden. Wenn Du mehr über den Umgang mit dem Cover-Effekt erfahren möchtest, kannst Du dir die Storytelling-Doku anschauen
  • Farbe
    Um statt einem Hintergrund-Bild eine Farbe zu definieren, hast Du mehrere Möglichkeiten:
  • Farbe (HEX-Wert) über den Colorpicker wählen
  • Farb-Werte direkt eingeben:
  • HEX: #ef002f
  • RGB / RGBA: rgb(45,221,156) / rgba(45,221,156,0.5)
  • HSL / HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.2)

2. Ebene

Ebenen sind Gestaltungsflächen die innerhalb des Banner liegen. Auf ihnen können ein oder mehrere Elemente platziert werden. Es können mehrere Ebenen übereinander gestapelt werden, die Reihenfolge kann per Drag&Drop im Ebenenbaum verändert werden. Mit Hilfe der Ebenen kannst Du bestimmen wo die Elemente auf dem Banner platziert werden.

  • Name: Definiert den Namen der Ebene.
  • Position: Bestimmt von welcher Seite / Ecke aus die Ebene (und damit die Elemente) auf dem Banner platziert werden sollen.
  • Breite: Hier sind folgende Angaben möglich:
  • auto: Die Breite der Ebene richtet sich einzig nach den Elementen die sie beinhaltet.
  • %: Breite in Prozent der Banner-Breite.
  • px: Eine Angabe in Pixel entspricht einem Maximalwert. Sollte das Banner selbst eine geringere Breite haben, verkleinert sich die Ebene automatisch mit.
  • Höhe: Entspricht den Optionen für die Breite.
  • Außenabstand: Definiert den äußeren Abstand der Ebene zu den Rändern des Banner in Pixel. Durch das "Verkettungs"-Icon können alle Werte gleichzeitig angepasst werden.
  • Kanten Radius: Rundet alle 4 Ecken mit einem bestimmten Radius in Pixeln ab (entspricht der CSS-Eigenschaft border-radius)
  • Hintergund: Hier kannst du der Ebene eine Hintergrundfarbe geben. Dabei hast du die gleichen Möglichkeiten wie bei der Hintergundfarbe des Banner selbst:
  • Farbe (HEX-Wert) über den Colorpicker wählen
  • Farb-Werte direkt eingeben:
  • HEX: #ef002f
  • RGB / RGBA: rgb(45,221,156) / rgba(45,221,156,0.5)
  • HSL / HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.2)
  • Link: Hier kann entweder eine URL (beginnend mit http://) verwendet werden, oder über die integrierte Produktsuche ein Produkt verlinkt werden. Dabei wird die ganze Ebene verlinkt.

3. Elemente

Elemente nehmen immer 100% der Breite einer Ebene ein und werden untereinander einer Ebene hinzugefügt. Per Drag&Drop kann auch hier wieder die Reihenfolge der Elemente im Ebenenbaum verändert werden. Auf die gleiche Art können Elemente auch von einer Ebene in eine andere verschoben werden.

a. Text

  • Text: Hier kannst Du den Text definieren, und gleich auch übersetzen für andere Sprachen.
  • Text-Typ: Bestimmt ob der Text als h1, h2, h3, p oder blockquote ausgegeben werden soll. Dies ist für Crawler relevant, da diese die Banner "lesen" und den Inhalt bewerten können.
  • Schriftart: Du kannst aus der Vorauswahl wählen, oder eine eigene Schriftart verwenden, sofern diese im Theme hinterlegt ist.
  • Schriftgröße: Schriftgröße in px.
  • Zeilenhöhe: Zeilenhöhe als Faktor zur Schriftgröße.
  • Schriftfarbe: Hier hast Du wieder die gleichen Möglichkeiten wie bei der Hintergrund-Farbe der Ebene.
  • Ausrichtung: Definiert den Textsatz, möglich sind linksbündig, zentriert, rechtsbündig oder Blocksatz (analog zur CSS-Eigenschaft text-align: left/center/right/justify).
  • Schriftstyle: Setzt das komplette Textelement in fett, kursiv, unterstrichen oder Großbuchstaben.
  • Schatten Farbe: Auch Textschatten kannst Du definieren. Bei der Farbe sind wieder die bekannten Einstellungen möglich.
  • Schatten X: Verschiebt den Schatten auf der X-Achse, also horizontal. Angabe erfolgt in px, Maximalwerte sind +/-20.
  • Schatten Y: Verschiebt den Schatten auf der Y-Achse, also vertikal. Angabe erfolgt in px, Maximalwert sind +/-20.
  • Schatten Blur: Bestimmt die Weichzeichnung des Schattens in px.
  • Abstand: Definiert den Abstand des Elements zu den Rändern der Ebene und zu anderen Elementen innerhalb der Ebene. Durch das "Verkettungs"-Icon können alle Werte gleichzeitig angepasst werden.
  • CSS-Klassen: Du kannst zusätzliche CSS Klassen auf das Element setzen, um z.B. Styles aus dem eigenen Theme anzuwenden.
b. Button

  • Button Text: Hier kannst Du den Text definieren der auf dem Button angezeigt werden soll. Und natürlich übersetzen.
  • Typ: Bestimmt die Darstellung wie z.B. die Highlight-Farbe des Buttons. Die Styles werden automatisch aus der Basiskomponente des Themes bezogen.
  • Ziel: Hier können Sie definieren, ob der Link auf der gleichen Seite oder einer neuen Seite geöffnet werden soll.
  • Link: Hier kann entweder eine URL (beginnend mit http://) verwendet werden, oder über die integrierte Produktsuche ein Produkt verlinkt werden.
  • Ausrichtung: Definiert ob der Button linksbündig, zentriert oder rechtsbündig innerhalb der Ebene positioniert werden soll.
  • Abstand: Definiert den Abstand des Elements zu den Rändern der Ebene und zu anderen Elementen innerhalb der Ebene. Durch das "Verkettungs"-Icon können alle Werte gleichzeitig angepasst werden.
  • CSS-Klassen: Du kannst zusätzliche CSS Klassen auf das Element setzen, um z.B. Styles aus dem eigenen Theme anzuwenden.
c. Bild

  • Bild-Auswahl: Hier kannst Du ein bestehendes Bild aus dem Media-Manager verwenden oder ein neues Bild hochladen.
  • Alternativ-Text: Alt-Text, welcher im Quellcode hinterlegt wird.
  • Maximale Breite: Angabe in Pixel. Sollte das Banner bzw. die Ebene auf der das Bild liegt eine geringere Breite haben, verkleinert sich das Bild automatisch proportional mit.
  • Maximale Höhe: Angabe in Pixel.
  • Ausrichtung: Definiert ob das Bild linksbündig, zentriert oder rechtsbündig innerhalb der Ebene positioniert werden soll.
  • Abstand: Definiert den Abstand des Elements zu den Rändern der Ebene und zu anderen Elementen innerhalb der Ebene. Durch das "Verkettungs"-Icon können alle Werte gleichzeitig angepasst werden.
  • CSS-Klassen: Du kannst zusätzliche CSS Klassen auf das Element setzen, um z.B. Styles aus dem eigenen Theme anzuwenden.

Hinweis: Dort wo Hintergrundfarben definiert werden, z.B. beim Banner selbst oder bei den Ebenen, kannst Du auch mit Verläufen arbeiten. Dabei solltest Du jedoch beachten, dass nicht jeder Browser gleich gut mit CSS-Gradients umgehen kann (insbesondere ältere IE-Versionen). Genaueres dazu findest du auch hier. Falls Du dennoch einen Verlauf benutzen möchtest, musst Du einfach den entsprechenden Wert ohne Semikolon am Ende eintragen, z.B. linear-gradient(to right,#547faf 0%,#6bc6bf 100%)

Workflow im Beispiel

Im Folgenden werden wir beispielhaft das Banner aus der schematischen Darstellung am Anfang des Artikels nachbauen, und schauen, wie sich dieses bei unterschiedlichen Größen verhalten würde.

Step 1: Banner erstellen

Wir erstellen ein Banner, benennen es, und wählen als Hintergrund ein Bild.

Step 2: Erste Ebene erstellen

Die erste Ebene soll unten links auf dem Banner fixiert sein, mit etwas Abstand nach unten und zu den Seiten. Die Ebene, mit türkis-transparenten Hintergund, soll auf größeren Größen breiter sein als der Text vorgeben würde, sich aber erst bei kleineren Größen über die volle Breite erstrecken. Entsprechend tragen wir hier eine maximale Breite von 500px ein. Die Höhe soll aber einzig durch die Textelemente bestimmt werden die sie beinhaltet.
Da die Textelemente erst im nächsten Schritt erstellt werden, und somit noch keinerlei Höhe vorhanden ist, siehst Du so noch nichts von der Ebene. Daher macht es manchmal zum Positionieren und Ausprobieren Sinn, der Ebene temporär eine Höhe von einigen Pixeln zu geben.

Step 3: 1. Textelement einfügen

Wir fügen ein erste Textelement hinzu und stylen den Text. Es empfiehlt sich meistens die Zeilenhöhe leicht zu erhöhen, damit zwischen den Zeilen etwas Luft ist wenn der Text in eine zweite Zeile umbricht. Der Text soll zu den Seiten und nach oben hin etwas Luft zum Ebenenrand haben.

Step 4: 2. Textelement einfügen

Hier gehen wir genauso vor wie beim vorherigen Textelement, nur das wir diesem Element noch etwas Abstand nach oben geben damit er nicht direkt unterhalb des ersten Textes klebt.

Wenn Du nun in der Vorschau die Breite verringerst, siehst Du schon sehr gut wie sich die Ebene und die Texte beim verkleinern verhalten und wann der Text umbricht.

Step 5: Zweite Ebene erstellen

Die zweite Ebene positionieren wir nun rechts unten auf dem Banner. Etwas tiefer als die erste Ebene, aber mit den gleichen Abständen zu den Seiten, damit diese bei geringer Breite des Banners genau übereinander liegen. Diese Ebene soll gleichzeitig ein Link sein, daher fügen wir noch den Link zu der gewünschten Kategorie ein.

Step 6: Textelement einfügen

Dieser Ebene fügen wir nun auch noch einen Text hinzu, wieder mit etwas Luft rundum. Dadurch können wir nun auch die Ebene selbst sehen.

Step 7: Banner prüfen & speichern

Mit Hilfe der Vorschau können wir uns nun anschauen wie sich das komplette Banner bei verschiedenen Größen verhält, und gegebenfalls noch Einstellungen korrigieren. Abschließend speichern wir das Banner und können es nun z.B. in unseren Einkaufswelten verwenden.

Digital Publishing in Einkaufswelten

Deine so erstellten Banner kannst du nun in den Einkaufswelten verwenden. Dafür gibt es in den Einkaufswelten 2 neue Elemente: "Digital Publishing" & "Digital Publishing Slider". Diese haben im Grunde die gleichen Funktionen wie 'Banner' & 'Banner-Slider', nur dass Du statt Bildern DigitalPublishing-Banner auswählen kannst.

Erweitern des Moduls

Für Entwickler besteht zusätzlich die Möglichkeit, neue Elemente für das Digital Publishing Modul zu entwickeln, unsere DevDocs geben hier weitere Informationen zum Thema:

https://developers.shopware.com/developers-guide/digital-publishing-elements/
€ 10,00

Preise inkl. gesetzlicher
MwSt. + Versandkosten*