Große Bilder in einem Image-Slider anzeigen

Mit dem Inhaltselement Image-Slider können Sie mehrere große Bilder abwechselnd anzeigen. Außerdem können Sie Text und Links zu den Bildern hinzufügen. Damit können Sie beispielsweise andere Bereiche Ihres Shops hervorheben, z. B. eine bestimmte Produktkategorie.

Stellen Sie sicher, dass Ihre Bilder auf allen Geräten ansprechend dargestellt werden. Ihr Shop ist „responsive". Das bedeutet, dass Ihr Design automatisch für das verwendete Gerät optimiert wird. Weitere Informationen finden Sie unter Was bedeutet es, dass mein Shop „responsive“ ist?

So fügen Sie einen Image-Slider hinzu

So fügen Sie einen Image-Slider zu einer Seite hinzu und legen fest, welche Bilder Sie präsentieren möchten:

1. Navigieren Sie im Hauptmenü des Administrationsbereichs zu Editor.
2. In der Seitenleiste des Editors unter Seiten finden Sie eine Liste aller Seiten. Wählen Sie die Seite aus, zu der Sie den Image-Slider hinzufügen möchten oder fügen Sie eine neue Seite hinzu.
   Eine Vorschau der Seite wird Ihnen rechts angezeigt.
3. Wählen Sie in der Seitenleiste des Editors Inhaltselemente.
4. Wählen Sie die Kategorie Bilder oder Galerie.
5. Ziehen Sie das Inhaltselement Image-Slider in den Vorschau-Bereich und legen Sie es an der gewünschten Position ab. 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. Hier können Sie dem Image-Slider bis zu 5 Bilder zuweisen.
7. Ziehen Sie das Bild entweder auf das Feld Bild hinzufügen und legen Sie es dort ab oder wählen Sie das Bild von einem Gerät aus, indem Sie Bild hinzufügen wählen.
8. Warten Sie, bis das Bild hochgeladen wurde.
9. Legen Sie die Bildausrichtung fest. Sie können entweder den oberen , unteren , oder mittleren Bildbereich in den Fokus stellen. Weitere Informationen finden Sie im Bereich Erfahren Sie mehr über die Bildausrichtung.
10. Optional können Sie einen Alternativtext eingeben. Dieser wird für SEO-Zwecke verwendet und kann zudem von Screenreadern für blinde und sehbehinderte Benutzer gelesen werden. Der Alternativtext wird auch angezeigt, falls das Bild nicht dargestellt werden kann.
11. Wenn Sie Texte zu Ihrem Bild hinzufügen möchten, können Sie dies auf den Tabs und einstellen. Weitere Informationen finden Sie unter Text/Links zu Bildern hinzufügen.
12. Wenn Sie weitere Bilder zum Image-Slider hinzufügen möchten, wählen Sie den nächsten leeren Slot in der kleinen Vorschau des Image-Sliders am oberen Rand und wiederholen Sie die Schritte 7-11.
13. Legen Sie fest, mit welcher Geschwindigkeit die Bilder rotieren sollen. Bewegen Sie dazu den Schieberegler unter Bilder wechseln alle ... Sekunden . Standardmäßig wechseln die Bilder alle 5 Sekunden. Alternativ können Sie auch einen Intervall von 1-10 Sekunden einstellen.
    
    
14. Sobald Sie fertig sind, wählen Sie Speichern.

Sie haben der Seite einen Image-Slider hinzugefügt.

Um den Image-Slider erneut zu bearbeiten, wählen Sie ihn aus oder bewegen Sie Ihre Maus darüber und wählen Sie in der oberen rechten Ecke. Die Ansicht Image-Slider bearbeiten erscheint. Nehmen Sie dort die gewünschten Änderungen vor.

Info

Für alle Inhaltselemente können Sie über die blaue Leiste, die erscheint, wenn Sie die Maus über ein Inhaltselement bewegen, weitere Einstellungen vornehmen. Sie können Inhaltselemente per Drag & Drop verschieben , löschen , das Hintergrunddesign bearbeiten und eine Animation hinzufügen .

So ändern Sie die Reihenfolge der Bilder

Um ein bestimmtes Bild an eine andere Stelle in der Reihenfolge der Rotation zu verschieben, bewegen Sie das betreffende Bild in der kleinen Vorschau des Image-Sliders am oberen Rand per Drag & Drop. Alle zusätzlichen Texte/Links, die Sie für das Bild eingestellt haben, werden ebenfalls verschoben.

Erfahren Sie mehr über die Bildausrichtung

Die Art und Weise, wie die Bilder im Image-Slider in Ihrem Shop angezeigt werden, hängt vom ursprünglichen Format des Bildes und dem von Ihren Kunden verwendeten Gerät ab. Je nachdem wird das Bild möglicherweise zugeschnitten angezeigt. Um zu verhindern, dass die wichtigsten Teile eines Bildes abgeschnitten werden, können Sie die Bilder passend ausrichten.

Wenn Sie die Bildausrichtung festlegen, wählen Sie die Option, die den gewünschten Teil des Bildes zeigt. Derzeit ist es nicht möglich Bilder frei zu positionieren. Stattdessen müssen Sie eine der drei Optionen unter Bildausrichtung auswählen. Diese sind Oben , Unten , und Zentriert .