Alle erzählen gerade, wie easy man sich mit Claude oder ChatGPT eine Landingpage baut. Das stimmt auch irgendwie, nach ein paar Prompts steht die Seite da und sieht halbwegs ordentlich aus (über das Design an sich verliere ich hier jetzt mal kein Wort). Und dann sitzt du davor und fragst dich, wie die Seite jetzt auf deine Website kommt, am besten ohne noch ein Hosting und eine zweite Domain zu bezahlen.
Ich zeige dir den Weg an einem echten Beispiel. Eine andere Freelancerin stand genau vor dieser Frage. Sie hatte von einer anderen Person eine Grundlage für eine Leadpage bekommen und diese mit KI weiter bearbeitet. Sie sollte diese für Leadpage extra Hosting und eine eigene Domain buchen, obwohl ihre Website schon auf WordPress bei IONOS lief. Ich habe ihr erklärt, wie sie das umgehen kann (also ihre eigene statische Seite in WordPress einfügt), wo die Datei hin muss und wie sie heißen muss. Sie hat die KI-Seite dann selbst hochgeladen. Seitdem ist die Leadpage unter ihrer Domain mit /leadpage dahinter erreichbar, und Ulrike verschickt den Link gezielt, ohne dass die Seite im Menü auftaucht.
HTML-Seite in WordPress einfügen: Schritt für Schritt
Du brauchst dafür nur den Zugang zu deinem Hosting und die fertige HTML-Datei, programmieren musst du an sich nichts.
1. Die Seite als index.html speichern
Wenn deine Seite aus Claude oder ChatGPT kommt, bitte die KI, dir alles in eine einzige HTML-Datei zu packen, also auch das Design. Diese Datei lädst du herunter, oder du kopierst den kompletten Code in einen einfachen Texteditor und speicherst ihn dort. Am Mac stellst du TextEdit vorher auf reinen Text um, sonst speichert es Formatierungen mit. Oder die KI gibt dir bereits diese Datei.
Die Datei heißt am Ende index.html, alles kleingeschrieben. Der Server sucht in jedem Ordner automatisch nach einer Datei mit genau diesem Namen und zeigt sie an, ohne dass der Dateiname in der URL auftaucht. Achte darauf, dass nicht aus Versehen index.html.txt oder index.html.html daraus wird.
Hast du eigene Bilder oder eine separate CSS-Datei, kommen die mit in denselben Ordner, und zwar genau so benannt, wie die HTML-Datei sie aufruft. Du kannst sie aber auch direkt in die Datei einbinden.
2. Den Dateimanager deines Hosters öffnen
Bei den meisten Hostern gibt es einen Dateimanager, der direkt im Browser läuft. Bei All Inkl. z. B. ist das WebFTP, bei IONOS unter Webspace.
3. Den WordPress-Ordner finden
Jetzt suchst du den Ordner, in dem WordPress liegt. Du erkennst ihn an den Ordnern wp-admin, wp-content und wp-includes und an der Datei wp-config.php. Bei manchen Installationen liegt WordPress nicht ganz oben, sondern in einem Unterordner, dann klickst du dich so lange durch, bis du genau diese Dateien siehst.
4. Einen neuen Ordner anlegen
In diesem Ordner legst du einen neuen Ordner an. Sein Name wird später Teil der URL, also nimm etwas Kurzes, kleingeschrieben, ohne Umlaute und ohne Leerzeichen. Aus „leadpage“ wird deinedomain.de/leadpage, aus „checkliste-buchhaltung“ wird deinedomain.de/checkliste-buchhaltung.
5. Hochladen und testen
Lade die index.html in den neuen Ordner hoch und ruf danach deine Domain mit dem Ordnernamen dahinter im Browser auf, am besten auch einmal auf dem Handy. Siehst du die 404-Seite deiner Website, liegt der Ordner nicht da, wo er hingehört. Bekommst du eine Fehlermeldung wie „403 Forbidden“ oder eine Liste mit Dateien, stimmt meistens der Dateiname nicht.
HTML-Seite von ChatGPT oder Claude online stellen: worauf du vorher achtest
Das Hochladen klappt mit einer Seite aus Claude oder ChatGPT genauso wie bei anderen statischen Seiten, die du eventuell als Vorlage irgendwo bekommen hast. Beim Inhalt lohnt sich aber ein zweiter Blick, denn die Vorlage der Freelancerin, der ich geholfen habe, kam von Menschen, die sich mit Leadpages auskennen und wissen, was darauf gehört und was nicht.
Eine KI liefert dir einen ordentlichen ersten Entwurf, aber sie kennt deine Zielgruppe und dein Angebot nicht so, wie es eine erfahrene Sparringspartnerin tut. Für eine einzelne Leadpage, die schnell online soll, finde ich das okay. Eine komplette Website würde ich so nicht bauen, und warum, habe ich in Website mit KI erstellen: Kannst du, solltest du aber nicht aufgeschrieben.
Bei KI-Seiten kommt noch ein technischer Punkt dazu: Sie laden häufig Schriften oder Code direkt von fremden Servern nach, zum Beispiel von Google. Dabei geht die IP-Adresse deiner Besucher:innen an diesen Server, und das ist ein Datenschutzthema, das du klären solltest, bevor du den Link verschickst.
Was du beachten solltest
Weil deine Seite neben WordPress liegt, kümmert sich WordPress um nichts davon. Diese Punkte solltest du kennen:
- Plugins greifen nicht. Dein Cookie-Banner und dein SEO-Plugin wissen nichts von der Seite, und auch dein Tracking zählt dort nicht mit. Was die Seite braucht, muss direkt in der HTML-Datei stehen.
- Impressum und Datenschutz gehören rein. Auch eine Leadpage braucht beides. Setz die Links zu deinen bestehenden Seiten ganz unten in die Datei.
- Die Seite steht nicht in der Sitemap. Google kann sie trotzdem finden, sobald sie irgendwo verlinkt ist. Soll sie nur für deine Kontakte da sein, kommt diese Zeile zwischen
<head>und</head>:<meta name="robots" content="noindex"> - Keine doppelten Namen. Gibt es in WordPress schon eine Seite mit dem URL-Slug deiner Seite, gewinnt dein Ordner, und die WordPress-Seite ist nicht mehr erreichbar.
- Backups prüfen. Viele Backup-Plugins sichern nur die Datenbank und den Ordner wp-content, dein neuer Ordner liegt aber daneben. Heb die Datei deshalb zusätzlich auf deinem Rechner auf. Wenn du Backups und Updates lieber ganz abgibst, schau dir meine WordPress-Wartung an.
- Änderungen laufen über die Datei. Du bearbeitest die index.html auf deinem Rechner und lädst sie neu hoch. Im WordPress-Dashboard kannst du an der Seite nichts ändern. Wie du WordPress Websites mit KI erstellen kannst (z. B. mit Elementor MCP), werde ich demnächst berichten.
HTML-Seite in WordPress einbinden: andere Wege und wann sie passen
Wenn du nach „HTML-Seite in WordPress einbinden“ suchst, stößt du auch auf andere Lösungen. Die passen eher für andere Situationen:
- Block „Individuelles HTML“: Im Block-Editor kannst du HTML-Code in eine normale WordPress-Seite setzen. Für Schnipsel wie ein eingebettetes Formular ist das super. Eine komplette Seite mit eigenen Styles verträgt sich dort aber selten mit deinem Theme, und Header und Footer deiner Website bleiben stehen.
- iframe: Damit zeigst du die HTML-Seite wie ein Fenster innerhalb einer WordPress-Seite an. Auf dem Handy gibt das schnell doppelte Scrollbalken, und für Google gehört der Inhalt nicht zu deiner Seite.
- Nachbau im Page Builder: Du baust die Seite in Elementor, Divi oder Bricks Builder nach. Das dauert länger, dafür ist sie danach ein echter Teil deiner Website.
Erst mal online, später sauber nachbauen
Die Freelancerin hatte auch überlegt, ihre Leadpage in Elementor von der Vorlage nachzubauen. Sie hatte sich aber erst mal für die schnelle Variante entschieden, ganz nach dem Motto "done is better than perfect". Der Nachbau in WordPress lohnt sich aber, sobald einer dieser Punkte für dich wichtig wird:
- Die Seite soll bei Google gefunden werden und mit deinem SEO-Plugin gepflegt sein.
- Du willst E-Mail-Adressen mit sauberem Double-Opt-in sammeln, angebunden an dein E-Mail-Marketing.
- Du willst sehen, wie viele Menschen die Seite besuchen und sich eintragen.
- Du willst Texte selbst ändern, ohne jedes Mal eine Datei anzufassen.
- Die Seite soll barrierefrei sein und zu deinem Design passen.
Dann ist eine Seite z. B. Leadpage direkt in WordPress die bessere Wahl. Genau das mache ich, wenn ich eine Landingpage in WordPress erstelle: mit Bricks Builder, mit angebundenem Anmeldeformular und mit einer Struktur, die auf ein einziges Ziel hinarbeitet. Die HTML-Variante ist bis dahin ein guter Zwischenschritt, damit du nicht wartest, bis alles perfekt ist.
Nochmal kurz, warum das funktioniert
Wenn jemand deinedomain.de/leadpage aufruft, schaut der Server zuerst nach, ob es auf deinem Webspace einen Ordner mit genau diesem Namen gibt. Wenn ja, zeigt er die index.html darin an. Erst wenn dort nichts liegt, gibt er die Anfrage an WordPress weiter. Dafür sorgen ein paar Zeilen in der Datei .htaccess, die WordPress für seine Permalinks anlegt. Deine HTML-Seite liegt also neben WordPress und nicht darin.
Brauche ich für eine HTML-Seite oder eine KI-Seite ein eigenes Hosting?
Nicht unbedingt, wenn du schon eine WordPress-Website mit eigenem Hosting hast. Die HTML-Seite liegt dann als Ordner auf deinem bestehenden Webspace und läuft unter deiner Domain. Ein eigenes Hosting brauchst du erst, wenn es noch gar keine Website gibt, und worauf es dann ankommt, steht in meinen Webhosting-Kriterien.
Funktioniert das bei jedem Hoster?
Du brauchst Zugriff auf die Dateien deines Webspace, entweder über einen Dateimanager im Browser oder per FTP beziehungsweise SFTP. Bei klassischem Webhosting ist das in der Regel dabei, bei IONOS zum Beispiel über den Webspace Explorer oder bei All Inkl über WebFTP.
Kann ich auf diese Weise mehrere HTML-Seiten hochladen?
Ja. Jede Seite bekommt ihren eigenen Ordner mit einer eigenen index.html, zum Beispiel /leadpage und /webinar. Achte nur darauf, dass keiner der Ordnernamen in WordPress schon als Seite existiert.
Was passiert mit der Seite, wenn ich WordPress aktualisiere?
Nichts. Ein WordPress-Update tauscht nur die Dateien von WordPress selbst aus und lässt deinen Ordner in Ruhe. Bei einem Umzug zu einem anderen Hoster sieht das anders aus, denn viele Umzugs-Plugins nehmen nur WordPress mit, und deinen Ordner musst du dann selbst kopieren. Wie so ein Umzug abläuft, liest du in WordPress Website exportieren.
Kann ich eine Newsletter-Anmeldung in die HTML-Seite einbauen?
Ja. Tools wie Brevo, ActiveCampaign oder MailerLite geben dir für ihre Formulare einen Code zum Einbetten, den du in die HTML-Datei kopierst. Das Double-Opt-in läuft dann über das Tool, wenn du es dort eingerichtet hast. Das Formular gehört außerdem in deine Datenschutzerklärung.
Ich kann kein HTML. Schaffe ich das trotzdem?
Ja schon, solange du am Code nichts ändern willst. Die Datei umzubenennen und hochzuladen klappt ohne Programmierkenntnisse. Kniffliger wird es erst, wenn du später Texte ändern willst, dann musst du in die Datei rein oder dir eine neue Version erstellen lassen.
Ist es unsicher, eine HTML-Datei auf den Server zu legen?
Eine reine HTML-Datei wird nur angezeigt und bietet deinem Server kaum Angriffsfläche. Vorsichtig sein solltest du bei Dateien, deren Herkunft du nicht kennst, und bei Seiten, die Skripte von fremden Servern nachladen. Im Zweifel lässt du jemanden draufschauen, bevor die Seite online geht.
Was ist der Unterschied zwischen einer Leadpage und einer Landingpage?
Eine Landingpage ist eine einzelne Seite mit genau einem Ziel und ohne ablenkendes Menü. Eine Leadpage ist eine Landingpage, deren Ziel neue Kontakte sind, meistens eine E-Mail-Adresse im Tausch gegen ein Freebie. Jede Leadpage ist also eine Landingpage, aber nicht jede Landingpage sammelt Kontakte.
Kann ich die HTML-Seite nicht einfach in Elementor einfügen?
Elementor hat ein HTML-Widget, in das du Code einfügen kannst. Für Schnipsel ist das praktisch, eine komplette Seite mit eigenen Styles passt dort aber genauso schlecht rein wie in den Block „Individuelles HTML“. Für eine ganze Seite ist der eigene Ordner der sauberere Weg, oder du baust sie in Elementor nach.
Hilfst du mir dabei?
Ja. Wie bei der Freelancerin aus dem Beitrag kann das ein kurzer Tipp sein, wo die Datei hin muss, oder ich baue dir die Seite direkt in WordPress. Ich bin Katja Arndt von Digital mit Sinn, Webdesignerin aus Leipzig, seit 2021 selbstständig und arbeite mit Selbstständigen und kleinen Unternehmen von überall zusammen, alles remote. Ich habe bereits viele Personen und Unternehmen unterstützt. Also kann ich dir sicher auch helfen.
0 Kommentare