> 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/vorgefertigte-elemente-auf-website-seiten-einsetzen.md). # Vorgefertigte Elemente auf Website-Seiten einsetzen Vorgefertigte Elemente sind direkt nutzbare Gestaltungselemente im Website-Editor. Sie helfen dir, eine Seite schneller aufzubauen, ohne jeden Button, jedes Bild oder jedes Symbol von Grund auf gestalten zu müssen. Zur Auswahl stehen vor allem Buttons, Bilder, Social-Media-Symbole und Fortschrittsbalken. Die Elemente lösen keine Aufgabe automatisch aus. Sie schaffen zunächst eine sichtbare Grundlage auf der Seite. Erst deine Angaben – zum Beispiel ein Ziel-Link, ein passendes Bild oder die richtige Platzierung – machen sie für Besuchende nützlich. ## Wann vorgefertigte Elemente sinnvoll sind Nutze sie, wenn du eine bestehende Seite schneller und einheitlicher gestalten möchtest. Besonders hilfreich sind sie für wiederkehrende Bausteine: | Ziel auf der Seite | Passendes Element | Was Besuchende dadurch verstehen oder tun können | | ---------------------------------- | -------------------- | ------------------------------------------------------------------------ | | Zu einer Handlung führen | Button | Sie erkennen den nächsten Schritt, etwa eine Anfrage oder Terminbuchung. | | Eine Aussage unterstützen | Bild | Sie erfassen ein Angebot, ein Ergebnis oder eine Situation schneller. | | Zu gepflegten Profilen führen | Social-Media-Symbole | Sie gelangen gezielt zu einem passenden öffentlichen Profil. | | Einen mehrstufigen Ablauf erklären | Fortschrittsbalken | Sie sehen, an welcher Stelle eines erklärten Ablaufs sie sich befinden. | Wähle immer zuerst den Zweck. Ein Element nur als Dekoration einzusetzen macht eine Seite meist unruhiger, aber nicht verständlicher. ## Was du vor dem Einfügen vorbereitest Du brauchst Zugriff auf die betreffende Website-Seite oder den betreffenden Funnel-Schritt im Editor. Kläre außerdem vorab: * Welche eine Handlung soll auf dieser Stelle der Seite möglich sein? * Wohin soll ein Button oder ein Symbol führen? Halte die genaue Zieladresse bereit. * Welches Bild passt inhaltlich zu der Aussage direkt daneben? * Ist ein Fortschrittsbalken wirklich verständlich, weil die Seite mehrere erkennbare Schritte erklärt? Wenn du Profile verlinkst, verwende nur Profile, die tatsächlich gepflegt werden. Ein Symbol ohne erreichbares oder aktuelles Ziel schwächt das Vertrauen in die Seite. ## Element in die Seite einfügen 1. Öffne die gewünschte Website-Seite oder den gewünschten Funnel-Schritt im Website-Editor. 2. Öffne in der linken Designleiste den Bereich für vorgefertigte Elemente. 3. Wähle die passende Kategorie: Button, Bild, Social-Media-Symbole oder Fortschrittsbalken. 4. Ziehe das gewünschte Element an die Stelle, an der es im Lesefluss helfen soll. 5. Passe die sichtbaren Inhalte und Einstellungen des eingefügten Elements an. 6. Prüfe die Seite zuerst in der Desktop- und danach in der Mobilansicht. 7. Speichere deine Änderung und veröffentliche die Seite erst, wenn die Kontrolle erfolgreich war. Platziere ein neues Element immer nahe bei dem Inhalt, auf den es sich bezieht. Ein Buchungsbutton gehört beispielsweise direkt zu dem Angebot oder der Erklärung, nicht ohne Zusammenhang weit unten auf der Seite. ## Buttons: einen klaren nächsten Schritt anbieten Ein vorgefertigter Button ist ein guter Ausgangspunkt für eine auffällige Handlungsaufforderung. Passe mindestens Beschriftung, Ziel und Gestaltung an dein Angebot an. Eine gute Beschriftung beschreibt die Handlung konkret. Statt „Mehr“ ist beispielsweise „Gespräch anfragen“ oder „Termin auswählen“ verständlicher. Hinterlege anschließend das richtige Ziel und teste es nach der Veröffentlichung auf einem anderen Gerät. Achte dabei auf diese Punkte: * Verwende auf einem Abschnitt möglichst einen Hauptbutton. Mehrere gleich auffällige Handlungen erschweren die Entscheidung. * Sorge für ausreichend Kontrast zwischen Button, Text und Hintergrund. * Prüfe, ob die Beschriftung auf dem Smartphone noch vollständig lesbar ist. * Wiederhole keine Aussage, die schon im Text direkt über dem Button steht, ohne einen zusätzlichen Nutzen zu nennen. Ein vorgefertigtes Aussehen spart Zeit. Es ersetzt aber nicht die Prüfung, ob Farbe, Schrift und Abstand zu deinem Auftritt passen. ## Bilder: Inhalt sichtbar machen Im Bereich für vorgefertigte Bilder kannst du ein Bild per Drag-and-drop in die Seite übernehmen. Wähle ein Motiv, das den Text daneben ergänzt. Ein Bild sollte nicht nur Fläche füllen, sondern eine Aussage erleichtern: zum Beispiel ein Ergebnis zeigen, eine Situation einordnen oder das Angebot greifbarer machen. Prüfe vor der Veröffentlichung: * Ist das wichtigste Motiv auch auf kleinen Bildschirmen noch erkennbar? * Passt das Seitenverhältnis zum vorgesehenen Bereich? * Lenkt das Bild nicht vom Hauptbutton oder der wichtigsten Aussage ab? * Darfst du das verwendete Bild für deine Seite nutzen? Ein Bild kann Text nicht automatisch ersetzen. Beschreibe das Angebot weiterhin klar im Text und nutze das Bild als Unterstützung. ## Social-Media-Symbole: nur zu relevanten Profilen verlinken Für Social-Media-Symbole stehen vorgefertigte Designs und mehrere Profilarten zur Verfügung. Nach dem Einfügen bestimmst du für jedes Symbol das passende Ziel. Entferne Symbole zu Profilen, die es nicht gibt oder die du nicht aktiv nutzt. Im Einstellungsbereich kannst du die Darstellung anpassen, zum Beispiel: * welche Profile sichtbar sind; * ob ein Symbol als Icon oder mit Text dargestellt wird; * die Ausrichtung der Symbolreihe; * Breite und Höhe der Symbole. Diese Einstellungen verändern die Darstellung auf der Seite, nicht den Inhalt deiner Profile. Teste jeden einzelnen Link nach der Veröffentlichung. Ein Profil-Symbol darf nicht auf eine allgemeine Startseite, eine nicht erreichbare Adresse oder ein fremdes Profil führen. ## Fortschrittsbalken: Orientierung statt künstlicher Dynamik Ein Fortschrittsbalken eignet sich für Seiten, die einen Ablauf in klaren Etappen erklären, etwa Anmeldung, Vorbereitung und Termin. Er kann auch bei mehrteiligen Inhalten Orientierung geben. Setze ihn nur ein, wenn die sichtbare Einteilung ehrlich und verständlich ist. Prüfe im Test, ob der Balken auf jeder betreffenden Seite den richtigen Stand zeigt. Die hier beschriebene Elementauswahl belegt keine automatische Berechnung, Datenerfassung oder Verbindung zu einem Prozess. Wenn du einen Fortschritt darstellen möchtest, der sich aus Daten ändern soll, kläre die technische Umsetzung separat. ## Einheitlich gestalten, ohne die Seite zu überladen Vorgefertigte Elemente helfen dabei, Stil wiederzuverwenden. Das funktioniert am besten, wenn du dich auf wenige Entscheidungen festlegst: * Nutze dieselbe Button-Farbe für dieselbe Art von Hauptaktion. * Verwende Social-Media-Symbole in einer zurückhaltenden Größe. * Gib Bildern und Buttons ausreichend Abstand zum umgebenden Text. * Verwende einen Fortschrittsbalken nur dort, wo er eine echte Orientierung bietet. Ändere nicht jedes Element in eine andere Farbe oder Form. Wiedererkennbare Muster helfen Besuchenden schneller als viele gleichzeitig sichtbare Effekte. ## Sicher testen, bevor du veröffentlichst Führe nach jeder Änderung diese kurze Kontrolle durch: 1. Öffne die Vorschau im Website-Editor. 2. Prüfe Desktop- und Mobilansicht getrennt. 3. Klicke jeden Button und jedes Social-Media-Symbol an. 4. Kontrolliere, ob Bilder vollständig geladen und sinnvoll zugeschnitten sind. 5. Prüfe, ob Text noch lesbar ist und sich keine Elemente überdecken. 6. Veröffentliche erst danach und wiederhole die wichtigsten Klicks auf der öffentlichen Seite. Bei einer bestehenden Seite ist ein kleiner Test besonders wichtig: Neue Abstände oder Größen können andere Bereiche verschieben, auch wenn das eingefügte Element selbst korrekt aussieht. ## Typische Fehler und ihre Lösung ### Der Button ist sichtbar, führt aber nicht weiter Prüfe die hinterlegte Zieladresse und veröffentliche die letzte Änderung erneut. Teste anschließend in einem privaten Browserfenster oder auf dem Smartphone, damit du nicht versehentlich eine alte, zwischengespeicherte Ansicht prüfst. ### Die Symbolreihe wirkt auf dem Smartphone unruhig Reduziere die Anzahl der Symbole, wähle eine kleinere Größe und prüfe die Ausrichtung in der Mobilansicht. Zeige nur Profile, die für Interessierte wirklich einen Mehrwert haben. ### Das Bild schneidet das wichtige Motiv ab Wähle ein anderes Bildformat oder passe die Platzierung an. Prüfe beide Ansichten: Ein Bild, das auf dem Desktop gut wirkt, kann auf dem Smartphone anders zugeschnitten sein. ### Der Fortschrittsbalken ist missverständlich Entferne ihn, wenn Besuchende daraus einen tatsächlichen Bearbeitungsstand ableiten würden, den die Seite nicht belegt. Er sollte nur für einen klar dargestellten, nachvollziehbaren Ablauf verwendet werden. ## Praxisbeispiel: Anmeldeseite übersichtlich ergänzen Du bereitest eine Seite für ein kostenfreies Erstgespräch vor. Im oberen Bereich erklärst du kurz, für wen das Gespräch gedacht ist. Direkt darunter ziehst du einen vorgefertigten Button in die Seite und beschriftest ihn mit „Erstgespräch anfragen“. Danach hinterlegst du die Adresse zum passenden nächsten Schritt. Weiter unten ergänzt du ein Bild, das die beschriebene Situation unterstützt. In der Fußzeile platzierst du nur die Symbole zu den zwei Profilen, die du regelmäßig pflegst. Du richtest die Symbole mittig aus, testest beide Links und kontrollierst die Darstellung auf dem Smartphone. Das Ergebnis: Besuchende erkennen das Angebot, sehen einen eindeutigen nächsten Schritt und finden nur die Informationen, die ihnen bei der Entscheidung helfen. ## Ergebnis prüfen Die Seite ist fertig, wenn jedes eingefügte Element einen klaren Zweck erfüllt, auf allen Ansichten lesbar bleibt und alle Links zum richtigen Ziel führen. Wenn ein Element diesen Test nicht besteht, entferne es lieber oder vereinfache den Abschnitt. --- # 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/vorgefertigte-elemente-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.