Elemente - Schaltflächen

Verwenden Sie den Inhaltstyp Schaltflächen , um entweder eine einzelne Schaltfläche oder eine Reihe von Schaltflächen in der Page Builder Bühne hinzuzufügen. Sie können Schaltflächen horizontal oder vertikal anordnen und sie direkt zu Zeilen, Spalten, Registerkarten und Bannern auf der Bühne hinzufügen.

Banner mit einer Schaltfläche auf der Storefront

NOTE
Wenn Sie wesentliche Änderungen am Inhalt von Page Builder vornehmen, wird empfohlen, die Lebensdauer der Admin-Sitzung zu erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Toolboxes

Wenn Sie mit dem Inhaltstyp Schaltflächen arbeiten, fügen Sie einzelne Schaltflächen und den Schaltflächen-Container, der mindestens eine Schaltfläche enthält, hinzu und bearbeiten diese. Jede verfügt über eine eigene Toolbox, mit der Sie Schaltflächen auf der Page Builder-Bühne entwerfen.

Symbolleiste für einzelne Schaltflächen

Schaltflächen-Toolbox

Tool
Symbol
Beschreibung
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Schaltfläche bearbeiten , auf der Sie die Eigenschaften der Schaltfläche ändern können.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert die Schaltfläche.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht die Schaltfläche aus der Bühne.

Schaltflächen-Container-Toolbox

Schaltflächen-Container-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt den Schaltflächen-Container an eine andere gültige Position auf der Seite.
Hinzufügen
Symbol "Hinzufügen" {width="25"}
Fügt eine Schaltfläche zum Container hinzu.
(Titel)
Schaltfläche
Identifiziert den aktuellen Container als Schaltflächenelement.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite "Schaltflächen bearbeiten", auf der Sie die Eigenschaften des Containers ändern können.
Ausblenden
Symbol zum Ausblenden {width="25"}
Blendet den Schaltflächencontainer aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den ausgeblendeten Schaltflächen-Container an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert den Schaltflächen-Container.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den Schaltflächen-Container und seinen Inhalt aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

Hinzufügen einer einzelnen Schaltfläche

  1. Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter Buttons auf eine Zeile, Spalte oder Registerkarte, die auf der Bühne festgelegt ist.

    Ziehen einer Schaltfläche auf die Bühne {width="500" modal="regular"}

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

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

    Grundlegende Schaltflächeneinstellungen {width="600" modal="regular"}

  4. Setzen Sie Button Type auf einen der folgenden Werte:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Typ Beschreibung
    Primary Wendet den primären Schaltflächenstil aus dem aktuellen Stylesheet an.
    Secondary Wendet ggf. den sekundären Schaltflächenstil aus dem aktuellen Stylesheet an.
    Link Erstellt einen Hyperlink anstelle einer Schaltfläche.

    Beispiel für eine Primäre und sekundäre Schaltfläche 🔗 {width="500" modal="regular"}

  5. Legen Sie den Button Link 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 Store oder eine vollständig qualifizierte URL sein.

      Beispiel für eine relative URL - ../luma-analog-watch.html

      Vollständig qualifiziertes URL-Beispiel - http://mystore.com/luma-analog-watch.html

      Wenn der Link zu einer anderen Website führt, können Sie die aktuelle Seite für Ihren Store offen halten, indem Sie den Link in einer neuen Browser-Registerkarte öffnen.

      Um zu verhindern, dass der Besucher von Ihrem Store weg navigiert, aktivieren Sie das Kontrollkästchen Open in new tab .

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

      note note
      NOTE
      Die Produkte werden in der Liste gemäß den Einstellungen für Nicht vorrätige Produkte anzeigen angezeigt. Bei Multi-Source-Händlern, die Inventory management verwenden, ist die Produktliste durch die der Standardwebsite zugewiesene Quelle beschränkt.

      Auswählen eines Produkts für den Schaltflächen-Link {width="600" modal="regular"}

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

      Auswählen einer Kategorie für den Schaltflächen-Link {width="600" modal="regular"}

    • Page - 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 aus.

      Wählen Sie die CMS-Seite für den Schaltflächen-Link {width="600" modal="regular"}

  6. Nehmen Sie die erweiterten Einstellungen nach Bedarf vor.

  7. Klicken Sie nach Abschluss des Vorgangs oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Schaltflächensatz hinzufügen

In den folgenden Abschnitten werden eine Reihe von Schritten beschrieben, die mit einer einzelnen Schaltfläche beginnen und eine Reihe von drei Schaltflächen in einem Schaltflächencontainer erstellen. Wenn Sie noch keine einzelne Schaltfläche haben, befolgen Sie die vorherigen Anweisungen, um der Bühne eine einzelne Schaltfläche hinzuzufügen.

Schritt 1: Zweite Schaltfläche erstellen

  1. Bewegen Sie den Mauszeiger über den Schaltflächen-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen ( Symbol Hinzufügen {width="20"} ).

    Hinzufügen einer weiteren Schaltfläche {width="500" modal="regular"}

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

  3. Klicken Sie auf die neue Schaltfläche, um die zugehörige Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

    Bearbeiten der Schaltfläche {width="500" modal="regular"}

  4. Setzen Sie Button Type auf Secondary.

  5. Richten Sie die Button Link nach Bedarf ein.

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

    Einstellungen der Schaltfläche "Kontaktaufnahme" {width="600" modal="regular"}

  6. Nehmen Sie die erweiterten Einstellungen nach Bedarf vor.

  7. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 2: Dritte Schaltfläche erstellen

  1. Klicken Sie erneut auf die zweite Schaltfläche auf der Bühne und wählen Sie das Symbol Duplizieren ( Symbol Duplizieren {width="20"} ).

    Duplizieren einer Schaltfläche {width="500" modal="regular"}

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

  3. Klicken Sie auf die dritte Schaltfläche, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

    Toolbox für die dritte Schaltfläche {width="500" modal="regular"}

  4. Aktualisieren Sie die Button Link nach Bedarf.

  5. Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 3: Aktualisieren des Schaltflächencontainers

  1. Bewegen Sie den Mauszeiger über den Schaltflächen-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

    Schaltflächen-Container-Toolbox {width="500" modal="regular"}

  2. Wählen Sie unter "Appearance"die Option "Stacked".

  3. Setzen Sie All Buttons are same size auf Yes.

    Gestapelte Schaltflächen derselben Größe {width="300"}

  4. Aktualisieren Sie die restlichen Einstellungen nach Bedarf mithilfe der Beschreibungen aus Einstellungen für einen Schaltflächencontainer ändern.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

    Auf der Bühne wird der gesamte gestapelte Schaltflächensatz mit einer primären und zwei sekundären Schaltflächen angezeigt.

    Gestapelte Schaltflächen auf der Bühne {width="500" modal="regular"}

Schaltfläche verschieben

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

  2. Wählen Sie das Symbol Verschieben ( Symbol Verschieben {width="20"} ) aus und ziehen Sie es direkt vor dem Schaltflächentext an eine neue Position für die Schaltfläche im Schaltflächencontainer.

    Verschieben einer Schaltfläche {width="500" modal="regular"}

Einstellungen für eine Schaltfläche ändern

  1. Klicken Sie auf die Schaltfläche auf der Bühne, um die Symbolleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

    Schaltflächen-Toolboxes {width="500" modal="regular"}

  2. Aktualisieren Sie die Standardeinstellungen nach Bedarf.

    • Button Text - Geben Sie den Text ein, der auf der Schaltfläche angezeigt werden soll (kann auch direkt von der Bühne aus aktualisiert werden).

    • Button Type - Bestimmt das Schaltflächenformat.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Typ Beschreibung
      Primary Wendet den primären Schaltflächenstil aus dem aktuellen Stylesheet an.
      Secondary Wendet ggf. den sekundären Schaltflächenstil aus dem aktuellen Stylesheet an.
      Link Erstellt einen Hyperlink anstelle einer Schaltfläche.
    • Button Link - Bestimmt die Zielseite, die beim Klicken auf die Schaltfläche bereitgestellt wird.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Option Beschreibung
      URL Verwendet entweder eine relative oder vollständig qualifizierte URL zur Identifizierung der Zielseite.
      Product Identifiziert die Zielseite basierend auf dem Produktnamen oder der SKU. Der Produktname kann basierend auf einem Teil- oder Vollnamen gesucht werden. Das Produkt wird dann aus der Liste der Suchergebnisse ausgewählt.
      Category Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie im Kategoriebaum.
      Page Identifiziert die Zielseite als spezifische CMS-Seite.
  3. Nehmen Sie die erweiterten Einstellungen nach Bedarf vor.

  4. Um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren, klicken Sie oben rechts auf Save .

Einstellungen für einen Schaltflächencontainer ändern

  1. Bewegen Sie den Mauszeiger über den Schaltflächen-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

  2. Aktualisieren Sie die Appearance -Einstellungen nach Bedarf.

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

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Option Beschreibung
      Inline Ordnet die Schaltflächen horizontal an.
      Stacked Ordnet die Schaltflächen vertikal an.
    • Legen Sie die Option All buttons are same size entsprechend Ihrer Voreinstellung fest.

      Wenn der Wert auf "Yes" gesetzt ist, haben alle Schaltflächen im Container eine konsistente Größe, basierend auf der Länge des längsten Schaltflächentextes.

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

  4. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Erweiterte Einstellungen ändern

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

  1. Um die Positionierung innerhalb des übergeordneten Containers zu steuern, wählen Sie den Wert Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Beschreibung
    Default Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist.
    Left Richtet den Inhalt am linken Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
    Center Richtet den Inhalt in der Mitte des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
    Right Richtet den Inhalt am rechten Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
  2. Legen Sie den Border -Stil fest, der auf alle vier Seiten des Schaltflächen- oder Schaltflächen-Containers angewendet wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Beschreibung
    Default Wendet den standardmäßigen Randstil an, der vom zugehörigen Stylesheet angegeben wird.
    None liefert keine sichtbare Anzeige der Containergrenzen.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgehende Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als Rillenlinie angezeigt.
    Ridge Der Container-Rahmen wird als gekürzte Linie angezeigt.
    Inset Der Container-Rahmen wird als Inset-Zeile angezeigt.
    Outset Der Container-Rahmen wird als Ausgangspunkt angezeigt.
  3. Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Border Color Geben Sie die Farbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl Pixel für die Rahmenlinienbreite an.
    Border Radius Geben Sie die Anzahl der Pixel an, um die die Größe des Radius definiert wird, mit dem die einzelnen Ecken des Rands gerundet werden.
  4. (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Schaltflächen- oder Schaltflächen-Container angewendet werden soll.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  5. Geben Sie Werte in Pixel für den Wert Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Schaltflächen- oder Schaltflächenbehälters zu bestimmen.

    Geben Sie die entsprechenden Werte in das Diagramm ein.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container-Bereich Beschreibung
    Margins Die Menge an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
    Padding Die Menge an leerem Raum, die auf den inneren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d