> 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/websites-und-funnels-im-uberblick.md). # Websites und Funnels im Überblick Mit Websites und Funnels baust du öffentliche Seiten, auf denen Interessierte Informationen lesen, ein Formular ausfüllen oder einen Termin buchen können. Diese Übersicht hilft dir, die passende Struktur zu wählen, den Editor zu verstehen und eine Seite sicher bis zur Veröffentlichung zu führen. ## Was du mit Websites und Funnels erreichst Beide Bereiche bestehen aus einzelnen Seiten, die du selbst gestalten und veröffentlichen kannst. Der Unterschied liegt vor allem im Ziel des Besuchs: | Wenn du erreichen willst … | Wähle eher … | Warum | | -------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------- | | Menschen sollen sich frei zwischen Startseite, Leistungen, Über-uns-Seite und Kontakt bewegen. | **Website** | Eine Website bündelt zusammenhängende Seiten ohne fest vorgegebenen nächsten Schritt. | | Menschen sollen einen klaren Ablauf durchlaufen, etwa von einer Angebotsseite zur Terminbuchung und anschließend zu einer Bestätigung. | **Funnel** | Ein Funnel ordnet Seiten als aufeinanderfolgende Schritte an. | | Du möchtest zwei Varianten einer Seite gegeneinander testen. | **Funnel** | Split-Tests stehen für Funnel-Schritte zur Verfügung. | | Du möchtest den Bereich **Online-Shop** verwenden. | **Website** | Diese Funktion gehört zu Websites, nicht zu Funnels. | Ein Funnel muss nicht viele Schritte haben. Für eine Termin-Anfrage reichen zum Beispiel eine Seite mit Erklärung und Formular sowie eine Bestätigungsseite. Eine Website ist sinnvoller, wenn Personen erst stöbern und sich orientieren sollen. ## Was vor dem Start bereitstehen muss Lege nicht sofort los, sondern kläre zuerst vier Punkte: 1. **Ziel:** Was soll eine Person auf der Seite tun – anfragen, einen Termin wählen, Informationen lesen oder sich registrieren? 2. **Inhalt:** Bereite Überschrift, kurze Erklärung, Bilder und eine klare Handlungsaufforderung vor. 3. **Zielseite nach der Aktion:** Entscheide vorab, was nach einer Einsendung oder einem Klick passieren soll, zum Beispiel eine Bestätigungsseite. 4. **Domain:** Für die spätere öffentliche Veröffentlichung brauchst du eine verbundene Domain oder musst sie noch verbinden. Du kannst den Entwurf aber vorher im Editor vorbereiten. So vermeidest du, dass eine Seite zwar schön aussieht, Besucher aber nicht wissen, was sie als Nächstes tun sollen. ## Eine Website aus einzelnen Seiten aufbauen Bei einer Website arbeitest du mit einer Seitenübersicht statt mit einer festen Schrittfolge. Dort siehst du alle vorhandenen Seiten, kannst sie öffnen, bearbeiten oder in der Vorschau prüfen. Lege neue Seiten gezielt für die Inhalte an, die Besucher später über die Navigation erreichen sollen – zum Beispiel Startseite, Leistungen, Über uns und Kontakt. Achte dabei auf zwei Dinge: * Eine neue Seite braucht einen eindeutigen Zweck und eine klare Überschrift. Erstelle nicht mehrere Seiten, die dieselbe Frage beantworten. * Plane die Navigation früh. Jede wichtige Seite muss von der Startseite oder einem Menü aus erreichbar sein; eine Seite ohne Link wird leicht übersehen. Die Seitenübersicht ist auch der richtige Ort, um nach dem Bearbeiten schnell zur nächsten Seite zu wechseln. Für eine einzelne Seite öffnest du dort **Bearbeiten**; die Vorschau kontrolliert den Besucherblick, ohne einen neuen Stand zu veröffentlichen. ## Einen Funnel neu anlegen Öffne **Websites** → **Funnels** und wähle **Neuer Funnel**. In der aktuellen Ansicht stehen drei Startwege zur Auswahl: | Startweg | Wann er passt | Was du danach tun musst | | ------------------------- | -------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | **Leer starten** | Du hast einen klaren eigenen Aufbau im Kopf. | Abschnitte, Inhalte und Seiten selbst anlegen. | | **Aus Vorlage** | Du möchtest mit einer vorhandenen Seitenstruktur schneller beginnen. | Jede Vorlage an deine Texte, Bilder, Links und Formulare anpassen. | | **KI-gestützt erstellen** | Du möchtest einen ersten Gestaltungsvorschlag als Ausgangspunkt. | Branche und Gestaltungswünsche angeben, Ergebnis prüfen und vollständig anpassen. | Vergib einen eindeutigen Namen. Er ist nur für dich und dein Team gedacht und hilft, ähnliche Entwürfe später auseinanderzuhalten. ### Mit einer Vorlage starten 1. Wähle **Neuer Funnel** → **Aus Vorlage** → **Weiter**. 2. Öffne die Vorlagenbibliothek. 3. Suche, filtere oder sortiere die Vorlagen nach dem geplanten Zweck. 4. Öffne die Vorschau. Prüfe dabei nicht nur das Bild, sondern auch die Anzahl der Seiten, die Reihenfolge und die vorgesehenen Handlungsaufforderungen. 5. Wähle **Weiter**, um die Vorlage in deinen Funnel zu übernehmen. 6. Öffne die betreffende Seite über **Bearbeiten**. 7. Ersetze zuerst Texte, Bilder, Buttons und Formularziele. Speichere anschließend den Entwurf. Eine Vorlage veröffentlicht nichts automatisch. Lass keine Beispieltexte, fremden Bilder, Testlinks oder nicht passende Formulare stehen. ## So ist der Editor aufgebaut Im Editor besteht jede Seite aus vier Ebenen: 1. **Abschnitt:** Ein großer Bereich der Seite, zum Beispiel der obere Einstieg oder ein Bereich mit Kundenstimmen. 2. **Zeile:** Ordnet Inhalte innerhalb eines Abschnitts nebeneinander oder untereinander an. 3. **Spalte:** Teilt eine Zeile auf, etwa in Text links und Bild rechts. 4. **Element:** Der konkrete Inhalt, zum Beispiel Überschrift, Text, Bild, Schaltfläche, Formular oder Kalender. Ein Element liegt immer in einer Spalte, die Spalte in einer Zeile und die Zeile in einem Abschnitt. Das ist wichtig, wenn du etwas verschiebst, kopierst oder wiederfinden möchtest. Klicke einen Inhalt an, bevor du etwas änderst. Der Editor zeigt dann rechts die Einstellungen für genau dieses Element. Dort findest du je nach Auswahl zum Beispiel **Allgemein**, **Stile** oder weiterführende Einstellungen. ## Inhalte einfügen, verschieben und wiederverwenden ### Neues Element einfügen Wähle oben im Editor **Element hinzufügen**. Über die Suche findest du auch dann schneller passende Bausteine, wenn du den exakten Namen nicht kennst: Suche zum Beispiel nach „Überschrift“, „Termin“ oder „Slider“. Ziehe das Element an die gewünschte Stelle und kontrolliere anschließend: * Liegt es im richtigen Abschnitt und in der richtigen Spalte? * Ist die Beschriftung verständlich? * Passt der Abstand zu den umliegenden Inhalten? * Funktioniert der Klick in der Vorschau? ### Elemente bewegen Du kannst ein Element per Ziehen an eine neue Position setzen. Wo Auf- und Abwärtspfeile erscheinen, kannst du damit die Reihenfolge relativ zu den benachbarten Elementen ändern. Spalten ordnest du innerhalb derselben Zeile neu an. Prüfe anschließend immer die Mobilansicht: Was nebeneinander steht, erscheint auf kleinen Bildschirmen oft untereinander. ### Kopieren, löschen und wiederfinden * Beim **Kopieren** wird der ausgewählte Bereich einschließlich seiner enthaltenen Inhalte und Einstellungen dupliziert. Die Kopie wird unter dem Original eingefügt. Das ist praktisch für gleich aufgebaute Bereiche. * Das **Papierkorb-Symbol** löscht den ausgewählten Bereich. Wenn der Fehler sofort auffällt, kannst du ihn über **Rückgängig** wiederherstellen. * **Rückgängig** und **Wiederholen** gelten für die aktuelle Bearbeitungssitzung. Nach dem Neuladen oder Verlassen des Editors ist dieser kurzfristige Verlauf möglicherweise nicht mehr verfügbar. Für einen älteren gespeicherten Stand verwende die Versionsfunktion. * Über **Ebenen** siehst du die gesamte Struktur der Seite. Das hilft besonders bei verschachtelten Bereichen oder bei Inhalten, die du in einer Ansicht verborgen hast. * Über die Seitenauswahl wechselst du schnell zwischen den einzelnen Seiten einer Website oder den Schritten eines Funnels. ## Abstände, Farben und Gestaltung richtig einsetzen ### Innen- und Außenabstand Die Begriffe klingen ähnlich, wirken aber an unterschiedlichen Stellen: | Einstellung | Wirkung | Beispiel | | ---------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | **Innenabstand** | Erzeugt Platz innerhalb eines Bereichs – zwischen Inhalt und dessen Rand. | Eine Überschrift soll mehr Luft zum Hintergrund ihres Abschnitts haben. | | **Außenabstand** | Erzeugt Platz zwischen zwei getrennten Bereichen. | Zwischen Formular und nächster Überschrift soll ein größerer Abstand entstehen. | Ändere nicht mehrere Abstände gleichzeitig. Passe einen Wert an, prüfe die Vorschau und kontrolliere danach auch die Mobilansicht. So erkennst du, welche Änderung das Erscheinungsbild verursacht hat. ### Seitengestaltung Im oberen Editorbereich findest du neben den Inhaltselementen auch Bereiche für die Gestaltung der gesamten Seite: * **Typografie:** Standardschrift für Überschriften und Text sowie Text- und Linkfarben. * **Hintergrund:** Hintergrundfarbe oder Hintergrundbild für die Seite. Ein Hintergrund auf einem einzelnen Abschnitt, einer Zeile, Spalte oder einem Element liegt darüber und kann den Seitenhintergrund verdecken. * **Meta-Daten:** Informationen für Suchmaschinen und Linkvorschauen. Ergänze sie erst, wenn Seitentitel, Beschreibung und Bild final sind. * **Pop-ups:** Ein Pop-up kann durch eine Schaltfläche, beim Verlassen der Seite oder nach einer Wartezeit erscheinen. Lege immer fest, welcher Auslöser sinnvoll ist, und teste ihn in der Vorschau. * **Eigener Code und Auswertungscode:** Diese Bereiche sind für fertige, überprüfte technische Vorgaben gedacht. Eigener CSS-Code verändert das Aussehen über Regeln; Fehler darin können die Seite beeinträchtigen. Nutze ihn nur, wenn der Zweck und der Code vollständig klar sind. Für Hintergrundvideos, Meta-Daten und weitere Spezialfälle findest du in der linken Navigation jeweils die passende Detailanleitung. ## Entwurf, Vorschau, Speichern und Veröffentlichung unterscheiden Oben rechts im Editor liegen vier unterschiedliche Funktionen: | Funktion | Was sie macht | Was Besucher sehen | | ------------------- | -------------------------------------------------------------------------------------- | ----------------------------------- | | **Versionen** | Öffnet ältere gespeicherte Stände, damit du sie prüfen oder wiederherstellen kannst. | Keine Änderung. | | **Vorschau** | Zeigt die Seite so, wie sie für Besucher aussehen soll. | Keine Änderung. | | **Speichern** | Sichert deinen aktuellen Entwurf. Ein späteres Speichern ersetzt diesen Entwurfsstand. | Noch keine Änderung. | | **Veröffentlichen** | Schaltet den aktuell gespeicherten Stand öffentlich. | Besucher sehen danach diesen Stand. | Der sichere Ablauf lautet immer: **ändern → speichern → Vorschau testen → veröffentlichen**. Nach dem Veröffentlichen rufst du die öffentliche URL in einem privaten Browserfenster auf. So siehst du die Seite ohne Editor und ohne eine eventuell alte Sitzung. Mehr zum Wiederherstellen und zur Veröffentlichung findest du unter [Entwürfe, Versionen und Veröffentlichung von Seiten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/entwurfe-versionen-und-veroffentlichung-von-seiten). ## Desktop und Mobilansicht getrennt prüfen Neue Inhalte sind grundsätzlich für Desktop und Mobil sichtbar. Manche Einstellungen kannst du für die beiden Ansichten jedoch getrennt anpassen – etwa Ausrichtung, Breite, Abstand oder Sichtbarkeit. Arbeite in dieser Reihenfolge: 1. Gestalte zuerst die Desktopansicht vollständig. 2. Wechsle oben in die Mobilansicht. 3. Prüfe Überschriften, Zeilenumbrüche, Bilder, Abstände und Schaltflächen. 4. Passe nur die Einstellung an, die auf dem kleinen Bildschirm verbessert werden muss. 5. Wenn ein Bereich auf Mobil völlig anders aufgebaut sein soll, kopiere ihn und steuere die Sichtbarkeit der beiden Varianten getrennt. 6. Teste anschließend Desktop und Mobil erneut, damit nicht eine Änderung die andere Ansicht verschlechtert. Die genaue Vorgehensweise steht 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). ## Formulare, Domains und Pfade vorbereiten ### Formular hinzufügen Ein Formular kann direkt über die Formularkomponente im Editor ausgewählt oder neu angelegt werden. Lege nur die Daten ab, die du wirklich brauchst, und verwende verständliche Feldbeschriftungen. Nach dem Einfügen testest du die Seite selbst: 1. Öffne die Vorschau. 2. Fülle das Formular mit einer Testangabe aus. 3. Sende es ab. 4. Prüfe, ob die Einsendung im Kontaktbereich erscheint und die vorgesehene Bestätigungsseite erreichbar ist. 5. Prüfe gegebenenfalls die gewünschte Folgeaktion. Eine vollständige Anleitung findest du unter [Kontaktformular erstellen und veröffentlichen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/kontaktformular-erstellen-und-veroffentlichen). ### Domain und Seitenpfad Ohne verbundene Domain ist eine Seite nicht unter deiner eigenen Webadresse erreichbar. Die Verbindung richtest du über **Einstellungen** → **Domains** ein und prüfst die geforderten DNS-Einträge anschließend über **Einträge prüfen**. Jede Seite hat außerdem einen **Pfad** – den Teil der Adresse nach der Domain, zum Beispiel `/kontakt`. Zwei Seiten derselben Domain können nicht denselben Pfad verwenden. Bei einer Änderung prüfst du deshalb immer, ob bestehende Links noch zum richtigen Ziel führen. Die detaillierten Schritte stehen unter [Domain mit Website oder Funnel verbinden](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/domain-mit-website-oder-funnel-verbinden). ### Weitere Seiteneinstellungen In den Einstellungen einer Website oder eines Funnels haben die folgenden Felder unterschiedliche Aufgaben: | Feld oder Einstellung | Bedeutung | Wichtige Prüfung | | --------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | **Name** | Interne Bezeichnung des Projekts. Besucher sehen sie nicht automatisch. | So benennen, dass du den Zweck später sofort erkennst. | | **Domain** | Die Webadresse, unter der Besucher die Seite aufrufen. | Domain muss verbunden und dem richtigen Projekt zugeordnet sein. | | **Pfad** | Der Teil der Adresse nach der Domain, etwa `/kontakt`. | Jeder Pfad darf auf derselben Domain nur einmal vorkommen. | | **Favicon** | Kleines Symbol im Browser-Tab. | Verwende ein passendes, freigegebenes Bild; danach die Seite in einem neuen Browserfenster prüfen. | | **Bildoptimierung** | Hilft dabei, Bilder für schnellere Ladezeiten aufzubereiten. | Aktiv lassen, sofern es keinen belegten Grund für eine Ausnahme gibt. | | **Kopf- oder Bereichscode** | Fügt fertigen technischen Code an einer festgelegten Stelle der Seite ein. | Nur geprüften Code einfügen und die öffentliche Seite danach testen. | | **Chat-Widget** | Kann auf allen Seiten einer Website erscheinen. | Prüfen, ob es wirklich auf jeder Seite sichtbar sein soll. | ## Praxisbeispiel: Eine Termin-Anfrage als kurzer Funnel Eine Beratung soll über eine klare, kurze Besucherreise angefragt werden. 1. Lege unter **Websites** → **Funnels** einen neuen Funnel aus einer passenden Vorlage an. 2. Ersetze die Einstiegsüberschrift durch das konkrete Angebot und erkläre in wenigen Sätzen, für wen es gedacht ist. 3. Platziere eine klare Schaltfläche, zum Beispiel „Termin anfragen“. 4. Ergänze das Formular mit den wirklich benötigten Angaben. 5. Lege eine zweite Seite als Bestätigung an. Sie erklärt, was nach der Anfrage passiert. 6. Speichere den Entwurf und teste die gesamte Strecke: Einstiegsseite, Schaltfläche, Formular, Bestätigung und Eintrag im Kontaktbereich. 7. Prüfe Desktop und Mobilansicht. 8. Verbinde die Domain, kontrolliere den Seitenpfad und veröffentliche erst danach. Das Ergebnis ist kein bloßes Design, sondern ein nachvollziehbarer Ablauf, den Interessierte ohne Rückfrage abschließen können. ## Häufige Fehler und schnelle Lösung | Beobachtung | Wahrscheinliche Ursache | Lösung | | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | Die Seite sieht im Editor richtig aus, öffentlich aber noch alt. | Der Entwurf wurde gespeichert, aber nicht veröffentlicht. | Vorschau prüfen und danach den gespeicherten Stand veröffentlichen. | | Ein Bereich ist im Editor verschwunden. | Er wurde verborgen oder liegt in einer verschachtelten Struktur. | Über **Ebenen** auswählen und die Sichtbarkeit für Desktop und Mobil prüfen. | | Die Mobilansicht wirkt unruhig. | Die Desktopanordnung wurde ohne Mobilprüfung übernommen. | In die Mobilansicht wechseln und Breite, Reihenfolge, Abstand und Sichtbarkeit einzeln prüfen. | | Der Funnel lädt nicht. | Domain, DNS-Einträge oder Zuordnung zum Funnel sind noch nicht korrekt. | Domainverbindung, Einträge und Zuordnung prüfen. | | Formular-Einsendungen fehlen. | Das Formular liegt nicht auf der Seite oder der Ablauf wurde nicht getestet. | Formular im Editor prüfen, eine Testeinsendung senden und das Ergebnis im Kontaktbereich kontrollieren. | | Eine kopierte Sektion ändert sich unerwartet mit. | Ein wiederverwendbarer zentraler Abschnitt wurde geändert. | Prüfe, ob es sich um einen zentral gepflegten Abschnitt handelt, bevor du ihn bearbeitest. | Für eine systematische Fehlersuche nutze [Website- und Funnel-Probleme systematisch prüfen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/website-und-funnel-probleme-systematisch-prufen). ## Wie du danach sinnvoll weiterarbeitest * [Entwürfe, Versionen und Veröffentlichung von Seiten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/entwurfe-versionen-und-veroffentlichung-von-seiten) * [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) * [Domain mit Website oder Funnel verbinden](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/domain-mit-website-oder-funnel-verbinden) * [Wiederverwendbare Seitenelemente zentral pflegen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/wiederverwendbare-seitenelemente-zentral-pflegen) --- # 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/websites-und-funnels-im-uberblick.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.