> 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/medienbibliothek/bilder-in-formularen-umfragen-und-qr-codes-verwenden.md). # Bilder in Formularen, Umfragen und QR-Codes verwenden Bilder zentral organisieren, gezielt in Formularen, Umfragen, Quizzen und QR-Codes einsetzen und ihre Darstellung verständlich gestalten. ## Was du damit erreichst Du lädst ein Bild einmal in die Medienbibliothek und setzt es danach dort ein, wo es Besucherinnen und Besuchern hilft: etwa ein Logo im QR-Code, eine Hinweisgrafik in einer Umfrage oder ein Bild neben einem Formular. So bleiben wiederkehrende Bilder einheitlich und müssen nicht jedes Mal neu hochgeladen werden. Diese Anleitung bezieht sich auf Bilder, die du selbst in einem Editor auswählst. Dateien, die jemand über ein Feld **Datei hochladen** übermittelt, gehören zu dieser Person und werden getrennt behandelt. ## Vor dem Start Lege Bilder so ab, dass du sie später sofort wiederfindest – zum Beispiel in Ordnern **Logos**, **Formulare**, **Umfragen** und **QR-Codes**. Bereite außerdem eine gut lesbare Bildversion vor: ein wichtiges Motiv sollte nicht nur am äußersten Rand stehen, da sich Bildausschnitte auf kleinen Bildschirmen anders darstellen können. In der Medienauswahl kannst du: * Ordner öffnen sowie zwischen Raster- und Listenansicht wechseln; * nach Dateien suchen, die Sortierung oder verfügbare Filter verwenden; * Bilddetails wie die Abmessungen ansehen; * neue Bilder über **Hochladen** auswählen oder in den Bereich ziehen; * ein Bild vor dem Einfügen in der Vorschau prüfen; * ein Bild auswählen und mit **Einfügen** verbindlich übernehmen. Welche Dateitypen und Größen zulässig sind, hängt von der Medienbibliothek und dem jeweiligen Editor ab. ## Ein Bild aus der Medienauswahl einsetzen ### Formular, Umfrage oder Quiz 1. Öffne den gewünschten Editor. 2. Füge ein **Bild**-Element hinzu oder markiere ein vorhandenes Bild. 3. Wähle **Bild ändern**. Die Medienauswahl öffnet sich. 4. Suche das vorhandene Bild, oder wähle **Hochladen** und füge eine neue Datei hinzu. 5. Öffne bei Bedarf die Vorschau. Markiere danach das gewünschte Bild. 6. Wähle **Einfügen**. 7. Speichere und öffne eine Vorschau, bevor du den Inhalt freigibst. Das Bild liegt jetzt im gewählten Element. Du kannst dieselbe Datei später in einem weiteren Formular, Quiz oder einer Umfrage erneut auswählen. ### Bild innerhalb eines Textes In einem Textfeld mit Formatierungsleiste öffnest du über das Bildsymbol die Bildauswahl. Wenn der Dialog eine Bildadresse zulässt, ist eine gültige Adresse erforderlich; alternativ kannst du dort ein Bild hochladen. Gib für ein Bild im Text immer einen kurzen **Alternativtext** ein. Er beschreibt das Bild für Personen, die es nicht sehen können. Je nach Dialog kannst du außerdem Breite und Höhe begrenzen oder einen Link hinter das Bild legen. Lasse Maße auf automatisch, wenn du nicht genau weißt, welche feste Größe auf kleinen Bildschirmen sinnvoll ist. Prüfe anschließend die Vorschau und klicke den Bildlink einmal an. ### Bild für ein Quiz-Ergebnis Öffne im Ergebnisbereich das jeweilige Ergebnis und wähle dort das Bild aus der Medienauswahl. So kann ein passendes Bild das Ergebnis verständlicher machen, ohne dass du die Datei mehrfach speichern musst. ### Logo oder Bild in einem QR-Code Öffne die QR-Code-Einstellungen und wähle das Bild- oder Logo-Feld. Füge die Datei aus der Medienauswahl ein. Teste den fertigen QR-Code danach mit einem Smartphone: Das Bild darf den Code nicht so überdecken, dass die Kamera ihn nicht mehr erkennt. ## Bildlayout in Formularen und Umfragen Ein Bild kann neben, über oder hinter den Feldern erscheinen. Öffne im Formular **Stile und Optionen** oder in der Umfrage **Stile**. Aktiviere **Bild anzeigen**, wähle ein Bild und öffne anschließend **Layout**. Die Bezeichnungen können je nach Sprache der Oberfläche abweichen. In der aktuell geprüften Ansicht sind diese sechs Anordnungen sichtbar: | Anordnung | Wirkung in der Vorschau | Wann sie gut passt | | ---------------- | ------------------------------------------------------ | ------------------------------------------------------------- | | Oben fixiert | Das Bild steht als fester Bereich oberhalb der Felder. | Für ein Titelmotiv, das zuerst gesehen werden soll. | | Links zentriert | Das Bild steht links neben einem kompakten Formular. | Für kurze Anmeldungen oder Kontaktanfragen. | | Rechts zentriert | Das Bild steht rechts neben einem kompakten Formular. | Wenn der Text links zuerst gelesen werden soll. | | Links fixiert | Ein größeres Bild nimmt die linke Seite ein. | Für ein großes Motiv, bei dem der Bildausschnitt wichtig ist. | | Rechts fixiert | Ein größeres Bild nimmt die rechte Seite ein. | Für ein großes Motiv mit Feldern auf der Gegenseite. | | Hintergrund | Das Bild liegt hinter den Formularinhalten. | Nur bei ruhigem Motiv und eindeutig lesbaren Feldern. | Bei **links zentriert** und **rechts zentriert** kannst du den Abstand zwischen Bild und Feldern sowie den Eckenradius einstellen. Bei **links fixiert** und **rechts fixiert** steht zusätzlich der **Bildfokus** zur Verfügung. Damit wählst du den Teil des Bildes, der beim Anpassen an verschiedene Bildschirmgrößen bevorzugt sichtbar bleiben soll. So gehst du sicher vor: 1. Wähle eine Anordnung und schau dir die Vorschau an. 2. Bei einer zentrierten Anordnung erhöhe den Abstand, wenn Bild und Felder zu dicht beieinander wirken. Runde Ecken nur so stark ab, dass das Bild noch zu deinem Auftritt passt. 3. Bei einer seitlich fixierten Anordnung wähle im Bildfokus die wichtige Person, das Produkt oder den Textbereich aus. 4. Öffne die Vorschau sowohl am Desktop als auch auf einem Mobilgerät. 5. Speichere erst, wenn alle Felder, Beschriftungen und Antwortmöglichkeiten gut lesbar bleiben. Für **oben fixiert** und **Hintergrund** sind in der geprüften Ansicht keine eigenen bildbezogenen Zusatzregler belegt. Prüfe deshalb besonders sorgfältig die Vorschau. ## Unterschied zwischen Formularen und Umfragen Eine Umfrage übernimmt zunächst das globale Bild und dessen Layout. Soll nur eine bestimmte Folie anders aussehen, öffne bei dieser Folie die Bild-Einstellungen und stelle sie auf **Unabhängig**. Danach kannst du für genau diese Folie ein anderes Bild und eine andere Anordnung auswählen. Ohne diese Auswahl bleibt die Folie beim globalen Bildlayout. Bei Formularen ist kein separates Bildlayout pro Einzelschritt belegt. Wähle dort deshalb ein Layout, das für das gesamte Formular verständlich und gut lesbar ist. ## Nach Änderungen in der Medienbibliothek Wenn du ein Bild umbenennst oder in einen anderen Ordner verschiebst, wird die Änderung an seinen Verwendungsstellen übernommen. Mache deshalb nach einer größeren Aufräumaktion einen kurzen Kontrollgang durch die wichtigsten Formulare, Umfragen, Quizze und QR-Codes. Lösche eine Datei erst, wenn du sicher bist, dass sie nicht mehr benötigt wird. ## Praxisbeispiel: Anmeldeformular mit erkennbarem Motiv Ein Team möchte ein Anmeldeformular für einen Workshop freundlicher gestalten: 1. Es lädt ein passendes Foto in den Ordner **Formulare** hoch. 2. Im Formular aktiviert es **Bild anzeigen** und wählt **Links fixiert**. 3. Im Bildfokus markiert es die Person im Foto, damit sie auch auf einem schmalen Bildschirm nicht abgeschnitten wird. 4. Das Team testet die Vorschau am Computer und Smartphone, füllt das Formular selbst aus und prüft, ob alle Felder sichtbar bleiben. 5. Erst danach wird das Formular veröffentlicht. So entsteht ein einheitlicher Eindruck, ohne dass das Bild die eigentliche Aufgabe – das Ausfüllen – erschwert. ## Häufige Probleme vermeiden * **Das falsche Bild erscheint:** Öffne die Vorschau, markiere die korrekte Datei und wähle anschließend **Einfügen**. Nur das Markieren allein übernimmt die Auswahl noch nicht. * **Text oder Felder sind schwer lesbar:** Wähle ein ruhigeres Bild, wechsle von Hintergrund zu einer seitlichen Anordnung oder vergrößere bei zentrierten Layouts den Abstand. * **Das wichtige Motiv fehlt auf dem Smartphone:** Verwende links oder rechts fixiert und lege den Bildfokus auf den entscheidenden Bereich. * **Ein QR-Code lässt sich nicht scannen:** Entferne das Logo testweise oder nutze eine kleinere, kontrastreichere Variante und scanne erneut. * **Ein Bild im Text ist nicht verständlich:** Ergänze den Alternativtext und kontrolliere die Darstellung sowie einen eventuell hinterlegten Link. --- # 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/medienbibliothek/bilder-in-formularen-umfragen-und-qr-codes-verwenden.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.