> 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/logo-leiste-auf-websites-und-funnel-seiten-einsetzen.md). # Logo-Leiste auf Websites und Funnel-Seiten einsetzen Zeige Partner-, Referenz- oder Zertifizierungslogos als ruhige Logo-Leiste und prüfe Darstellung, Bedienung und Barrierefreiheit vor der Veröffentlichung. Eine Logo-Leiste zeigt mehrere Logos auf einer Website- oder Funnel-Seite. Sie hilft dir, Zugehörigkeiten, Partnerschaften, Auszeichnungen oder verwendete Technologien übersichtlich darzustellen, ohne für jedes Logo einen eigenen Abschnitt bauen zu müssen. Du kannst die Logos entweder als fortlaufende Leiste (**Ticker**) oder als durchblätterbare Reihe (**Karussell**) anzeigen. Die Wahl beeinflusst, wie Besucherinnen und Besucher die Logos wahrnehmen und bedienen. ## Was du vor dem Einfügen brauchst Öffne eine Website- oder Funnel-Seite im aktuellen Seiteneditor mit der neuen Seitenleiste. Die Quelle bestätigt, dass die Logo-Leiste nur in dieser Editoransicht verfügbar ist. Bereite die Logos vor, bevor du das Element einfügst: * Verwende gut erkennbare Bilddateien mit ausreichend Abstand um das eigentliche Zeichen. * Verwende bei einer gemeinsamen Reihe möglichst ähnlich proportionierte Dateien, damit keine Marke optisch unangemessen groß oder klein wirkt. * Überlege, welche Aussage die Reihe macht: zum Beispiel Partner, Auszeichnungen oder verwendete Werkzeuge. * Lege für jedes Logo einen kurzen Alternativtext fest. Dieser wird von Hilfstechnologien vorgelesen und hilft Menschen, die das Bild nicht sehen können. > **Wichtig:** Für dieses Element werden die Logos direkt über die Bildauswahl hochgeladen. Externe Bildadressen können laut Quelle nicht verwendet werden. ## Logo-Leiste einfügen 1. Öffne **Websites und Leadgewinnung** und danach die gewünschte Website oder den gewünschten Funnel. 2. Öffne die passende Seite im Seiteneditor. 3. Ziehe das Element **Logo-Leiste** an die gewünschte Stelle auf der Seite. 4. Wähle in den Einstellungen den Modus **Ticker** oder **Karussell**. 5. Öffne die Bildauswahl und lade die vorbereiteten Logos hoch oder wähle vorhandene Dateien aus. 6. Ergänze bei jedem Logo einen passenden Alternativtext. 7. Ordne die Logos bei Bedarf per Drag-and-drop neu an. 8. Stelle Abstand und Bewegung ein. 9. Prüfe die Vorschau auf Desktop und Smartphone. 10. Veröffentliche erst, wenn alle Logos, Bewegungen und Bedienmöglichkeiten geprüft sind. Die Quellansichten zeigen die Logo-Leiste direkt in der Arbeitsfläche des Seiteneditors sowie ihre Einstellungen in der Seitenleiste. Nach dem Einfügen kannst du zuerst die Inhalte festlegen und dann erst die Bewegung gestalten. Das verhindert, dass ein schöner Effekt von unklaren oder falsch sortierten Logos ablenkt. ## Den passenden Modus wählen | Frage | Ticker | Karussell | | ----------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------ | | Wie werden die Logos gezeigt? | Als fortlaufend horizontal bewegte Reihe. | Als einzelne Ansichten zum Wechseln. | | Wann passt der Modus? | Wenn viele gleichwertige Logos wenig Platz benötigen. | Wenn Besucherinnen und Besucher einzelne Logos bewusster ansehen sollen. | | Wie wird bedient? | Die Reihe läuft automatisch; du kannst beim Darüberfahren pausieren. | Pfeile, Punkte und Wischgesten können die Ansicht steuern. | | Wichtige Grenze | Sehr schnelle Bewegung kann Logos schwer lesbar machen. | Pro Ansicht sind höchstens acht Logos möglich. | Du kannst später zwischen Ticker und Karussell wechseln. Laut Quelle bleiben bereits hochgeladene Logos und die vorhandenen Einstellungen dabei erhalten. Prüfe die Darstellung trotzdem erneut, denn dieselbe Anzahl Logos wirkt in beiden Modi unterschiedlich. ## Ticker: fortlaufende Logo-Reihe gestalten Der Ticker bewegt die Logos in einer endlosen horizontalen Reihe. Er ist sinnvoll, wenn die Reihe eher als ruhiger Vertrauenshinweis dienen soll und nicht jedes einzelne Logo im Mittelpunkt steht. ### Einstellungen im Ticker | Einstellung | Wirkung | Gute Ausgangsentscheidung | | -------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | | **Geschwindigkeit** | Steuert die Bewegung von 1 bis 10. | Starte langsam. Erhöhe erst, wenn jedes Logo noch gut erkennbar bleibt. | | **Gleichmäßige Bewegung** | Macht den Lauf ruhiger statt sprunghaft. | Aktiviere sie für eine unaufdringliche, kontinuierliche Reihe. | | **Beim Darüberfahren pausieren** | Hält die Bewegung an, wenn der Mauszeiger über der Leiste steht. | Aktiviere sie, wenn Logos genauer betrachtet werden sollen. | | **Abstand zwischen Logos** | Steuert den Freiraum von 0 bis 100 Pixeln. | Beginne mit mittlerem Abstand und prüfe die Mobilansicht. | ### Ticker sicher testen 1. Öffne die Vorschau auf dem Desktop. 2. Beobachte die Reihe mehrere Durchläufe lang. 3. Prüfe, ob kein Logo am Rand abgeschnitten wird. 4. Fahre mit dem Mauszeiger über die Leiste, wenn die Pause aktiviert ist. 5. Öffne die Mobilansicht und prüfe, ob die Bewegung nicht zu schnell wirkt. 6. Kontrolliere, ob bei schmalem Bildschirm die Logos noch getrennt und erkennbar bleiben. Die Quellbilder zeigen den Ticker als zusammenhängende Reihe mit mehreren Logos. Eine Bewegung soll die Reihe unterstützen, nicht zur eigentlichen Information werden. Wenn der Text der Seite schwer lesbar wird oder die Leiste zu viel Aufmerksamkeit erhält, reduziere Geschwindigkeit oder nutze ein Karussell. ## Karussell: Logos bewusst durchblättern Ein Karussell zeigt eine festgelegte Zahl von Logos je Ansicht. Es eignet sich, wenn einzelne Logos bewusster gesehen werden sollen oder wenn du Besucherinnen und Besuchern eine direkte Bedienung anbieten möchtest. ### Einstellungen im Karussell | Einstellung | Wirkung | Was du prüfen solltest | | --------------------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | | **Logos je Ansicht** | Legt fest, wie viele Logos gleichzeitig sichtbar sind. Es sind maximal acht möglich. | Auf Smartphone und Desktop kann dieselbe Anzahl unterschiedlich wirken. | | **Pfeile** | Ermöglichen das Vor- und Zurückblättern. | Pfeile müssen sichtbar, erreichbar und verständlich sein. | | **Punkte** | Zeigen mehrere Ansichten an und erlauben den Wechsel. | Prüfe, ob sie bei vielen Ansichten nicht zu klein werden. | | **Wischgesten** | Ermöglichen das Wechseln auf berührbaren Geräten. | Öffne die Seite auf einem Smartphone und wische selbst. | | **Automatische Bewegung und Intervall** | Wechselt Ansichten selbstständig nach einer festgelegten Zeit. | Wähle genug Zeit, damit Logos wahrgenommen werden können. | | **Endlosschleife** | Beginnt nach der letzten Ansicht wieder von vorn. | Prüfe, ob der Ablauf erwartbar wirkt. | | **Beim Darüberfahren pausieren** | Hält die automatische Bewegung auf dem Desktop an. | Prüfe die Pause in der Vorschau. | | **Übergang** | Wechselt mit Gleiten oder Überblenden. | Wähle einen ruhigen Übergang, der den Inhalt nicht überdeckt. | Die Quellbilder zeigen sichtbare Pfeile am Rand der Logo-Reihe. Wenn du Pfeile oder Punkte aktivierst, teste sie nach der Veröffentlichung an der öffentlichen Adresse — nicht nur im Editor. ## Reihenfolge, Abstand und Alternativtexte Ordne die Logos per Drag-and-drop so, wie Besucherinnen und Besucher sie sehen sollen. Prüfe die Reihenfolge nach jedem Verschieben erneut in der Vorschau. Der Abstand zwischen den Logos lässt sich von 0 bis 100 Pixeln einstellen. Ein kleiner Abstand zeigt mehr Logos, kann aber die einzelnen Zeichen unruhig wirken lassen. Ein größerer Abstand verbessert die Trennung, benötigt jedoch mehr Platz. Prüfe deshalb immer beide Ansichten: * **Desktop:** Wirkt die Leiste ausgewogen und sind die Logos ähnlich präsent? * **Smartphone:** Sind Logos, Pfeile und Punkte noch erreichbar, ohne dass sich die Reihe gedrängt anfühlt? * **Seiteninhalt:** Passt die Leiste in die Hierarchie der Seite oder lenkt sie vom nächsten sinnvollen Schritt ab? Ein Alternativtext beschreibt das jeweilige Logo kurz und eindeutig. Ein guter Alternativtext benennt zum Beispiel die Organisation oder die Bedeutung des Zeichens. Formulierungen wie „Bild“ oder „Logo“ allein helfen dagegen nicht weiter. ## Auswirkungen vor der Veröffentlichung prüfen Ein sehr hoher Umfang an Logos hat laut Quelle keine feste technische Höchstgrenze, kann aber die Leistung der Seite beeinträchtigen. Verwende daher nur Logos, die zur Aussage der Seite beitragen. Prüfe vor dem Veröffentlichen diese Punkte: 1. Sind alle Dateien richtig zugeordnet und sichtbar? 2. Enthält jedes Logo einen treffenden Alternativtext? 3. Sind Größe und Abstand für Desktop und Smartphone passend? 4. Läuft der Ticker in einer gut lesbaren Geschwindigkeit? 5. Lassen sich im Karussell Pfeile, Punkte und Wischgesten bedienen? 6. Funktioniert eine eventuell aktivierte Pause beim Darüberfahren? 7. Werden keine Logos abgeschnitten oder unerwartet umbrochen? 8. Ist die Seite nach der Veröffentlichung über ihre öffentliche Adresse korrekt erreichbar? Eine Anleitung für die mobile Prüfung findest du unter [Mobile Darstellung von Webseiten und Funnels prüfen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/mobile-darstellung-von-webseiten-und-funnels-prufen). ## Praxisbeispiel: ruhige Partner-Leiste auf einer Startseite Eine Beratung möchte auf der Startseite mehrere Partner zeigen. Das Team fügt eine Logo-Leiste unter dem Leistungsüberblick ein und wählt zunächst den Ticker. Es lädt sechs gleichwertige Logos hoch, ergänzt pro Logo einen klaren Alternativtext und ordnet sie nach der gewünschten Reihenfolge. Danach stellt es eine langsame Geschwindigkeit, gleichmäßige Bewegung und Pause beim Darüberfahren ein. In der Mobilvorschau merkt das Team, dass die Leiste zu schnell wirkt. Es reduziert die Geschwindigkeit und vergrößert den Abstand etwas. Nach dem Veröffentlichen öffnet es die Startseite auf Smartphone und Desktop und prüft, dass kein Logo abgeschnitten wird. Für eine Unterseite, auf der einzelne Partner stärker hervorgehoben werden sollen, verwendet das Team später ein Karussell mit drei Logos je Ansicht, sichtbaren Pfeilen und Wischgesten. Die bereits hochgeladenen Logos bleiben beim Wechsel des Modus erhalten. ## Häufige Fehler und ihre Lösung | Beobachtung | Wahrscheinliche Ursache | So löst du es | | ------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | | Die Logo-Leiste fehlt in der Elementauswahl. | Die Seite ist nicht im aktuellen Editor mit neuer Seitenleiste geöffnet. | Öffne die Seite im aktuellen Seiteneditor und prüfe die Elementauswahl erneut. | | Ein Logo lässt sich nicht über eine Adresse einbinden. | Externe Bildadressen werden für dieses Element nicht unterstützt. | Lade die Bilddatei über die Bildauswahl hoch. | | Die Reihe wirkt hektisch. | Geschwindigkeit oder automatische Bewegung ist zu hoch. | Reduziere Geschwindigkeit oder Intervall; teste anschließend auf Smartphone und Desktop. | | Ein Karussell zeigt zu viele Logos zugleich. | Die Anzahl je Ansicht überschreitet die Grenze von acht. | Reduziere die sichtbare Anzahl und prüfe die nächsten Ansichten. | | Logos sind auf dem Smartphone zu klein oder gedrängt. | Abstand und Anzahl wurden nur auf dem Desktop gewählt. | Passe Abstand und Logos je Ansicht an und prüfe die Mobilansicht erneut. | | Beim Wechsel des Modus fehlen Logos. | Die Einstellung wurde nicht erneut geprüft. | Prüfe die Bildliste nach dem Wechsel; laut Quelle bleiben Logos und Einstellungen erhalten. | | Die Seite lädt nach vielen Logos spürbar langsamer. | Sehr viele Dateien können die Leistung beeinflussen. | Entferne nicht notwendige Logos und prüfe die öffentliche Seite erneut. | ## Abschlusscheck * [ ] Die Seite wurde im aktuellen Seiteneditor bearbeitet. * [ ] Alle Logos wurden über die Bildauswahl eingefügt. * [ ] Jeder Alternativtext beschreibt das zugehörige Logo eindeutig. * [ ] Ticker oder Karussell passt zum Ziel der Seite. * [ ] Die Bewegung ist langsam genug, um Logos sicher zu erkennen. * [ ] Im Karussell sind höchstens acht Logos je Ansicht eingestellt. * [ ] Pfeile, Punkte, Wischgesten und Pausenfunktion wurden getestet, wenn sie aktiviert sind. * [ ] Reihenfolge und Abstand wirken auf Desktop und Smartphone ausgewogen. * [ ] Die veröffentlichte Seite wurde über die öffentliche Adresse geprüft. Für weitere wiederkehrende Seitenelemente lies auch [Gespeicherte Abschnitte auf Websites und in Funnels wiederverwenden](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/gespeicherte-abschnitte-auf-websites-und-in-funnels-wiederverwenden). --- # 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/logo-leiste-auf-websites-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.