Buttons im Webshop-Bestellvorgang
Layout > Layout-Generator > Tab: Buttons
Themen bzw. Einstellungen dieses Kapitels:
1) Info: Buttons im Webshop-Bestellvorgang
1a) Konfiguration
1c) Eigener Button
3) Eigenen Hintergrund hochladen
Wenn Sie Einträge, Einstellungen oder Änderungen vorgenommen haben, klicken Sie vor Verlassen eines Bereichs jeweils auf das Speichern-Symbol, um Ihre Konfiguration zu sichern.
Mit dieser Funktion können Sie Buttons für den Webshop-Bestellvorgang einfach und schnell ändern.
1) Info: Buttons im Webshop-Bestellvorgang
Im Menü Layout > Buttons haben Sie verschiedene Möglichkeiten, Ihre Buttons individuell zu konfigurieren. Sie können jeden Button im Webshop-Bestellvorgang individuell anpassen. Neben den im Reiter Einstellungen verfügbaren Einstellungsmöglichkeiten haben Sie hier die Option, eigene Buttons hochzuladen und zu verwenden.
1a) Konfiguration
In diesem Menü erfolgen die grundlegenden Einstellungen des Buttons, Sie konfigurieren hier die Eigenschaften des Textes und des Hintergrundes.
Buttons konfigurieren:
- Öffnen Sie das Menü Layout > Buttons > Tab Einstellungen.
- Klicken Sie auf das Plus-Symbol vor dem Button, den Sie konfigurieren möchten.
- Nehmen Sie die Einstellungen gemäß der nachfolgenden Tabelle vor.
- Klicken Sie auf das Speichern-Symbol, um die Einstellungen zu sichern.
Erläuterung der Optionen
| Eintrag/Einstellung | Erläuterung |
|---|---|
| Vorschau | Hier wird eine Vorschau des Buttons, wie er später im Webshop zu sehen sein wird, angezeigt. |
| Standardbezeichnung verwenden | Ist hier ein Häkchen gesetzt, kann im Feld darunter kein anderslautender Text eingegeben werden. Der im System hinterlegte Text wird verwendet. |
| Text | Bevor Sie hier einen neuen Text für den Button eingeben können, müssen Sie das Häkchen aus dem Feld Standardbezeichnung verwenden darüber entfernen. |
| Textausrichtung | Wählen Sie Links, Zentriert oder Rechts. |
| Schriftgröße | Wählen Sie einen Wert zwischen 8 und 18 Pixeln. |
| Schriftfarbe | Tragen Sie einen Codewert ein oder wählen Sie eine Farbe, wie im Anschluss an diese Tabelle unter Eine Farbe einstellen beschrieben. |
| Schriftfarbe mouseover |
Dsgl. für die Farbe, die angezeigt werden soll, wenn sich der Mauszeiger auf dem Feld befindet. ⇒ Sie können den Effekt testen, indem Sie den Mauszeiger auf die Button-Vorschau unter Button-Hintergrund bewegen. |
| Seitenabstand | Abstand des Textes vom Rand des Buttons (keine Funktion bei Textausrichtung Zentriert). |
| Button-Größe | Wählen Sie zwischen S, M, L und XL. |
| Button-Hintergrund | Hier sehen Sie in mehreren Tabs eine Vorschau mit umfangreichen Hintergrundgrafik-Varianten, aus denen Sie eine beliebige Variante wählen können. Nach Öffnen des letzten Tabs uploaded sehen Sie Ihre hochgeladenen eigenen Button-Hintergründe, die Sie dort ebenfalls auswählen können. |
| Reset | Einstellungen auf die Standardeinstellung zurücksetzen (= grauer Button mit schwarzer Schrift direkt neben dem Speichern-Symbol). |
Tab. 1: Einstellungen der Buttons im Menü Konfiguration
Eine Schriftfarbe einstellen:
- Durch Klick in die Felder Schriftfarbe oder Schriftfarbe mouseover erscheint ein Farbkreis.
-
Im äußeren Kreis wählen Sie zunächst einen Farbton-Bereich aus. Im Inneren des Kreises können Sie die Farbe dann noch mit gedrückter linker Maustaste weiter individuell anpassen.
⇒ Die Farbveränderung können Sie im Farbfeld über dem Farbkreis verfolgen. - Um die gewählte Farbe zu übernehmen, klicken Sie einfach auf eine Stelle außerhalb des Farbkreises. Dieser wird damit geschlossen.
- Klicken Sie anschließend auf das Speichern-Symbol.
Bild 1: Konfigurationfenster des Buttons place_order bzw. Zahlungspflichtig bestellen
1b) Button-Bezeichnungen
Die Bezeichnung eines Buttons gliedert sich wie folgt:
-
Eingetragene Bezeichnung unter Text im Menü Konfiguration
⇒ Sichtbar in der Titelzeile des Buttons sowie in der Vorschau unter Button-Hintergrund. - Englische Standard-Bezeichnung
- Deutsche Standard-Bezeichnung
Rechtliche Aspekte beachten
Bei der Wahl der Bezeichnung sollten Sie auf gesetzliche Vorgaben achten, z.B. auf Gesetze zum Verbraucherschutz. Ein aktueller Gesetzesentwurf weist darauf hin, dass "sofern die Bestellung über eine Schaltfläche auf der Internetseite erfolgt, die Beschriftung der Schaltfläche unmissverständlich auf die Zahlungspflicht hinweisen muss." Wir haben dem bereits Rechnung getragen und den bisherigen Standard-Text des Buttons Bestellung abschicken für die kommende plentyMarkets-Version 4.4 durch Zahlungspflichtig bestellen ersetzt. Sie finden diesen Button im Tab Einstellungen im Untermenü place_order. Wir empfehlen, den Text in den aktuellen plentyMarkets-Versionen entsprechend anzupassen.
Gesetzes-INFO
Informationen zum Gesetzesentwurf zur Bezeichnung von Schaltflächen finden Sie im Textarchiv des Bundestages sowie in folgendem Download.
1c) Eigener Button
In diesem Bereich laden Sie selbst erstellte Buttons hoch. Die Datei sollte im Format PNG, GIF oder JPG erstellt sein.
Die selbst erstellten Buttons sind nicht konfigurierbar, sie müssen also die Einstellungen, Farben etc. in endgültiger Form enthalten.
Eigene Buttons einstellen:
- Erstellen Sie einen Button oder lassen Sie diesen erstellen und speichern Sie die Datei auf der Festplatte Ihres Rechners.
- Öffnen Sie das Menü Layout > Buttons > Tab: Einstellungen.
- Klicken Sie auf das Plus-Symbol vor dem Button, den Sie konfigurieren möchten.
- Öffnen Sie das Tab Eigener Button.
- Klicken Sie auf Durchsuchen....
- Wählen Sie die gespeicherte Datei des Buttons auf Ihrer Festplatte und klicken Sie auf Öffnen.
-
Klicken Sie auf Hochladen.
⇒ Der Button wird unter Vorschau angezeigt.
Nach Hochladen und Speichern eines eigenen Buttons wird bei Klick auf das Tab Konfiguration der Hinweis Hochgeladener Button ist aktiv! angezeigt.
2) Gruppen-Funktionen
Im Menü Gruppen-Funktionen können Sie ein bestimmtes Layout auf alle Buttons einer Sprache anwenden. Mit dieser Funktion können Sie beispielsweise mit wenigen Mausklicks Textausrichtung, Schriftgröße, Schriftfarbe, Seitenabstand und Hintergrundgrafik aller Buttons eines Webshop-Layouts in einer bestimmten Sprache gleichzeitig ändern.
Öffnen Sie das Menü Layout > Buttons > Tab Einstellungen > Gruppen-Funktionen und wählen Sie die gewünschten Einstellungen für alle Buttons (Erläuterungen siehe Tabelle unter 1a).
Bild 2: Gruppen-Funktionen
3) Eigenen Hintergrund hochladen
Im Tab Eigener Hintergrund können Sie eigene Hintergrundgrafiken für Buttons hochladen. Diese werden dann unter Hintergrund-Liste angezeigt.
Anschließend wählen Sie den Hintergrund im Tab Konfiguration eines Buttons aus, wie weiter hinten in diesem Abschnitt unter B) beschrieben.
Wichtig dabei ist, dass sowohl das Hintergrundbild insgesamt, als auch die einzelnen Buttonfelder die richtigen Maße haben.
Bild 3: Menü Eigener Hintergrund
Beispiel
Das folgende Beispiel ist ein Muster für eine Hintergrundgrafik und hat die Maße 634 x 63 Pixel.
Die einzelnen Buttonfelder der Grafik entsprechen den Einstellmöglichkeiten unter Button-Größe im Bearbeitungsfenster (siehe Bild 1), die Anordnung ist jedoch genau umgekehrt zu der Auswahl (von links nach rechts: S, M, L, XL).
Die Buttonfelder haben die folgenden Maße:
Breite der Felder: XL: 245 Pixel, L: 172 Pixel, M: 134 Pixel, S: 81 Pixel.
Die Höhe der Felder beträgt 31 Pixel.
Der Abstand zwischen den Feldern beträgt jeweils 1 Pixel.
XL L M S
Bild 4: Beispiel für eine Hintergrundgrafik
Erläuterung
Die obere Zeile der Buttonfelder definiert die Farbe der Buttons in der normalen Ansicht.
Die untere Zeile definiert die mouseover-Farbe, das heißt, die obere Farbe ändert sich zur unteren, wenn sich ein Mauszeiger auf dem Button befindet.
Das am besten geeignete Datenformat für die Erstellung von Buttons ist PNG. Möglich sind auch JPG und GIF.
A) Hintergrundgrafik hochladen:
- Erstellen Sie eine Hintergrundgrafik oder lassen Sie diese erstellen und speichern Sie diese auf der Festplatte Ihres Rechners.
- Öffnen Sie das Tab Eigener Hintergrund.
- Klicken Sie auf Durchsuchen....
- Wählen Sie die gespeicherte Datei der Hintergrundgrafik auf Ihrer Festplatte und klicken Sie auf Öffnen.
-
Klicken Sie auf Hochladen.
⇒ Der Button-Hintergrund wird im Bereich Hochgeladene Buttons als Vorschau angezeigt.
B) Buttons mit hochgeladener Hintergrundgrafik konfigurieren:
- Öffnen Sie das Menü Layout > Buttons.
- Klicken Sie auf das Plus-Symbol vor dem Button, den Sie konfigurieren möchten.
- Wählen Sie im Tab Konfiguration im Bereich Button-Hintergrund unter uploaded den gewünschten (hochgeladenen) Hintergrund aus.
- Nehmen Sie die weiteren Einstellungen gemäß der Tabelle 1 vor.
- Klicken Sie auf das Speichern-Symbol, um die Einstellungen zu sichern.
4) Button-Migration
Im Tab Button-Migration können die bisherigen bzw. Standard-Buttons in den neuen Button-Konfigurator übernommen werden. Sofern weiterhin die Standard-Buttons verwendet werden sollen, muss eine Migration erfolgen, da die alten Einstellungen mit den kommenden Versionen von plentyMarkets (also die Folgeversionen von plentyMarkets 4.201) entfernt werden.
Buttons migrieren:
-
Stellen Sie in der oberen Zeile unter Sprache die Sprache ein, aus der die Buttons migriert werden sollen.
⇒ Die Buttons dieser Sprache werden angezeigt. - Wählen Sie unten das Layout und die Sprache aus, in die die Buttons übernommen werden sollen.
Wenn Sie mehrere Webshops mit plentyMarkets betreiben, muss auch eine Migration in mehrere Layouts erfolgen.
