Inhaltsverzeichnis

    Schaltfläche mit dem OnPage Composer erstellen

    Hinweis: Diese Seite bezieht sich auf JTL-Shop 5. JTL-Shop 5 wird in naher Zukunft verfügbar sein. Aktuelle Infos zum Release-Status von JTL-Shop 5 finden Sie im Release-Forum: Zum Release-Forum. Falls Sie noch JTL-Shop 4 verwenden, finden Sie die Dokumentation unter JTL-Shop 4.

    Ihre Aufgabe/Ausgangslage

    Sie möchten eine Schaltfläche auf einer Seite Ihres Onlineshops anzeigen lassen, zum Beispiel als Call-to-Action-Button für eine Aktionsseite.

    Schaltfläche erstellen

    1. Melden Sie sich im Backend von JTL-Shop an und wechseln Sie in das Frontend von JTL-Shop.
    2. Öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie auf das OnPage Composer-Icon oben links auf der Seite, um den OnPage Composer für die Seite zu öffnen.
    3. Ziehen Sie das Portlet Schaltfläche im OnPage Composer an eine beliebige Stelle. Es öffnet sich das Fenster Schaltfläche bearbeiten.
    1. Geben Sie unter Beschriftung den Text ein, der auf der Schaltfläche angezeigt werden soll.
    2. Geben Sie unter URL den Link für die Seite ein, die Sie mit der Schaltfläche verlinken möchten.
    3. Nehmen Sie die weiteren Einstellungen (siehe unten) für die Schaltfläche vor.
    4. Speichern Sie Ihre Einstellungen.
    5. Folgen Sie den weiteren Schritten zur Vorschau und Veröffentlichung einer bearbeiteten Seite unter Seite mit dem OnPage Composer bearbeiten.

    Registerkarte Allgemein

    Beschriftung: Geben Sie hier den Text ein, der auf der Schaltfläche angezeigt werden soll.


    URL: Geben Sie hier die URL ein, auf die Sie mit der Schaltfläche verlinken möchten.


    Farbschema: Wählen Sie hier eines der Farbschemata für die Schaltfläche aus. Die Farbschemata können über das Template angepasst werden.


    In neuer Registerkarte öffnen: Aktivieren Sie diese Schaltfläche, wenn Sie möchten, dass bei Klick auf die Schaltfläche der Link in einer neuen Registerkarte des Browsers geöffnet werden soll.


    Größe: Mit dieser Option können Sie die Größe der Schaltfläche einstellen.


    Linktitel: Hier können Sie den Titel für den Link einstellen. Der Linktitel wird angezeigt, wenn Sie mit der Maus über die Schaltfläche fahren.


    Ausrichtung: Hier legen Sie fest, wie die Schaltfläche auf der Seite ausgerichtet sein soll.

    Registerkarte Icon

    Sie können die Schaltfläche zusätzlich mit einem Icon versehen.

    Schaltfläche mit Icon versehen: Aktivieren Sie diese Checkbox, um Ihrer Schaltfläche ein Icon hinzuzufügen. Es erscheinen weitere Optionen für die Schaltfläche.


    Ausrichtung: Hier legen Sie fest, ob sich das Icon links oder rechts auf der Schaltfläche befinden soll.


    Icon: Markieren Sie hier das Icon, das auf der Schaltfläche angezeigt werden soll.

    Registerkarte Layout

    Hintergrundfarbe: Hier können Sie eine Farbe einstellen, in der die Schaltfläche angezeigt wird.


    Schriftfarbe: Hier stellen Sie die Farbe der Schrift auf der Schaltfläche ein.


    Schriftgröße: Hier stellen Sie die Größe der Schrift auf der Schaltfläche ein. Geben Sie hier einen CSS-Wert ein, z. B. 5px, 0.5em, usw.


    Rahmenstil/Rahmenfarbe: Hier können Sie festlegen, ob die Schaltfläche einen Rahmen haben soll und welche Farbe der Rahmen haben soll.


    Rahmenabrundung: Hier können Sie festlegen, ob der Rahmen abgerundet sein soll. Sie geben jeweils an, mit welchem Abstand zur Ecke die Abrundung starten soll. Voraussetzung ist, dass Sie einen Rahmenstil ausgewählt haben. Geben Sie hier einen CSS-Wert ein, z. B. 5px, 0.5em, usw.


    Außenabstand: Hier können Sie für jede Seite in Pixeln einstellen, wie viel Abstand das Element zum (gedachten) Rand haben soll. Das Element wird entsprechend verkleinert/verschoben.


    Rahmen: Hier können Sie für jede Seite die Größe des Rahmens in Pixeln einstellen.


    Innenabstand: Hier können Sie für jede Seite einstellen, wie viel Pixel Abstand das Element zum (gedachten) Rahmen haben soll.

    Registerkarte Animation

    Animationstyp: Hier können Sie festlegen, in welcher Art Ihre Schaltfläche animiert werden soll.


    Dauer: Hier können Sie festlegen, wie lang die gesamte Animation der Schaltfläche dauern soll.


    Verzögerung: Hier können Sie festlegen, wie viel Zeit vor der ersten und zwischen den Animationen vergehen soll.


    Abstand (Pixel): Hier legen Sie fest, wie viel Abstand zwischen der Oberkante des entsprechenden Elements und der Unterkante des Browserfensters mindestens sein muss, damit die Animation startet.


    Wiederholung: Hier legen Sie fest, wie oft die Animation insgesamt wiederholt werden soll.