Medien - Banner

Verwenden Sie den Inhaltstyp Banner, um eine illustrierte, interaktive Komponente in den Page Builder Arbeitsbereich hinzuzufügen, die den Benutzer mit einem Call-To-Action und einer Schaltfläche anspricht.

Die frühere Option Banner im Menü “Inhalt” ist jetzt Dynamischer Block.

Banner auf einer Frontend-Startseite

Wenn Sie im Arbeitsbereich Page Builder arbeiten, werden Ihre Inhaltsänderungen erst dann vollständig gespeichert, wenn Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs klicken und dann auf Speichern in der oberen rechten Ecke für die CMS-Seite, die Produktseite, die Kategorieseite, den Block oder den dynamischen Block.

Wenn Sie umfangreiche Änderungen am Inhalt von Page Builder vornehmen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abläuft.

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

Banner-Toolbox

Werkzeug Symbol Beschreibung
Bewegen Move icon Verschiebt das Banner an eine andere Position auf dem Arbeitsbereich.
(Label) Banner Identifiziert den aktuellen Inhaltscontainer als Banner. Bewegen Sie den Mauszeiger über den Container, um die Toolbox zu sehen.
Einstellungen Einstellungssymbol Öffnet die Seite Banner bearbeiten, auf der Sie die Eigenschaften des Banners und des Containers ändern können.
Ausblenden Symbol ausblenden Blendet das aktuelle Banner aus.
Anzeigen Symbol anzeigen Zeigt das versteckte Banner.
Duplizieren Doppeltes Symbol Erzeugt eine Kopie des Banners.
Entfernen Symbol entfernen Entfernt das Banner vom Arbeitsbereich.
Neues Bild hochladen   Lädt ein Bild aus Ihrem lokalen Dateisystem in die Galerie für den Bannerhintergrund hoch.
Aus Galerie auswählen   Verwendet ein vorhandenes Bild aus der Galerie für den Bannerhintergrund.

Hinzufügen eines Banners

  1. Erweitern Sie im Page Builder Panel Medien und ziehen Sie einen Banner Platzhalter auf den Arbeitsbereich.

    Ziehen eines Banner-Inhaltstyps auf den Arbeitsbereich

    Die Schaltflächen Bild hochladen und Aus Galerie auswählen sind enthalten, damit Sie schnelle Änderungen am Bannerinhalt direkt auf dem Arbeitsbereich vornehmen können. Sie können den Inhalt auch auf der Seite Banner bearbeiten ändern.

  2. Klicken Sie auf den Bannerplatzhalter, um den Texteditor anzuzeigen und den Inhalt für das Banner einzugeben.

    Sie können auch komplexere Bannerinhalte mit Hilfe der Content Einstellungen einfügen.

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

  2. In den folgenden Abschnitten finden Sie detaillierte Informationen über die Aktualisierung der verfügbaren Einstellungen:

  3. Wenn Sie fertig sind, klicken Sie auf Speichern in der oberen rechten Ecke, um die Seite Banner bearbeiten zu schließen.

  4. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Erscheinungsbild

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

  • Wählen Sie einen der folgenden Bannertypen:

    Poster Zentriert den Inhalt und die Schaltfläche auf dem Banner. Das Overlay, falls verwendet, erstreckt sich über die gesamte Breite des Banners.
    Collage links Platziert den Inhalt und die Schaltfläche in einem definierten Bereich auf der linken Seite des Banners. Das Overlay, falls verwendet, deckt nur den definierten Bereich ab.
    Collage Mitte Platziert den Inhalt und die Schaltfläche in einem definierten Bereich, der in der Mitte des Banners liegt. Das Overlay, falls verwendet, deckt nur den definierten Bereich ab.
    Collage Rechts Platziert den Inhalt und die Schaltfläche in einem definierten Bereich auf der rechten Seite des Banners. Das Overlay, falls verwendet, deckt nur den definierten Bereich ab.

    Erscheinungsbild - Collage rechts_

  • (Optional) Geben Sie die Mindesthöhe für die Zeile ein.

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

    Sie können zum Beispiel die Mindesthöhe eines Banners so festlegen, dass es die gesamte Höhe der Seite einnimmt, was Ihnen überzeugende Optionen für ganzseitige Hintergrundbilder und Videos bietet.

Hintergrund

Es gibt viele Optionen für die Definition der Hintergrundanzeige eines Banners. Sie können eine einfache Farbe oder ein Hintergrundbild verwenden, aber auch anspruchsvollere Effekte steuern.

Hintergrundfarbe

Geben Sie die Hintergrundfarbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Damit wird die Hintergrundfarbe der Zeile festgelegt. Sie können auch die Deckkraft der Farbe einstellen.

Keine Farbe (Standard)

Sie können den Wert auf eine von drei Arten einstellen:

  • Ein vordefinierter Farbname, z. B. Weiß
  • Der hexadezimale Farbwert für die Farbe, z. B. #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 Feld links neben dem Feld Keine Farbe.

Auswählen eines Farbfelds

Wenn Sie auf das Farbfeld klicken, um den Farbwähler erneut zu öffnen, zeigt das Feld unter dem Slider die aktuellen Rot-, Grün-, Blau- und Alphawerte (rgba) an. Die letzte Zahl gibt die aktuelle Deckkraft in Prozent als Dezimalzahl an. Sie können den Slider verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

Deckkraft einstellen

Page Builder unterstützt auch eine Transparenzebene oder einen Alpha-Kanal in Hintergrundbildern, der verwendet werden kann, um Hintergründe mit unterschiedlichen Deckungsgraden zu erstellen.

Hintergrund Typ

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig auf Bild eingestellt und zeigt verschiedene Bildeinstellungen. Wenn Sie Video wählen, tauscht Page Builder die Bildeinstellungen gegen Videoeinstellungen aus. Die Einstellungen für beide Hintergrundtypen werden in den folgenden Abschnitten beschrieben.

Hintergrundtyp

Bildtyp-Einstellungen

Wenn Sie den Hintergrundtyp auf Bild einstellen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbildes zu definieren.

Banner mit Hintergrundbild

  • Hintergrundbild - Verwenden Sie bei Bedarf die bereitgestellten Werkzeuge, um ein Hintergrundbild für das Banner auszuwählen:

    Hochladen Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für das Banner an.
    Aus Galerie auswählen Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für das Banner auszuwählen.
    Kamerasymbol Ermöglicht es Ihnen, das Bild entweder auf die Kamerakachel zu ziehen oder das Bild in Ihrem lokalen Dateisystem zu suchen.
  • Hintergrundbild für Mobilgeräte - Verwenden Sie bei Bedarf die gleichen Werkzeuge, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.

  • Hintergrundgröße - Legen Sie mit dieser Option fest, wie das Hintergrundbild im Verhältnis zur Breite des Banners skaliert werden soll:

    Abdeckung Das Hintergrundbild deckt die gesamte Breite des Banners ab.
    Umfassen Das Hintergrundbild ist auf die Breite des Inhaltsbereichs begrenzt.
    Automatisch Wendet die Größe aus der aktuellen Stilvorlage an.

    Hintergrundgröße

  • Hintergrundposition - Setzen Sie diese Option, um festzulegen, wie das Hintergrundbild im Verhältnis zum Banner verankert wird:

    Oben Links / Mitte / Rechts
    Mitte Links/Mitte/Rechts
    Unten Links / Mitte / Rechts

    Der Ankerpunkt ist wie eine Stecknadel, mit der das Bild an der angegebenen Hintergrundposition am Banner befestigt wird.

  • Hintergrundbefestigung - Legen Sie den Befestigungstyp fest, um zu bestimmen, wie sich das Hintergrundbild im Verhältnis zur scrollenden Seite bewegt:

    Scrollen Das angehängte Hintergrundbild wird synchronisiert, um sich beim Scrollen der Seite nach unten zu bewegen.
    Fixiert (Nicht verfügbar für Mobilgeräte) Das Hintergrundbild bewegt sich nicht, wenn der Container über das Bild scrollt und bleibt an der angegebenen Hintergrundposition fixiert.

Videotyp-Einstellungen

Wenn Sie den Hintergrundtyp auf Video setzen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbildes zu definieren.

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

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

    Hintergrundvideo-URL

  • Überlagerungsfarbe - Wählen Sie eine Farbe aus, um dem Video einen transparenten Farbton zu verleihen.

  • Endlosschleife - Setzen Sie diese Option auf Nein, um das Video einmal abzuspielen und dann anzuhalten. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video in einer Endlosschleife wiederholt.

  • Lazy Load - Setzen Sie dies auf Nein, damit das Video mit der Seite geladen wird, auch wenn es nicht sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur dann von der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

  • Nur bei Sichtbarkeit abspielen - Setzen Sie diese Option auf Nein, damit das Video sofort nach dem Laden abgespielt wird, unabhängig davon, ob es sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur abgespielt, wenn es sichtbar ist.

  • Fallback-Bild - Geben Sie bei Bedarf ein Bild an, das auf dem Bildschirm angezeigt werden soll, bevor ein Video geladen wird und für den Fall, dass das Video aus irgendeinem Grund nicht geladen wird.

Inhalt

Sie können den Inhalt des Banners direkt auf dem Arbeitsbereich oder beim Ändern der Einstellungen ändern. Die Einstellungen bieten komplexere Inhaltsfunktionen, wie z. B. Bannerlinks und -schaltflächen sowie Overlays. Die Position des Inhalts spiegelt die Platzierungseinstellung Erscheinungsbild wider.

Einfacher Inhalt auf dem Arbeitsbereich

  1. Klicken Sie auf den Platzhaltertext und geben Sie den Text ein, der auf dem Banner erscheinen soll.

    Die Editor-Symbolleiste erscheint über dem Textfeld.

    Inhalt auf dem Arbeitsbereich bearbeiten

  2. Mit der Editor-Symbolleiste können Sie Text eingeben und formatieren sowie Elemente wie Links, Bilder und Widgets einfügen.

    Arbeitsbereich mit formatiertem Text

Komplexer Inhalt in den Einstellungen

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

  2. Scrollen Sie nach unten zum Abschnitt Inhalt und verwenden Sie den Editor Nachrichtentext, um den Bannertext einzugeben und zu formatieren.

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

    Editor Nachrichtentext

  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 Schaltfläche oder den Bereich des Banners klickt. Sie können einen von drei Linktypen verwenden:

    • URL - Verweist entweder auf eine relative oder vollqualifizierte URL.
    • Produkt - Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Suchen Sie das Produkt anhand des Namens, entweder mit einem Teil- oder Vollnamen. Wählen Sie das Produkt aus der Liste der Suchergebnisse aus.
    • Kategorie** - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategorienstruktur. Suchen Sie die Kategorie entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Kategorie aus dem erweiterten Bereich der angezeigten Struktur.
    • Seite - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suchen Sie nach der Seite entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Seite aus der Liste der Suchergebnisse aus.

Seit der Version 2.4.1 unterstützt Page Builder die Verknüpfung von Bannern und Links innerhalb des verschachtelten Textes nicht mehr, da es Probleme mit der Anzeige im Frontend gibt. Wenn Sie einen Link im Message Text verwenden, können Sie die Option Link nicht konfigurieren. Wenn Sie es vorziehen, einen einzigen Link für das gesamte Banner zu verwenden, können Sie alle Links aus dem Text entfernen.

Link-Konfiguration ist blockiert

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

    Die Einstellung für das Erscheinungsbild des Banners platziert einen einzelnen Link oder eine Schaltfläche unterhalb des Textes. Füllen Sie die Eigenschaften des Links oder der Schaltfläche aus, die Sie hinzufügen möchten.

    Erscheinungsbild mit Text und Schaltfläche (oder Link)_

Sie können auch mehrere Schaltflächen oder Links verwenden, indem Sie dem Banner einen Block hinzufügen. Um Konflikte zu vermeiden, sollten Sie alle Links oder Schaltflächen in einem separaten Block unterbringen und keinen Link oder eine Schaltfläche direkt in das Banner einfügen.

  • Setzen Sie Schaltfläche anzeigen auf einen der folgenden Werte:

    Immer Es erscheint immer eine Schaltfläche auf dem Banner.
    Bei Hover Ein Button erscheint auf dem Banner nur bei Hover.
    Nie zeigen Eine Schaltfläche wird nie auf dem Banner angezeigt.
  • Geben Sie den Button-Text ein, der auf dem Button erscheinen soll.

  • Setzen Sie Buttontyp auf einen der folgenden Werte:

    Primär Wendet den primären Schaltflächenstil aus der aktuellen Stilvorlage an.
    Sekundär Wendet den sekundären Schaltflächenstil aus der aktuellen Stilvorlage an, falls zutreffend.
    Link Erzeugt einen Hyperlink anstelle einer Schaltfläche.

    Der Schaltflächenstil aus dem aktuellen Thema bestimmt das Format der Schaltfläche. Normalerweise hat eine primäre Schaltfläche eine auffälligere Hintergrundfarbe als eine sekundäre Schaltfläche.

  1. Stellen Sie Overlay anzeigen auf einen der folgenden Werte ein:

    Immer Das Overlay ist immer sichtbar.
    Beim Schweben Das Overlay erscheint nur bei Hover.
    Nie zeigen Das Overlay ist nicht sichtbar.

    Sie können ein Overlay verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, die durch die Einstellung Erscheinungsbild definiert ist. Das Hintergrundbild des Banners ist weiterhin über die gesamte Breite des Banners sichtbar.

    Wenn Sie ein Overlay einblenden möchten, legen Sie die Overlay-Farbe fest:

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

    Overlay Farbe

  2. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

    Banner mit Textnachricht und Schaltfläche

Erweitert

  1. Wählen Sie eine Ausrichtung, um die horizontale Positionierung von Inhaltscontainern zu steuern, die dem Banner hinzugefügt werden.

    Standard Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
    Links Richtet die Inhaltscontainer entlang des linken Randes des Bannercontainers aus, unter Berücksichtigung der angegebenen Polsterung.
    Zentriert Richtet den Inhaltscontainer in der Mitte des Bannercontainers aus, unter Berücksichtigung der angegebenen Füllung.
    Rechts Richtet den Inhaltscontainer entlang des rechten Randes des Bannercontainers aus, unter Berücksichtigung der angegebenen Füllung.
  2. Legt den Stil Rahmen fest, der auf alle vier Seiten des Banner-Containers angewendet wird:

    Standard Wendet den Standard-Rahmenstil an, der durch das zugehörige Stylesheet festgelegt ist.
    Keiner Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
    Gepunktet Der Containerrand erscheint als gepunktete Linie.
    Gestrichelt Der Containerrand erscheint als gestrichelte Linie.
    Durchgehend Der Containerrand wird als durchgezogene Linie dargestellt.
    Doppelt Der Containerrand wird als Doppellinie dargestellt.
    Rille Der Containerrand erscheint als gerillte Linie.
    Steg Der Containerrand erscheint als geriffelte Linie.
    Einzug Die Umrandung des Containers erscheint als versenkte Linie.
    Außenlinie Der Containerrand erscheint als Umrandungslinie.
  3. Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

    • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

      Rahmenfarbe

    • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

    • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

  4. (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage 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 Ränder und Auffüllung ein, um die äußeren Ränder und die innere Auffüllung des Banners anzugeben.

    Geben Sie die entsprechenden Werte in das Diagramm des Banner-Containers ein.

    Ränder Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird.
    Auffüllung Die Menge an Leerraum, die auf die Innenkante aller Seiten des Containers angewandt wird.