Handbuch

1. Erste Schritte

Öffne den Editor über „App öffnen“ oder „Im Browser starten“ auf der Startseite. Du siehst sofort die Startseite der Werkseinstellung: das Logo und die Überschrift „Willkommen auf deiner Website“. Dieselbe Startseite bekommt jede neu angelegte Website. Alles, was du änderst, wird automatisch gespeichert; oben neben der Seitenauswahl zeigt „Gespeichert“, dass nichts verloren geht.

Deine Websites liegen nur in deinem Browser (nicht auf einem Server). Das hat zwei Folgen: Du brauchst kein Konto, aber wenn du die Browserdaten löschst oder auf einem anderen Gerät arbeitest, sind sie nicht da. Lege deshalb regelmäßig eine Sicherung an (siehe Kapitel 9).

Als App installieren

In Chrome und Edge erscheint auf der Startseite, wenn sie über https geöffnet ist, der Knopf „Als App installieren“. Danach startet die Website Sandbox wie ein normales Programm in einem eigenen Fenster und funktioniert auch ohne Internet. Unter Windows gibt es zusätzlich die Installationsdatei (Kapitel 11).

2. Die Oberfläche

• Kopfleiste: Website und Seite wählen, Ansicht (Desktop/Handy), Speicherstatus, Website-Einstellungen, Vorschau, Sichern/Laden, Export, Sprache, Vollbild, Hilfe.
• Links: die Liste der Elemente, die du auf die Seite setzen kannst, darunter gespeicherte Blöcke und die Menüpunkte.
• Mitte: die Leinwand. Hier ziehst und platzierst du alles frei.
• Rechts: die Eigenschaften des gewählten Elements (Text, Farben, Schrift, Position und Größe …).

Mit „💬 Hilfe: an“ erscheinen beim Überfahren der Knöpfe und Felder kurze Erklärungen. „⛶ Vollbild“ schaltet den Vollbildmodus ein oder aus; mit Esc beendest du ihn jederzeit.

Die Sprache der Oberfläche (DE/EN) stellst du oben mit der Auswahl „DE/EN“ um. Sie ändert nur den Editor, nicht die Texte deiner Website.

3. Die Elemente

Ein Klick auf ein Element in der linken Liste setzt es auf die Seite. Danach verschiebst du es mit der Maus und stellst im rechten Bereich alles Weitere ein.

Bildslider im Detail

• Bilder: mehrere gleichzeitig hochladen (bis 20). Zum Sortieren am Griff ⠿ ziehen; ein Klick auf das Vorschaubild zeigt das Bild auf der Fläche, mit ‹ › auf der Fläche blätterst du durch.
• Je Bild: Beschreibung (für Screenreader), Bildunterschrift, Link (andere Seite, Block, Element oder eigene Adresse) und „Ausblenden“, wenn ein Bild zeitweise nicht erscheinen soll, ohne es zu löschen.
• Übergang: Schieben, Überblenden oder Überblenden mit Zoom (langsames Heranzoomen).
• Nebeneinander: bei „Schieben“ 1 bis 4 Bilder gleichzeitig; auf dem Handy wird immer 1 Bild gezeigt.
• Automatik: mit Sekunden je Bild und Pause-Knopf. Sie hält an, solange die Maus über der Galerie steht, sie den Fokus hat oder berührt wird. Bei eingestellter „Bewegung reduzieren“ im Betriebssystem läuft sie nicht von selbst.
• Bedienung: Pfeile, Punkte oder Vorschaubilder; Wischen am Handy; Pfeiltasten, wenn die Galerie den Fokus hat.
• Vollbild-Ansicht: Ein Klick auf ein Bild ohne eigenen Link vergrößert es mit Unterschrift; Pfeiltasten und Esc funktionieren.
• Verkleinern: Große Bilder werden beim Hochladen automatisch verkleinert (längste Seite höchstens 2200 Pixel). GIF-Dateien bleiben unverändert.

Countdown

Der Countdown zählt Tage, Stunden, Minuten und Sekunden bis zu deinem Zieldatum herunter. Wähle Datum und Uhrzeit und den Zeitbezug: „Fester Zeitpunkt“ gilt für alle Besucher gleich (zum Beispiel ein Konzertbeginn), „Ortszeit des Besuchers“ zählt bis zur Uhrzeit in der Zeitzone des Besuchers (zum Beispiel Mitternacht). Nach Ablauf erscheint dein Text, etwa „Es ist soweit!“. Du kannst Einheiten ausblenden und zwischen Kästchen (mit Farbe oder Verlauf) und reinen Zahlen wählen. Ohne Skript im Browser des Besuchers zeigt die Seite nur das Zieldatum.

Icons

Im linken Bereich „Icons“ öffnet „Icons wählen“ ein Popup mit Suche. Ein Klick auf ein Symbol setzt es auf die Seite; später kannst du es rechts über „Anderes Icon wählen“ tauschen. Du stellst Farbe, Untergrund (Kreis oder abgerundetes Quadrat), Linienstärke und Link ein. Für Social Media gibt es neutrale Symbole, die du über Suchwörter wie „Instagram“ oder „YouTube“ findest. Das sind bewusst keine Markenlogos: Offizielle Logos lädst du als Bild hoch und beachtest die Markenregeln des Anbieters.

Weitere Slider-Arten

• Coverflow-Slider: Die Bilder stehen gestaffelt hintereinander, das mittlere groß vorn. Ein Klick auf ein seitliches Bild holt es nach vorn; mit Pfeilen, Punkten oder Wischen blätterst du weiter. Bilder ohne Link öffnen die Vollbild-Ansicht, wenn du sie einschaltest.
• Hero-Slider: Große Titelbilder, ideal ganz oben auf der Startseite. Je Bild trägst du Überschrift, Text und optional einen Knopf mit Ziel ein. Mit „Bild abdunkeln“ bleibt die Schrift gut lesbar, die Textausrichtung ist mittig oder links.
• Galerie-Raster: Alle Bilder stehen als Vorschaubilder im Raster (2 bis 5 Spalten, auf dem Handy höchstens 2). Ein Klick auf ein Bild ohne Link öffnet die Vollbild-Ansicht. Mit „Höhe an Bilder anpassen“ wird die Fläche genau so hoch, dass alle Bilder zu sehen sind; sonst scrollt das Raster.

Tipp: Gib Bildern immer einen Alternativtext. Er hilft Besuchern mit Screenreader und wird angezeigt, wenn ein Bild nicht lädt.

4. Positionieren und Größe

• Verschieben: Element mit der Maus anfassen und ziehen. Mit den Pfeiltasten bewegst du es um 1 Pixel, mit gedrückter Umschalttaste um einen Rasterschritt (10 Pixel).
• Größe ändern: an den Anfassern am Rand des gewählten Elements ziehen.
• Genau einstellen: rechts unter „Position und Größe“ die Werte in Pixeln eintippen.
• Reihenfolge: „Nach vorn“ und „Nach hinten“ bestimmen, was bei Überlappung oben liegt.
• Duplizieren kopiert das Element samt Einstellungen; Entf löscht es.
• Esc hebt die Auswahl auf.

Die Seite ist 1000 Pixel breit (Desktop) bzw. 390 Pixel (Handy). Nach unten wächst sie mit deinen Elementen.

5. Mehrere Elemente und Blöcke

Zieh auf der leeren Fläche einen Rahmen um mehrere Elemente, um sie gemeinsam zu markieren. Markierte Elemente verschiebst, duplizierst oder löschst du gemeinsam. Mit „Block bilden“ fasst du sie zu einem benannten Block zusammen; ein Block lässt sich als Ganzes verschieben, duplizieren und als Sprungziel eines Menüpunkts verwenden. „Block auflösen“ macht daraus wieder einzelne Elemente.

Mit „Als Vorlage speichern“ legst du einen Block unter einem Namen als wiederverwendbare Vorlage ab (z. B. eine fertige Kopfzeile oder Kontaktkarte). Über „Blöcke wählen“ in der linken Leiste fügst du gespeicherte Blöcke auf dieser Seite oder in anderen Websites ein, in der Vorschau erkennst du ihr Aussehen schon vor dem Einfügen. Gespeicherte Vorlagen lassen sich umbenennen und löschen.

Bis zu 50 Blöcke und 200 Elemente pro Website sind möglich.

6. Seiten und Menüs

Eine Website kann bis zu 20 Seiten haben. Neue Seiten legst du über „+ Neue Seite“ in der Seitenauswahl oder in den Website-Einstellungen an. Jede Seite hat einen Namen und einen Dateinamen ohne „.html“ (die erste Seite ist immer die Startseite, index.html).

Menüs bestehen aus Menüpunkten, die du links unter „Menüpunkte“ mit „+ Menüpunkt“ anlegst. Das Ziel eines Punktes kann sein:

• ein Element auf der Seite (Sprungmarke),
• ein gespeicherter Block,
• eine andere Seite deiner Website,
• der Seitenanfang,
• ein eigener Link (https://… oder mailto:…).

Das Menü-Element zeigt diese Punkte an. Form (z. B. Pille, Rechteck, Unterstrich), Farben, Abstand und Richtung stellst du in den Eigenschaften ein; auf dem Handy kann das Menü eingeklappt werden.

7. Website-Einstellungen

Mit „⚙ Website“ öffnest du die Einstellungen der ganzen Website in einem großen Fenster:

• Name und Adresse (Dateiname beim Export, ohne Leerzeichen und Sonderzeichen). Der Name erscheint nur in der Auswahl oben.
• Seiten: umbenennen, Dateinamen ändern, öffnen oder löschen.
• Design: Hintergrund-, Text- und Akzentfarbe. Elemente ohne eigene Farbe übernehmen sie.
• Hintergrundbild mit Transparenz, Darstellung (füllend oder gekachelt) und Parallax. Parallax siehst du erst auf der fertigen Seite.
• Schrift: Standardschrift der Website. Mit „Schriften ansehen“ siehst du alle Schriften mit Beispielwort. Alle Schriften sind in der App enthalten, es wird nichts von Google geladen.
• Vorlese-Knopf auf jeder Seite (unten rechts oder links), der den Seitentext mit der Stimme des Besuchers vorliest.
• Werkseinstellung: „Startseite auf Werkseinstellung zurücksetzen“ ersetzt alle Elemente der Startseite wieder durch Logo und Willkommenstext (mit Rückfrage). Andere Seiten bleiben unverändert. „Komplette Website auf Werkseinstellung zurücksetzen“ löscht dagegen alles: alle Seiten, Elemente, Menüs, Blöcke dieser Website, Farben, Schrift, Hintergrundbild und Vorlese-Knopf. Davor erscheint eine Warnung; das Zurücksetzen kann nicht rückgängig gemacht werden, lege vorher eine Sicherung an. Gespeicherte Vorlagen bleiben erhalten.
• Sprache der Website: Deutsch oder English für die festen Texte der fertigen Seite (z. B. Menü, Video-Hinweis, Vorlese-Knopf). Deine eigenen Texte schreibst du selbst.

8. Handy-Ansicht

Mit dem Schalter „Desktop / Handy“ wechselst du die Ansicht. Jedes Element hat für beide Ansichten eine eigene Position und Größe, damit die Seite am Telefon gut aussieht.

Am schnellsten geht es so: Erst die Desktop-Ansicht fertig bauen, dann in den Website-Einstellungen „Handy-Ansicht automatisch erzeugen“ drücken und die Handy-Anordnung nachjustieren. Achtung: Der Knopf überschreibt die vorhandene Handy-Anordnung aller Elemente (es kommt eine Rückfrage).

9. Vorschau, Sichern und Laden

• 👁 Vorschau zeigt die fertige Seite in einem neuen Tab, so wie Besucher sie sehen.
• 💾 Sichern speichert eine Sicherungsdatei mit allen Websites, Bildern, Videos, Musikstücken und gespeicherten Blöcken.
• 📂 Laden stellt eine Sicherungsdatei wieder her. Achtung: Das ersetzt alle Websites und Blöcke in diesem Browser (es kommt eine Rückfrage).

Sicherungsdatei ist auch dein Weg zum Gerätewechsel: auf dem alten Gerät sichern, auf dem neuen laden. In dieser Version kannst du bis zu 10 Websites anlegen.

10. Veröffentlichen: ZIP und FTP

Die Website Sandbox erzeugt eine ganz normale Website aus HTML-, CSS- und Mediendateien. Du kannst sie bei jedem Webhosting betreiben. Es gibt zwei Wege dorthin:

Weg A: ZIP herunterladen und selbst hochladen

1. Klicke auf „⬇ ZIP für Webhosting“. Du erhältst eine ZIP-Datei.
2. Entpacke sie auf deinem Rechner.
3. Verbinde dich mit einem FTP-Programm (z. B. FileZilla) mit deinem Webspace; die Zugangsdaten stehen bei deinem Hosting-Anbieter.
4. Lade den Inhalt (nicht den Ordner selbst) in das Hauptverzeichnis deiner Domain, meist „httpdocs“, „html“ oder „public_html“.
5. Rufe deine Domain im Browser auf. Die Startseite heißt index.html.

Im ZIP liegt eine LIESMICH.txt mit denselben Hinweisen.

Weg B: Direkt per FTP hochladen (nur Windows-App)

In der installierten Windows-App gibt es den Knopf „⇪ Per FTP hochladen“. Du trägst Server, Benutzername, Passwort und optional den Zielordner ein, die App lädt die fertige Website direkt auf deinen Webspace. Vorhandene Dateien mit gleichem Namen werden ersetzt, fehlende Ordner werden angelegt. Die Verbindung wird verschlüsselt (FTPS), wenn der Server das anbietet; die Einstellung „Zertifikatsfehler ignorieren“ brauchst du nur, wenn dein Anbieter ein Zertifikat für einen anderen Servernamen verwendet. Server, Benutzer und Ordner kann sich die App merken, das Passwort wird nie gespeichert.

Im Browser darf eine Webseite aus Sicherheitsgründen keine FTP-Verbindung öffnen. Dort zeigt der Knopf einen Hinweis, und du nutzt Weg A.

Neue Domains brauchen manchmal einige Stunden, bis sie erreichbar sind. Prüfe bei „Seite nicht gefunden“ zuerst, ob die Dateien direkt im Hauptverzeichnis liegen und nicht in einem Unterordner.

11. Die Windows-App

Die Datei „Website-Sandbox-Setup.exe“ installiert die Website Sandbox mit einem Doppelklick: Sie legt Verknüpfungen im Startmenü und auf dem Desktop an und trägt sich in „Apps & Features“ ein, damit du sie wie jedes andere Programm wieder entfernen kannst. Die App öffnet sich in einem eigenen Fenster (Edge oder Chrome), deine Websites bleiben auf deinem Rechner.

Die Datei ist (noch) nicht digital signiert. Windows SmartScreen zeigt deshalb beim ersten Start eine Warnung: „Weitere Informationen“, dann „Trotzdem ausführen“. Lade die Datei nur von der offiziellen Seite herunter.

12. Tastenkürzel

Die Tasten wirken nur, wenn gerade kein Eingabefeld Fokus hat.

13. Grenzen auf einen Blick

14. Häufige Fragen und Fehlerbehebung

Meine Websites sind weg.

Websites werden im Browser gespeichert. Sie sind weg, wenn Browserdaten gelöscht wurden, du ein anderes Gerät oder Profil benutzt oder einen privaten Modus verwendest. Mit einer Sicherungsdatei holst du sie zurück; deshalb regelmäßig sichern.

Die App meldet „nach 4 Sekunden nicht gestartet“.

• Die ZIP-Datei muss vollständig entpackt sein, bevor du die Dateien öffnest oder hochlädst.
• Die Dateien müssen zusammen im selben Ordner bleiben.
• Der Browser muss lokalen Speicher (IndexedDB) erlauben; im privaten Modus oder bei gesperrten Cookies/Websitedaten funktioniert er nicht. Die Meldung zeigt unten einen „Speicher-Test“ mit dem Ergebnis.
• Am sichersten ist der Betrieb über https auf deinem Webspace.

Das Video spielt nicht.

Eigene Videos müssen MP4 oder WebM sein. Bei YouTube/Vimeo-Links lädt das Video erst, nachdem der Besucher geklickt hat (Datenschutz).

Parallax-Hintergrund ist im Editor unbewegt.

Das ist normal. Der Effekt ist erst in der Vorschau und auf der fertigen Seite sichtbar.

Der Browser blockiert die Datei beim Herunterladen.

Manche Systeme blockieren .exe-Dateien. Deshalb gibt es sie als ZIP: Herunterladen, entpacken, dann starten.

15. Kontakt

Fragen, Fehler oder Wünsche? Schreib an contact@vcreate.info. Hilfreich sind: dein Browser, dein Betriebssystem und eine kurze Beschreibung, was du gemacht hast.