> 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/website-ohne-vorlage-erstellen-und-veroffentlichen.md).

# Website ohne Vorlage erstellen und veröffentlichen

Erstelle eine Website ohne Vorlage Schritt für Schritt: von der Planung über Seiten, Navigation und Mobilansicht bis zum sicheren öffentlichen Test.

Eine Website ohne Vorlage ist der richtige Start, wenn Aufbau, Inhalte und Gestaltung genau zu deinem Angebot passen sollen. Du beginnst mit einer leeren Seite und baust sie aus Abschnitten, Zeilen und einzelnen Inhalten auf. Das braucht etwas mehr Vorbereitung als eine Vorlage, verhindert aber, dass du später einen unpassenden Aufbau umbauen musst.

## Bevor du den Builder öffnest

Lege zuerst fest, was Besucherinnen und Besucher auf der Website tun sollen. Eine gute erste Website muss nicht groß sein. Wichtig ist, dass jede Seite eine klare Aufgabe erfüllt und der nächste Schritt verständlich ist.

| Vorbereitung       | Warum sie wichtig ist                                                     | Beispiel                                           |
| ------------------ | ------------------------------------------------------------------------- | -------------------------------------------------- |
| Ziel der Website   | Sie entscheidet, welche Inhalte und Schaltflächen nötig sind.             | Eine Beratung soll Anfragen erhalten.              |
| Zielgruppe         | Sprache, Beispiele und Bildauswahl werden dadurch passender.              | Menschen, die zum ersten Mal Unterstützung suchen. |
| Seitenplan         | Du vermeidest leere oder doppelte Seiten.                                 | Startseite, Angebot, Über uns, Kontakt.            |
| Handlung pro Seite | Besucherinnen und Besucher wissen, was sie als Nächstes tun können.       | Auf der Kontaktseite: Termin anfragen.             |
| Material           | Logo, Bilder, Texte und notwendige Hinweise sind beim Aufbau griffbereit. | Logo, Teamfoto, Kurztexte und Kontaktangaben.      |

Eine sinnvolle Startseite beantwortet in dieser Reihenfolge: Wer hilft hier? Wobei wird geholfen? Warum ist das Angebot passend? Was soll ich jetzt tun? Für die erste Fassung reichen eine klare Überschrift, ein kurzer erklärender Text und eine deutlich beschriftete Schaltfläche.

## Leere Website und erste Seite anlegen

1. Öffne in der Plattform den Bereich **Websites**.
2. Wähle **Neue Website** und danach **Ohne Vorlage**.
3. Erstelle die erste Seite. Gib ihr einen eindeutigen Namen, zum Beispiel **Startseite**.
4. Wähle **Ohne Vorlage erstellen**, um den Website Builder zu öffnen.
5. Speichere nach einem fertigen Arbeitsschritt, etwa nach der ersten Kopfzeile oder einem abgeschlossenen Bereich.

Der Name ist zunächst vor allem deine Arbeitsbezeichnung. Wähle ihn so, dass du ihn später in der Seitenliste sofort wiederfindest. Der öffentliche Pfad wird beim Anlegen einer Seite separat festgelegt.

## Im Website Builder zurechtfinden

Die Quellansichten zeigen sechs Bereiche, die beim ersten Einstieg leicht verwechselt werden. Wenn du ihren Zweck kennst, arbeitest du sicherer.

| Bereich             | Wofür du ihn verwendest                                                       | Woran du ihn erkennst                         |
| ------------------- | ----------------------------------------------------------------------------- | --------------------------------------------- |
| Steuerleiste        | Öffnet Ansichten wie Elemente, Seiten und Metadaten.                          | Leiste am Rand des Builders.                  |
| Geräteauswahl       | Wechselt zwischen Desktop- und Mobilansicht.                                  | Symbol für Bildschirm oder Smartphone.        |
| obere Aktionsleiste | Macht Änderungen rückgängig, öffnet Vorschau, Speichern und Veröffentlichung. | Symbole und Aktionen am oberen Rand.          |
| linkes Panel        | Zeigt je nach Auswahl Elemente, Seiten oder Einstellungen der Seite.          | Arbeitsbereich links neben der Fläche.        |
| Arbeitsfläche       | Hier siehst und bearbeitest du die Seite direkt.                              | Große Vorschau in der Mitte.                  |
| rechtes Panel       | Ändert Inhalt, Darstellung und Einstellungen des gerade markierten Bereichs.  | Einstellungen rechts neben der Arbeitsfläche. |

Klicke immer zuerst den Bereich an, den du ändern möchtest. Dann zeigt das rechte Panel genau die Einstellungen für diesen Abschnitt, diese Zeile oder dieses Element. Ändere nicht mehrere Bereiche gleichzeitig: Das macht spätere Korrekturen unnötig schwer nachvollziehbar.

## Die Grundstruktur einer Seite: Abschnitt, Zeile, Element

Jede Seite besteht aus drei Ebenen:

1. **Abschnitt:** Ein großer Bereich über die volle oder gewählte Breite der Seite, etwa der sichtbare Einstieg ganz oben.
2. **Zeile:** Die Aufteilung innerhalb eines Abschnitts, zum Beispiel eine Spalte für Text oder zwei Spalten für Text und Bild.
3. **Element:** Der konkrete Inhalt in einer Zeile, etwa Überschrift, Text, Bild, Formular oder Schaltfläche.

Erstelle für die erste Startseite einen einfachen Einstieg:

1. Wähle auf der leeren Arbeitsfläche oder über das Plus-Symbol **Abschnitt hinzufügen**.
2. Öffne **Abschnitte** und wähle für einen einfachen Einstieg **volle Breite**.
3. Füge innerhalb des neu entstandenen Abschnitts eine **Zeile** mit **einer Spalte** ein.
4. Wähle **Element hinzufügen** und ziehe eine **Überschrift** in die Zeile.
5. Klicke den Text auf der Arbeitsfläche an und formuliere eine klare Hauptaussage.
6. Füge darunter einen kurzen Erklärungstext oder eine Unterüberschrift ein.
7. Markiere jedes Element einzeln, um im rechten Panel Schriftgröße, Farbe, Abstand und weitere Darstellungswerte anzupassen.

Eine Überschrift ist kein Platzhalter. Sie sollte das Ergebnis für die Zielgruppe beschreiben. Statt „Willkommen“ ist zum Beispiel „Schnell zu einer passenden Beratung“ verständlicher.

### Eine Schaltfläche mit sinnvoller Aktion einrichten

Eine Schaltfläche leitet Besucherinnen und Besucher zu einer Handlung weiter. Lege erst fest, wohin sie führen soll, und beschrifte sie danach entsprechend.

1. Füge unter deinem Erklärungstext ein **Schaltfläche**-Element ein.
2. Schreibe auf die Schaltfläche, was nach dem Klick passiert, zum Beispiel **Kontakt aufnehmen**.
3. Markiere die Schaltfläche und öffne im rechten Panel den Bereich **Schaltflächenaktionen**.
4. Wähle die passende Aktion, etwa eine Seite, eine Internetadresse oder – wenn du Anrufe anbieten möchtest – **Anrufen**.
5. Bei **Anrufen** trägst du die gewünschte Telefonnummer ein.
6. Speichere und prüfe die Schaltfläche anschließend in der Vorschau selbst.

Eine Beschriftung wie „Hier klicken“ sagt nicht, was passiert. Eine konkrete Beschriftung verringert Fehlklicks und erleichtert den späteren Test.

## Weitere Seiten im Builder anlegen

Du kannst Seiten direkt im Builder verwalten; du musst dafür nicht jedes Mal zur Übersichtsseite zurückkehren. Öffne dazu die Schublade **Seiten**. Dort siehst du alle Seiten der aktuellen Website.

1. Öffne die Schublade **Seiten**.
2. Wähle **Neue Seite hinzufügen**.
3. Trage bei **Seitenname** einen klaren Arbeitsnamen ein, etwa **Kontakt**.
4. Lege bei **URL-Pfad** den öffentlichen Teil der Adresse fest, etwa **/kontakt**.
5. Prüfe, ob der Pfad innerhalb dieser Website noch nicht verwendet wird.
6. Erstelle die Seite. Sie erscheint sofort in der Seitenliste.
7. Wähle sie aus und gestalte sie wie die erste Seite.

Der **Seitenname** hilft dir bei der Arbeit im Builder. Der **URL-Pfad** ist die Adresse, die Besucherinnen und Besucher aufrufen. Der Pfad sollte kurz, lesbar und eindeutig sein. Wenn derselbe Pfad bereits besteht, musst du ihn ändern; sonst kann keine eindeutige Seite erreicht werden.

Du kannst eine Seite auch über den Seitenauswähler in der oberen Aktionsleiste öffnen. Dieser zeigt den Namen der aktuell bearbeiteten Seite oder ein Auswahlsymbol. Er eignet sich besonders, wenn du schnell zwischen Startseite, Navigation und Kontaktseite wechselst.

## Seiten sortieren, finden und sicher verknüpfen

Ziehe einen Seiteneintrag in der Seitenschublade am sichtbaren Griff nach oben oder unten, um die Reihenfolge zu ändern. Die Sortierung ändert **nicht** den festgelegten URL-Pfad. Bereits verwendete Links bleiben dadurch normalerweise unter derselben Adresse erreichbar.

Nach einer Sortierung prüfst du trotzdem drei Dinge:

* Die Menüeinträge stehen in der gewünschten Reihenfolge.
* Jede Schaltfläche führt noch zur passenden Seite.
* Der Ablauf für Besucherinnen und Besucher ist logisch, zum Beispiel von Information zu Kontakt.

Bei vielen Seiten hilft das Feld **Suche** in der Seitenschublade. Gib einen Teil des Seitennamens oder des URL-Pfads ein. Die Liste wird während der Eingabe gefiltert. Lösche die Suche, um wieder alle Seiten zu sehen.

## Navigation und Fußzeile bauen

Eine mehrseitige Website braucht oben eine Navigation. Lege sie erst an, wenn die verlinkten Seiten existieren. Sonst entstehen leicht falsche oder leere Verknüpfungen.

1. Öffne die Startseite im Builder.
2. Füge ganz oben einen neuen Abschnitt über die volle Breite ein.
3. Lege darin eine Zeile mit einer Spalte an.
4. Füge das Element **Navigationsmenü** ein.
5. Markiere das Menü und prüfe im rechten Panel jeden Menüpunkt: Text, Zielseite und Reihenfolge.
6. Ergänze ein Logo, wenn es zur Website gehört.
7. Speichere und teste jeden Menüpunkt in der Vorschau.

Für den unteren Seitenbereich kannst du einen Abschnitt über die volle Breite anlegen. Öffne dann **Elemente** > **Vorgefertigte Elemente** > **Fußzeile** und ziehe eine Fußzeile in diesen Abschnitt. Markiere einzelne Bestandteile der Fußzeile, um sie zu ändern oder nicht benötigte Teile zu entfernen. Pflege dort nur Angaben, die auf jeder Seite sichtbar sein sollen, etwa Kontaktmöglichkeiten oder wichtige Hinweise.

Wenn Kopf- oder Fußbereich auf mehreren Seiten verwendet wird, prüfe nach einer Änderung alle betroffenen Seiten. So erkennst du früh, ob sich ein Link oder ein Text an mehreren Stellen verändert hat.

## Mobilansicht bewusst prüfen

Wechsle mit dem Smartphone-Symbol in die Mobilansicht. Die Quellbilder zeigen, dass dieselbe Seite je nach Geräteansicht anders angepasst werden kann. Prüfe deshalb nicht nur, ob die Seite „irgendwie“ sichtbar ist, sondern kontrolliere diese Punkte:

* Überschriften sind gut lesbar und brechen nicht ungünstig um.
* Bilder, Abstände und Zeilenbreiten passen auf den schmalen Bildschirm.
* Schaltflächen sind groß genug und liegen nicht zu dicht beieinander.
* Inhalte stehen in der gewünschten Reihenfolge.
* Es ist kein Element versehentlich nur für Desktop oder nur für Mobilgeräte sichtbar.

Passe ein Element bei Bedarf in der Mobilansicht an und kontrolliere danach wieder die Desktopansicht. Nur wenn ein Inhalt auf beiden Geräten wirklich unterschiedlich aufgebaut sein muss, kannst du ein Element duplizieren und über die erweiterten Einstellungen jeweils nur für Desktop oder Mobilgeräte sichtbar machen. Das ist hilfreich, erhöht aber den Pflegeaufwand: Jede spätere Textänderung muss in beiden Varianten geprüft werden.

Eine ausführliche Anleitung zum Testen der Geräteansichten 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).

## Vorschau, Seitentitel und Veröffentlichung

Öffne die Vorschau entweder über die Übersichtsseite mit dem Symbol für eine externe Vorschau oder direkt im Builder über das Augen-Symbol. Die Vorschau zeigt, wie die Seite vor der Veröffentlichung wirkt.

Führe diese Schritte erst aus, wenn Inhalt und Navigation fertig sind:

1. Öffne die Seiteneinstellungen im Builder über das SEO-Symbol.
2. Ergänze Seitentitel und Beschreibung. Der Titel erklärt kurz das Thema der Seite; die Beschreibung fasst ihren Nutzen zusammen.
3. Speichere alle Änderungen.
4. Veröffentliche die Seite über die obere Aktionsleiste.
5. Öffne die öffentliche Adresse in einem privaten Browserfenster.
6. Prüfe dort die aktuelle Version, nicht nur die Builder-Vorschau.

Das Speichern sichert deine Bearbeitung. Erst das Veröffentlichen macht die gewählte Fassung öffentlich. Wie Entwürfe, automatische Sicherungen und ältere Stände funktionieren, erklärt [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).

## Domain und öffentliche Adresse

Die Website kann mit einer eigenen Domain verbunden werden. Verlasse dafür den Builder und öffne die Einstellungen der Website. Dort wählst du die Domain aus; außerdem können dort zum Beispiel Symbol für den Browser-Tab, Messcode oder ein Chat-Element eingerichtet werden.

Verbinde eine Domain erst, wenn die erste Seite fertig getestet ist. Kontrolliere nach der Verbindung, ob die Domain der richtigen Website zugeordnet ist, die Startseite geladen wird und die Adresse sicher über https erreichbar ist. Die DNS-Angaben müssen exakt zu den Angaben während der Verbindung passen. Tippfehler, doppelte Einträge oder noch nicht übernommene Änderungen können dazu führen, dass die Website zunächst nicht erreichbar ist.

Die vollständige Verbindung ist 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) beschrieben.

## Vor der Veröffentlichung als Besucherin oder Besucher testen

Teste die Website nicht nur aus der Bearbeitungsansicht. Öffne sie anschließend in einem privaten Browserfenster und gehe denselben Weg wie eine neue Besucherin oder ein neuer Besucher.

| Test          | So prüfst du ihn                                                     | Erwartetes Ergebnis                                        |
| ------------- | -------------------------------------------------------------------- | ---------------------------------------------------------- |
| Startseite    | Öffne die öffentliche Adresse.                                       | Die richtige Startseite mit dem neuesten Inhalt erscheint. |
| Navigation    | Klicke jeden Menüpunkt.                                              | Jeder Eintrag führt zur vorgesehenen Seite.                |
| Schaltflächen | Klicke jede Schaltfläche.                                            | Die richtige Seite, Adresse oder Aktion wird geöffnet.     |
| Formular      | Sende einen Testeintrag ab.                                          | Die erwartete Bestätigung oder Benachrichtigung entsteht.  |
| Terminlink    | Öffne und teste den Buchungsweg, falls vorhanden.                    | Der richtige Buchungsablauf ist erreichbar.                |
| Mobilansicht  | Öffne die Seite auf einem Smartphone oder nutze die Builder-Prüfung. | Text, Bilder und Schaltflächen sind gut nutzbar.           |
| Adresse       | Rufe die Domain und wichtige Unterseiten auf.                        | Keine Fehlerseite erscheint; die Verbindung ist sicher.    |

## Häufige Probleme lösen

| Beobachtung                                                      | Wahrscheinliche Ursache                                                                | Nächster Schritt                                                                                         |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Öffentlich erscheint noch ein alter Text.                        | Es wurde gespeichert, aber nicht veröffentlicht.                                       | Seite öffnen, speichern, veröffentlichen und die Adresse privat erneut aufrufen.                         |
| Eine Adresse zeigt eine Fehlerseite.                             | Website, Standardseite oder URL-Pfad sind nicht passend zugeordnet.                    | Domainzuordnung, veröffentlichte Seite, Pfad und festgelegte Startseite prüfen.                          |
| Ein Menüpunkt führt falsch.                                      | Seite wurde umbenannt, ergänzt oder sortiert; das Ziel im Menü blieb unverändert.      | Navigationsmenü öffnen und jeden Zielverweis neu kontrollieren.                                          |
| Die Mobilansicht wirkt verschoben.                               | Abstände, Schriftgrößen, Breiten oder Sichtbarkeit sind für Mobilgeräte nicht passend. | In die Mobilansicht wechseln, Element für Element prüfen, speichern und erneut veröffentlichen.          |
| Formulare oder Schaltflächen reagieren nicht wie erwartet.       | Ziel oder Aktion wurde nicht vollständig eingerichtet.                                 | Alle Elemente als Testperson benutzen und anschließend Ziel und Einstellungen kontrollieren.             |
| Die Domain bleibt in Prüfung oder zeigt eine Sicherheitswarnung. | DNS-Angaben sind fehlerhaft, widersprüchlich oder noch nicht übernommen.               | Eintragstyp, Name und Wert mit den angezeigten Angaben vergleichen; danach Zeit für die Übernahme geben. |

## Praxisbeispiel: Website für eine Beratung von Grund auf

Eine Beratung möchte über ihre Website neue Anfragen erhalten. Sie plant vier Seiten: **Startseite**, **Leistungen**, **Über uns** und **Kontakt**. Auf der Startseite stehen eine klare Überschrift, ein kurzer Nutzen und die Schaltfläche **Beratung anfragen**.

Zuerst erstellt das Team die leere Website und die Startseite. Es legt einen Abschnitt über die volle Breite an, fügt eine einspaltige Zeile mit Überschrift, Erklärungstext und Schaltfläche ein. Danach erstellt es über die Seitenschublade die drei weiteren Seiten mit den Pfaden **/leistungen**, **/ueber-uns** und **/kontakt**.

Anschließend baut es oben das Navigationsmenü und verknüpft jeden Eintrag einzeln. In der Mobilansicht verkürzt es eine zu lange Überschrift und prüft die Größe der Schaltfläche. Nach dem Speichern ergänzt das Team Seitentitel und Beschreibungen, veröffentlicht alle Seiten und testet die öffentliche Adresse privat: Jede Seite, jeder Menüpunkt und die Anfrage-Schaltfläche müssen zum erwarteten Ergebnis führen.

## Abschlusscheck

* [ ] Jede Seite hat einen klaren Namen und einen eindeutigen URL-Pfad.
* [ ] Auf jeder Seite ist die nächste Handlung verständlich.
* [ ] Navigation und Fußzeile verweisen nur auf vorhandene Ziele.
* [ ] Desktop- und Mobilansicht sind geprüft.
* [ ] Seitentitel und Beschreibung sind ergänzt.
* [ ] Alle notwendigen Seiten sind veröffentlicht.
* [ ] Domain, Startseite und öffentliche Unterseiten laden sicher.
* [ ] Formulare, Buchungswege und Schaltflächen wurden als Testperson geprüft.

Wenn du zunächst einen bereits vorbereiteten Aufbau anpassen möchtest, lies [Website aus Vorlage erstellen und veröffentlichen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/website-aus-vorlage-erstellen-und-veroffentlichen). Für den Gesamtüberblick über Seiten und fokussierte Abläufe hilft [Websites und Funnels im Überblick](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/websites-und-funnels-im-uberblick).


---

# 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/website-ohne-vorlage-erstellen-und-veroffentlichen.md?ask=<question>&goal=<user_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.