Was ist ein Heldenbanner?
Ein Hero-Banner ist ein großer visueller Bereich, der oben auf einer Webseite platziert wird und typischerweise eine Überschrift, ein Hintergrundbild oder -video sowie eine Schaltfläche mit Handlungsaufforderung enthält.
Über das Hero-Banner-Element
Das Hero-Banner-Element ermöglicht Ihnen die Gestaltung eines auffälligen, randvollen Bereichs oben auf Ihrer Webseite, der die Aufmerksamkeit der Besucher mit beeindruckenden visuellen Elementen fesselt. Darüber hinaus können Sie Elemente wie Überschriften, Textblöcke und CTAs überlagern, um Ihr Banner noch ansprechender zu gestalten.
So erstellen Sie ein Hero-Banner in Shopify mit GemPages
Befolgen Sie diese Schritte, um Ihrer mit GemPages erstellten Seite ein Hero-Banner-Element hinzuzufügen.
- Von dem GemPages Dashboard, suchen Sie die Zielseite, um den Editor zu öffnen.
- Im linke Seitenleiste, navigiere zum Medien Abschnitt und ziehen Sie den Heldenbanner Element an die gewünschte Stelle.
- (Optional) Ziehen Sie andere Elemente (z. B. Überschrift, Schaltfläche usw.) auf das Banner, um die Wirkung zu verstärken.
- Klicken Sie auf das Hero Banner, um das Konfigurationsfenster anzuzeigen, das Folgendes enthält: Einstellungen als auch Erweitert Tabs
Konfigurieren der Registerkarte „Einstellungen“
Layout
Wählen Sie das Inhaltslayout und die Ausrichtung:
- Horizontale Position: Links, Mitte oder Rechts
- Vertikale Position: Oben, Mitte, Unten oder Erweitert (füllt die gesamte Höhe aus)
Hintergrund
Sie können den Bannerhintergrund mithilfe einer von drei Quellen festlegen:
- Farbe,
- Bild
- Video
Farbiger Hintergrund
Wählen Sie eine Farbe aus der Palette oder geben Sie einen Hex-Code in das Feld ein, um Ihre bevorzugte Hintergrundfarbe für das Banner festzulegen.
Bildhintergrund
Sie haben drei Möglichkeiten, die Quelle des Bannerbilds zu ändern:
- Bild hochladen: Mit dieser Option können Sie ein Bild von Ihrem Computer zum Hochladen auswählen.
- Link-Eingabe: Mit dieser Option können Sie den Bildlink eingeben, um die Bildquelle des Hero-Banners zu ändern.
- Galerie durchsuchen: Sie können ein Bild aus der Galerie auswählen, die alle Ihre hochgeladenen Bilder enthält.
TIPP: Für eine optimale Darstellung können Sie den Tooltip im Bild Registerkarte unter Bannerquelle Abschnitt, um die optimalen Abmessungen* für das im Hero-Banner hochgeladene Bild zu finden:
| Desktop | 1920 × 800 px |
| Mobil | 375×200 px oder 375×400 px |
| Tablette | 1024 × 500 px |
Um Ihr Hero Banner auf verschiedenen Bildschirmen zu gestalten, schauen Sie sich an Dieser Artikel.
Videohintergrund
Beim Einrichten eines Videohintergrunds für Ihr Banner können Sie eine der folgenden Videoquellen auswählen:
YouTube: Sie können ein YouTube-Video als Hintergrund verwenden. Diese Option unterstützt sowohl YouTube Shorts als auch normale YouTube-Videos und bietet Ihnen somit Flexibilität bei der Auswahl Ihrer Inhalte.
Damit GemPages das Video korrekt anzeigt, empfehlen wir, die Videoabmessungen anzugeben. Mithilfe dieser Information kann GemPages den Zoomfaktor berechnen und sicherstellen, dass das Video optimal in das Banner passt. Gängige Videoformate sind unter anderem:
- 1600:900
- 400:300
- 2100:900
- 100:100
- 900:1600
Video-Hosting: Wenn Sie das Video lieber selbst hosten möchten, wählen Sie die Option „Videohosting“. Laden Sie Ihr Video in Shopify hoch und fügen Sie anschließend den Videolink in das entsprechende Feld ein. Link Feld, das als Hintergrund verwendet werden soll.
Hinweis: Bitte beachten Sie, dass das Ergebnis auf der Live-Seite überprüft werden muss. Eine Schritt-für-Schritt-Anleitung zum Hochladen des Videos auf Shopify finden Sie unter Dieser Artikel.
Mach das ... an „Video in Schleife laufen lassen“ schalten Sie ein, damit das Video am Ende von vorne neu gestartet wird.
Auflage
Klicken Sie auf Mehr anzeigen !!!, dann drück Hinzufügen ... konfigurieren:
- Farbe,: Wählen Sie eine Overlay-Farbe
- Deckkraft: Transparenz anpassen (niedrigere Werte = transparenter)
Größe
Wählen Sie die Skalierung des Banners:
- Als Bannerquelle: Automatische Anpassung basierend auf den Bildabmessungen
- Maßgeschneidert: Breite und Höhe manuell einstellen
Inhalt
Konfigurieren:
- Länge: Legen Sie die maximale Breite für den inneren Inhalt fest
- Polsterung: Fügen Sie Abstände innerhalb des Banners hinzu
- Ausrichten: Inhalt horizontal ausrichten (links, zentriert, rechts)
Shape
Passen Sie die Form an, indem Sie:
- Grenze: Rahmenstile hinzufügen
- CORNER: Passen Sie die Rundung der Ecken an
- Shadow: Wenden Sie Schatteneffekte für Tiefe an
Ergebnisse
- Hover-Effekt: Interaktives Hover-Styling hinzufügen
- Parallaxenrolle (nur für Bilder): Fügt Tiefe durch geschichtete Bewegung hinzu, wenn Benutzer scrollen
verbindung
Sobald Sie die Option EINschalten, können Sie den Abschnitt „Link“ konfigurieren:
Nach dem Klick: Wählen Sie aus der Dropdown-Liste aus, was passiert, nachdem Besucher auf Ihr Hero-Banner geklickt haben: Seite öffnen, Scrollen zu, Popup öffnen, E-Mail senden oder Anruf tätigen.
Zum Beispiel, wenn Sie die Option Blättern Sie zu Klicken Sie auf die Option Hinzufügen ... , um den Zielabschnitt aus der Liste auszuwählen.
SEO
Im Abschnitt „SEO“ können Sie den Alternativtext und den Bildtitel des Bildes hinzufügen, um die SEO der Seite zu verbessern.
Ausrichten
Richten Sie den Abschnitt „Hero Banner“ selbst aus: Links, Centerden Recht.
Konfigurieren der Registerkarte „Erweitert“
Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.
Häufig gestellte Fragen
1. Wie füge ich mit dem Hero-Banner-Element einem Bild Text hinzu?
Nachdem Sie das Hero-Banner zu Ihrer Seite hinzugefügt haben, ziehen Sie einfach per Drag & Drop eine Überschrift oder ein Textelement auf das Banner. Anschließend können Sie den Text bearbeiten, seinen Stil anpassen und ihn an beliebiger Stelle über dem Bildhintergrund positionieren.
2. Kann ich im Hero Banner einen Videohintergrund verwenden?
Ja. Sie können entweder einen YouTube-Link oder ein gehostetes Video von Shopify verwenden. Fügen Sie den Link einfach in die Videoquelleneinstellungen ein. Aktivieren Sie optional den Schalter „Video in Endlosschleife“ für eine kontinuierliche Wiedergabe.
3. Kann ich mit dem Hero-Banner-Element eine Diashow erstellen?
Das Hero Banner-Element wird auch verwendet, um eine Diashow auf Ihrer Webseite zu gestalten. Durch das Mischen der Heldenbanner an. Nach der Installation können Sie HEIC-Dateien mit der Karussell Element können Sie ganz einfach eine beeindruckende Diashow erstellen, die die Aufmerksamkeit der Kunden fesselt. Um zu erfahren, wie das geht, schauen Sie sich an dieses Lehrvideo.
4. Warum wird mein Text oder meine Schaltfläche auf dem Handy nicht angezeigt?
Stellen Sie sicher, dass das Element auf Mobilgeräten nicht ausgeblendet ist. Überprüfen Sie auf der Registerkarte „Erweitert“ die Sichtbarkeitseinstellungen, um sicherzustellen, dass es für alle Bildschirmgrößen aktiviert ist.
5. Wie richte ich den Text oder die Schaltfläche im Hero-Banner aus?
Verwenden Sie die Inhalt > Ausrichten Einstellung, um Elemente links, mittig oder rechts zu positionieren. Sie können auch die Polsterung als auch Länge Bedienelemente für eine präzise Platzierung.
6. Wie stelle ich meine Homepage für Besucher im Vollbildmodus dar?
7. Warum wird mein Heldenbanner höher oder an der falschen Position auf der Seite angezeigt?
8. Wie füge ich einem Hero-Banner Alternativtext hinzu?
Um einem Hero-Banner Alternativtext hinzuzufügen, klicken Sie auf das Hero-Banner-Element, um dessen Einstellungsfeld zu öffnen. Unter dem SEO Geben Sie in diesem Abschnitt Ihren Text ein Bild-Alt-Text Dieser Alternativtext verbessert die Barrierefreiheit und Suchmaschinenoptimierung, indem er das Bannerbild für Suchmaschinen und Bildschirmleseprogramme beschreibt.
9. Kann ich einem Hero-Banner einen „Jetzt kaufen“-Button hinzufügen?
Nein, der Hero-Banner unterstützt keine dynamischen Checkout-Buttons (Jetzt kaufen). Diese Buttons benötigen Produktdaten und sind daher nur innerhalb von Produkt- oder Produktlistenelementen verfügbar. Wenn Sie einen ähnlichen Effekt erzielen möchten, können Sie stattdessen einen regulären Button im Hero-Banner hinzufügen und diesen mit einer Produktseite verlinken.
Vielen Dank für Ihre Kommentare