Buttons

plentymarkets » CMS » Webdesign » Buttons

 

Allgemeines zu Buttons

Sie haben 3 Möglichkeiten, Ihre Webshop-Buttons zu gestalten. Sie können den Button-Editor nutzen und so auf eine große Auswahl an Button-Hintergründen zurückgreifen. Ein Button-Text ist bereits verfügbar oder Sie können einen eigenen Text formulieren. Eine weitere Option ist ein Eigener Button, bei der Sie einen eigenen Button hochladen. Schließlich können Sie die Option HTML-Button verwenden. Bei Wahl dieser Option gestalten Sie den Button direkt im CSS.

Die Optionen Button-Editor und Eigener Button werden im Folgenden genauer beschrieben. Für die Option HTML-Button sind lediglich die Auswahl hier und HTML-Kenntnisse nötig, um das CSS anzupassen.

Konfiguration mit dem Button-Editor

In diesem Menü nehmen Sie die grundlegenden Einstellungen eines Buttons vor, wenn Sie mit dem Button-Editor arbeiten. Sie konfigurieren die Eigenschaften des Textes und des Hintergrundes.

Bild 1: Konfiguration des Buttons In den Warenkorb

Buttons konfigurieren:
  1. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
  2. Klicken Sie auf das Plus vor dem Button, den Sie konfigurieren möchten.
  3. Nehmen Sie die Einstellungen im Tab Konfiguration gemäß Tabelle 1 vor.
  4. Klicken Sie auf Speichern, um die Einstellungen zu sichern.

Die folgende Tabelle erläutert die Einstellungen im Tab Konfiguration für den Button-Editor:

Einstellung Erläuterung
Button-Layout Zwischen folgenden Optionen wählen:
Button-Editor = Fertige Hintergründe und Texte für Buttons.
HTML-Button = Möglichkeit, im CSS einen Button per HTML-Code zu gestalten.
Die weiteren Einstellungen, die in dieser Tabelle beschrieben werden, sind nur bei Wahl des Button-Editors sichtbar.
Vorschau Zeigt den Button, wie er später im Webshop zu sehen sein wird.
Standard-Bezeichnung verwenden Häkchen gesetzt = Die Standard-Bezeichung wird verwendet. Ein eigener Text kann nicht eingetragen werden.
Text Einen eigenen Text für den Button eintragen. Hierfür darf kein Häkchen bei Standardbezeichnung verwenden gesetzt sein.
Textausrichtung Zwischen Links, Zentriert oder Rechts wählen, damit der Text im Button so ausgerichtet wird.
Schriftgröße Eine Größe zwischen 8 und 18 Pixeln wählen.
Schriftfarbe Einen Hexadezimalwert eintragen oder eine Farbe wählen.
Schriftfarbe mouseover Einen Hexadezimalwert eintragen oder eine Farbe wählen, die der Text hat, wenn sich der Mauszeiger auf dem Button befindet.
Seitenabstand Abstand des Textes vom Rand des Buttons. Diese Einstellung wird nur bei den Textausrichtungen Links und Rechts berücksichtigt.
Button-Größe Zwischen S, M, L und XL wählen.
Button-Hintergrund Aus einem der Tabs einen Hintergrund für den Button wählen. Im Tab uploaded werden Ihre hochgeladenen eigenen Button-Hintergründe angezeigt.
Reset Setzt alle Einstellungen auf die Standardeinstellungen zurück.

Tab. 1: Einstellungen im Tab Konfiguration

Eine Schriftfarbe einstellen:
  1. Klicken Sie in das Feld Schriftfarbe bzw. Schriftfarbe mouseover.
    → Eine Farbauswahl wird geöffnet.
  2. Wählen Sie im äußeren Kreis einen Farbton-Bereich.
  3. Klicken Sie in das Farbquadrat im Kreis und wählen Sie bei gedrückter Maustaste eine Farbe.
    → Die Farbe sehen Sie im Farbfeld über dem Farbkreis.
  4. Klicken Sie einmal außerhalb des Farbkreises, um die Farbe zu übernehmen.
    → Die Farbauswahl wird geschlossen.
  5. Klicken Sie auf Speichern, um die Einstellungen zu sichern.
Button-Texte und rechtliche Aspekte

Achten Sie bei der Wahl der Bezeichnung auf gesetzliche Vorgaben, z.B. auf Gesetze zum Verbraucherschutz. So heißt es z.B. in §312j des BGB "Erfolgt die Bestellung über eine Schaltfläche, ist die Pflicht des Unternehmers aus Satz 1 nur erfüllt, wenn diese Schaltfläche gut lesbar mit nichts anderem als den Wörtern „zahlungspflichtig bestellen“ oder mit einer entsprechenden eindeutigen Formulierung beschriftet ist." In plentymarkets wurde diesem Gesetz Rechnung getragen. Die Standard-Bezeichnung lautet Zahlungspflichtig bestellen.

Beachten Sie zu diesem Thema auch die Handbuchseite Anpassung an die Button-Lösung.

Template-Funktionen und -Variablen

In jedem plentmarkets-System finden Sie standardmäßig die für einen Webshop notwendigen Buttons. Einige dieser Buttons werden mit Template-Funktionen ins Design eingefügt. Diese Template-Funktionen (Tabelle 2) finden Sie in den Templates unter CMS » Webdesign. Allgemeine Beispiele und Beschreibungen zu Template-Funktionen und Template-Variablen finden Sie im Handbuch unter CMS-Syntax.

In der folgenden Tabelle sind die verfügbaren Template-Funktionen für Buttons aufgeführt:

Button Template-Funktion Bereich Template-Funktionen
und -Variablen
In den Warenkorb ButtonAddBasket1(string $_buttonValue) : string Global » ItemView (verschiedene)
In den Warenkorb (Popup) ButtonAddBasketOverlay(string $_buttonValue) : string Global » ItemView (verschiedene)
Löschen (Warenkorb) ButtonDeleteBasketItem(string $_buttonValue) : void Global » ItemView » ItemViewBasketPreviewList
Basket » BasketItemsList
Anmelden Button_CustomerRegistration(string $_buttonValue) : void Misc » MiscCustomerRegistrationForm
Warenkorb öffnen ButtonOpenBasket(string $_buttonValue) : string Global » PageDesignFunctions
Zur Kasse ButtonProceedOrder(string $_buttonValue) : void Global » BasketFunctions
Weiter einkaufen ButtonProceedShopping(string $_buttonValue) : void Global » BasketFunctions
     
  Individueller Warenkorb (eigene Buttons)  
Warenkorb (nach Änderungen) speichern ButtonBasketSave(string $_buttonValue) : void Basket » BasketItemsList
Rechnungsadresse im Warenkorb eingeben Button_SaveBasketCustomerInvoiceAddress(string $_buttonValue) : void Basket » BasketCustomerInvoiceAddress

Tab. 2: Verfügbare Template-Funktionen für Buttons im Menü CMS

Eigener Button

In diesem Bereich laden Sie selbst erstellte Buttons hoch. Die Formate PNG, GIF oder JPG sind zulässig. Die selbst erstellten Buttons sind in plentymarkets nicht mehr änderbar. Der Text, die Farben etc. müssen im Bild enthalten sein und werden genau so dargestellt.

Eigene Buttons einstellen:
  1. Erstellen Sie einen Button oder lassen Sie diesen erstellen und speichern Sie die Datei auf der Festplatte Ihres Rechners.
  2. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
  3. Klicken Sie auf das Untermenü des Buttons.
  4. Öffnen Sie das Tab Eigener Button.
  5. Klicken Sie auf Durchsuchen....
  6. Wählen Sie die gespeicherte Datei des Buttons auf Ihrer Festplatte.
  7. Klicken Sie auf Öffnen.
  8. Klicken Sie auf Speichern, um den Button hochzuladen.

Wenn Sie das Menü neu laden, wird eine Vorschau des Buttons angezeigt. Außerdem wird im Tab Konfiguration der Hinweis Eigener Button ist aktiv! angezeigt.

Gruppenfunktionen

Im Menü Gruppenfunktionen wenden Sie ein bestimmtes Layout auf alle Buttons einer Sprache an. Mit dieser Funktion ändern Sie mit wenigen Mausklicks die Textausrichtung, Schriftgröße, Schriftfarbe, den Seitenabstand und die Hintergrundgrafik aller Buttons eines Webshop-Designs in einer bestimmten Sprache gleichzeitig.

  1. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen » Gruppenfunktionen.
  2. Wählen Sie die Einstellungen gemäß Tabelle 1.
  3. Klicken Sie auf Speichern, um die Einstellungen zu sichern.

Bild 2: Gruppenfunktionen

Buttons mit eigenem Hintergrund

Im Tab Eigener Hintergrund laden Sie eigene Hintergrundgrafiken für Buttons hoch. Diese werden dann unter Hintergrund-Liste angezeigt.

Anschließend wählen Sie den Hintergrund im Tab Konfiguration eines Buttons.

Wichtig dabei ist, dass sowohl das Hintergrundbild insgesamt als auch die einzelnen Buttonfelder die richtigen Maße haben.

Bild 3: Menü Eigener Hintergrund

Das Beispiel in Bild 4 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 (Bild 1). Jedoch ist die Anordnung hier in Bild 4 umgekehrt zur Auswahl im Menü. Die obere Zeile der Buttonfelder legt die Farbe der Buttons für die normale Ansicht fest. Die untere Zeile legt die mouseover-Farbe fest. Das ist die Farbe, die angezeigt wird, wenn Sie mit dem Mauszeiger auf den Button zeigen. Das am besten geeignete Datenformat für die Erstellung von Buttons ist PNG. Möglich sind auch JPG und GIF.

Die Buttonfelder haben die folgenden Maße:

Buttonfeld Breite Höhe
XL 245 Pixel 31 Pixel
L 172 Pixel 31 Pixel
M 134 Pixel 31 Pixel
S 80 Pixel 31 Pixel

Tab. 3: Größe Buttonfelder

Der Abstand zwischen den Feldern beträgt jeweils 1 Pixel.

                                     XL                                                                    L                                                M                                  S

Bild 4: Beispiel für eine Hintergrundgrafik

Für einen Button mit einem eigenen Hintergrund laden Sie den Hintergrund wie nachfolgend beschrieben hoch.

Hintergrundgrafik hochladen:
  1. Erstellen Sie eine Hintergrundgrafik oder lassen Sie diese erstellen und speichern Sie diese auf der Festplatte Ihres Rechners.
  2. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Eigener Hintergrund.
  3. Klicken Sie auf Durchsuchen....
  4. Wählen Sie die gespeicherte Datei der Hintergrundgrafik auf Ihrer Festplatte.
  5. Klicken Sie auf Öffnen.
  6. Klicken Sie auf Speichern, um den Hintergrund hochzuladen.
    → Der Button-Hintergrund wird im Bereich uploaded als Vorschau angezeigt.

Nachdem Sie einen Hintergrund hochgeladen haben, müssen Sie diesen im Button einstellen. Gehen Sie dazu wie unten beschrieben vor.

Buttons mit hochgeladener Hintergrundgrafik konfigurieren:
  1. Öffnen Sie das Menü CMS » Webdesign » Buttons.
  2. Klicken Sie auf das Untermenü des Buttons.
  3. Wählen Sie im Tab Konfiguration im Bereich Button-Hintergrund unter uploaded den Hintergrund aus.
  4. Nehmen Sie die weiteren Einstellungen gemäß Tabelle 1 vor.
  5. Klicken Sie auf Speichern, um die Einstellungen zu sichern.
Nach oben