Der Image-Slider zeigt mehrere großformatige Bilder nacheinander an. Nutze ihn, um Bereiche deiner Website hervorzuheben, wie zum Beispiel eine Produktkategorie. Du kannst jedem Bild auch Text und Links hinzufügen.
Hinweis
Stelle sicher, dass Bilder auf allen Geräten korrekt angezeigt werden. Deine Website ist responsiv, sodass sich das Design automatisch an das verwendete Gerät anpasst. Weitere Informationen findest du unter Erfahre mehr über "Responsive Design".
So fügst du einen Image-Slider hinzu
Befolge diese Schritte, um einer Seite einen Image-Slider hinzuzufügen und Bilder hochzuladen:
- Navigiere in der Seitenleiste deines Cockpits zu Editor.
Der Editor öffnet sich. - Navigiere zu Seiten.
- Wähle die zu bearbeitende Seite aus oder füge eine neue Seite hinzu.
Auf der rechten Seite öffnet sich eine Vorschau der Seite. - Navigiere zu Inhaltselemente → Bilder oder Galerie.
- Ziehe das Inhaltselement Image-Slider an die gewünschte Position.
Du kannst Inhaltselemente nur in die blauen Bereiche der Seite ziehen. - Wähle Bilder hinzufügen.
Die Ansicht Bilder hinzufügen erscheint. -
Ziehe ein Bild auf das Feld Bild hinzufügen oder wähle Bild hinzufügen. Durchsuche entweder die Unsplash-Bildbibliothek oder lade ein Bild von deinem Gerät hoch.
Hinweis
Du kannst dem Slider bis zu fünf Bilder zuweisen.
- Lege die Bildausrichtung fest. Du kannst entweder den oberen Bereich
, den unteren Bereich
oder die Mitte
als Mittelpunkt des Bildes verwenden. Weitere Informationen findest du auch unter Richte Bilder im Image-Slider aus.
- Gib optional einen Alternativen Text ein. Dies verbessert die SEO, unterstützt Screenreader und erscheint, falls das Bild nicht angezeigt werden kann.
- Wenn du Texte zu deinem Bild hinzufügen möchtest, nimm die entsprechenden Einstellungen auf den Tabs
und
vor. Weitere Informationen findest du unter Text/Links zu Bildelementen hinzufügen.
- Wenn du weitere Bilder zum Slider hinzufügen möchtest, wähle den nächsten leeren Platz in der kleinen Vorschau des Image-Sliders oben (1) aus und wiederhole die Schritte 7-11.
- Lege die Rotationsgeschwindigkeit unter Bilder wechseln alle ... Sekunden (2) fest. Standardmäßig sind fünf Sekunden eingestellt. Du kannst eine Geschwindigkeit zwischen einer und zehn Sekunden wählen.
- Aktiviere optional das Kontrollkästchen Seitenverhältnis auf allen Geräten beibehalten, um ein festes Seitenverhältnis für die Bilder festzulegen. Weitere Informationen findest du auch im Abschnitt Ein festes Seitenverhältnis auf allen Geräten beibehalten.
- Sobald du fertig bist, wähle Speichern.
Du hast den Image-Slider zu deiner Website hinzugefügt.
Um den Image-Slider zu bearbeiten, fahre mit der Maus darüber und wähle Bearbeiten. Die Ansicht Image-Slider bearbeiten erscheint.
Info
Bei jedem Inhaltselement kannst du über die blaue Leiste, die beim Darüberfahren erscheint, auf zusätzliche Einstellungen zugreifen. Weitere Informationen findest du unter Inhaltselemente bearbeiten.
So änderst du die Reihenfolge der Bilder
Um ein bestimmtes Bild an eine andere Position in der Rotation zu verschieben, ziehe das entsprechende Bild in der kleinen Vorschau des Image-Sliders oben an die gewünschte Stelle. Zusätzliche Texte/Links, die du für das Bild festgelegt hast, werden ebenfalls mit verschoben.
Ein festes Seitenverhältnis auf allen Geräten beibehalten
Du kannst ein festes Seitenverhältnis für den Image-Slider definieren, um die Bildabmessungen auf allen Geräten konsistent zu halten.
Aktiviere das Kontrollkästchen Seitenverhältnis auf allen Geräten beibehalten und bewege den Schieberegler, um ein Seitenverhältnis auszuwählen, in dem die Bilder auf Desktop- und mobilen Geräten angezeigt werden sollen. Beachte: Wenn du viel Text zu einem Bild hinzugefügt hast, kann das Seitenverhältnis dennoch automatisch angepasst werden, damit der Text korrekt hineinpasst.