> 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/bildergalerie-auf-website-und-funnel-seiten-einsetzen.md). # Bildergalerie auf Website- und Funnel-Seiten einsetzen ## Was die Bildergalerie leistet Mit der Bildergalerie zeigst du mehrere Bilder geordnet auf einer Website- oder Funnel-Seite. Sie eignet sich zum Beispiel für Referenzen, Veranstaltungsbilder, Arbeitsproben oder eine visuelle Einführung in ein Angebot. Du bestimmst nicht nur die Anordnung, sondern auch, was beim Anklicken eines Bilds passiert: Es kann groß in einer Bildansicht geöffnet werden oder zu einer hinterlegten Adresse führen. Beschriftungen, Beschreibungen und ein optionales Wasserzeichen ergänzen die Bilder dort, wo sie für Besucher hilfreich sind. Die Galerie unterstützt außerdem ein bedarfsorientiertes Nachladen der Bilder. Das hilft, umfangreichere Bildsammlungen auf der Seite sinnvoll darzustellen. Prüfe die veröffentlichte Seite trotzdem immer mit einer realistischen Internetverbindung. ## Wann die Galerie sinnvoll ist Nutze die Galerie, wenn mehrere Bilder gemeinsam eine Geschichte erzählen oder eine Auswahl sichtbar machen sollen. Für ein einzelnes wichtiges Bild ist ein normales Bildelement meist klarer. Für viele Bilder ohne erkennbaren Zusammenhang solltest du zuerst überlegen, welche Auswahl Besucher wirklich benötigen. Lege vor dem Aufbau fest, ob die Bilder nur betrachtet werden sollen oder ob einzelne Bilder zu weiterführenden Informationen führen. Diese Entscheidung bestimmt die Klickaktion. ## Voraussetzungen * Du kannst die betreffende Website- oder Funnel-Seite im Editor öffnen. * Die Bilder liegen in ausreichender Qualität vor und dürfen auf der Seite verwendet werden. * Für verlinkte Bilder stehen die korrekten Zieladressen bereit. * Du kannst die Desktop- und Mobilansicht prüfen. * Bei einem Wasserzeichen ist entschieden, wie es platziert wird, ohne wichtige Bildinhalte zu verdecken. ## Galerie auf einer Seite einfügen 1. Öffne die gewünschte Website- oder Funnel-Seite im Bearbeitungsmodus. 2. Suche in der linken Elementleiste das Element **Bildergalerie**. 3. Ziehe es in den gewünschten Seitenabschnitt. 4. Wähle Bilder aus der Mediathek aus. 5. Fehlen Bilder noch in der Mediathek, kannst du sie im Auswahlfenster vorher dorthin ziehen und hochladen. 6. Gib bei Bedarf eine Überschrift für die Galerie ein. 7. Lege Layout, Spaltenzahl, Abstand und Mobilverhalten fest. 8. Ergänze je Bild Informationen und die gewünschte Klickaktion. 9. Speichere, prüfe die Vorschau und veröffentliche erst danach. Platziere die Galerie erst dann auf der Seite, wenn ihre Bilder in einer sinnvollen Reihenfolge stehen. Die Reihenfolge ist ein Teil der Aussage: Ein Überblicksbild eignet sich meist besser für den Anfang als ein Detailbild. ## Alle sichtbaren Einstellungen verständlich erklärt | Einstellung | Bedeutung | Praktische Entscheidung | | --------------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------- | | **Überschrift** | Gibt der Galerie einen Kontext. | Nutze sie, wenn Besucher ohne Erklärung nicht wissen, was die Bilder zeigen. | | **Bilder aus der Mediathek** | Bildauswahl für die Galerie. | Wähle nur Bilder, die in Format, Qualität und Inhalt zusammenpassen. | | **Raster** | Ordnet Bilder gleichmäßig in Zeilen und Spalten an. | Gut für eine ruhige, vergleichbare Darstellung. | | **Vertikales Mauerwerk** | Ordnet unterschiedlich hohe Bilder vertikal versetzt an. | Eignet sich für Hoch- und Querformate mit unterschiedlicher Höhe. | | **Horizontales Mauerwerk** | Ordnet unterschiedlich breite Bilder horizontal versetzt an. | Prüfe sorgfältig, ob wichtige Bildteile noch gut wirken. | | **Spaltenzahl** | Bestimmt, wie viele Bilder nebeneinander stehen. | Weniger Spalten machen einzelne Bilder größer und besser erkennbar. | | **Abstand** | Leerraum zwischen den Bildern. | Mehr Abstand trennt Bilder stärker; weniger Abstand wirkt kompakter. | | **Mobilverhalten** | Passt die Galerie an kleine Bildschirme an. | Prüfe die Auswahl direkt auf einem Telefon. | | **Beschriftung und Beschreibung** | Ergänzende Informationen am jeweiligen Bild. | Nutze sie bei Bildern, deren Bedeutung nicht sofort klar ist. | | **Klickaktion** | Öffnet Bildansicht oder führt zu einer Adresse. | Wähle pro Bild bewusst: ansehen oder weiterleiten. | | **Link in neuem Tab** | Öffnet ein hinterlegtes Ziel in einem zusätzlichen Tab. | Nutze es nur, wenn Besucher die Galerie-Seite behalten sollen. | | **Wasserzeichen** | Sichtbare Kennzeichnung auf Bildern. | Prüfe Kontrast, Position und Lesbarkeit vor der Veröffentlichung. | ## Jedes Bild vollständig einrichten Öffne bei einem Bild das Menü mit den drei Punkten. Dort kannst du ein Bild bearbeiten oder entfernen. Entferne es nur, wenn es wirklich nicht mehr zur Galerie gehört: Nach dem Speichern fehlt es auch in der veröffentlichten Galerie. Beim Bearbeiten gehören diese Angaben zusammen: | Angabe | Wofür sie da ist | Gute Entscheidung | | ------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | **Titel** | Kurze Bezeichnung des einzelnen Bilds. | Benenne das Motiv verständlich, zum Beispiel „Eingangsbereich im Frühjahr“. | | **Beschreibung** | Ergänzt Informationen, die auf dem Bild nicht sofort erkennbar sind. | Erkläre nur den Mehrwert, nicht jedes sichtbare Detail. | | **Link** | Ziel, das beim Weiterleiten nach einem Klick geöffnet wird. | Hinterlege ihn nur, wenn das Bild tatsächlich zu einer passenden weiteren Information führen soll. | | **Alternativtext** | Textliche Beschreibung des Bildinhalts. | Beschreibe das Motiv kurz und konkret. So bleibt die Information auch ohne sichtbares Bild verständlich. | | **Bild optimieren** | Bereitet ein Bild für eine schnellere Darstellung vor. | Nutze die Option besonders bei großen Dateien und prüfe anschließend Schärfe sowie Ladeverhalten in der Vorschau. | Für die vergrößerte Bildansicht kannst du festlegen, ob Titel und Beschreibung dort angezeigt werden. Aktiviere nur Angaben, die Besucher beim genaueren Betrachten wirklich brauchen. ## Überschrift, Hintergrund und weitere Gestaltung Die Galerie lässt sich über die Bilder hinaus als ein zusammenhängendes Element gestalten. Beginne mit der Bildauswahl und dem Layout; diese zusätzlichen Einstellungen setzt du erst danach ein. | Einstellung | Wirkung | Prüfung vor der Veröffentlichung | | ------------------------------------ | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Überschriftsfarbe und -größe** | Gestaltet die Überschrift der Galerie. | Achte auf genügend Kontrast zum Hintergrund und darauf, dass die Überschrift auf dem Telefon nicht zu groß wird. | | **Hintergrundfarbe** | Färbt den Bereich hinter der Galerie. | Prüfe, ob sich Bilder, Beschriftungen und Wasserzeichen klar davon abheben. | | **Überlagerungsfarbe und Textfarbe** | Gestaltet die Fläche und Texte, die über einem Bild eingeblendet werden. | Wähle eine zurückhaltende Überlagerung; Bildmotiv und Text müssen gleichzeitig erkennbar bleiben. | | **Höhe und Breite** | Verändert die Größe des gesamten Galerieelements. | Lasse die automatische Größe bestehen, wenn es keinen klaren Gestaltungsgrund gibt. Starre Werte können auf kleinen Bildschirmen unpassend wirken. | | **Außen- und Innenabstand** | Schafft Abstand zur Umgebung oder innerhalb des Elements. | Ändere nur einen Wert nach dem anderen und prüfe danach Desktop und Mobilansicht. | | **Schatten** | Hebt den Galeriebereich optisch vom Hintergrund ab. | Ein dezenter äußerer oder innerer Schatten kann helfen. Ein starker Schatten lenkt meist vom Bildinhalt ab. | | **Sichtbarkeit je Gerät** | Legt fest, ob das Element auf Desktop, Mobilgerät oder beiden angezeigt wird. | Blende eine Galerie nur aus, wenn sie auf dem betreffenden Gerät keinen sinnvollen Nutzen hat. Prüfe beide Ansichten getrennt. | | **Abschnittskennung** | Kennzeichnet diesen Galeriebereich für einen direkten Sprung innerhalb derselben Seite. | Lass das technische Feld leer, wenn kein direkter Sprung zu genau dieser Galerie geplant ist. Bei einer Kennung prüfst du den Ziel-Link in der Vorschau. | ## Klickaktion je Bild festlegen Öffne die Einstellungen eines einzelnen Bilds und wähle die passende Aktion: * **In Bildansicht öffnen:** Das Bild wird vergrößert angezeigt. Das passt zu Bildern, die Besucher genauer betrachten sollen. * **Zu einer Adresse weiterleiten:** Das Bild führt zu einer weiteren Seite. Hinterlege dafür die konkrete Zieladresse und öffne sie vor dem Veröffentlichen. * **Keine Aktion:** Ein Klick verändert nichts. Das passt, wenn Bilder nur zur visuellen Orientierung dienen und weder vergrößert noch verlinkt werden sollen. * **In neuem Tab öffnen:** Diese Option ergänzt eine hinterlegte Adresse. Verwende sie gezielt, wenn die Galerie-Seite beim Öffnen des Ziels erhalten bleiben soll. Wähle nicht für alle Bilder automatisch dieselbe Aktion. Eine Projektgalerie kann beispielsweise überwiegend eine vergrößerte Ansicht nutzen, während einzelne Bilder zu ausführlichen Fallbeispielen führen. ## Mobile Darstellung und Veröffentlichung prüfen Prüfe vor dem Veröffentlichen in dieser Reihenfolge: 1. Kontrolliere Reihenfolge, Zuschnitt und Beschriftung aller Bilder. 2. Öffne jedes verlinkte Bild und prüfe die Zieladresse. 3. Kontrolliere, ob sich die Bildansicht bei entsprechend gewählter Aktion öffnet. 4. Wechsle in die Mobilansicht und prüfe Spaltenzahl, Abstände und Bedienbarkeit. 5. Öffne die veröffentlichte Seite auf einem Telefon und scrolle durch die Galerie. 6. Prüfe bei Wasserzeichen, ob der Inhalt des Bilds und die Kennzeichnung weiterhin verständlich bleiben. Eine gelungene Desktop-Ansicht garantiert keine gute Mobilansicht. Reduziere bei Bedarf die Zahl der Spalten oder passe die Abstände an, statt Bilder zu klein werden zu lassen. ## Grenzen und typische Fehler ### Die Galerie wirkt unruhig Vereinheitliche zunächst Bildauswahl und Reihenfolge. Wähle danach ein ruhigeres Raster oder mehr Abstand. Unterschiedliche Formate können im Mauerwerk sinnvoll sein, brauchen aber eine besonders sorgfältige Vorschau. ### Ein Bild sollte vergrößert werden, leitet aber weiter Prüfe die Klickaktion dieses einzelnen Bilds. Öffnen in der Bildansicht und Weiterleitung sind unterschiedliche Einstellungen. ### Ein Link öffnet im falschen Tab Kontrolliere, ob für das Bild eine Adresse hinterlegt ist und ob die Option für einen neuen Tab aktiv sein soll. Teste die veröffentlichte Seite, nicht nur die Editoransicht. ### Die Galerie ist auf dem Telefon schwer zu bedienen Überprüfe Mobilverhalten, Spaltenzahl und Abstand. Verringere die Verdichtung, bis Bilder und Klickflächen klar erkennbar sind. ### Das Wasserzeichen verdeckt wichtige Inhalte Ändere die Position oder verzichte auf das Wasserzeichen bei diesem Bild. Eine Kennzeichnung darf den eigentlichen Bildinhalt nicht unverständlich machen. ## Praxisbeispiel: Referenzprojekte zeigen Ein Unternehmen möchte sechs abgeschlossene Projekte auf einer Referenzseite zeigen. 1. Es wählt ein Raster mit zwei Spalten und beginnt mit dem stärksten Überblicksbild. 2. Jedes Bild erhält eine kurze Beschriftung mit dem Projekttyp. 3. Vier Bilder öffnen sich beim Anklicken groß, damit Details sichtbar werden. 4. Zwei Bilder führen zu weiterführenden Projektseiten; diese Ziele werden in einem neuen Tab geöffnet. 5. Das Team prüft alle Aktionen auf Desktop und Mobilgerät und reduziert die Spaltenzahl für die Mobilansicht. 6. Erst nach dem Test wird die Seite veröffentlicht. So bleibt die Galerie übersichtlich und jedes Bild hat eine klare Aufgabe für Besucher. --- # 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/bildergalerie-auf-website-und-funnel-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.