Große Bilder in einem Image-Slider anzeigen

Der Image-Slider zeigt mehrere großformatige Bilder nacheinander an. Damit können Sie beispielsweise andere Bereiche Ihres Shops hervorheben, z. B. um Bereiche Ihres Shops hervorzuheben. Sie können außerdem jedem Bild Text und Links hinzufügen.

Animiertes Beispiel eines Image-Sliders mit drei Bildern

Stellen Sie sicher, dass die Bilder auf allen Geräten korrekt angezeigt werden. Ihr Shop ist responsiv, das Design passt sich also automatisch an das jeweilige Gerät an. Weitere Informationen finden Sie unter Was bedeutet es, dass mein Shop „responsive“ ist?

So fügen Sie einen Image-Slider hinzu

Gehen Sie wie folgt vor, um einen Image-Slider zu einer Seite hinzuzufügen und Bilder hochzuladen:

  1. Navigieren Sie im Hauptmenü des Administrationsbereichs zu Editor.
    Der Editor öffnet sich.
  2. Navigieren Sie zu Seiten.
  3. Wählen Sie die Seite aus, die Sie bearbeiten möchten, oder fügen Sie eine neue Seite hinzu.
    Eine Vorschau der Seite wird rechts angezeigt.
  4. Navigieren Sie zu InhaltselementeBilder oder Galerie.
  5. Ziehen Sie das Inhaltselement Image-Slider an die gewünschte Position. Sie können Inhaltselemente nur in den blauen Bereichen der Seite ablegen.
  6. Wählen Sie Bilder hinzufügen.
    Die Ansicht Bilder hinzufügen erscheint.
  7. Ziehen Sie ein Bild in das Feld Bild hinzufügen oder wählen Sie Bild hinzufügen um es von Ihrem Gerät hochzuladen.
    Sie können dem Slider bis zu fünf Bilder zuweisen.
  8. Legen Sie die Bildausrichtung fest. Sie können entweder den oberen Oben ausgerichtet, unteren Unten ausgerichtet, oder mittleren Zentriert Bildbereich in den Fokus stellen. Weitere Informationen finden Sie im Bereich Erfahren Sie mehr über die Bildausrichtung.
  9. Optional: Geben Sie Alternativtext ein. Dies verbessert die SEO, unterstützt Screenreader und wird angezeigt, wenn das Bild nicht geladen werden kann.
  10. Wenn Sie Ihrem Bild Text hinzufügen möchten, nehmen Sie die entsprechenden Einstellungen auf den Tabs Bildtexte bearbeiten und Textdesign bearbeiten vor. Weitere Informationen finden Sie unter Text/Links zu Bildern hinzufügen.
  11. Wenn Sie weitere Bilder hinzufügen möchten, wählen Sie im kleinen Vorschaubereich des Sliders oben den nächsten freien Platz Kreis 1 und wiederholen Sie die Schritte 7-11.
  12. Legen Sie die Wechselgeschwindigkeit unter Bilder wechseln alle ... Sekunden Kreis 2 fest. Standardmäßig beträgt sie fünf Sekunden. Sie können eine Geschwindigkeit zwischen einer und zehn Sekunden einstellen.

    Screenshot der Benutzeroberfläche mit dem Image-Slider mit den Nummern 1 und 2
  13. Sobald Sie fertig sind, wählen Sie Speichern.

Sie haben den Image-Slider zu Ihrem Shop hinzugefügt.

Um den Image-Slider zu bearbeiten, bewegen Sie den Mauszeiger darüber und wählen Sie Bearbeiten. Die Ansicht Image-Slider bearbeiten wird angezeigt.

Info

Für jedes Inhaltselement können Sie zusätzliche Einstellungen über die blaue Leiste aufrufen, die erscheint, wenn Sie den Mauszeiger darüber bewegen. Weitere Informationen finden Sie unter Inhaltselemente bearbeiten.

So ändern Sie die Reihenfolge der Bilder

Um ein bestimmtes Bild an eine andere Position in der Reihenfolge zu verschieben, ziehen Sie das entsprechende Bild im kleinen Vorschaubereich des Image-Sliders oben per Drag-and-drop an die gewünschte Stelle. Alle zusätzlichen Texte/Links, die Sie für das Bild festgelegt haben, werden ebenfalls verschoben.

Animiertes Beispiel für die Änderung der Bildreihenfolge

Erfahren Sie mehr über die Bildausrichtung

Wie Bilder im Slider angezeigt werden, hängt vom ursprünglichen Format des Bildes und vom Gerät des Kunden ab. Dies kann zu Beschnitt führen. Um wichtige Bildbereiche sichtbar zu halten, passen Sie die Bildausrichtung an.

Wählen Sie bei der Festlegung der Bildausrichtung die Option, die den gewünschten Bildbereich im Blick behält. Eine freie Positionierung des Bildes ist nicht möglich. Sie können zwischen oben Oben ausgerichtet, unten Unten ausgerichtet und zentriert Zentriert auswählen.

War dieser Beitrag hilfreich?