Früher fühlte es sich beim Erstellen einer Website an, als müsste man jemanden dafür beauftragen. Nicht mehr.
Ich nutze seit einiger Zeit Hostinger Website Builder, und in diesem Leitfaden führe ich dich Schritt für Schritt durch den gesamten Prozess, vom Moment der Anmeldung bis zum Livegang deiner Website.
Los geht’s.
Was ist Hostinger Website Builder?
Hostinger Website Builder ist ein KI-gestützter Drag-and-Drop-Website-Builder, der direkt in dein Hostinger-Konto integriert ist.
Du musst nichts installieren, brauchst keine Programmierkenntnisse und keine Design-Vorkenntnisse. Du beschreibst, was du möchtest, die KI erstellt eine komplette Website für dich, und anschließend passt du sie an deine Marke an.
Es ist eine der schnellsten Methoden, um von null zu einer voll funktionierenden und professionell aussehenden Website zu gelangen.
Schritt 1: Einloggen und zum Builder navigieren
Wenn du dich in dein Hostinger-Konto einloggst, landest du im hPanel. Dabei handelt es sich um das Haupt-Dashboard von Hostinger, in dem du alles verwaltest: deine Websites, Domains, E-Mails und Abrechnungen.
In der linken Seitenleiste siehst du eine Liste mit Navigationsoptionen. Klicke auf Websites. Darunter öffnet sich ein kleines Dropdown-Menü mit zwei Optionen: Websites list und Migrations. Klicke auf Websites list.
Du befindest dich nun auf der Seite ‘Websites list’, die alle mit deinem Konto verbundenen Websites anzeigt.
Im oberen rechten Bereich der Seite siehst du den lila + Add website-Button. Klicke darauf.
Es erscheint ein kleines Dropdown-Menü mit vier Optionen:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Und benutzerdefinierte PHP/HTML-Website
Du möchtest auf Hostinger Website Builder klicken, das als „KI-gestützter Drag-and-Drop-Website-Builder“ beschrieben wird.
Schritt 2: Beschreibe der KI deine Website
Nachdem du Hostinger Website Builder ausgewählt hast, gelangst du zu einem Einrichtungsbildschirm mit der Überschrift “Let AI create your online presence.”
Hier gibst du der KI an, welche Art von Website du erstellen möchtest.
Du siehst ein großes Textfeld mit dem Platzhalter „Describe your website or business.“ Dies ist dein Prompt-Feld, und das, was du hier eingibst, bestimmt alles, was die KI für dich erstellt. Je mehr Details du angibst, desto besser wird dein Ergebnis.
Unter dem Textfeld bemerkst du außerdem eine Reihe von schnellen Vorschlags-Chips. Darunter befinden sich Optionen wie „Create a business website“, „Create an online store“, „Design a portfolio“, „Launch an appointments website“, „Start a blog“, „Launch a restaurant website“ und „Create a one pager website.“
Ein Klick auf einen dieser Chips füllt einen Start-Prompt aus, den du anschließend bearbeiten und erweitern kannst.
Ganz unten auf dem Bildschirm siehst du zwei zusätzliche Links: Pre-made templates und Link in bio website.
Wenn du die KI überspringen und stattdessen bestehende Designs durchsuchen möchtest, klicke auf Pre-made templates.
Wenn du nur eine einfache Ein-Seiten-Website für deine Social-Media-Profile benötigst, lohnt sich die Link in bio-Option.
Für die meisten, die eine echte Website erstellen, ist jedoch das KI-Prompt-Feld der richtige Startpunkt.
Wie man einen guten KI-Prompt schreibt
Das ist der wichtigste Teil des gesamten Prozesses. Betrachte den KI-Prompt als ein Briefing für einen Designer. Je klarer du deine Vision kommunizierst, desto näher wird das Ergebnis an dem sein, was du wirklich haben willst.
Hier ist der Prompt, den ich für diesen Leitfaden verwendet habe. Ich habe eine Website für eine Kreativagentur erstellt:
„Erstelle eine moderne, professionelle Website für eine Kreativagentur, die Branding, Grafikdesign, Webdesign und Digital-Marketing-Dienstleistungen anbietet. Die Website soll kreativ, mutig und vertrauenswürdig wirken, dabei aber sauber und einfach zu navigieren bleiben. Verwende ein modernes Layout mit starken visuellen Elementen, großzügigem Abstand und stilvoller Typografie. Füge folgende Seiten ein: Startseite, Über uns, Leistungen, Portfolio, Blog und Kontakt. Auf der Startseite soll ein Hero-Bereich mit einer kraftvollen Überschrift, einer kurzen, auf den Nutzen fokussierten Beschreibung und einem klaren Call-to-Action-Button wie ‚Starten Sie Ihr Projekt‘ oder ‚Angebot anfordern‘ enthalten sein. Verfasse einfache, überzeugende Texte, die erklären, was wir tun, wen wir unterstützen und welche Ergebnisse wir liefern. Sorge dafür, dass die Website mobilfreundlich, schnell ladend und für grundlegende SEO optimiert ist.“
Beachte, wie spezifisch das ist. Es deckt Branche, Tonalität, Layout-Stil, erforderliche Seiten, Homepage-Struktur und Inhaltsziele ab. Diese Detailtiefe gibt der KI eine solide Grundlage, auf der sie arbeiten kann.
Sobald du deine Beschreibung eingegeben hast, erscheint oben rechts im Textfeld ein Button „Improve description“.
Ich empfehle, darauf zu klicken, bevor du abschickst. Die KI erweitert und verfeinert deinen Prompt und ergänzt oft Dinge, an die du nicht gedacht hast.
Wenn du bereit bist, klicke auf den lila Pfeil-Button (das Senden-Symbol) unten rechts im Textfeld, um deinen Prompt abzuschicken und die Generierung zu starten.
Schritt 3: Warte, bis die KI deine Website erstellt
Nachdem du deinen Prompt abgeschickt hast, legt die Hostinger-KI sofort los. Du siehst eine Vollbild-Ladeanimation auf dunkelviolettem Hintergrund mit der Meldung „Looking for matching pictures…“ und einer Fortschrittsanzeige, die den aktuellen Stand des Prozesses zeigt.
In dieser Phase dauert es in der Regel 30 bis 60 Sekunden. Während dieser Zeit erledigt die KI einiges: Sie erstellt deine Seitenlayouts, schreibt deinen Website-Text, wählt passende Bilder aus einer Stockbibliothek aus, baut deine Navigation auf und strukturiert deine gesamte Website basierend auf deinem Prompt.
Schließe den Tab während des Ladevorgangs nicht. Warte einfach, bis er abgeschlossen ist.
Schritt 4: Prüfe, was die KI erstellt hat
Wenn die KI fertig ist, wird dir eine Vorschau deiner neuen Website angezeigt. Das ist der Ergebnisbildschirm, und es ist wirklich spannend zu sehen, was generiert wurde.
Auf der linken Seite des Bildschirms siehst du eine Live-Vorschau deiner generierten Website. Rechts befindet sich ein Panel mit der Bezeichnung „Your idea summary,“ das eine Zusammenfassung deines abgeschickten Prompts und einen Button „Edit idea“ anzeigt, falls du zurückgehen und mit einem anderen oder aktualisierten Prompt neu generieren möchtest.
In meinem Fall nannte die KI die Seite „BoldCraft Studio“ und generierte eine Startseite mit der Überschrift „Crafting Bold Brands That Shine“, einer unterstützenden Beschreibung und zwei Call-to-Action-Buttons: „Start Now“ und „Get Quote“.
Die Navigationsleiste enthielt alle sechs von mir gewünschten Seiten: Home, About, Services, Portfolio, Blog und Contact.
Oben links im Vorschaubildschirm siehst du außerdem zwei Buttons: Previous versions, mit dem du alternative Designs der KI durchsuchen kannst, und Rate site, mit dem du Feedback zum Ergebnis geben kannst.
Oben rechts in der Vorschau siehst du Symbole zum Umschalten zwischen Desktop- und Mobilansicht. Nutze diese, um zu überprüfen, wie deine Seite auf einem Smartphone aussieht, bevor du weitermachst. Es ist eine gute Angewohnheit, dies frühzeitig zu tun.
Wenn du mit der generellen Richtung zufrieden bist, klicke auf den lila Continue-Button im rechten Panel. Dadurch gelangst du in den vollständigen Editor, in dem die eigentliche Anpassung stattfindet.
Wenn du mit dem Ergebnis nicht zufrieden bist, klicke auf Edit idea, überarbeite deinen Prompt und generiere neu. Das kannst du beliebig oft wiederholen.
Schritt 5: Mach dich mit dem Editor vertraut
Im Editor wirst du die meiste Zeit verbringen. Wenn du zum ersten Mal hier ankommst, nimm dir einen Moment Zeit, um das Layout zu verstehen, bevor du mit dem Klicken beginnst.
Der Editor verfügt über zwei Hauptbereiche.
- Der große zentrale Bereich ist deine Website-Leinwand, auf der du deine Seite in Echtzeit sehen und bearbeiten kannst.
- Die schmale vertikale Seitenleiste links ist dein Steuerungsbereich und enthält alles, was du benötigst.
So funktionieren die einzelnen Punkte in der Seitenleiste:
- Setup verschafft dir Zugriff auf die grundlegenden Einstellungen deiner Website, die verbundene Domain und Informationen zu deinem Tarif.
- Elements öffnet das Drag-and-Drop-Panel, in dem du neue Inhaltsblöcke zu jeder Seite hinzufügen kannst. Ich werde darauf gleich ausführlicher eingehen.
- Pages zeigt alle deine Seiten an einem Ort. Du kannst zwischen Seiten wechseln, neue hinzufügen, bestehende umbenennen, ihre Reihenfolge ändern oder nicht benötigte löschen.
- Styles steuert das globale Design deiner Site. Hier legst du Schriftarten, Farbpalette und Button-Stile fest. Alle Änderungen, die du hier vornimmst, gelten für die gesamte Website, daher ist dies der richtige Ort für grundlegende Designentscheidungen, statt einzelne Abschnitte isoliert zu ändern.
- AI tools gewährt dir Zugriff auf Hostingers Schreib- und Content-KI. Du kannst sie nutzen, um Textabschnitte umzuschreiben, neuen Text zu generieren und mehr.
- Blog ist der Bereich, in dem du Blogbeiträge erstellst und verwaltest, falls deine Website einen Blog enthält.
- Store ist der Bereich, in dem du deinen Online-Shop einrichtest, wenn du Produkte verkaufst. Beachte, dass E-Commerce-Funktionen einen höherwertigen Tarif erfordern.
- SEO öffnet den integrierten SEO-Manager, in dem du Meta-Titel, Beschreibungen und weitere Suchoptimierungsdetails für jede Seite festlegst.
- More öffnet ein zweites Menü mit zusätzlichen Tools wie Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress sowie Help and Resources.
Oben im Editor findest du zudem die Hauptsymbolleiste. Von links nach rechts enthält sie: eine Umschaltfunktion für Desktop- und Mobilvorschau, Rückgängig- und Wiederholen-Buttons, einen Connect domain-Button, einen Preview-Button und den grünen Go live-Button.
Schritt 6: Bearbeite deine Inhalte
Jetzt kommt der Teil, in dem du die Website an deine Bedürfnisse anpasst. Klicke irgendwo auf deine Website-Leinwand, um mit der Bearbeitung zu beginnen.
Wenn du mit der Maus über einen beliebigen Abschnitt der Seite fährst, erscheint oben links in diesem Abschnitt ein blauer Hinweis, der angibt, um welchen Elementtyp es sich handelt, zum Beispiel „Section“ oder „Header“. Gleichzeitig erscheint darüber eine kleine schwebende Symbolleiste mit deinen Bearbeitungsoptionen.
Die Abschnitts-Symbolleiste bietet dir von links nach rechts folgende Steuerungselemente: Edit section öffnet das Abschnittseinstellungs-Panel, in dem du das Hintergrundbild oder die Hintergrundfarbe ändern, Abstände anpassen und Layoutoptionen modifizieren kannst.
Daneben findest du Generate image, das den KI-Bildergenerator öffnet.
Danach folgen ein Duplicate-Icon, ein Hide/Show-Umschalter, ein Delete-Icon, Pfeile für Move up und Move down zum Umordnen von Abschnitten sowie ein Drei-Punkte-Menü mit weiteren Optionen.
Um einen beliebigen Text auf der Seite zu bearbeiten, klicke einfach direkt darauf und beginne mit der Eingabe. Das Textelement wird editierbar, und es erscheinen Formatierungsoptionen. Du kannst Schriftgröße, -stärke, Ausrichtung und Farbe direkt über diese Optionen ändern.
Um ein Bild zu ändern, klicke darauf. Du siehst Optionen, es durch ein Foto aus deinen eigenen Dateien zu ersetzen, in Hostingers Stock-Bilderbibliothek zu suchen oder mit der KI ein neues zu generieren.
Arbeite zuerst deine Startseite durch und nutze dann das Pages-Panel, um zu jeder weiteren Seite zu wechseln und diese nacheinander zu bearbeiten.
Schritt 7: Verwende den KI-Bildergenerator
Ein Feature, dem du etwas mehr Aufmerksamkeit schenken solltest, ist der KI-Bildergenerator, da er äußerst nützlich ist, wenn du keine eigenen Profifotos hast.
Um darauf zuzugreifen, fahre mit der Maus über einen beliebigen Abschnitt deiner Seite und klicke in der schwebenden Abschnitts-Symbolleiste auf Generate image. Ein Panel schiebt sich von der rechten Seite des Bildschirms herein.
Im Panel findest du ein Textfeld Image description. Gib eine Beschreibung des Bildes ein, das du erstellen möchtest.
Je spezifischer und bildhafter deine Beschreibung ist, desto besser wird das Ergebnis. Das Panel zeigt ein Zeichenlimit von 3.000 und einen Echtzeit-Qualitätsindikator, der dir anzeigt, ob deine Beschreibung aussagekräftig genug ist.
Wenn ich zum Beispiel „A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office“ eingab, zeigte das Panel „Great description!“ mit vollständig gefüllten Qualitätsbalken an.
Wenn du mit deiner Beschreibung zufrieden bist, klicke auf den Create images-Button. Die KI erstellt daraufhin eine Reihe von Bildern, aus denen du auswählen kannst.
Ein Hinweis: Der KI-Bildergenerator erfordert den Business-Tarif oder höher. Wenn du den Premium-Tarif nutzt, siehst du unten im Panel eine Upgrade-Aufforderung.
Schritt 8: Füge jeder Seite neue Elemente hinzu
Wenn du einen Inhaltsblock hinzufügen möchtest, der noch nicht auf deiner Seite vorhanden ist, klicke in der linken Seitenleiste auf Elements. Dadurch öffnet sich das Panel „Add elements“.
Du siehst eine Übersicht aller verfügbaren Elemente, darunter Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed und Contact form. Um eines davon deiner Seite hinzuzufügen, ziehe es aus dem Panel und platziere es per Drag & Drop an der gewünschten Stelle deiner Leinwand.
Einmal platziert, klicke auf das Element, um dessen individuelle Einstellungen und Stiloptionen aufzurufen.
Dieser Drag-&-Drop-Ansatz stellt sicher, dass du nie an das von der KI erstellte Layout gebunden bist. Du kannst Elemente jederzeit hinzufügen, entfernen und neu anordnen.
Schritt 9: Verwalte deine Seiten
Klicke in der linken Seitenleiste auf Pages, um eine Übersicht aller deiner Seiten zu sehen. Mit einem Klick auf den Seitennamen gelangst du direkt in den Bearbeitungsmodus dieser Seite.
Um eine neue Seite hinzuzufügen, nutze den Plus-Button. Um die Reihenfolge der Seiten in deiner Navigation zu ändern, ziehe sie einfach in der Liste nach oben oder unten.
Wenn die KI Seiten generiert hat, die du nicht benötigst, kannst du sie hier löschen. Ebenso kannst du hier eine Seite hinzufügen, die die KI nicht erstellt hat, z. B. eine Testimonials-Seite oder eine Preisseite, und sie dann mit Hilfe des Elements-Panels gestalten.
Schritt 10: Richte dein SEO ein
Bevor du veröffentlichst, solltest du dein SEO einrichten. Viele überspringen diesen Schritt, was ein Fehler ist.
15 Minuten in die ordnungsgemäße Einrichtung deiner SEO-Einstellungen zu investieren, kann einen echten Unterschied darin machen, ob Leute deine Seite über Google finden.
Klicke in der linken Seitenleiste auf SEO, um das SEO-Panel mit dem Titel „Let’s be found on Google (SEO)“ zu öffnen.
Das Panel ist in zwei Abschnitte unterteilt. Links siehst du eine Liste all deiner Seiten. Rechts findest du den Website overview-Bereich, der deinen Firmennamen und die Sprache der Website anzeigt. Klicke auf Edit, um diese Angaben bei Bedarf zu aktualisieren.
Unter den Website-Informationen siehst du einen Abschnitt „Some pages require your attention“.
Jede Seite, die Optimierungsbedarf hat, ist mit einem orangefarbenen Warnsymbol gekennzeichnet. Klicke im linken Panel auf eine Seite, um ihre individuellen SEO-Einstellungen zu öffnen, in denen du einen Meta-Titel und eine Meta-Beschreibung für diese Seite verfassen kannst.
Arbeite alle aufgeführten Seiten durch. Ein guter Meta-Titel ist prägnant, enthält dein Hauptkeyword und ist unter 60 Zeichen lang. Eine gute Meta-Beschreibung fasst zusammen, worum es auf der Seite geht, und umfasst höchstens 160 Zeichen. Diese Textausschnitte erscheinen in den Google-Suchergebnissen, daher lohnt es sich, ein paar Minuten pro Seite zu investieren.
Schritt 11: Verbinde deine Domain
Wenn du noch keine eigene Domain mit deiner Website verbunden hast, ist jetzt der richtige Zeitpunkt dafür. Klicke in der oberen Symbolleiste des Editors auf den Connect domain-Button.
Du hast zwei Optionen. Wenn du bereits eine Domain besitzt, kannst du sie verbinden, indem du deine DNS-Einstellungen so anpasst, dass sie auf Hostingers Server verweisen. Wenn du noch keine Domain besitzt, kannst du direkt auf demselben Bildschirm eine bei Hostinger kaufen.
Bis du eine Domain verbunden hast, ist deine Seite über eine temporäre Hostinger-Subdomain wie yoursite.builder-preview.com erreichbar. Das ist zum Testen in Ordnung, aber bevor du deine Seite öffentlich teilst, solltest du eine eigene Domain verwenden.
Schritt 12: Vorschau deiner Seite und Livegang
Du bist beinahe fertig. Bevor du veröffentlichst, klicke in der oberen rechten Symbolleiste auf Preview.
Dadurch öffnet sich eine Vollbild-Vorschau, die genau zeigt, wie deine Seite Besucher sehen werden. Wechsle über die Symbole oben im Vorschaubildschirm zwischen Desktop- und Mobilansicht und überprüfe, ob auf beiden alles korrekt dargestellt wird.
Achte besonders darauf, wie der Hero-Bereich deiner Startseite auf Mobilgeräten aussieht, wie sich die Navigation verhält und ob Bilder unerwünscht zugeschnitten werden.
Wenn du mit allem zufrieden bist, kehre zum Editor zurück und klicke oben rechts auf den grünen Go live-Button. Deine Seite ist nun veröffentlicht und im Internet live.
Schritt 13: Erkunde Integrationen
Sobald deine Seite live ist, lohnt es sich, die dir zur Verfügung stehenden Integrationen zu erkunden. Gehe in der linken Seitenleiste zu More > Integrations.
Das Integrations-Panel ermöglicht es dir, deine Website mit externen Tools und Diensten zu verbinden. Zu den aktuellen Optionen gehören Shippo zum Erstellen von Versandetiketten und zur Auftragsabwicklung, Printful zum Erstellen und Verkaufen von Print-on-Demand-Produkten, Hostinger Reach für E-Mail-Marketing und Newsletterversand an deine Abonnenten, Google Ads für bezahlte Werbekampagnen und Custom code, wenn du eigene HTML-, CSS- oder JavaScript-Codes hinzufügen möchtest, um die Funktionalität deiner Seite zu erweitern.
Um eine Integration zu aktivieren, klicke daneben auf Get started, folge den Verbindungsanweisungen und aktualisiere dann deine Seite durch einen erneuten Publish.
Tipps, um das Beste aus dem Hostinger Website Builder herauszuholen
Sei großzügig mit deinem KI-Prompt. Ein Prompt mit nur zwei Sätzen liefert ein generisches Ergebnis. Ein detaillierter, spezifischer Prompt, der deine Branche, Zielgruppe, Designvorlieben, Seitenstruktur und Tonalität abdeckt, führt zu einem Ergebnis, das wesentlich näher an deinen Vorstellungen liegt. Verbringe fünf Minuten damit, ein richtiges Briefing zu schreiben, und du sparst dir anschließend Stunden an Nachbearbeitung.
Nutze jedes Mal den Button Improve description. Er ist leicht zu übersehen, aber wirklich hilfreich. Die KI erkennt oft Dinge, die du vage gelassen hast, und verwandelt sie in konkrete Design- und Inhaltsanweisungen.
Überarbeite deinen Text sorgfältig. Die KI erstellt zwar brauchbare Platzhaltertexte, kennt dein Geschäft aber nicht so gut wie du. Gehe jede Seite durch und schreibe die Texte neu, damit sie deine tatsächlichen Leistungen, deinen realen Mehrwert und deine authentische Stimme widerspiegeln.
Prüfe die mobile Ansicht, bevor du veröffentlichst. Hostinger macht deine Seite zwar automatisch responsiv, aber Bilder und Abstände benötigen auf kleineren Bildschirmen manchmal kleine Anpassungen. Schau dir vor dem Livegang immer die mobile Ansicht an.
Fülle das SEO für jede einzelne Seite aus. Nicht nur für die Startseite. Jede Seite deiner Website verdient einen aussagekräftigen Meta-Titel und eine Meta-Beschreibung. Das dauert nur wenige Minuten pro Seite und ist eine der einfachsten Maßnahmen, um deine Sichtbarkeit in Suchergebnissen zu verbessern.
Nutze die Media library, um organisiert zu bleiben. Unter More > Media library kannst du alle deine Bilder zentral hochladen und verwalten. So kannst du Bilder leichter auf mehreren Seiten wiederverwenden und deine Website konsistent halten.
Komme regelmäßig zurück und optimiere deine Seite. Der Publish deiner Website ist nicht das Ende des Prozesses, sondern der Anfang. Kehre regelmäßig zurück, um Inhalte zu aktualisieren, neue Blogbeiträge hinzuzufügen und deine Seiten im Laufe der Entwicklung deines Geschäfts zu verfeinern.
Hostinger Website Builder beseitigt nahezu alle Hindernisse, die früher zwischen dir und einer professionellen Website standen. Die KI übernimmt das Grobe bei Design und Text, der Editor macht die Anpassung einfach, und die integrierten SEO- und Integrations-Tools bedeuten, dass du alles Wichtige an einem Ort hast.
Folge den Schritten in diesem Leitfaden, und du kannst realistisch gesehen in weniger als einer Stunde eine live geschaltete, polierte Website erstellen.
