Media - Banner

Verwenden Sie die Banner Inhaltstyp zum Hinzufügen einer illustrierten, interaktiven Komponente, die Benutzer mit einem Aktionsaufruf und einer Schaltfläche im Page Builder Schritt.

NOTE
Was war zuvor der Banner Option im Menü "Inhalt"jetzt Dynamischer Block.

Banner auf der Startseite einer Storefront {width="700" modal="regular"}

NOTE
Wenn Sie wesentliche Änderungen an Page Builder -Inhalt verwenden, wird empfohlen, die Lebensdauer der Admin-Sitzung , 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
Symbol Verschieben {width="25"}
Verschiebt das Banner an eine andere Position auf der Bühne.
(Titel)
Banner
Identifiziert den aktuellen Inhaltscontainer als Banner. Bewegen Sie den Mauszeiger über den Container, um die Toolbox anzuzeigen.
Einstellungen
Symbol Einstellungen {width="25"}
Öffnet die Seite Banner bearbeiten , auf der Sie die Eigenschaften des Banners und Containers ändern können.
Ausblenden
Symbol "Ausblenden" {width="25"}
Blendet das aktuelle Banner aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt das ausgeblendete Banner an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert das Banner.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht das Banner aus der Bühne.
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 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.
  1. Im Page Builder Bedienfeld, erweitern Media und ziehen Sie eine Banner Platzhalter zur Bühne.

    Ziehen eines Bannerinhaltstyps auf die Bühne {width="600" modal="regular"}

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

  2. Klicken Sie in den Banner-Platzhalter, um die Texteditor und geben Sie Inhalt für das Banner ein.

    Sie können auch komplexere Bannerinhalte mit der Inhalt -Einstellungen.

Ändern der Bannereinstellungen

  1. Bewegen Sie den Mauszeiger über den Banner-Container, um die Symbolleiste anzuzeigen und die Einstellungen ( Symbol Einstellungen ).

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

  3. Wenn Sie fertig sind, klicken Sie auf Save in der oberen rechten Ecke, um die Edit Banner ​Seite.

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

Appearance

Banner können einfach eingerichtet und gepflegt werden, da sie auf einer von vier vordefinierten Vorlagen basieren.

  • Wählen Sie einen der folgenden Bannerplatzierungstypen 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 erweitert bei Verwendung die gesamte Breite des Banners.
    Collage Left Platziert Inhalt und Schaltfläche in einen definierten Bereich auf der linken Seite des Banners. Wenn die Überlagerung verwendet wird, deckt sie nur den definierten Bereich ab.
    Collage Center Platziert Inhalt und Schaltfläche in einen definierten Bereich, der auf dem Banner zentriert ist. Wenn die Überlagerung verwendet wird, deckt sie nur den definierten Bereich ab.
    Collage Right Platziert Inhalt und Schaltfläche in einen definierten Bereich auf der rechten Seite des Banners. Wenn die Überlagerung verwendet wird, deckt sie nur den definierten Bereich ab.

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

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

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

    Sie können beispielsweise die Mindesthöhe eines Banners so festlegen, dass die gesamte Höhe der Seite gestreckt wird. So erhalten Sie überzeugende Optionen für Hintergrundbilder und Videos mit vollständigem Seitenumbruch.

Background

Es gibt viele Optionen zum Definieren der Hintergrundanzeige eines Banners. Sie können eine einfache Farbe oder ein 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 können den Wert auf eine von drei Arten festlegen:

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

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

Farbmuster auswählen {width="600" modal="regular"}

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

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

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

Background Type

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder standardmäßig auf Image und zeigt verschiedene Bildeinstellungen an. Wenn Sie Video, Page Builder Tauscht die Bildeinstellungen mit Videoeinstellungen aus. Die beiden Einstellungen für den Hintergrundtyp werden in den folgenden Abschnitten beschrieben.

Hintergrundtyp {width="200"}

Bildtypeinstellungen

Wenn Sie die Hintergrundtyp nach Imageverwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbilds 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 hoch und wendet sie dann 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"} Ermöglicht Ihnen, das Bild entweder auf die Kachel "Kamera"zu ziehen oder zum Bild in Ihrem lokalen Dateisystem zu 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 im Verhältnis zur 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 im Verhältnis zum Banner verankert ist:

    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 eine Push-Taste, die das Bild an der angegebenen Hintergrundposition am Banner anhängt.

  • Background Attachment - Legen Sie den Anlagentyp fest, um zu bestimmen, wie sich das Hintergrundbild im Verhältnis zur Scrollseite bewegt:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Beschreibung
    Scroll Das angehängte Hintergrundbild wird synchronisiert, um sich beim Bildlauf der Seite nach unten zu bewegen.
    Fixed (Für Mobilgeräte nicht verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild blättert, und ist an der angegebenen Hintergrundposition fixiert.
  • Background Repeat - Wenn Sie das Hintergrundbild zum Ausfüllen des Bereichs wiederholen möchten, ändern Sie diese Einstellung Yes.

Videotypeinstellungen

Wenn Sie die Background Type ​nach Videoverwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbilds zu definieren.

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

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

    Video-URL im Hintergrund {width="200"}

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

  • Infinite Loop - Legen Sie No , damit das Video einmal wiedergegeben und gestoppt wird. Wann wird er auf Yes (Standard) wiederholt sich das Video in einer Endlosschleife.

  • Lazy Load - Legen Sie No , damit das Video mit der Seite geladen wird, selbst wenn es nicht sichtbar ist. Wann wird er auf Yes (Standard) wird das Video nur aus der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

  • Play Only When Visible - Legen Sie No , damit das Video sofort nach dem Laden wiedergegeben wird, unabhängig davon, ob es sichtbar ist. Wann wird er auf Yes (Standard) beginnt die Videowiedergabe nur, wenn sie sichtbar ist.

  • Fallback Image - Geben Sie bei Bedarf ein Bild an, das vor dem Laden des Videos auf dem Bildschirm angezeigt werden soll und wenn 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 Bannerlinks, Schaltflächen und Überlagerungen. Die Position des Inhalts spiegelt die Erscheinungsbild Platzierungseinstellung.

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.

    Inhalt auf der Bühne bearbeiten {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 Symbolleiste anzuzeigen und die Einstellungen ( Symbol Einstellungen {width="25"} ).

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

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

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

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

    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 basierend auf dem 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 spezifische 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 Page Builder unterstützt das Verknüpfen von Bannern und Links im verschachtelten Text aufgrund von Problemen mit der Anzeige auf der Storefront nicht mehr. Wenn Sie einen Link im Message Text, können Sie die​_Link_ -Option. Wenn Sie lieber einen einzelnen Link für das gesamte Banner verwenden möchten, 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.

    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.

    Darstellung 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 eine block zum Banner hinzu. Um Konflikte zu vermeiden, behalten Sie alle Links oder Schaltflächen im separaten Block bei und fügen Sie dem Banner keinen Link oder keine Schaltfläche direkt hinzu.
    • Satz Show Button auf einen der folgenden Werte zu:

      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 die Button Text auf der Schaltfläche angezeigt.

    • Satz Button Type auf einen der folgenden Werte zu:

      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.

  5. Satz Show Overlay auf einen der folgenden Werte zu:

    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 Variable Appearance -Einstellung. Das Hintergrundbild des Banners bleibt für die gesamte Breite des Banners sichtbar.

    Wenn Sie eine Überlagerung anzeigen, legen Sie die Overlay Color:

    • Klicken Sie auf Keine Farbe und wählen Sie ein Muster aus.
    • Im Keine Farbe -Feld entweder einen gültigen Farbnamen oder einen Hexadezimalwert eingeben.

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

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

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

Search Engine Optimization seo

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

  • Für Alternative Text, geben Sie eine alt Textbeschreibung für die anzuzeigenden Tools für die digitale Barrierefreiheit.

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

  • Für Title Attribute eingeben, geben Sie den Text ein, der beim Bewegen des Mauszeigers als QuickInfo angezeigt werden soll.

    Als Best Practice wird empfohlen, einen beschreibenden, schlüsselwortreichen Titel zu wählen, um die Indexierung des Bildes durch Suchmaschinen zu verbessern. In HTML wird die title -Attribut ist eine Untergruppe der image Tag: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Um die horizontale Position von Inhaltsbehältern zu steuern, die dem Banner hinzugefügt werden, wählen Sie eine 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 die Inhaltscontainer am linken Rand des Bannercontainers aus, wobei der angegebene Abstand berücksichtigt wird.
    Center Richtet den Inhalts-Container in der Mitte des Banner-Containers aus, wobei der angegebene Abstand berücksichtigt wird.
    Right Richtet den Inhalts-Container am rechten Rand des Banner-Containers aus, wobei der angegebene Abstand berücksichtigt wird.
  2. Legen Sie die Border Stil angewendet auf alle vier Seiten des Banner-Containers:

    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, füllen Sie die Randanzeigeoptionen 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.

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

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

    • Border Radius - Geben Sie die Anzahl Pixel an, um die die Größe des Radius definiert wird, der für die Runde der einzelnen Ecken des Rahmens verwendet wird.

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

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  5. Geben Sie Werte in Pixel für die Margins and Padding 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 an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird.
    Padding Die Menge an leerem Raum, die auf den inneren Rand aller Seiten des Containers angewendet wird.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d