Inhaltsverzeichnis:

1. Plugin aktivieren

2. Footer generelle Einstellungen

3. Newsletter Element

4. HTML Trenner Box

5. Box 1 bis 12 Überschriften Einstellungen

6. Box 1

7. Box 2

8. Box 3

9. Box 4

10. Box 5

11. Box 6

12. Box 7

13. Box 8

14. Box 9

15. Box 10

16. Box 11

17. Box 12

18. Icon für Kategorie Links Box 1 - 12

19. Gruppen verbinden

20. Gruppen Farbe

21. Gruppen Trennlinien

22. Zahlungs- und Versand- Icon Box

23. SEO HTML Box

24. Mwst. und Versand Box

25. Copyright Text + Logo Box

26. Service Menü Links im Footer

Plugin Dokumentation „Doku Footer Tuner Pro Modul 2 | Kategorie & HTML Box - SW6“

Einführung

Dank der langjährigen Erfahrungen des Footer Tuner Pro - SW5 und unsere Shopware Kunden, haben wir dem Footer Tuner Pro - SW6 weitere zahlreiche und nützliche Funktionen sowie Stylings verpasst. Das macht den Footer Tuner Pro - SW6 zu einem sehr individuellem und besonderen Footer Plugin. Wir wünschen Ihnen viel Freude beim Aufbau Ihres individuellen Shopware 6 Footer.

Wir wissen das die zahlreichen Einstellmöglichkeiten es jedoch auch schnell schwer machen können sich zurecht zu finden. Deshalb bieten wir Ihnen unsere Hilfe an, Sie bei der richtigen Auswahl der Einstellungen zu unterstützen. Wir möchten das Sie zufrieden sind und die Stärken des Footer Tuner Pro - SW6 erkennen und lieben werden. Bei Fragen oder Hilfe schreiben Sie uns an support@ultra-media.de

Um es Ihnen einfacher und verständlicher zu machen haben wir bei den Plugin Konfiguration im Backend ein Beispiel Wert angegeben. So können Sie sich leichter orientieren und erste versuche starten.

1. Plugin / Verkaufskanal aktivieren

Aktivieren Sie Ihren Verkaufskanal im Plugin. Möchten Sie das Plugin in einen weiteren Verkaufskanal nutzen können Sie über die Plugin Card „Verkaufskanal“ per Auswahlmenü ihre angelegten Verkaufskanäle mit HTML Storefront auswählen.

2. Footer generelle Einstellungen

2.1 Footer Inhalte vollflächig, Desktop

Setzen Sie sämtliche Inhalte des Footer auf vollflächig in der Desktop Ansicht.

2.2 Footer Hintergrundfarbe vollflächig, Desktop

Setzen Sie die Hintergrundfarbe des Footers auf vollflächig in der Desktop Ansicht.

2.3 Hintergrund Farbverlauf Ausrichtungswinkel - Beispiel: 0

Geben Sie hier den Ausrichtungswinkel für den Farbverlauf ein. 0 steht hier für einen Ausrichtungswinkel von 0° von oben nach unten. Sie können dabei von 0° bis 354° nutzen.

2.4 Footer Hintergrundfarbe 1 - Beispiel: rgba(2,0,36,1)

Nutzen Sie für einen Farbverlauf der Hintergrundfarbe am besten alle 3 Hintergrundfarb-Eingabefelder sowie die Prozentwert (Stop Wert) Eingabefelder. Dazu sollten Sie für eine bessere Browser Kompatibilität den jeweiligen Farbwert als rgba Format wie als Beispielwert angeben.

Über das Webseiten Portal https://cssgradient.io können Sie zum besseren Verständnis einen Farbverlauf erstellen und diese Werte für den Footer dann in die entsprechenden Footer Tuner Pro - SW6 Plugin Eingabefelder übertragen.

2.5 Farbverlauf 1 Prozentwert - Beispiel: 8

Tragen Sie in das Prozentwert den Stop Wert ein an welcher Stelle der Farbverlauf in den nächsten übergehen soll.

2.6 Footer Hintergrundfarbe Farbe 2 - Beispiel: rgba(9,9,121,1)

Tragen Sie hier den zweiten Farbwert für einen Farbverlauf als HEX Wert ein zum Beispiel: #ffffff oder als rgba Wert Beispiel: rgba(9,9,121,1). Dieser kann über den Colorpicker des Plugin ausgewählt werden. Hier können Sie über den Colorpicker auch den Transparenz Wert der Hintergrundfarbe auswählen.

2.7 Farbverlauf 2 Prozentwert - Beispiel: 40

Geben Sie hier den Stop Wert für den zweiten Farbverlauf an.

2.8 Footer Hintergrundfarbe Farbe 3 - Beispiel: rgba(0,212,255,1)

2.9 Farbverlauf 3 Prozentwert - Beispiel: 100

Geben Sie hier den Stop Wert für den zweiten Farbverlauf an.

2.10 Trennlinien Farbe kompletter Footer oben - Beispiel: #bcc1c7

Hiermit setzen Sie den Farbwert der oberen äußeren Trennlinie ein.

2.11 Trennlinien Stärke kompletter Footer oben - Beispiel: 1

Tragen Sie hier die Stärke der oberen äußeren Trennlinie ein.

2.12 Darstellungsart der Trennlinie kompletter Footer oben

Hier können Sie die Darstellung der oberen äußeren Footer Trennlinie auswählen. Dabei stehen Ihnen 3 Werte zur Verfügung. Durchgezogene Trennlinie ohne Unterbrechung. Punkte Trennlinie und gestrichelte Trennlinie

2.13 Hintergrundbild wiederholen

Sie können im Footer ein Hintergrundbild einsetzen. Hier bestimmen Sie ob das Hintergrundbild wiederholen lassen.

Das Bild wird horizontal und vertikal wiederholt
Keine Wiederholung. Das Bild wird einmal dargestellt
Nur horizontal wiederholen
vertikal wiederholen

2.14 Position des Hintergrundbildes

Geben Sie hier die Position des Hintergrundbild ein. Möchten Sie zum Beispiel den oberen mittigen Inhalt des Hintergrundbildes darstellen dann wählen Sie den Wert "Mitte oben"

Links unten
Links oben
Links Mitte
Rechts unten
Rechts oben
Rechts Mitte
Mitte unten
Mitte oben
Mitte Mitte

2.15 Größe des Hintergrundbildes

Bestimmen Sie hier die Größe des Hintergrundbildes. Wählen Sie aus den 4 möglichen Optionen aus. Versuchen Sie alle Einstellungen und was am besten zu Ihrem Hintergrundbild und Ihren Vorstellungen passt.

Strecken
Einfassen
100% Höhe und 100% Breite
auto

2.16 Durchsichtigkeit des Hintergrundbildes

Wählen Sie hier die Durchsichtigkeit (Transparenz Wert) für das Hintergrundbild aus. Sie können zwischen dem Wert 100 = keine Transparenz bis 0 volle Transparenz wählen.

2.17 Footer Hintergrundbild auswählen

Wählen Sie über den Media Manager ein Hintergrundbild oder laden Sie das Hintergrundbild direkt hierüber hoch.

3. Newsletter Element

3.1 Newsletter Box Breite Desktop - Beispiel: 100

Tragen Sie hier die Breite der Newsletter Trenner Box für die Desktop Ansicht ein. In unserem Beispiel haben wir 45 als Wert eingetragen. Damit wird der Inhalt der Newsletter Trenner Box auf eine Breite von 45% gesetzt.

3.2 Newsletter Box Breite Tablet Landscape - Beispiel: 100

Tragen Sie hier die Breite der Newsletter Trenner Box für die Tablet Landscape Ansicht ein.

3.3 Newsletter Box Breite Tablet Portrait - Beispiel: 80

Tragen Sie hier die Breite der Newsletter Trenner Box für die Tablet Portrait Ansicht ein.

3.4 Newsletter Überschrift - Beispiel: ULTRA MEDIA NEWS

Geben Sie in der Newsletter Trenner Box eine eigene Überschrift ein.

3.5 Überschrift Schriftfarbe - Beispiel: #ffffff

Tragen Sie über den Colorpicker den Farbwert für die Newsletter Überschrift ein.

3.6 Überschrift Schriftart - Beispiel: Open Sans

Sollten Sie in Ihren Shop andere Schriftarten eingebunden haben, so können Sie hier die eingebunden Schriftart eintragen.

3.7 Newsletter Überschrift Schriftgröße - Beispiel: 18

Tragen Sie hier den Wert der Schriftgröße ein.

3.8 Überschrift Schriftstärke - Beispiel: 700

Für jede Schriftart gibt es verschiedene Schriftstärken. In Google Font Schriften wird diese als Schrift Styles bezeichnet. Dabei hat die Schriftart Open Sans zum Beispiel 10 Styles. Zum Beispiel für feine Schriften den Style 300 und für Fette Schriften den Beispiel Wert 600.

3.9 Newsletter Überschrift Buchstaben Abstand - Beispiel: 4

Bestimmen Sie mit diesem Wert den Buchstabenabstand um die Überschriften im Newsletter Element besonders hervorzuheben.

3.10 Newsletter Überschrift Ausrichtung

Mit der Ausrichtung können Sie die Überschrift nach Links, in die Mitte der Box oder nach Rechts versetzen.

3.11 Newsletter Box Abstand innen - Beispiel: 0px 20px 20px 20px

Sie können dem Newsletter Element einen inneren Abstand zum äußeren Rand der Box vergeben. Möchten Sie zum Beispiel oben einen Abstand einrichten tragen Sie folgenden Beispiel Wert ein: 20px 0px 0px 0px (Reihenfolge der Eingetragenen Werte: oben, rechts, unten, links)

3.12 Senden Button Hintergrundfarbe - Beispiel: #333333

Tragen Sie über den Colorpicker den Farbwert für den Newsletter Senden Button.

3.13 Newsletter Icon Farbe - Beispiel: #ffffff

Tragen Sie über den Colorpicker den Farbwert für das Icon im Newsletter Senden Button.

3.14 Senden Button Abstand links - Beispiel: 5

Vergeben Sie einen Abstand zum Newsletter Senden Button und dem Eingabefeld

3.15 Senden Button Breite - Beispiel: 20

Bestimmen Sie die Breite (Zum Beispiel: 20%) des Newsletter Senden Button

3.16 Button Rahmenfarbe - Beispiel: #bcc1c7

Tragen Sie über den Colorpicker den Farbwert für den Rahmen des Newsletter Senden Button ein.

3.17 Rahmenstärke - Beispiel: 1

Tragen Sie hier die passende Rahmenstärke ein.

3.18 Newsletter Senden Button Hover Text - Beispiel: Newsletter abonnieren

Beim Hover des Senden Button wird ein Infotext angezeigt. Diesen Text können Sie hier individuell eingeben.

3.19 Rundung Senden Button - Beispiel: 0px 3px 3px 0px

Sie können dem Newsletter Senden Button Rundungen vergeben. Möchten Sie zum Beispiel oben rechts und unten rechts dem Senden Button vergeben dann tragen Sie folgenden Beispiel Wert ein: 0px 3px 3px 0px (Reihenfolge der Eingetragenen Werte: oben links, oben rechts, unten rechts, unten links)

3.20 Datenschutz Newsletteranmeldung Textfarbe - Beispiel: #ffffff

Tragen Sie über den Colorpicker den Farbwert für die Textfarbe des Datenschutz Text ein.

3.21 Datenschutz Newsletteranmeldung Textgröße - Beispiel: 12

Tragen Sie hier die Schriftgröße des Datenschutz Text ein.

3.22 Datenschutz Newsletteranmeldung Linkfarbe - Beispiel: #008490

Tragen Sie über den Colorpicker den Farbwert für den Datenschutz Link ein.

3.23 Datenschutz Newsletteranmeldung Hover Linkfarbe - Beispiel: #003e44

Tragen Sie über den Colorpicker den Farbwert für die Hover Linkfarbe des Datenschutz Link.

3.24 Newsletter Platzhalter - Beispiel: Ihre E-Mail Adresse eingeben

Sie können hier den Platzhalter Text anpassen. Zum Beispiel: Gib Deine E-Mail Adresse ein.

3.25 Rundung E-Mail Eingabefeld - Beispiel: 3px 0px 0px 3px

Sie können dem Newsletter Eingabefeld Rundungen vergeben. Möchten Sie zum Beispiel oben rechts und unten rechts dem Senden Button vergeben dann tragen Sie folgenden Beispiel Wert ein: 0px 3px 3px 0px (Reihenfolge der Eingetragenen Werte: oben links, oben rechts, unten rechts, unten links)

3.26 HTML Newsletter Element Schriftfarbe - Beispiel: #ffffff

Sie haben die Möglichkeit in der HTML Eingabe Box die Schrift individuell anzupassen. Möchten Sie jedoch der gesamten Eingabe Box eine Schriftfarbe vergeben so können Sie dies über den Colorpicker vergeben.

3.27 HTML Newsletter Trennerbox Schriftart - Beispiel: Open Sans

Sollten Sie in Ihren Shop andere Schriftarten eingebunden haben, so können Sie hier die eingebunden Schriftart eintragen.

3.28 HTML Newsletter Trennerbox Schriftgröße - Beispiel: 18

Tragen Sie hier den Wert der Schriftgröße ein.

3.29 HTML Newsletter Trennerbox Schriftstärke - Beispiel: 300

3.30 HTML Newsletter Box Abstand außen - Beispiel: 0px 0px 20px 0px

Sie können dem Newsletter HTML Element einen äußeren Abstand vergeben. Möchten Sie zum Beispiel oben einen Abstand einrichten tragen Sie folgenden Beispiel Wert ein: 20px 0px 0px 0px (Reihenfolge der Eingetragenen Werte: oben, rechts, unten, links)

3.30 HTML Newsletter Box individuelle Text Eingabe - Beispiel: abonnieren und 5 EUR Rabatt sichern

Geben Sie Ihren individuellen Text hier ein. Dies kann per HTML eingetragen werden oder aber per Text.

4. HTML Trenner Box

4.1 HTML Trenner Box einschalten

Nutzen Sie diese HTML Trenner Box wenn Sie die Newsletter Trenner Box nicht einsetzen möchten oder aber wenn Sie eine weitere Box über den Boxen 1 - 12 benötigen.

4.2 Trennlinie HTML Trenner Box vollflächig, Desktop

Aktivieren Sie die untere Trennlinie der HTML Trenner Box.

4.3 Trennlinien Farbe HTML Trenner Box - Beispiel: #e4dfd9

Tragen Sie über den Colorpicker den Farbwert für die Trennlinie ein.

4.4 Trennlinien Stärke HTML Trenner Box - Beispiel: 1

Tragen Sie hier die Stärke der Trennlinie ein.

4.5 Darstellung Trennlinie HTML Trenner Box

Hier können Sie die Darstellung der unteren Trenner Box Trennlinie auswählen. Dabei stehen Ihnen 3 Werte zur Verfügung. Durchgezogene Trennlinie ohne Unterbrechung. Punkte Trennlinie und gestrichelte Trennlinie.

4.6 Hintergrundfarbe vollflächig, Desktop

Aktivieren Sie hier ob Sie die Hintergrundfarbe der Trennerbox vollflächig dargestellt werden soll.

4.7 Hintergrundfarbe Trenner Box

4.8 Trenner Box Überschrift - Beispiel: Meine Trennerbox

4.9 Überschrift Trenner Box Abstand - Beispiel: 0px 0px 15px 0px

4.10 Überschrift Trenner Box Ausrichtung

4.11 Überschrift Trenner Box Schriftfarbe - Beispiel: #ffffff

4.12 Überschrift Trennerbox Schriftart - Beispiel: Open Sans

4.13 Überschrift Trennerbox Schriftgröße - Beispiel: 16

4.14 Überschrift Trennerbox Schriftstärke - Beispiel: 300

4.15 Trenner Box Breite - Beispiel: 100

4.16 HTML Trennerbox Schriftfarbe - Beispiel: #ffffff

4.17 HTML Trennerbox Schriftart - Beispiel: Open Sans

4.18 HTML Trennerbox Schriftgröße - Beispiel: 16

4.19 HTML Trennerbox Schriftstärke - Beispiel: 300

4.20 HTML Trennerbox Abstand innen - Beispiel: 20px 20px 20px 20px

4.21 HTML Trennerbox individuelle Text Eingabe

5. Box 1 bis 12 Überschriften Einstellungen

5.1 Lange Überschriften abschneiden

Zu lange Überschriften werden gekürzt ab einer bestimmten Länge mit ... dargestellt.

5.2 Überschrift in Großbuchstaben einschalten

Alle Überschriften der Boxen 1 - 12 werden in Großbuchstaben im Footer ausgegeben.

Damit können die Überschriften besser hervorheben.

5.2 Überschrift Schriftfarbe - Beispiel: #202020

Tragen Sie über den Colorpicker den Farbwert für die Überschriften der Box 1 - 12 ein.

5.3 Überschrift Schriftart - Beispiel: Open Sans

Das Plugin unterstützt die bereits im Shop eingebundenen Schriftarten. Mit unserem Schriften Plugin "Schriften und Icons einbinden Premium - SW6" können weitere Schriftarten leicht in den Shopware 6 Shop eingebunden werden. Geben Sie die Schriftarten Bezeichnung dann in dieses Eingabefeld ein.

5.4 Überschrift Schriftgröße - Beispiel: 16

Wählen Sie die Schriftgröße aus. Um so höher der Wert um so größer wird die Schriftart dargestellt.

5.5 Überschrift Schriftstärke - Beispiel: 700

Jede Schriftart hat unterstützt verschiedene Schriftstärken. Diese müssen jedoch auch im Shop eingebunden sein um Sie zu nutzen.

5.6 Überschrift unterstreichen einschalten

Setzen Sie unter der Überschrift der Box einen Unterstrich ein.

6. Box 1

6.1 Hintergrundfarbe - Beispiel: #222222

Sie können jeder der 12 Boxen hiermit eine eigene Hintergrundfarbe einsetzen. Dies kann über den Colorpicker ausgewählt werden. Über den Colorpicker (Alpha Wert) kann auch eine Transparenz ausgewählt werden.

6.2 Box 1 Auswahl

Wählen Sie hier aus ob Sie die HTML Box 1 (Selbst beschreibbare HTML Box), eine Newsletter Box, die Service-Hotline Box (Shopware Standard Box), nur Versand Icon Box, nur Zahlungsicons Box, Versand- und Zahlungs Icons Box, Zahlung- und Versand Icon Box (umgekehrte Reihenfolge) oder ein der von Ihnen 12 angelegten Footer Kategorien.

Wie Sie Footer Kategorien anlegen entnehmen Sie der Shopware 6 Dokumentation hier >

6.3 Kategorie Link Animation einschalten

Durch aktivieren wird den Kategorie Links eine einfache Animation hinzugefügt.

6.4 Kategorie Link einrücken - Beispiel: 5

Hiermit wird Ihnen ein einrücken der Kategorie Links ermöglicht. Sollte kein einrücken gewünscht sein tragen Sie hier den Wert 0 ein.

6.5 Kategorie Border einschalten

Sie können den Kategorie Links eine untere Trennlinie hinzufügen.

6.6 Kategorie Borderfarbe - Beispiel: #e8e8e8

Für die untere Kategorie Trennlinie kann eine Farbe per Colorpicker ausgewählt werden.

6.7 Kategorie Link Schriftfarbe - Beispiel: #333333

Wählen Sie mit dem Colorpicker die gewünschte Kategorie Link Schriftfarbe aus.

6.8 Kategorie Link Hover Schriftfarbe - Beispiel: #ee1f60

Wählen Sie mit dem Colorpicker die gewünschte Kategorie Link Hover Schriftfarbe aus.

6.9 Kategorie Link Schriftart - Beispiel: Open Sans

Sollten Sie in Ihren Shop andere Schriftarten eingebunden haben, so können Sie hier die eingebunden Schriftart eintragen.

6.10 Kategorie Link Schriftgröße - Beispiel: 16

Tragen Sie hier den Wert der Schriftgröße ein.

6.11 Kategorie Link Schriftstärke - Beispiel: 300

6.12 Box 1 Breite - Beispiel: 25

Mit dieser Einstellung können Sie die Breite jeder Box (Spalte) bestimmen.

Möchten Sie zum Beispiel Box 1 bis 3 nebeneinander darstellen so können Sie der Box 1 bis Box 3 den gleichen Wert 33.3 eintragen. Möchten Sie die Box 1 zu 100% Breite anzeigen so tragen Sie den Wert 100 ein. Für 4 Boxen nebeneinander tragen Sie jeweils den Wert 25 ein. Somit wird jede Box eine 25% Breite erhalten. Für 5 Spalten den Wert 20. Dann erhält jede der 5 Boxen 20% Breite. Im Standard des Footer Plugin werden immer zwei Boxen zu einer Gruppe zusammengefasst. Diese können Sie über die Gruppe in der Plugin Einstellung Punkt 19 zusammenfügen. Um Box 1 bis 4 zusammenzufügen wählen Sie hier die Einstellung Verbinde Gruppe 1 (Box 1-2) und Gruppe 2 (Box 3-4)

Sollten Sie Fragen zum Verbinden der Boxen haben so schreiben Sie uns an support@ultra-media.de oder rufen uns an. Wir unterstützen Sie sehr gerne beim Einrichten des Footer Tuner Pro - SW6 Plugin.

6.13 Box 1 Abstand innen - Beispiel: 20px 20px 20px 20px

6.14 Box 1 Überschrift einschalten

6.15 Box 1 Überschrift - Beispiel: Meine Überschrift Box 1

6.16 Überschrift Box 1 Abstand - Beispiel: 0px 0px 15px 0px

6.17 HTML Box 1 Schriftfarbe - Beispiel: #ffffff

6.18 HTML Box 1 Schriftart - Beispiel: Open Sans

6.19 HTML Box 1 Schriftgröße - Beispiel: 16

6.20 HTML Box 1 Schriftstärke - Beispiel: 300

6.21 HTML Box 1 individuelle Text Eingabe