> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/bilder-slider-auf-website-seiten-einsetzen.md). # Bilder-Slider auf Website-Seiten einsetzen Stelle mehrere Bilder in einem klar steuerbaren Slider dar, wähle passende Wechsel- und Link-Einstellungen und prüfe die Anzeige auf allen Geräten. Ein Bilder-Slider zeigt mehrere Bilder nacheinander im selben Seitenbereich. Er eignet sich, wenn Besucher eine kleine Auswahl selbst durchblättern sollen – zum Beispiel Projekte, Räume, Leistungen oder verschiedene Ansichten eines Angebots. Anders als eine lange Bilderreihe bleibt der Seitenbereich kompakt. Ein Slider ist nur dann hilfreich, wenn jedes Bild einen erkennbaren Zweck hat. Zu viele oder sehr ähnliche Bilder machen die Bedienung unruhig. Starte deshalb mit wenigen, klar ausgewählten Motiven. ## Was Besucher sehen und tun können Ein Slider kann Bilder automatisch wechseln oder den Besuchern die Steuerung überlassen. Je nach deiner Einstellung sehen sie: * einen Übergang von einem Bild zum nächsten; * Pfeile zum Vor- und Zurückblättern; * eine Seitennavigation, die anzeigt, wie viele Bilder vorhanden sind und ein bestimmtes Bild öffnet; * ein Bild, das zu einer passenden Zielseite führen kann. Die Originalansichten zeigen sowohl die Einstellungen des ausgewählten Slider-Elements als auch den Slider direkt auf einer Website-Seite. Dadurch kannst du die Wirkung im Editor vorbereiten und anschließend in der veröffentlichten Ansicht prüfen. ## Vor dem Einrichten planen Kläre zuerst diese Fragen: 1. **Welche Geschichte erzählen die Bilder?** Eine sinnvolle Reihenfolge ist wichtiger als eine große Menge. 2. **Was soll ein Klick bewirken?** Nicht jedes Bild braucht ein Linkziel. Setze einen Link nur dann, wenn er zu genau diesem Bild passt. 3. **Wer soll steuern?** Bei wichtigen Informationen sind sichtbare Pfeile oder eine Seitennavigation oft hilfreicher als ein schneller automatischer Wechsel. 4. **Welche Bildformate verwendest du?** Einheitliche Größen verhindern, dass der Slider beim Wechsel springt. Für breite Slider empfiehlt die Originalquelle ein Seitenverhältnis von **16:9**, zum Beispiel **1600 × 900** oder **1920 × 1080 Pixel**. Das ist eine Empfehlung, keine Pflicht. Entscheidend ist, dass alle Bilder im selben Slider möglichst dasselbe Seitenverhältnis verwenden. ## Slider einfügen und Bilder hinzufügen 1. Öffne die gewünschte Website- oder Funnel-Seite im Editor. 2. Wähle den Abschnitt, in dem der Slider erscheinen soll. 3. Ziehe das Element **Bilder-Slider** an die gewünschte Stelle. 4. Wähle das neue Element aus, damit die Einstellungen angezeigt werden. 5. Füge Bilder aus der Medienbibliothek hinzu. 6. Ordne die Bilder in der gewünschten Reihenfolge an. 7. Speichere die Seite und öffne danach die veröffentlichte Ansicht. Die Quelle zeigt die Bildliste im rechten Einstellungsbereich. Kontrolliere dort nicht nur, ob alle Bilder vorhanden sind, sondern auch ihre Reihenfolge. Das erste Bild ist der Einstieg, den Besucher zuerst sehen. ## Die Einstellungen verständlich erklärt | Einstellung | Wofür sie da ist | Praktische Wirkung | | --------------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Übergang** | Legt fest, wie von einem Bild zum nächsten gewechselt wird. | Ein ruhiger Übergang lenkt weniger vom Inhalt ab. Prüfe ihn immer in der Vorschau. | | **Automatische Wiedergabe** | Startet den Bildwechsel ohne Klick. | Gut für einen kurzen visuellen Eindruck. Bei erklärungsbedürftigen Bildern sollten Besucher genügend Zeit zum Lesen haben. | | **Pfeile** | Blendet eine Steuerung zum Vor- und Zurückblättern ein. | Besucher können den Wechsel selbst kontrollieren. | | **Seitennavigation** | Zeigt die Position innerhalb der Bildfolge und ermöglicht das Öffnen eines bestimmten Bildes. | Hilft besonders bei mehreren Motiven, weil die Anzahl und der aktuelle Stand sichtbar werden. | | **Bild-Linkziel** | Legt fest, wohin ein Klick auf ein bestimmtes Bild führt. | Das Bild wird zu einer klaren Verknüpfung, zum Beispiel zu einer passenden Referenz- oder Detailseite. | | **Gleicher oder neuer Tab** | Bestimmt, ob das Linkziel im aktuellen oder in einem neuen Browser-Tab öffnet. | Für eine Seite innerhalb deines eigenen Ablaufs ist meist derselbe Tab verständlich. Bei einer ergänzenden externen Information kann ein neuer Tab sinnvoll sein. | | **Bildgröße** | Passt die Darstellung des Slider-Bildes an. | Prüfe nach jeder Änderung, ob wichtige Bildbereiche auf Desktop und Smartphone sichtbar bleiben. | Die Beschriftungen können sich je nach Oberfläche leicht unterscheiden. Achte deshalb auf die Wirkung der Option, nicht nur auf ihren Namen. ## Automatische Wiedergabe sinnvoll einsetzen Automatische Wiedergabe kann eine Seite lebendiger machen, ist aber nicht immer die beste Wahl. | Wenn du … | Dann ist meist sinnvoll … | | ------------------------------------------------ | --------------------------------------------------------------------------------------- | | nur einen schnellen Eindruck vermitteln möchtest | automatische Wiedergabe mit ruhigem Übergang zu testen | | Text oder Details im Bild zeigst | genügend lange Anzeigezeit und sichtbare manuelle Steuerung zu wählen | | eine feste Reihenfolge erklären musst | den automatischen Wechsel auszuschalten oder nur sehr zurückhaltend zu verwenden | | auf jedem Bild ein anderes Linkziel hinterlegst | Pfeile und Seitennavigation sichtbar zu lassen, damit Besucher bewusst auswählen können | Verlasse dich nicht darauf, dass ein Bild „von selbst“ lange genug sichtbar bleibt. Öffne die Seite selbst und prüfe die tatsächliche Wechselgeschwindigkeit. ## Bilder anklickbar machen Du kannst für ein Slider-Bild ein URL-Ziel festlegen. Ein Bild kann damit dieselbe Rolle wie ein Button übernehmen. So richtest du es sicher ein: 1. Wähle das konkrete Bild im Slider aus. 2. Hinterlege die vollständige Zieladresse. 3. Entscheide, ob das Ziel im gleichen oder in einem neuen Tab geöffnet werden soll. 4. Speichere die Seite. 5. Klicke das Bild in der veröffentlichten Ansicht an und prüfe, dass genau die beabsichtigte Seite geöffnet wird. Verlinke nicht alle Bilder automatisch auf dieselbe allgemeine Seite. Ein Bildlink wirkt am verständlichsten, wenn das Ziel den sichtbaren Inhalt direkt fortführt. ## Vollständiger Test vor der Veröffentlichung Prüfe den Slider außerhalb des Editors: 1. Öffne die Seite auf einem großen Bildschirm. 2. Kontrolliere das erste Bild, die Bildreihenfolge und den Ausschnitt jedes Motivs. 3. Warte auf den automatischen Wechsel oder löse ihn selbst aus. 4. Teste Pfeile und Seitennavigation, wenn du sie aktiviert hast. 5. Klicke jedes Bild mit Linkziel an. 6. Prüfe bei jedem Link, ob gleicher oder neuer Tab wie geplant funktioniert. 7. Öffne dieselbe Seite auf einem Smartphone. 8. Kontrolliere dort erneut Bildausschnitt, Wechsel, Steuerung und Links. Ein Slider kann technisch responsiv sein und trotzdem mobil schlecht aussehen, wenn wichtige Bildteile abgeschnitten werden. Prüfe deshalb nicht nur, ob der Slider sichtbar ist, sondern ob die Aussage jedes Bildes auf dem kleineren Bildschirm noch verständlich bleibt. ## Typische Probleme und ihre Lösung | Beobachtung | Wahrscheinliche Ursache | Nächster Schritt | | ------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Die Bilder springen beim Wechsel | Die Bilder haben unterschiedliche Seitenverhältnisse oder Größen. | Schneide die Bilder auf ein einheitliches Verhältnis zu und lade die überarbeiteten Dateien erneut hoch. | | Ein Bild ist unscharf | Die Ausgangsdatei ist zu klein oder wurde stark vergrößert. | Verwende eine ausreichend große Originaldatei und prüfe sie in der veröffentlichten Ansicht. | | Besucher bemerken weitere Bilder nicht | Pfeile und Seitennavigation sind ausgeschaltet oder der Wechsel ist zu unauffällig. | Aktiviere eine klare Steuerung oder reduziere die Zahl der Bilder. | | Besucher können den Bildtext nicht lesen | Der automatische Wechsel ist zu schnell. | Verlängere die Anzeigezeit oder schalte die automatische Wiedergabe aus. | | Ein Klick öffnet die falsche Seite | Das Linkziel gehört zu einem anderen Bild oder enthält einen Fehler. | Prüfe die Adresse für jedes Bild einzeln in der veröffentlichten Ansicht. | | Mobil ist ein wichtiges Bilddetail nicht sichtbar | Der Bildausschnitt passt nicht zum schmalen Bildschirm. | Bereite eine Version mit klarerem Motiv oder ausreichendem Rand vor und teste sie erneut. | ## Grenzen, die du kennen solltest * Du kannst mehrere Bilder verwenden; die Originalquelle nennt **drei bis fünf** als guten Ausgangspunkt. * Ein Slider ersetzt keine klare Bildauswahl. Viele Bilder werden nicht automatisch verständlicher. * Ein Bildlink macht das Bild anklickbar, ersetzt aber keinen gut sichtbaren Text oder Button, wenn die nächste Aktion besonders wichtig ist. * Bildqualität, Bildausschnitt und Wechseltempo musst du selbst in der veröffentlichten Ansicht prüfen. * Originalbilder aus der Quelle werden nicht in deine Seite übernommen. Verwende nur eigene, freigegebene Bilder aus deiner Medienbibliothek. ## Praxisbeispiel: Vier Referenzprojekte übersichtlich zeigen Ein Innenausstatter möchte auf einer Website vier abgeschlossene Projekte zeigen. 1. Das Team wählt vier Bilder im gleichen 16:9-Format aus. 2. Es fügt den Bilder-Slider in einen Referenzbereich der Seite ein. 3. Die Bilder werden so sortiert, dass das stärkste Projekt zuerst erscheint. 4. Es aktiviert Pfeile und Seitennavigation, damit Besucher bewusst durch die Projekte gehen können. 5. Jedes Bild erhält ein Linkziel zu der passenden Detailseite. 6. Die automatische Wiedergabe bleibt ausgeschaltet, weil Besucher die Fotos in Ruhe ansehen sollen. 7. Das Team testet alle Links sowie die Darstellung auf Desktop und Smartphone. Das Ergebnis: Die Seite bleibt kompakt, Besucher erkennen die Auswahl und können direkt zu dem Projekt springen, das sie interessiert. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/bilder-slider-auf-website-seiten-einsetzen.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.