Media - Banner

Erweitern Sie im Bedienfeld Page Builder den Wert Media und ziehen Sie einen Platzhalter Banner auf die Bühne.

{width="600" modal="regular"}

Die Schaltflächen Upload Image ​und​ Select from Gallery sind enthalten, sodass Sie den Bannerinhalt direkt von der Bühne aus ändern können. Sie können auch den Inhalt auf der Seite Edit Banner ​ändern.

Klicken Sie in den Banner-Platzhalter, um den Texteditor anzuzeigen und Inhalt für das Banner einzugeben.

Mithilfe der Einstellungen für Inhalt können Sie auch komplexere Bannerinhalte einfügen.

Bewegen Sie den Mauszeiger über den Banner-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

In den folgenden Abschnitten finden Sie detaillierte Informationen zum Aktualisieren der verfügbaren Einstellungen:

• Appearance
• Content
• Background
• Advanced

Klicken Sie nach Abschluss des Vorgangs in der oberen rechten Ecke auf Save , um die Seite Edit Banner ​zu schließen.

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

Klicken Sie auf den Platzhaltertext und geben Sie den Text ein, der im Banner angezeigt werden soll.

Die Editor-Symbolleiste wird über dem Textfeld angezeigt.

{width="600" modal="regular"}

Verwenden Sie die Editor-Symbolleiste, um Text einzugeben und zu formatieren sowie Elemente wie Links, Bilder und Widgets einzufügen.

{width="600" modal="regular"}

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

Scrollen Sie nach unten zum Abschnitt Content ​und verwenden Sie den Editor Message Text, um Bannertext einzugeben und zu formatieren.

Sie können auch Elemente wie Textlinks, Bilder und Widgets einfügen.

{width="600" modal="regular"}

Geben Sie bei Bedarf Link für das Banner an.

Der Link ist die Zielseite, die angezeigt wird, wenn der Kunde auf die Bannerschaltfläche oder -fläche klickt. Sie können einen von drei Linktypen verwenden:

• URL - Links zu einer relativen oder vollständig qualifizierten URL.
• Product - Identifiziert die Zielseite anhand des Produktnamen oder der SKU. Suchen Sie nach dem Produkt anhand des Namens, der entweder auf einem Teil- oder einem vollständigen Namen basiert. Wählen Sie das Produkt aus der Liste der Suchergebnisse aus.
• Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie im Kategoriebaum. Suchen Sie nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Bereich des angezeigten Baums aus.
• Page - Identifiziert die Zielseite als bestimmte Inhaltsseite. Suchen Sie nach der Seite, die auf einem Teil- oder vollständigen Namen basiert. Wählen Sie die Seite aus der Liste der Suchergebnisse aus.

note note
NOTE
Ab Version 2.4.1 unterstützt Page Builder die Verknüpfung von Banner und Links innerhalb des verschachtelten Texts aufgrund von Problemen mit der Anzeige auf der Storefront nicht mehr. Wenn Sie einen Link in der Message Text ​verwenden, können Sie die​_Link_ -Option nicht konfigurieren. Wenn Sie lieber einen einzelnen Link für das gesamte Banner verwenden möchten, können Sie alle Links aus dem Text entfernen.
{width="200"}

Fügen Sie bei Bedarf eine Schaltfläche hinzu, um Kunden aufzufordern, dem Link zu folgen.

Die Einstellung Bannerdarstellung platziert einen einzelnen Link oder eine einzelne Schaltfläche unter dem Text. Füllen Sie die Eigenschaften des Links oder der Schaltfläche aus, den/die Sie hinzufügen möchten.

{width="600" modal="regular"}

• Setzen Sie Show Button auf einen der folgenden Werte:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Beschreibung
  Always	Eine Schaltfläche wird immer im Banner angezeigt.
  On Hover	Auf dem Banner wird nur beim Bewegen des Mauszeigers eine Schaltfläche angezeigt.
  Never Show	Auf dem Banner wird nie eine Schaltfläche angezeigt.

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

• Setzen Sie Button Type auf einen der folgenden Werte:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	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.

  Der Schaltflächenstil des aktuellen Designs bestimmt das Schaltflächenformat. In der Regel hat eine primäre Schaltfläche eine auffälligere Hintergrundfarbe als eine sekundäre Schaltfläche.

Setzen Sie Show Overlay auf einen der folgenden Werte:

Sie können eine Überlagerung verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, der durch die Einstellung Appearance definiert wird. Das Hintergrundbild des Banners bleibt für die gesamte Breite des Banners sichtbar.

Wenn Sie eine Überlagerung anzeigen, legen Sie den Wert Overlay Color fest:

• Klicken Sie auf das Muster Keine Farbe und wählen Sie ein Muster aus.
• Geben Sie im Feld Keine Farbe entweder einen gültigen Farbnamen oder einen hexadezimalen Wert ein.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

Um die horizontale Position der Inhaltscontainer zu steuern, die dem Banner hinzugefügt werden, wählen Sie einen Alignment:

Legen Sie den Border -Stil fest, der auf alle vier Seiten des Bannercontainers angewendet wird:

Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

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

  {width="600" modal="regular"}

• Border Width - Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein.

• Border Radius - Geben Sie die Anzahl der Pixel an, um die Größe des Radius zu definieren, der zum Runden jeder Ecke des Rahmens verwendet wird.

(Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Bannercontainer angewendet werden soll.

Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

Geben Sie Werte in Pixel an, damit der Wert Margins and Padding die äußeren Ränder und den inneren Abstand des Banners angibt.

Geben Sie jeden entsprechenden Wert in das Banner-Container-Diagramm ein.