Ihr Weg zum Shopware EKW Banner+

In den Element-Einstellungen können Hintergrundbild, Bildcontent und Kontur aktiviert werden. Über die Medienauswahl können Bilder als Hintergrundbild und Bildcontent ausgewählt werden. Das Hintergrundbild wird hinter dem Textinhalt und der Bildcontent über oder unter dem Textinhalt platziert (siehe Schritt 6). Die Kontur ist eine Umrandung im oder um das Banner. Diese Funktion kann auch genutzt werden, um die Ecken des Banners abzurunden (siehe Schritt 5).

Wichtig: Wenn Bilder als Hintergrundbild oder Bildcontent ausgewählt wurden, kann der Link-Pfad zu den Bildern nicht mehr gelöscht, sondern nur durch ein anderes Bild ersetzt werden. Soll aber kein Bild mehr dargestellt werden, muss die Checkbox des Hintergrundbildes bzw. des Bildcontents deaktiviert werden.

Mit der CSS-Klasse in den globalen Element-Einstellungen können dem Banner-Element Eigenschaften, die in CSS definiert werden, zugewiesen werden. Bei mehreren Klassen müssen diese durch ein Leerzeichen getrennt werden. Styles, die in der Konfiguration des Banner-Elements vorgenommen werden, überschreiben dabei die CSS-Klasse, die dieselbe Eigenschaft anspricht.

Die Bild-Art Fixed fügt dem Hintergrundbild einen Parallax-Effekt hinzu. Das Bild wird dabei auf die gesamte Fläche des Browserfensters (Viewport) gelegt, sodass immer nur ein bestimmter Bildbereich beim Scrollen zu sehen ist. Der Nutzer hat so den Eindruck, dass das Bild mit der Seite scrollt. Wird diese Konfiguration eingestellt, werden die Einstellungen der Bildposition und des Fokus im Vorschaubild nicht übernommen.

Mit der voreingestellten Deckkraft des Hintergrundbildes mit dem Wert 100 wird das Hintergrundbild mit voller Deckkraft angezeigt. Mit dem Wert 0 wird das Bild hingegen ausgeblendet, also unsichtbar. Diese Angaben beziehen sich auf Prozentwerte.

Durch die Bildposition kann das Hintergrundbild durch einen Wert gleich oder kleiner als -1 nach links und durch einen Wert gleich oder größer als 1 nach rechts verschoben werden. Mit dem voreingestellten Wert 0 sitzt das Bild mittig im Banner-Container. Besitzt die Bildposition einen Wert von -100 oder kleiner bzw. 100 oder größer, wird das Hintergrundbild komplett aus dem Banner-Container geschoben und ist demnach nicht mehr sichtbar.

Im Feld Link wird festgelegt, auf welche URL das Banner verlinken soll. Diese Verlinkung liegt über dem gesamten Banner. Das Link-Ziel bestimmt, ob beim Öffnen des Links die Webseite im gleichen oder in einem neuen Browser-Tab geöffnet werden soll.

Zusätzlich kann eine Hintergrundfarbe definiert werden. Dies ist sinnvoll, wenn kein Bild als Hintergrundbild ausgewählt wurde oder dieses keine volle Deckkraft besitzt. Ist das Hintergrundbild aber voll opak, so ist eine definierte Hintergrundfarbe nicht sichtbar.

Die Globalen Texteinstellungen wirken sich auf alle Textelement aus: Untertitel über und unter Titel, Titel, Teaser-Text, Text-Overlay und Buttons.

Die Maximale Textbreite limitiert die Breite des Text-Containers. Ist ein Text länger als die angegebene Breite, bricht dieser in die nächste Zeile um. Der Textinhalt kann linksbündig, rechtsbündig, mittig oder als Blocksatz ausgerichtet werden. Die Textposition bestimmt, wo der Text-Container innerhalb des Banners positioniert wird. Befindet sich die Textposition oben, unten links oder rechts, empfiehlt es sich einen Textabstand an entsprechender Stelle (oben, unten, links bzw. rechts) zu definieren, da der Text-Container ohne Abstand direkt am Rand des Banners platziert wird.

Es ist voreingestellt, dass der Text-Container über dem Hintergrundbild dargestellt wird. Mit der Einstellung Text neben Bild kann der Text-Container aber auch links oder rechts neben dem Bild angezeigt werden. Die Aufteilung von Text und Bild erfolgt 1:1. Das Bild wird hierbei auf die gesamte Breite aufgezogen. Je nach Größe des Viewports können Bildbereiche in der Höhe angeschnitten werden (nicht sichtbar). Umgekehrt sollte aber auch sichergestellt werden, dass das Bild bei allen Viewport-Größen die gesamte Höhe des Banners ausfüllt. Ansonsten ist die Hintergrundfarbe bzw. Weißraum sichtbar.

Durch eine Textanimation wird der Text-Container ein- oder ausgeblendet werden. Erst durch Scrollen bis zum entsprechenden EKW-Element auf der Seite wird diese Animation ausgelöst.

Das Text-Overlay ist eine Fläche, die zwischen Hintergrund und Textinhalt platziert wird. Der Wert der Deckkraft des Overlays trägt so entscheidend zur Textlesbarkeit bei. Wird die Art des Overlays Als Text-Container definiert, wird dessen Breite und Höhe durch die Maße des Textinhalts (Untertitel, Titel, Teaser-Text und Buttons) bestimmt. Mit der Einstellung Über die gesamte Breite des Banners wird nur die Höhe des Text-Containers übernommen, aber die Gesamtbreite des Banners genutzt. Liegt das Overlay Über die gesamte Breite des Banners, so wird die komplette Höhe und Breite des Banners verwendet.

Durch den Text-Overlay-Effekt Hover kann dem Text-Overlay ein Hover-Effekt hinzugefügt werden. Hierbei wird das Text-Overlay ausgeblendet, wenn man mit dem Mauszeiger über das Banner-Element fährt, sodass allein der Hintergrund zu sehen ist.

Bei den Text-Overlay-Einstellungen Als Text-Container und Über die gesamte Breite des Banners sind die Einstellungen zu dem Text-Overlay-Abstand nach oben, unten, links und rechts bedeutend. Diese setzten den Abstand des Text-Overlays zu dessen Inhalt fest. Werden diese Werte nicht definiert, so sitzt der Rand des Overlays ohne Abstand direkt am Textinhalt.

Durch den Farbpicker oder durch manuelle Eingabe des Hex-Farbcodes kann die Farbe des Text-Overlays definiert werden.

Soll eine Kontur eingestellt werden, muss die Kontur aktiviert sein (siehe Schritt 1). Anderenfalls wird die Kontur im Frontend nicht angezeigt. Durch die Konturart wird das Aussehen der Kontur bestimmt und über die Konturposition festgelegt, ob die Kontur außen um das Banner herum oder innerhalb dessen dargestellt wird. Der Abstand zwischen dem Banner und der Kontur innerhalb ist vordefiniert und kann nicht geändert werden.

Die Konturstärke definiert die Dicke (angegeben in Pixel) der Kontur. Mit dem Konturradius kann eingestellt werden, ob und wie stark die Ecken der Kontur und des Banners einschließlich des Text-Overlays abgerundet werden sollen. Dabei besteht die Option, die Konturstärke zwar auf 0 zu setzen, aber einen Konturradius zu definieren. So können die Ecken das Banners und des Text-Overlays auch ohne sichtbare Kontur abgerundet werden.

Mit dem Farbpicker oder durch manuelle Eingabe des Hex-Farbcodes kann die Konturfarbe definiert werden.

Soll ein Bildcontent konfiguriert werden, muss dieser aktiviert werden (siehe Schritt 1). Der Bildcontent kann über oder unter dem Text-Container positioniert und linksbündig, mittig oder rechtsbündig zu diesem ausgerichtet werden. Dem Bildcontent kann eine maximale Breite zugewiesen werden. Dabei kann der Bildcontent aber nie größer sein, als die maximale Textbreite – falls eingestellt. Der Bildabstand definiert den Abstand, welcher der Bildcontent zum Text-Container haben soll.

Es kann ein Untertitel, der über dem Haupttitel platziert wird, bestimmt werden. Hierzu kann im Textfeld der gewünschte Untertitel eingetragen werden. Zudem können die Größe sowie der Zeilenabstand (Zeilenhöhe) bestimmt werden. Besitzt die Textgröße und die Zeilenhöhe den Wert 0, so wird der im Template festgelegte Wert übernommen.

Der Text-Innenabstand bezieht sich auf den Abstand, den der Text zum Textrahmen haben soll. Dies ist wichtig, wenn für den Text eine Hintergrundfarbe definiert wird. Bei einem Text-Innenabstand mit dem Wert 0 sitzt die Text-Hintergrundfarbe ohne Abstand direkt am Text. Je nach angegebener Zeilenhöhe kann es sein, dass der Text in der Höhe nicht mittig auf dem Text-Hintergrund sitzt. Um den Text in der Höhe mittig auszurichten, muss die Zeilenhöhe kleiner bzw. größer eingestellt werden.

Mit dem Untertitel-Abstand zum Haupttitel wird der Abstand zum Haupttitel bzw. zum darunter definierten Textinhalt – wenn kein Titel angegeben wird – festgelegt.

Die Konfigurationen für den Haupttitel sind identischen mit denen des Untertitels (über Titel). Jedoch gibt es hier zusätzlich das Feld Überschriftenart, in welchem bestimmt wird, um welche HTML-Überschrift es sich handelt. Diese Einstellung ist für die Suchmaschinenoptimierung von hoher Bedeutung: Eine H1-Überschrift, die nur einmal pro Seite definiert werden darf, wird von Suchmaschinen als die wichtigste und eine H6-Überschrift als die unwichtigste Überschrift gewertet.

Dieser Untertitel wird unter dem Haupttitel dargestellt. Die Einstellungsmöglichkeiten sind identisch mit denen des Untertitels über dem Haupttitel. Hier wird aber zusätzlich, wie auch beim Haupttitel, die Überschriftenart ausgewählt. Die Aspekte der Wichtigkeit der HTML-Überschriften müssen auch hier durchdacht sein.

Der Teaser-Text wird unter den Überschriften dargestellt. Dieser Text dient dazu, das Thema des Links, auf welchen das Banner verlinkt, anzuteasern. Berücksichtig werden muss dabei die mobile Ansicht: Je länger der Teaser-Text, desto mehr Platz braucht dieser – je kleiner der Screen, desto weniger Platz ist vorhanden.

Durch die Eingabetaste kann ein manueller Zeilenumbruch eingefügt werden.

Mit dem Plugin können bis zu drei Buttons im Banner integriert werden. Bei der Einstellung eines jeden Buttons kann ein beliebiger Text, der im Button steht, eingefügt werden. Zusätzlich kann zu dem Button-Text auch ein Icon definiert werden, welches links oder rechts neben dem Button-Text platziert werden kann.

Die Button-Art bestimmt das Aussehen des jeweiligen Buttons. Es kann zwischen Button und Text ausgewählt werden. Mit dem Button-Link wird definiert, auf welche URL der Button verlinken und mit dem Link-Ziel, ob dieser Link im gleichen oder in einem neuen Browser-Tab geöffnet werden soll.

Da die Textfarbe aller definierten Buttons identisch ist, kann unter Alle Buttons die Farbe definiert werden. Wird keine Farbe ausgewählt, so wird die im Template definierte Farbe übernommen.

Wenn ein Hintergrundbild ausgewählt wurde, erscheint im untersten Reiter in der Konfiguration das zugehörige Vorschaubild. Dieses ist in ein 3x3-Raster unterteilt. Hier kann der Ausgangspunkt des Hintergrundbildes definiert werden. Diese Einstellung ist insbesondere dann wichtig, wenn der fluide Effekt für die Einkaufswelt eingestellt ist. Dieser Effekt füllt Elemente immer, sodass an einigen Stellen Bildmaterial abgeschnitten werden kann. Mit Festlegen des Ausgangspunkts für den Zoom kann so sichergestellt werden, dass der wichtige Bildinhalt immer zu sehen ist. Mit Klick in das gewünschte Feld im Raster kann der Ausgangspunkt gesetzt werden.