Slider-Bereich

Das Slider Mit dem Bereich „Banner“ in Pixpa können Sie Ihren Seiten einen visuell ansprechenden Bereich hinzufügen und gleichzeitig die SEO verbessern. Egal, ob Sie an einer Galerie, einer Seite, einem Ordner, einem Kundenalbum oder einem Blog arbeiten – das Banner hilft, den Ton anzugeben und wichtige Inhalte hervorzuheben.

Tipp

Falls Sie nur eine Textnachricht oben auf Ihrer Website anzeigen möchten, verwenden Sie die Ansageleiste. Oder wenn Sie ein Pop-up erstellen möchten, das angezeigt wird, wenn Besucher Ihre Website aufrufen, können Sie das ausprobieren Marketing-Popup

In diesem Artikel


Was ist ein Banner

Ein Banner wird verwendet, um oben/unten in Ihrem Inhalt ein Bannerbild/eine Bild-Diashow/ein Video in voller Breite anzuzeigen.

Sehen Sie sich ein Live-Demo-Banner an


Bannerabschnitt zu einer Seite hinzufügen

  • Einer Seite kann ein Abschnitt hinzugefügt werden. Sie können entweder einen Abschnitt zu einer bereits vorhandenen Seite hinzufügen oder eine neue Seite erstellen innerhalb Ihrer Website.
  • Auf deiner Seite, Klicken Sie auf blau + Symbol hinzufügen a Neuer Abschnitt auf Ihre Seite.

  • Sie sehen jetzt die Abschnitt Kategorien auf der linken Seite.
  • Wähle die  Heldenabschnitte (1) Kategorie und klicken Sie auf die Slider Registerkarte (2), aus der Sie wählen können verschiedene Layouts Banner (3) Abschnitt.

  • Wählen Sie ein beliebiges Abschnittslayout und klicken Sie darauf, um es Ihrer Seite hinzuzufügen.

Banner bearbeiten

Wenn der Abschnitt bereits zur Seite hinzugefügt wurde, können Sie ihn problemlos bearbeiten.

  • Bewegen Sie den Cursor über den Abschnitt und klicken Sie auf Inhalt bearbeiten (1) Taste.

  • Es öffnet sich eine Seitenleiste, von der aus Sie Bearbeiten (2) der Bannerbereich.
  • Klicken Sie auf Gespeichert (3) Schaltfläche nach Vornehmen der Änderungen.


Inhalt des Bannerabschnitts

Das Registerkarte Inhalt Im Abschnitt „Banner bearbeiten“ können Sie den Inhalt Ihres Banners hinzufügen und anpassen, unabhängig davon, ob er bild- oder videobasiert ist.

  1. Bannertyp
  2. Bildfolien
  3. Video-Folien
  4. Bannertext und Schaltflächen
  5. Bannertext
  6. Schaltfläche & Links

Bannertyp

Wählen Sie den Bannertyp aus. Sie können zwischen den folgenden Optionen wählen:

  • Folien – Wählen Sie die Option „Folien“, wenn Sie Bilder im Banner anzeigen möchten. Sie können mehrere Bildfolien unter einem Banner hinzufügen.
  • Video – Wenn Sie Videos als Bannerfolien anzeigen möchten, wählen Sie diese Option. Unter jedem Banner können Sie mehrere Videofolien hinzufügen.
Hinweis

Sie können einem Bannerabschnitt bis zu 25 Folien hinzufügen.


Bildfolien

Wenn unter „Bannertyp“ die Option „Folien“ ausgewählt ist, können Sie eine Diashow erstellen, indem Sie mehrere Bilder als Bannerfolien hochladen.

  1. Fügen Sie mehrere Folien hinzu, indem Sie auf das + Folien hinzufügen .
  2. Nachbestellung Sie können sie mit den Ziehpunkten verschieben.
  3. Bearbeiten oder löschen einzelnen Folien über die jeweiligen Icons.

Bild-/Textfolie bearbeiten

  1. Bild 
    • Klicken Sie auf Hochladen Taste, um das Bild/Dia zu ändern. Klicken Sie auf die Löschen Schaltfläche, um die Folie zu löschen.
    • Ändern Sie den Brennpunkt des Bildes, indem Sie einfach irgendwo auf das Bild klicken.
  2. Mobiles Bild – Laden Sie ein mobiles Bannerbild hoch. Wir empfehlen, hier Hochformatbilder hinzuzufügen.
  3. Geben Sie den Alt-Text an für die Imagefolie. Dies hilft für SEO-Zwecke.

  1. Folientext – Geben Sie den Folientext ein, der über der Folie angezeigt wird. Sie können den Text fett, kursiv oder unterstrichen darstellen, ihn verlinken und vieles mehr.
    Siehe auch: Der Pixpa-Texteditor.

  1. Folienlink
    • Klicken Sie auf das Einstellungssymbol und geben Sie den Overlay-Link für die Folie ein.
    • Sie können eine beliebige Seite innerhalb/außerhalb Ihrer Website, Ihre E-Mail-Adresse oder eine Kontaktnummer angeben.
      Überprüfen Sie auch: Verlinkungstext/Schaltfläche
  1. Taste & Verbindungen
    • Fügen Sie dem Folieninhalt bis zu 10 Schaltflächen/Links hinzu.
    • Sie können eine normale Schaltfläche, einen Textlink hinzufügen oder ein Bild/Symbol als Schaltfläche verwenden.
      Überprüfen Sie auch: Schaltfläche & Links
  1. Hit the Gespeichert Schaltfläche, um Ihre Änderungen zu speichern.

Hinweis

Die komplette Folie wird erst dann in einen Link umgewandelt, wenn Bannertext und Schaltflächen Option ist ausgewählt als Für jede Folie unterschiedlich.


Video-Folien

Wenn das Video-Folie Wenn diese Option aktiviert ist, können Sie ein YouTube- oder Vimeo-Video in Ihr Banner einbetten. Folgende Konfigurationsmöglichkeiten stehen zur Verfügung:

1. YouTube/Vimeo Link – Geben Sie einen direkten Link zu Ihrem Video ein. Unterstützte Formate:

  • YouTube: https://www.youtube.com/watch?v=XXXXXXXXXXX
  • Vimeo: https://vimeo.com/XXXXXXXXXXX

2. Video anzeigen – Wählen Sie aus, wie das Video auf Ihrer Site angezeigt wird:

  • Autoplay: Das Video wird direkt eingebettet und auf allen Geräten automatisch abgespielt (standardmäßig stummgeschaltet).
  • Automatische Wiedergabe – Nur Desktop: Das Video wird direkt eingebettet und nur auf Desktop-Computern automatisch abgespielt (standardmäßig stummgeschaltet).
  • In Lightbox öffnen: Durch Klicken auf die Videovorschau wird diese in einem Popup geöffnet.

3. Mobiles Bild – Laden Sie ein Ersatzbild hoch, das auf Mobilgeräten angezeigt wird, auf denen die automatische Videowiedergabe möglicherweise nicht funktioniert oder nicht unterstützt wird. So bleibt Ihr Banner auf allen Bildschirmgrößen optisch ansprechend.

4. Alt-Tag angeben (optional) – Fügen Sie einen Alt-Tag hinzu, um SEO und Zugänglichkeit zu verbessern. Dies beschreibt das Ersatzbild für Screenreader oder in Fällen, in denen das Bild nicht angezeigt werden kann.

5. Folientext – Geben Sie den Folientext ein, der über der Folie angezeigt wird. Sie können den Text fett, kursiv oder unterstrichen darstellen, ihn verlinken und vieles mehr.
Siehe auch: Der Pixpa-Texteditor

6. Folienlink

  • Klicken Sie auf das Einstellungssymbol und geben Sie den Overlay-Link für die Folie ein.
  • Sie können eine beliebige Seite innerhalb/außerhalb Ihrer Website, Ihre E-Mail-Adresse oder eine Kontaktnummer angeben.
    Überprüfen Sie auch: Verlinkungstext/Schaltfläche

7. Knopf & Verbindungen

  • Fügen Sie dem Folieninhalt bis zu 10 Schaltflächen/Links hinzu.
  • Sie können eine normale Schaltfläche, einen Textlink hinzufügen oder ein Bild/Symbol als Schaltfläche verwenden.
    Überprüfen Sie auch: Schaltfläche & Links

8. Speichern – Hit the Gespeichert Schaltfläche, um Ihre Änderungen zu speichern


Bannertext und Schaltflächen

  • Geben Sie an, ob der Text und die Schaltflächen für alle Folien gleich oder für jede Folie unterschiedlich sein sollen. Wenn Sie die auswählen Für alle Folien gleich Option, die Bannertext und Tasten werden verwendet.
  • Wenn Sie die ausgewählt haben Für jede Folie unterschiedlich Option werden der Text und die Schaltflächen verwendet, die für eine bestimmte Folie angegeben sind.


Bannertext


Schaltflächen & Links

  1. Diese Schaltflächen/Links erscheinen über Ihren Banner-Folien (gemeinsam für alle Folien).
    Überprüfen Sie auch: Schaltfläche & Links
  2. Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie auf das Gespeichert Klicken Sie oben rechts auf die Schaltfläche, um sie auf Ihr Banner anzuwenden.


Bannereinstellungen

Unter der Registerkarte „Bannereinstellungen“ stehen Ihnen die folgenden Optionen zur Verfügung:


Banner-Anzeigemodus

    • Skalieren und anpassen – Bilder passen in die Breite und Höhe des Banners. 
    • An Breite anpassen (Nur Desktop) – Bilder werden auf Bannerbreite skaliert. Die Bannerhöhe erbt die Bildhöhe.
  1. Banner-Desktop-Höhe – Geben Sie die Desktop-Banner-Höhe an, wenn Sie die gewählt haben Vollblut or skalieren und passen Option im Feld Anzeigemodus.
  2. Banner Mobile Höhe – Geben Sie die Höhe des mobilen Banners an.


Folienanzeige-Steuerelemente

Mithilfe dieser Einstellungen lässt sich das Erscheinungsbild und die Übergänge der Folien im Bannerbereich individuell anpassen.

  1. Folienübergangsstil – Wählen Sie, wie die Folien wechseln sollen. Sie können Optionen auswählen wie Verblassen, Horizontale oder vertikale Rutsche für einen reibungslosen Übergang zwischen den Folien.

  2. Folien pro Zeile – Geben Sie an, wie viele Folienzeilen gleichzeitig sichtbar sein sollen.

  3. Folien pro Spalte – Definieren Sie, wie viele Folienspalten angezeigt werden sollen. Dadurch wird gesteuert, wie viele Folien nebeneinander in jeder Zeile angezeigt werden.
  4. Abstand zwischen den Folien – Passen Sie mit dieser Einstellung den Abstand zwischen einzelnen Folien an. Sie können den Abstand in Pixeln erhöhen, um die visuelle Trennung zwischen den Folien zu steuern.
  5. Inhaltsposition – Geben Sie die Position des Inhalts innerhalb des Banners an.
  6. Inhaltsbreite – Legen Sie die Breite für den Bannerinhalt fest.


Bannergestaltung

  1. Hintergrundfarbe – Legen Sie die Hintergrundfarbe für das Banner fest.
  2. Überlagerungsfarbe – Legen Sie die Overlay-Farbe für das Banner fest.
  3. Navigationsstil – Geben Sie den Navigationsstil des Banners an. Sie können zwischen Chevron, langen Pfeilen und kurzen Pfeilen wählen. Wählen Sie „Keine“, wenn Sie die Navigationssteuerelemente deaktivieren möchten.
  4. Navigationsfarbe – Geben Sie die Farbe der Navigationssteuerelemente auf dem Banner an.
  5. Scrollpfeil aktivieren – Wählen Sie diese Option, um einen Abwärtspfeil über dem Banner anzuzeigen.
  6. Radius Corner – Passen Sie die Rundung der Ecken der Bannerfolie an. Sie können entweder allen Ecken den gleichen Radius zuweisen oder für jede Ecke einzeln unterschiedliche Werte festlegen.


Diese Einstellungen definieren, wie sich die Folien innerhalb des Banner- oder Karussellbereichs automatisch bewegen und verhalten.

  1. Sanftes Scrollen aktivieren – Aktivieren Sie diese Option, um die Übergänge zwischen den Folien flüssiger zu gestalten und einen nahtlosen Scroll-Effekt zu erzielen.
  2. Automatische Wiedergabe der Folien aktivieren – Wenn diese Option aktiviert ist, erfolgen die Folienübergänge automatisch ohne Benutzerinteraktion.
  3. Autoplay-Fortschritt anzeigen – Zeigt eine visuelle Anzeige an, die den Zeitpunkt vor dem Übergang zur nächsten Folie anzeigt.
  4. Autoplay-Verzögerung – Legen Sie das Zeitintervall zwischen den automatischen Folienübergängen fest (z. B. alle 4 Sekunden).
  5. Karussellschleife – Aktivieren Sie diese Option, damit die Folien nach der letzten Folie kontinuierlich wieder zur ersten Folie zurückkehren.


Tasten

Diese Optionen ermöglichen die Anpassung der im Banner angezeigten Schaltflächen.

  1. Knopfgröße - Wählen Sie die Größe des Buttons aus den verfügbaren Optionen wie klein, mittel oder groß.
  2. Ausrichtung - Legen Sie die Ausrichtung der Schaltflächen innerhalb des Abschnitts fest (links, mittig oder rechts).
  3. Abstand zwischen den Schaltflächen – Passen Sie den horizontalen Abstand zwischen mehreren Schaltflächen an, um ein ausgewogenes Layout zu erzielen.
  4. Platz über den Schaltflächen – Definieren Sie den vertikalen Abstand zwischen dem Text und den Schaltflächen (gemessen in Pixeln).
  5. Textlinkgröße – Legen Sie die Schriftgröße für alle textbasierten Schaltflächen oder Links fest.
  6. Bildschaltflächengröße – Passen Sie die Größe von Schaltflächen an, die Symbole oder Bilder enthalten.
  7. Schaltflächenbreite – Wählen Sie die Breite der Schaltfläche aus, z. B. mit Optionen wie Standard, Groß, Extra Groß oder Volle Breite.

Erfahren Sie mehr über das Gestalten von Schaltflächen und Links.


Social Icons

Mithilfe dieser Einstellungen können Aussehen und Gestaltung der im Bannerbereich angezeigten Social-Media-Symbole angepasst werden.

  1. Symbolgröße – Passen Sie die Größe der Social-Media-Icons (in Pixeln) an das Gesamtdesign des Banners an.
  2. Symboltyp – Wählen Sie den Symbolstil (z. B. Klassisch, Kontur oder Vollton) passend zum Thema des Banners.
  3. Symbolfarbe – Wählen Sie aus, wie die Symbolfarbe definiert wird. Folgende Optionen stehen zur Verfügung:
    • Linktext – Verwendet die gleiche Farbe wie der Linktext des Abschnitts.
    • Benutzerdefiniert - Ermöglicht die manuelle Auswahl einer benutzerdefinierten Farbe.
    • Markenfarbe – Verwendet die offizielle Markenfarbe der jeweiligen Plattform (z. B. Blau für Facebook).
  4. Farbe auswählen – Wenn „Benutzerdefiniert“ ausgewählt ist, können Sie mit dieser Option eine bestimmte Farbe für die Symbole auswählen.


Banner-Layout

Sie können das Layout eines Banners ganz einfach ändern. WEITERE INFORMATIONEN  über die Banner-Layouts.


Können Sie nicht finden, wonach Sie suchen?

Wenden Sie sich an einen Pixpa-Experten.

Pixpa Studio wurde komplett überarbeitet. Wir aktualisieren derzeit alle Screenshots der Hilfeartikel.