Inhalt
Unsicher welcher Kostenlose Website-Baukasten der Richtige ist? Nutze den Webseiten Berater auf ChatGPT
Jede Webseite basiert schlussendlich auf HTML für die Struktur und CSS für das Styling.
Das bedeutet wenn man diese beiden Programmiersprachen beherrscht kann man so jedes gewünschte Webdesign erstellen.
Das unschöne am Programmieren ist, dass es eine Weile dauert bis man eine Sprache genügend beherrscht, so dass man etwas Anständiges produzieren könnte.
Und um dieses Problem zu lösen, gibt es verschiedene HTML-Webseitenbaukasten.
Diese lassen dich Designs erstellen auch wenn du keine Ahnung von der Programmiersprachensyntax hast.
Mein bisheriger Favorit für das Erstellen von Webseiten ist TeleportHQ. Dieser Baukasten ist nicht nur für statische Webseiten hilfreich, sondern er erlaubt es dir sogar das Front-End (den Teil den deine Benutzer sehen) für Webapplikationen zu gestalten.
Dank seiner Exportfunktion, lässt sich so eine Seite gestalten und überall publizieren wo man möchte.
Am einfachsten ist das natürlich, wenn man es durch den Baukasten tut, da so Änderungen durch nur einen Klick publiziert werden können.
Was diese Art von Gratiswebseite ausmacht ist, dass man 100%-ige gestalterische Freiheit hat, wie auch bei Webflow. Im Unterschied zu Webflow, lassen sich hier Designs auch im Gratisabo herunterladen.
Vor- und Nachteile
| Vorteile ✔️ | Nachteile ❌ |
|---|---|
| Detailanpassung | Änderungen und Updates |
| Professionalität | Nicht optimal für Anfänger |
| Erweiterung mit eigenem Code | |
| Keine Werbung | |
| Eigene Domain | |
| Kostenlos | |
| Responsive Design (mobile Geräte) |
Kostenlose Webseiten – Optionen
| Baukasten | Schwierigkeit | Zeitaufwand (Min) | Professionalität | |
|---|---|---|---|---|
| 1 | Notion.so | Sehr einfach | 15 | tief |
| 2 | HTML Builder (TeleportHQ) | Mittel | 60-120 | hoch |
| 3 | Google Sites | Einfach | 60 | mittel |
| 4 | Blogger | Einfach | 60 | mittel |
| 5 | WordPress (Gratis Version) | Schwieriger | 120 | hoch |
Anleitung: Gratisseite mit Notion
Folge der Anleitung auf Tango (schönere Ansicht)
oder
Besuche TeleportHQ und erstelle ein Gratiskonto
1Nach dem Einloggen klicke auf „Start Building“.
2Wähle eine der Vorlagen oder „Blank“.
Du kannst die Vorlage im Nachhinein nicht mehr wechseln, darum schau dass du eine für dein Projekt möglichst passende wählst.
„Quick Preview“ lässt dich die ganze Vorlage begutachten.
3Wenn dir die Vorlage gefällt klickst du auf „Start Building“ um sie zu importieren.
4Du befindest dich nun im Editor.
Hier kannst du alles anpassen wie es dir gefällt.
5Gestalte deine Webseite mit TeleportHQ
Der Einfachheit halber gehe ich in dieser Anleitung nicht darauf ein, wie man genau Anpassungen vornimmt. In den nächsten Schritten stelle ich nur ein paar Beispiele vor.
6Rechts von Explorer klickst du auf das Plus-Zeichen um neue Seiten hinzuzufügen.
7Um die Seite zu gestalten klickst du im linken Tab auf die „Elements“ Leiste.
8Nun hast du zwei Tabs „Elements“ und „Sections“ von denen du wählen kannst.
Elements sind kleine Dinge wie etwa eine Reihe, Spalte, ein Bild, oder Textelemente.
Sections hingegen sind ganze Blöcke, die man mittels Klick oder ziehen auf die Seite holen kann. Sowohl „Elements“ als auch „Sections“ lassen sich komplett anpassen.
9Durch anwählen der Section öffnet sich die Bearbeitungsleiste rechts.
10In dieser Bearbeitungsleiste lassen sich je nach Block oder Element verschiedene Dinge ändern.
In diesem Beispiel verändere ich die Hintergrundfarbe der Kopfzeile.
11Um weiter Sections hinzuzufügen klicke wieder auf das Plus in der Box.
12Klicke auf „Hero Sections“
13Wähle eine Section indem du darauf klickst.
14Publiziere deine Seite indem du auf den Button „Publish“ am rechten oberen Rand klickst.
15Wähle die „TeleportHQ domain“ wenn du mit einer Subdomain von ihnen zufrieden bist oder klicke auf „Custom domain“.
Wichtig: Die Option „Custom domain“ erfordert ein kostenpflichtiges Upgrade.
Jedem der es vermag und sich die Arbeit erleichtern möchte empfehle ich das.
Für Leute die das aus irgendwelchen Gründen nicht können, zeige ich als nächstes wie man die Seite kostenlos unter einer eigenen Domain veröffentlicht.
16Klicke auf das Export/Download Zeichen links vom „Publish“ Button.
17Wähle nun das „HTML“ Format.
18Weiter unten klicke auf das Symbol rechts von „Export Code as“
Dies lädt einen Zipordner mit allen notwendigen Dateien herunter.
19Einmal heruntergeladen extrahierst du den Zipordner.
Dies erlaubt uns im nächsten Schritt das hochladen bei Netlify.
Falls dir diese Schritte unklar sind kanns du im Artikel Gratis Webseite mit Notion jeden Zwischenschritt finden.
21Einmal angemeldet klicke auf „Add new site“ und dann „Deploy manually“
22Ziehe nun den zuvor extrahierten Ordner (nicht den Zip-Ordner) auf das Uploadfeld.
Nach einigen Sekunden ist deine Seite online unter einer Subdomain von Netlify. (Bsp. epeneprhi-toast-as222.netlify.app)
