Elemente - Schaltflächen

Verwenden Sie den Schaltflächen-Inhaltstyp, um entweder eine einzelne Schaltfläche oder eine Reihe von Schaltflächen in der Page Builder Phase 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 einem Button auf der Storefront {width="600" modal="regular"}

NOTE
Wenn Sie wesentliche Änderungen an Page Builder Inhalten vornehmen, wird empfohlen, die Admin-Sitzungslebensdauer) 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 eine oder mehrere Schaltflächen enthält, hinzu und bearbeiten diese. Jeder verfügt über seine eigene Toolbox, mit der Sie Schaltflächen auf der Page Builder entwerfen können.

Individuelle Schaltflächen-Toolbox

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

Tool
Symbol
Beschreibung
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Schaltfläche Bearbeiten, auf der Sie die Eigenschaften der Schaltfläche ändern können.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie der Schaltfläche.
entfernen
Symbol entfernen {width="25"}
Löscht die Schaltfläche aus der Phase.

Schaltflächen-Container-Toolbox

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

Tool
Symbol
Beschreibung
Verschieben
move icon {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 dem Container eine Schaltfläche hinzu.
(Bezeichnung)
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 ausblenden {width="25"}
Blendet den Schaltflächen-Container aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt den ausgeblendeten Schaltflächen-Container an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des Schaltflächen-Containers.
entfernen
Symbol entfernen {width="25"}
Löscht den Schaltflächen-Container und seinen Inhalt aus der Phase .
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. 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 „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.

Individuelle Schaltfläche hinzufügen

  1. Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen Buttons Platzhalter in eine Zeile, Spalte oder einen Tab, die bzw. der auf dem Bühnenbild festgelegt ist.

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

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

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

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

  4. Legen Sie Button Type auf eine der folgenden Einstellungen fest:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Typ Beschreibung
    Primary Wendet die primäre Schaltflächenformatvorlage aus dem aktuellen Stylesheet an.
    Secondary Wendet ggf. das sekundäre Schaltflächenformat aus dem aktuellen Stylesheet an.
    Link Erstellt statt einer Schaltfläche einen Hyperlink.

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

  5. Legen Sie die 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

      Beispiel einer vollqualifizierten URL: http://mystore.com/luma-analog-watch.html

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

      Um zu verhindern, dass der Besucher Ihren Store verlässt, 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 entsprechend den Einstellungen Nicht vorrätige Produkte anzeigen angezeigt. Bei Händlern mit mehreren Source, die Inventory management verwenden, ist die Produktliste durch die Quelle begrenzt, die nur der Standard-Website zugewiesen ist.

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

    • Category : Geben Sie einen Kategorienamen ein (teilweise oder vollständig) oder klicken Sie in das leere Feld, um die Kategoriestruktur anzuzeigen. Wählen Sie dann den Kategorienamen in der Baumstruktur 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 Suchergebnisliste aus.

      CMS-Seite für Button-Link auswählen {width="600" modal="regular"}

  6. Füllen Sie Erweiterte Einstellungen nach Bedarf aus.

  7. Wenn Sie fertig sind, klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Schaltflächensatz hinzufügen

In den folgenden Abschnitten wird eine Reihe von Schritten beschrieben, die mit einer einzelnen Schaltfläche beginnen und einen Satz von drei Schaltflächen in einem Schaltflächen-Container erstellen. Wenn Sie noch keine einzelne Schaltfläche haben, befolgen Sie die vorherigen Anweisungen, um eine einzelne Schaltfläche zum Schritt 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 das Symbol Hinzufügen ((Symbol hinzufügen {width="20"} ) aus.

    Eine weitere Schaltfläche hinzufügen {width="500" modal="regular"}

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

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

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

  4. Legen Sie Button Type auf Secondary fest.

  5. Richten Sie die Button Link nach Bedarf ein.

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

    Schaltflächeneinstellungen für Kontakt {width="600" modal="regular"}

  6. Füllen Sie Erweiterte Einstellungen nach Bedarf aus.

  7. Klicken Sie abschließend 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 ( Duplikatssymbol {width="20"} ) aus.

    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"} ) aus.

    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: Button-Container aktualisieren

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

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

  2. Wählen Sie unter Appearance ​die Option Stacked ​aus.

  3. Legen Sie All Buttons are same size auf Yes fest.

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

  4. Aktualisieren Sie die verbleibenden Einstellungen nach Bedarf mithilfe der Beschreibungen unter Einstellungen für einen Schaltflächen-Container ändern.

  5. Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

    Die gesamte gestapelte Tastenmenge wird auf der Bühne mit einer primären Taste und zwei sekundären Tasten 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, das unmittelbar vor dem Schaltflächentext angezeigt wird, und ziehen Sie es an eine neue Position für die Schaltfläche im Schaltflächen-Container.

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

Ändern der Einstellungen für eine Schaltfläche

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

    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 die primäre Schaltflächenformatvorlage aus dem aktuellen Stylesheet an.
      Secondary Wendet ggf. die sekundäre Schaltflächenformatvorlage aus dem aktuellen Stylesheet an.
      Link Erstellt statt einer Schaltfläche einen Hyperlink.
    • Button Link - Bestimmt die Zielseite, die bereitgestellt wird, wenn auf die Schaltfläche geklickt 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 eine vollqualifizierte URL zur Identifizierung der Zielseite.
      Product Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Der Produktname kann entweder anhand eines Teil- oder eines vollständigen Namens gesucht werden. Das Produkt wird dann aus der Liste der Suchergebnisse ausgewählt.
      Category Gibt die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategoriestruktur an.
      Page Identifiziert die Zielseite als eine bestimmte CMS-Seite.
  3. Füllen Sie Erweiterte Einstellungen nach Bedarf aus.

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

Ändern der Einstellungen für einen Schaltflächen-Container

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

  2. Aktualisieren Sie die Appearance 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 Ihren Anforderungen fest.

      Bei Festlegung auf Yes haben alle Schaltflächen im Container eine konsistente Größe, die auf der Länge des längsten Schaltflächentextes basiert.

  3. Füllen Sie Erweiterte Einstellungen nach Bedarf aus.

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

Erweiterte Einstellungen ändern

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

  1. Um die Positionierung innerhalb des übergeordneten Containers zu steuern, wählen Sie die 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 ein etwaiger Abstand berücksichtigt wird.
    Center Richtet den Inhalt in der Mitte des übergeordneten Containers aus, wobei ein etwaiger Abstand berücksichtigt wird.
    Right Richtet den Inhalt am rechten Rand des übergeordneten Containers aus, wobei ein beliebiger Abstand berücksichtigt wird.
  2. Legen Sie den Border 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 die Standardformatvorlage für Rahmen an, die im zugehörigen Stylesheet angegeben ist.
    None Zeigt keine sichtbaren Begrenzungen des Containers an.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgezogene Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als gerillte Linie angezeigt.
    Ridge Der Container-Rahmen wird als geriffelte Linie angezeigt.
    Inset Der Container-Rahmen wird als Einfügelinie angezeigt.
    Outset Der Container-Rahmen wird als Ausgangslinie angezeigt.
  3. Wenn Sie einen anderen Rahmenstil als None festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:

    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 einen Musterabschnitt auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein.
    Border Radius Geben Sie die Anzahl der Pixel ein, um die Größe des Radius festzulegen, mit dem jede Ecke des Rahmens gerundet werden soll.
  4. (Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf die Schaltfläche oder den Schaltflächen-Container angewendet werden sollen.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  5. Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand der Schaltfläche oder des Schaltflächen-Containers 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 des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
    Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d