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

Diese Erweiterung findest Du in unserem Shopware Store, der einfachste Weg, eine bestimmte Erweiterung zu finden, ist die Suchleiste.
Nachdem Du den Bestellvorgang abgeschlossen hast, logge Dich in das Backend Deines Shops ein. Jetzt gehst du zu Konfiguration > Plugin-Manager > Meine Einkäufe. Du musst dich einloggen und auf die Schaltfläche Aktualisieren klicken. Die neue Erweiterung ist nun aufgelistet und kann installiert werden. Nach der Installation der Erweiterung gehst Du auf den Menüpunkt Installiert und aktualisierst die Übersicht. Jetzt kannst Du die Erweiterung aktivieren. Abschließend löscht Du unter Einstellungen > Cache/Performance > Shop-Cache löschen den Cache und aktualisierst das Backend.

Grundlegendes

Ein Digital Publishing-Banner besteht im Grunde aus mehreren übereinanderliegenden "Arbeitsflächen":

Zuerst gibt es das Banner, dem Du einen Namen und ein Hintergrundbild bzw. -farbe geben kannst.
Innerhalb dieses Banners kannst Du eine beliebige Anzahl an Ebenen erstellen. Ebenen beeinflussen sich nicht gegenseitig, sondern werden übereinander gestapelt und funktionieren im Grunde wie aus gängigen Bildbearbeitungsprogrammen bekannt.
Eine Ebene wiederum kann eine beliebige Anzahl von insgesamt drei verschiedenen Elementen (Text/Bild/Button) beinhalten. Elemente verhalten sich relativ zueinander, jedes Element wird in einer neuen Zeile 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. In diesem Beispiel ist die Liste noch leer.
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.

Wenn Du ein neues Banner erstellst, öffnet sich ein (noch unbenannter) Tab. Sobald dem Banner ein Name gegeben wurde, ändert sich dieser 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. Ebenen werden 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 Du Dich in einer Ebene befindest, da Du Elemente nur innerhalb einer Ebene platzieren kannst.
Baumstruktur (3): In diesem Bereich werden alle Ebenen und Elemente die ein Banner beinhalten, 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 der verschiedenen Banneransichten in der Vorschau.

Die Einstellungen

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 bzw. die Hintergrundfarbe.

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 eines Hintergrundbildes eine Hintergrundfarbe zu definieren, hast Du zwei Möglichkeiten:
- Farbe (HEX-Wert) über den Colorpicker wählen
- Farb-Werte direkt eingeben:
- HEX: #ef002f (entspricht den Werten aus dem Colorpicker)
- RGB / RGBA: rgb(45,221,156) / rgba(45,221,156,0.5) über den RGBA-Wert kannst Du auch mit Transparenzen arbeiten. Dazu erweiterst Du den RGB-Wert um einen Alphakanal, der den RGB-Werten mit einem Komma getrennt angehängt wird und einen Wert zwischen 0.0 und 1.0 haben muss.
- HSL / HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.2) genau wie bei RGBA kannst Du auch einen HSLA Wert eingeben, der letzte Wert gibt, genau wie zuvor beschrieben, die Transparenz an.

Ebenen

Ebenen sind Gestaltungsflächen, die innerhalb des Banners liegen. Auf ihnen können ein oder mehrere Elemente platziert werden. Es können auch 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: Die Angabe in Pixeln entspricht dem 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
- mit Transparenzen arbeiten (RGBA / HSLA):
- 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.

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.

Text

Text: Hier kannst Du den Text definieren, und auch direkt für andere Sprachen übersetzen.
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 "auslesen" 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.
Schriftgröße der Gerätegröße anpassen: Mit der neuesten Version von Digital Publishing (3.1.0) ist es nun möglich dynamische, sowie in Schritten skalierbare Schriftarten einzusetzen. Ist die Option aktiviert, wird die feste Schriftartgröße ausgegraut und fünf neue Schriftgradoptionen für die verschiedenen Breakpoints werden eingeblendet.
Dynamisch skalieren: Ist die Option aktiv, wird der Text zwischen den festgelegten Breakpoints stufenlos vergrößert oder verkleinert. Ist die Option nicht ausgewählt, "springt" die Schriftgröße an den Breakpoints auf die nächste eingestellte Größe.
Mobile Portrait / Mobile Landscape / Tablet Portrait / Tablet Landscape / Desktop: Dies sind die vorhandenen Optionen für vordefinierte Breakpoints bzw. Gerätegrößen.
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.

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 kannst Du 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.

Bild

Bild-Auswahl: Hier kannst Du ein bestehendes Bild aus dem Media Manager verwenden oder ein neues Bild hochladen.
Alternativ-Text: Alternativer Text, der 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.

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.

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

Schritt 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 soll bei größeren Fenstergrößen breiter sein als der Text vorgeben würde, sich aber erst bei kleineren Fenstergröß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. Zusätzlich soll die Ebene einen türkis-transparenten Hintergund haben. Dazu tragen wir einen RGBA oder HSLA Farbwert ein. Beachte: Allein über den HEX-Wert oder den Colorpicker kann keine Transparenz eingestellt werden.
Da die Textelemente erst im nächsten Schritt erstellt werden, und somit noch keinerlei Höhenangaben vorhanden sind, 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.

Schritt 3: Erstes Textelement einfügen

Wir fügen ein erstes 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.

Schritt 4: Zweites 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.

Schritt 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.

Schritt 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.

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 zwei neue Elemente: "Digital Publishing" & "Digital Publishing Slider". Diese haben im Grunde die gleichen Funktionen wie 'Banner' & 'Banner-Slider', nur dass Du statt Bildern Digital Publishing-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/