DokumentationCommercePage Builder

Medien - Banner

Last update: Wed Dec 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Benutzende

Verwenden Sie den Banner-Inhaltstyp, um eine illustrierte, interaktive Komponente hinzuzufügen, die Benutzende mit einem Aktionsaufruf und einer Schaltfläche in der Page Builder Phase interagiert.

NOTE
Was zuvor die Option Banner im Menü Inhalt war, ist jetzt Dynamischer Block.

Banner auf einer Storefront-Startseite {width="700" 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.

Die Banner-Toolbox wird angezeigt, wenn Sie den Mauszeiger über den Banner-Container bewegen.

Banner-Toolbox {width="600" modal="regular"}

Tool
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt das Banner an eine andere Position auf der Bühne.
(Bezeichnung)
Banner
Identifiziert den aktuellen Inhalts-Container als Banner. Bewegen Sie den Mauszeiger über den Container, um die Toolbox anzuzeigen.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Banner bearbeiten , auf der Sie die Eigenschaften des Banners und des Containers ändern können.
Ausblenden
Symbol ausblenden {width="25"}
Blendet das aktuelle Banner aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt das ausgeblendete Banner an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des Banners.
entfernen
Symbol entfernen {width="25"}
Löscht das Banner aus der Phase.
Upload New Image
Lädt ein Bild aus Ihrem lokalen Dateisystem in die Galerie für den Bannerhintergrund hoch.
Select from Gallery
Verwendet ein vorhandenes Bild aus der Galerie für den Bannerhintergrund.
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.

  1. Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Banner Platzhalter auf das Bühnenbild.

    Ziehen eines Banner-Inhaltstyps auf den Schritt {width="600" modal="regular"}

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

  2. Klicken Sie auf den Platzhalter für das Banner, um den Texteditor anzuzeigen, und geben Sie den Inhalt für das Banner ein.

    Sie können auch komplexere Bannerinhalte mit den Einstellungen Inhalt einfügen.

Ändern von Bannereinstellungen

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

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

  3. Wenn Sie fertig sind, klicken Sie oben rechts auf Save , um die Edit Banner ​zu schließen.

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

Appearance

Banner sind einfach einzurichten und zu verwalten, da sie auf einer von vier vordefinierten Vorlagen basieren.

  • Wählen Sie einen der folgenden Platzierungstypen für Banner aus:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Platzierung Beschreibung
    Poster Zentriert Inhalt und Schaltfläche auf dem Banner. Die Überlagerung weitet sich bei Verwendung der Überlagerung über die gesamte Breite des Banners aus.
    Collage Left Platziert Inhalt und Schaltfläche in einem definierten Bereich links im Banner. Die Überlagerung deckt bei Verwendung nur den definierten Bereich ab.
    Collage Center Platziert Inhalt und Schaltfläche in einem definierten Bereich, der auf dem Banner zentriert ist. Die Überlagerung deckt bei Verwendung nur den definierten Bereich ab.
    Collage Right Platziert Inhalt und Schaltfläche in einem definierten Bereich rechts neben dem Banner. Die Überlagerung deckt bei Verwendung nur den definierten Bereich ab.

    Erscheinungsbild - Collage rechts {width="600" modal="regular"}

  • (Optional) Geben Sie die Minimum Height für die Zeile ein.

    Die Mindesthöhe kann eine Zahl mit einer beliebigen gültigen CSS-Einheit (z. B. 100px, 50%, 50em, 100vh) oder eine Berechnung (z. B. 100vh - 237px) sein.

    Sie können beispielsweise die Mindesthöhe eines Banners so einstellen, dass die gesamte Seitenhöhe gedehnt wird, sodass Sie überzeugende Optionen für Hintergrundbilder und Videos auf der gesamten Seite erhalten.

Background

Es gibt viele Optionen zum Definieren der Hintergrundanzeige eines Banners. Sie können ein einfaches Farb- oder Hintergrundbild anwenden und komplexere Effekte verwalten.

Background Color

Geben Sie die Hintergrundfarbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Diese Einstellung bestimmt die Hintergrundfarbe der Zeile. Sie können auch die Deckkraft der Farbe anpassen.

Keine Farbe (Standard) {width="200"}

Sie haben drei Möglichkeiten, den Wert festzulegen:

  • Ein vordefinierter Farbname, z. B. White
  • Der hexadezimale Farbwert für die Farbe, z. B. #ffffff
  • Der RGBA-Wert für die Farbe mit Prozentsatz für die Deckkraft, z. B. rgba(255, 255, 255, 0.75)

Wenn Sie eine Farbe auswählen möchten, klicken Sie auf das Farbfeld links neben dem Feld Keine Farbe.

Auswählen eines Farbmusters {width="600" modal="regular"}

Wenn Sie auf das Farbfeld klicken, um die Farbauswahl erneut zu öffnen, werden im Feld unter dem Schieberegler die aktuellen Rot-, Grün-, Blau- und Alpha-Werte (RGBA) angezeigt. Die letzte Zahl gibt den aktuellen Prozentsatz der Deckkraft als Dezimalzahl an. Sie können den Schieberegler verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

Festlegen der Deckkraft {width="600" modal="regular"}

NOTE
Page Builder unterstützt auch eine Transparenzschicht (Alphakanal in Hintergrundbildern, die verwendet werden können, um Hintergründe mit unterschiedlichem Grad der Deckkraft zu erstellen.

Background Type

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig Image und zeigt verschiedene Bildeinstellungen an. Wenn Sie Video auswählen, tauscht Page Builder die Bildeinstellungen durch die Videoeinstellungen aus. Beide Einstellungen für den Hintergrundtyp werden in den folgenden Abschnitten beschrieben.

Hintergrundtyp {width="200"}

Einstellungen für Bildtyp

Wenn Sie den Hintergrundtyp auf Image setzen, verwenden Sie die folgenden Einstellungen, um die Hintergrundbildanzeige zu definieren.

Banner mit Hintergrundbild {width="600" modal="regular"}

  • Background Image - Verwenden Sie bei Bedarf die bereitgestellten Tools, um ein Hintergrundbild auszuwählen, das auf das Banner angewendet werden soll:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Tool Beschreibung
    Upload Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie und wendet sie als Hintergrundbild für das Banner an.
    Select from Gallery Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für das Banner auszuwählen.
    Kamerasymbol {width="25"} Hiermit können Sie das Bild entweder auf die Kamerakachel ziehen oder zum Bild in Ihrem lokalen Dateisystem navigieren.

  • Background Mobile Image - Verwenden Sie bei Bedarf dieselben Tools, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.

  • Background Size - Legen Sie diese Option fest, um festzulegen, wie das Hintergrundbild in Bezug auf die Breite des Banners skaliert wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Cover Das Hintergrundbild deckt die gesamte Breite des Banners ab.
    Contain Das Hintergrundbild ist auf die Breite des Inhaltsbereichs beschränkt.
    Auto Wendet die Größe aus dem aktuellen Stylesheet an.

    Hintergrundgröße {width="200"}

  • Background Position - Legen Sie diese Option fest, um festzulegen, wie das Hintergrundbild in Bezug auf das Banner verankert wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Anker Positionen
    Top Links/Mitte/Rechts
    Center Links/Mitte/Rechts
    Bottom Links/Mitte/Rechts

    Der Ankerpunkt ist wie ein Push-Pin, mit dem das Bild an der angegebenen Hintergrundposition an das Banner angehängt wird.

  • Background Attachment : Legen Sie den Anlagentyp fest, um zu bestimmen, wie sich das Hintergrundbild in Bezug auf die Bildlaufseite bewegt:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Beschreibung
    Scroll Das angehängte Hintergrundbild wird synchronisiert, sodass es beim Bildlauf auf der Seite nach unten verschoben wird.
    Fixed (Nicht für Mobilgeräte verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild scrollt und an der angegebenen Hintergrundposition fixiert ist.

  • Background Repeat : Wenn Sie das Hintergrundbild wiederholen möchten, um den Bereich zu füllen, ändern Sie diese Einstellung Yes.

Einstellungen für Videotyp

Wenn Sie die Background Type ​auf Video setzen, verwenden Sie die folgenden Einstellungen, um die Hintergrundbildanzeige zu definieren.

  • Video URL : Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links sein zu:

    • Videos zu YouTube: https://youtu.be/CoDhMRUUjeI
    • Videos zu Vimeo: https://vimeo.com/190156113
    • Gültige Videodateien (.mp4 wird empfohlen): https://myvideos.com/spiral.mp4

    URL des Hintergrundvideos {width="200"}

  • Overlay Color - Wählen Sie eine Farbe aus, um einen transparenten Farbton auf das Video anzuwenden.

  • Infinite Loop : Stellen Sie diese Option auf No ein, damit das Video einmal abgespielt und dann angehalten wird. Wenn er auf Yes (Standard) gesetzt ist, wiederholt sich das Video in einer Endlosschleife.

  • Lazy Load : Wählen Sie No aus, damit das Video mit der Seite geladen wird, auch wenn es nicht sichtbar ist. Wenn er auf Yes (Standard) gesetzt ist, wird das Video nur von der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

  • Play Only When Visible : Wählen Sie No aus, damit das Video sofort nach dem Laden wiedergegeben wird, unabhängig davon, ob es sichtbar ist. Wenn er auf Yes (Standard) gesetzt ist, beginnt die Wiedergabe des Videos nur, wenn es sichtbar ist.

  • Fallback Image : Geben Sie bei Bedarf ein Bild an, das auf dem Bildschirm angezeigt werden soll, bevor das Video geladen wird, und geben Sie an, ob das Video aus irgendeinem Grund nicht geladen wird.

Content

Sie können den Bannerinhalt direkt auf der Bühne oder beim Ändern der Einstellungen ändern. Die Einstellungen bieten komplexere Inhaltsfunktionen wie Banner-Links und Schaltflächen sowie Überlagerungen. Die Position des Inhalts spiegelt die Platzierungseinstellung Erscheinungsbild wider.

Einfacher Inhalt auf der Bühne

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

    Bearbeiten von Inhalten auf der Bühne {width="600" modal="regular"}

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

    Bühne mit formatiertem Text {width="600" modal="regular"}

Komplexe Inhalte in den Einstellungen

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

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

    Sie können auch Elemente wie Text-Links, Bilder und Widgets einfügen.

    Nachrichten-Texteditor {width="600" modal="regular"}

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

    Der Link ist die Zielseite, die angezeigt wird, wenn der Kunde auf die Banner-Schaltfläche oder den Bereich klickt. Sie können einen von drei Link-Typen verwenden:

    • URL - Links zu einer relativen oder vollständig qualifizierten URL.
    • Product - Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Suchen Sie nach dem Produkt anhand eines Namens, der entweder auf einem Teil- oder einem vollständigen Namen basiert. Wählen Sie das Produkt aus der Suchergebnisliste aus.
    • Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategoriestruktur. Suche nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Abschnitt der angezeigten Baumstruktur aus.
    • Page - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suche nach der Seite basierend auf einem Teil- oder vollständigen Namen. Wählen Sie die Seite aus der Liste Suchergebnisse aus.
    note note
    NOTE
    Ab Version 2.4.1 unterstützt Page Builder aufgrund von Problemen mit der Anzeige in der Storefront nicht mehr die Verknüpfung von Banner und Links innerhalb des verschachtelten Texts. Wenn Sie einen Link im Message Text ​verwenden, können Sie die Option​_Link_ nicht konfigurieren. Wenn Sie es vorziehen, einen einzelnen Link für das gesamte Banner zu verwenden, können Sie alle Links aus dem Text entfernen.
    Link-Konfiguration ist blockiert {width="200"}

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

    Mit der Einstellung Bannerdarstellung wird ein einzelner Link oder eine einzelne Schaltfläche unter dem Text platziert. Füllen Sie die Eigenschaften des Links oder der Schaltfläche aus, den bzw. die Sie hinzufügen möchten.

    Erscheinungsbild mit Text und Schaltfläche (oder Link) {width="600" modal="regular"}

    note note
    NOTE
    Sie können auch mehrere Schaltflächen oder Links verwenden, indem Sie dem Banner einen Block hinzufügen. Um Konflikte zu vermeiden, behalten Sie alle Links oder Schaltflächen im separaten Block bei und fügen Sie keine Links oder Schaltflächen direkt zum Banner hinzu.

    • Legen Sie Show Button auf eine der folgenden Einstellungen fest:

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

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

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

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

  5. Legen Sie Show Overlay auf eine der folgenden Einstellungen fest:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Always Die Überlagerung ist immer sichtbar.
    On Hover Die Überlagerung wird nur beim Bewegen des Mauszeigers angezeigt.
    Never Show Die Überlagerung ist nicht sichtbar.

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

    Wenn Sie eine Überlagerung anzeigen möchten, legen Sie die Overlay Color fest:

    • Klicken Sie auf Keine Farbe und wählen Sie ein Farbfeld aus.
    • Geben im Feld „Keine" entweder einen gültigen Farbnamen oder einen Hexadezimalwert ein.

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

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

    Banner mit Textnachricht und Schaltfläche {width="600" modal="regular"}

Search Engine Optimization seo

Der Text für diese Einstellungen ist für Suchmaschinen sichtbar und verbessert die Indizierung der Seite.

  • Geben Sie Alternative Text eine Alt-Textbeschreibung für die anzuzeigenden digitalen Barrierefreiheits-Tools ein.

    Die Verwendung von Alternativtext ist eine Best Practice für die Barrierefreiheit und wird in einigen Gebietsschemata gesetzlich vorgeschrieben. Beim HTML ist das alt-Attribut eine Teilmenge des image-Tags: <image title="tooltip" alt="description" src="image.jpg">.

  • Geben Sie Title Attribute den Text ein, der beim Bewegen des Mauszeigers als QuickInfo angezeigt werden soll.

    Wählen Sie als Best Practice einen beschreibenden, schlüsselwortreichen Titel aus, um die Art und Weise zu verbessern, wie das Bild von Suchmaschinen indiziert wird. Beim HTML ist das title-Attribut eine Teilmenge des image-Tags: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Um die horizontale Positionierung von Inhalts-Containern zu steuern, die dem Banner hinzugefügt werden, wählen Sie eine Alignment aus:

    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 die Inhalts-Container am linken Rand des Banner-Containers aus, wobei ein etwaiger Abstand berücksichtigt wird.
    Center Richtet den Inhalts-Container in der Mitte des Banner-Containers aus, wobei alle angegebenen Auffüllungen berücksichtigt werden.
    Right Richtet den Inhalts-Container am rechten Rand des Banner-Containers aus, wobei für jeden angegebenen Abstand berücksichtigt wird.

  2. Legen Sie den Border fest, der auf alle vier Seiten des Banner-Containers angewendet werden soll:

    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:

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

      Rahmenfarbe {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 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 den Banner-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 des Banners anzugeben.

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

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Beschreibung
    Margins Die Menge des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird.
    Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d