Elemente - Schaltflächen

Verwenden Sie den Inhaltstyp Buttons, um entweder eine einzelne Schaltfläche oder eine Gruppe von Schaltflächen im Page Builder Arbeitsbereich hinzuzufügen. Sie können Schaltflächen horizontal oder vertikal anordnen und sie direkt zu Zeilen, Spalten, Registerkarten und Bannern auf dem Arbeitsbereich hinzufügen.

Banner mit einer Schaltfläche auf dem Frontend

Wenn Sie im Arbeitsbereich Page Builder arbeiten, werden Ihre Inhaltsänderungen erst dann vollständig gespeichert, wenn Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs klicken und dann auf Speichern in der oberen rechten Ecke für die CMS-Seite, die Produktseite, die Kategorieseite, den Block oder den dynamischen Block.

Wenn Sie umfangreiche Änderungen am Inhalt von Page Builder vornehmen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abläuft.

Werkzeugkästen

Wenn Sie mit dem Inhaltstyp Schaltflächen arbeiten, fügen Sie einzelne Schaltflächen und den Schaltflächen-Container, der eine oder mehrere Schaltflächen enthält, hinzu und bearbeiten sie. Für jeden dieser Typen gibt es eine eigene Toolbox, die Sie für die Gestaltung von Schaltflächen auf der Seite Page Builder verwenden.

Werkzeugkasten für einzelne Schaltflächen

Schaltflächen-Toolbox

Werkzeug Symbol Beschreibung
Einstellungen Öffnet die Seite Schaltfläche bearbeiten, auf der Sie die Eigenschaften der Schaltfläche ändern können.
Duplizieren Erzeugt eine Kopie der Schaltfläche.
Entfernen Entfernt die Schaltfläche vom Arbeitsbereich.

Schaltflächen-Container Toolbox

Buttons container toolbox

Werkzeug Symbol Beschreibung
Verschieben Verschiebt den Button-Container an eine andere gültige Stelle auf der Seite.
Hinzufügen Fügt dem Container eine neue Schaltfläche hinzu.
(Beschriftung) Schaltfläche Identifiziert den aktuellen Container als ein Schaltflächenelement.
Einstellungen Öffnet die Seite Schaltflächen bearbeiten, wo Sie die Eigenschaften des Containers ändern können.
Ausblenden Blendet den Button-Container aus.
Anzeigen Zeigt den versteckten Button-Container.
Duplizieren Erzeugt eine Kopie des Schaltflächencontainers.
Entfernen Löscht den Button-Container und seinen Inhalt vom Arbeitsbereich.

Hinzufügen einer einzelnen Schaltfläche

  1. Erweitern Sie im Bedienfeld Page Builder Elemente und ziehen Sie einen Schaltflächen-Platzhalter in eine Zeile, Spalte oder einen Registersatz auf dem Arbeitsbereich.

    Ziehen einer Schaltfläche auf den Arbeitsbereich

  2. Bewegen Sie den Mauszeiger über die Schaltfläche, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

  3. Geben Sie den Schaltflächentext ein, der auf der Schaltfläche angezeigt werden soll.

    Grundlegende Schaltflächeneinstellungen

  4. Stellen Sie Schaltflächentyp auf einen der folgenden Werte ein:

    Primäre Wendet den primären Schaltflächenstil aus der aktuellen Stilvorlage an.
    Sekundär Wendet den sekundären Schaltflächenstil aus der aktuellen Stilvorlage an, falls zutreffend.
    Link Erzeugt einen Hyperlink anstelle einer Schaltfläche.

    Beispiel für eine primäre und sekundäre Schaltfläche

  5. Legen Sie die Schaltflächenverbindung mit einem der folgenden Typen fest:

    • URL - Geben Sie die Ziel-URL für den Link ein.

      Die URL kann entweder ein relativer Link zu einem Produkt oder einer Seite in Ihrem Shop oder eine vollqualifizierte URL sein.

      Beispiel einer relativen URL ../luma-analog-uhr.html
      Beispiel für eine vollqualifizierte URL http://mystore.com/luma-analog-watch.html

      Wenn der Link zu einer anderen Website führt, können Sie die aktuelle Seite zu Ihrem Shop offen halten, indem Sie den Link in einem neuen Browser-Tab öffnen.

      Um zu verhindern, dass der Besucher Ihren Shop verlässt, aktivieren Sie das Kontrollkästchen In neuer Registerkarte öffnen.

    • Produkt - Geben Sie einen Produktnamen (teilweise oder vollständig) oder eine SKU ein und wählen Sie dann den Produktnamen aus der Liste aus.

      Die Produkte werden in der Liste entsprechend der Einstellung Vergriffene Produkte anzeigen angezeigt. Für Händler mit mehreren Quellen, die Bestandsverwaltung verwenden, wird die Produktliste nur durch die Quelle begrenzt, die der Standard-Website zugewiesen ist.

      Auswahl eines Produkts für den Schaltflächenlink

    • Kategorie - Geben Sie einen Kategorienamen ein (teilweise oder vollständig) oder klicken Sie in das leere Feld, um die Kategorienstruktur anzuzeigen. Wählen Sie dann den Kategorienamen in der Baumstruktur aus.

      Auswahl einer Kategorie für den Schaltflächenlink

    • Seite - Geben Sie den Namen einer CMS-Seite ein (teilweise oder vollständig) oder klicken Sie in das leere Feld, um die vollständige Liste anzuzeigen. Wählen Sie dann den Namen der Seite in der Liste der Suchergebnisse.

      CMS-Seite für Schaltflächenlink wählen

  6. Vervollständigen Sie die erweiterten Einstellungen nach Bedarf.

  7. Wenn Sie fertig sind, klicken Sie auf Speichern in der oberen rechten Ecke, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Hinzufügen einer Reihe von Schaltflächen

Die folgenden Abschnitte beschreiben eine Reihe von Schritten, um mit einer einzelnen Schaltfläche zu beginnen und einen Satz von drei Schaltflächen innerhalb eines Schaltflächen-Containers zu erstellen. Wenn Sie noch keine einzelne Schaltfläche haben, folgen Sie den vorherigen Anweisungen, um eine einzelne Schaltfläche zum Arbeitsbereich hinzuzufügen.

Schritt 1: Erstellen Sie die zweite Schaltfläche

  1. Bewegen Sie den Mauszeiger über den Schaltflächen-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen () aus.

    Eine weitere Schaltfläche hinzufügen

  2. Geben Sie den Text ein, der auf der zweiten Schaltfläche erscheinen soll.

  3. Klicken Sie auf die neue Schaltfläche, um ihre Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

    Bearbeiten der Schaltfläche

  4. Setzen Sie Schaltflächentyp auf Sekundär.

  5. Richten Sie die Schaltflächenverbindung nach Bedarf ein.

    Im folgenden Beispiel ist der Link eine relative URL, die zur Seite Contact Us führt.

    Einstellungen für die Schaltfläche Kontaktieren

  6. Füllen Sie die erweiterten Einstellungen nach Bedarf aus.

  7. Wenn Sie fertig sind, klicken Sie auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 2: Erstellen Sie die dritte Schaltfläche

  1. Klicken Sie erneut auf die zweite Schaltfläche auf dem Arbeitsbereich und wählen Sie das Symbol Duplizieren ().

    Duplizieren einer Schaltfläche

  2. Geben Sie den Text ein, der auf der dritten Schaltfläche erscheinen soll.

  3. Klicken Sie auf die dritte Schaltfläche, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

    Werkzeugkasten für die dritte Schaltfläche

  4. Aktualisieren Sie den Button Link nach Bedarf.

  5. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 3: Aktualisieren Sie den Schaltflächen-Container

  1. Bewegen Sie den Mauszeiger über den Schaltflächencontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings () aus.

    Werkzeugkasten Schaltflächen-Container

  2. Wählen Sie unter Erscheinungsbild die Option Gestapelt.

  3. Setzen Sie Alle Schaltflächen sind gleich groß auf Ja.

    Gleich große gestapelte Schaltflächen

  4. Aktualisieren Sie die übrigen Einstellungen nach Bedarf, indem Sie die Beschreibungen aus [Einstellungen für einen Schaltflächen-Container ändern][Schaltflächen-Container] verwenden.

  5. Wenn Sie fertig sind, klicken Sie auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

    Der komplette gestapelte Schaltflächensatz wird auf dem Arbeitsbereich angezeigt, mit einer primären Schaltfläche und zwei sekundären Schaltflächen.

    Gestapelte Schaltflächen auf dem Arbeitsbereich

Verschieben einer Schaltfläche

  1. Klicken Sie auf die Schaltfläche, die Sie verschieben möchten.

  2. Wählen Sie das Symbol Verschieben (), das direkt vor dem Schaltflächentext erscheint, und ziehen Sie es an eine neue Position innerhalb des Schaltflächencontainers.

    Verschieben einer Schaltfläche

Einstellungen für eine Schaltfläche ändern

  1. Klicken Sie auf die Schaltfläche auf dem Arbeitsbereich, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ( ).

    Schaltflächen-Werkzeugkästen

  2. Aktualisieren Sie die Standardeinstellungen nach Bedarf.

    • Schaltflächentext - Geben Sie den Text ein, der auf der Schaltfläche angezeigt werden soll. Dieser kann auch direkt auf dem Arbeitsbereich aktualisiert werden.

    • Schaltflächentyp - Bestimmt das Format der Schaltfläche.

      Primär Wendet den primären Schaltflächenstil aus der aktuellen Stilvorlage an.
      Sekundär Wendet den sekundären Schaltflächenstil aus der aktuellen Stilvorlage an, falls zutreffend.
      Link Erzeugt einen Hyperlink anstelle einer Schaltfläche.
    • Button Link - Bestimmt die Zielseite, die beim Anklicken des Buttons angezeigt wird.

      URL Verwendet entweder eine relative oder vollqualifizierte URL, um die Zielseite zu identifizieren.
      Produkt Identifiziert die Zielseite basierend auf dem Produktnamen oder der SKU. Der Produktname kann entweder mit einem Teil- oder Vollnamen gesucht werden. Das Produkt wird dann aus der Liste der Suchergebnisse ausgewählt.
      Kategorie Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie im Kategorienbaum.
      Seite Identifiziert die Zielseite als eine bestimmte CMS-Seite.
  3. Vervollständigen Sie die erweiterten Einstellungen nach Bedarf.

  4. Um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren, klicken Sie in der oberen rechten Ecke auf Speichern.

Einstellungen für einen Schaltflächencontainer ändern

  1. Bewegen Sie den Mauszeiger über den Schaltflächencontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().

  2. Aktualisieren Sie die Erscheinungsbild-Einstellungen nach Bedarf.

    • Verwenden Sie die Anordnungsoptionen, um die Schaltflächen entweder horizontal oder vertikal im Container anzuzeigen:

      Inline Ordnet die Schaltflächen horizontal an.
      Gestapelt Ordnet die Schaltflächen vertikal an.
    • Stellen Sie die Option Alle Schaltflächen sind gleich groß nach Ihren Wünschen ein.

      Wenn dies auf Ja eingestellt ist, haben alle Schaltflächen im Container eine einheitliche Größe, basierend auf der Länge des längsten Schaltflächentextes.

  3. Vervollständigen Sie die erweiterten Einstellungen nach Bedarf.

  4. Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Erweiterte Einstellungen ändern

Sie können die Erweiterten Einstellungen für einzelne Schaltflächen und für den Schaltflächen-Container ändern.

  1. Wählen Sie die Ausrichtung, um die Positionierung innerhalb des übergeordneten Containers zu steuern:

    Standard Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
    Links Richtet den Inhalt entlang des linken Randes des übergeordneten Containers aus, unter Berücksichtigung der angegebenen Polsterung.
    Zentriert Richtet den Inhalt in der Mitte des übergeordneten Containers aus, unter Berücksichtigung der angegebenen Füllung.
    Rechts Richtet den Inhalt entlang des rechten Randes des übergeordneten Containers aus, unter Berücksichtigung der angegebenen Füllung.
  2. Legt den Stil Rahmen fest, der auf alle vier Seiten der Schaltfläche oder des Schaltflächen-Containers angewendet wird:

    Standard Wendet den Standard-Rahmenstil an, der in der zugehörigen Stilvorlage angegeben ist.
    Keiner Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
    Gepunktet Der Containerrand erscheint als gepunktete Linie.
    Gestrichelt Der Containerrand erscheint als gestrichelte Linie.
    Durchgehend Der Containerrand wird als durchgezogene Linie dargestellt.
    Doppelt Der Containerrand wird als Doppellinie dargestellt.
    Rille Der Containerrand erscheint als gerillte Linie.
    Steg Der Containerrand erscheint als geriffelte Linie.
    Einzug Die Umrandung des Containers erscheint als versenkte Linie.
    Außenlinie Der Containerrand erscheint als Umrandungslinie.
  3. Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

    • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

    • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

    • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

  4. (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf die Schaltfläche oder den Schaltflächencontainer angewendet werden sollen.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  5. Geben Sie Werte in Pixeln für Margins und Padding ein, um die äußeren Ränder und die innere Auffüllung der Schaltfläche oder des Schaltflächen-Containers zu bestimmen.

    Geben Sie die entsprechenden Werte in das Diagramm ein.

    Ränder Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird. Optionen: Oben / Rechts / Unten / Links
    Auffüllung Die Höhe des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird. Optionen: Oben / Rechts / Unten / Links