Manual

1. Getting started

Open the editor with “Open app” or “Start in the browser” on the home page. You immediately see the factory-setting start page: the logo and the heading “Welcome to your website”. Every newly created website gets the same start page. Everything you change is saved automatically; next to the page selector at the top, “Saved” shows that nothing gets lost.

Your websites are stored only in your browser (not on a server). Two consequences: you need no account, but if you clear your browser data or work on another device, they will not be there. So create a backup regularly (see chapter 9).

Install as an app

In Chrome and Edge, the home page shows an “Install as app” button when it is opened over https. Website Sandbox then starts like a normal program in its own window and also works without internet. On Windows there is also an installer file (chapter 11).

2. The interface

• Top bar: choose website and page, view (Desktop/Mobile), save status, website settings, preview, backup/load, export, language, fullscreen, help.
• Left: the list of elements you can place on the page, below it saved blocks and the menu items.
• Middle: the canvas. Drag and place everything freely here.
• Right: the properties of the selected element (text, colours, font, position and size …).

With “💬 Help: on”, short explanations appear when you hover over buttons and fields. “⛶ Fullscreen” switches fullscreen mode on or off; Esc ends it at any time.

You change the interface language (DE/EN) with the “DE/EN” selector at the top. It only changes the editor, not the texts of your website.

3. The elements

A click on an element in the left list puts it on the page. Then move it with the mouse and set everything else in the right-hand panel.

Image slider in detail

• Images: upload several at once (up to 20). Drag the ⠿ handle to reorder; clicking the thumbnail shows the image on the canvas, and ‹ › on the canvas lets you browse.
• Per image: description (for screen readers), caption, link (another page, block, element or your own address) and “Hide” if an image should temporarily not appear without deleting it.
• Transition: slide, fade or fade with zoom (slow zoom-in).
• Side by side: with “Slide” 1 to 4 images at once; on phones always 1 image is shown.
• Autoplay: with seconds per image and a pause button. It pauses while the mouse is over the gallery, it has focus or is touched. If “reduce motion” is set in the operating system, it does not advance by itself.
• Controls: arrows, dots or thumbnails; swiping on phones; arrow keys when the gallery has focus.
• Full-screen view: a click on an image without its own link enlarges it with caption; arrow keys and Esc work.
• Shrinking: large images are shrunk automatically on upload (longest side at most 2200 pixels). GIF files stay unchanged.

Countdown

The countdown counts days, hours, minutes and seconds down to your target date. Choose date and time and the time reference: “Fixed moment” is the same for all visitors (for example a concert start), “Visitor's local time” counts down to that time in the visitor's time zone (for example midnight). After the end your text appears, such as “It's time!”. You can hide units and choose between boxes (with colour or gradient) and plain numbers. Without scripts in the visitor's browser the page shows only the target date.

Icons

In the left “Icons” section, “Choose icons” opens a popup with search. One click on a symbol puts it on the page; later you can swap it on the right with “Choose another icon”. You set colour, background (circle or rounded square), line weight and link. For social media there are neutral symbols that you find with search words such as “Instagram” or “YouTube”. They are deliberately not brand logos: upload official logos as an image and follow the provider's brand rules.

More slider types

• Coverflow slider: The images are staggered one behind the other, the middle one large in front. Clicking a side image brings it forward; use arrows, dots or swipe to move on. Images without a link open the full-screen view if you turn it on.
• Hero slider: Large cover images, ideal at the very top of the home page. For each image you enter a heading, text and optionally a button with a target. “Darken image” keeps the text readable; text alignment is centered or left.
• Gallery grid: All images appear as thumbnails in a grid (2 to 5 columns, at most 2 on mobile). Clicking an image without a link opens the full-screen view. “Fit height to images” makes the box exactly tall enough to show all images; otherwise the grid scrolls.

Tip: always give images an alt text. It helps visitors with screen readers and is shown when an image fails to load.

4. Positioning and size

• Move: grab the element with the mouse and drag. The arrow keys move it by 1 pixel, with Shift held by one grid step (10 pixels).
• Resize: drag the handles on the edge of the selected element.
• Exact values: type pixel values under “Position and size” on the right.
• Order: “Bring to front” and “Send to back” decide what is on top when elements overlap.
• Duplicate copies the element with its settings; Delete removes it.
• Esc clears the selection.

The page is 1000 pixels wide (desktop) or 390 pixels (mobile). It grows downward with your elements.

5. Multiple elements and blocks

Drag a frame around several elements on the empty canvas to select them together. Selected elements can be moved, duplicated or deleted together. “Create block” combines them into a named block; a block can be moved and duplicated as a whole and used as the target of a menu item. “Ungroup block” turns it back into single elements.

With “Save as template” you keep a block under a name as a reusable template (for example a finished header or contact card). Use “Choose blocks…” in the left bar to insert saved blocks on this page or in other websites; the preview shows how a block looks before you insert it. Saved templates can be renamed and deleted.

Up to 50 blocks and 200 elements per website are possible.

6. Pages and menus

A website can have up to 20 pages. Create new pages with “+ New page” in the page selector or in the website settings. Each page has a name and a file name without “.html” (the first page is always the home page, index.html).

Menus consist of menu items, which you create on the left under “Menu items” with “+ Menu item”. The target of an item can be:

• an element on the page (anchor),
• a saved block,
• another page of your website,
• the top of the page,
• your own link (https://… or mailto:…).

The Menu element displays these items. Shape (e.g. pill, rectangle, underline), colours, spacing and direction are set in the properties; on phones the menu can be collapsed.

7. Website settings

With “⚙ Website” you open the settings of the whole website in a large window:

• Name and address (file name on export, no spaces or special characters). The name only appears in the selector at the top.
• Pages: rename, change file names, open or delete.
• Design: background, text and accent colour. Elements without their own colour inherit them.
• Background image with transparency, display (fill or tiled) and parallax. You only see parallax on the finished page.
• Font: default font of the website. “View fonts” shows all fonts with a sample word. All fonts are included in the app, nothing is loaded from Google.
• Read-aloud button on every page (bottom right or left) that reads the page text with the visitor’s voice.
• Factory settings: “Reset home page to factory settings” replaces all elements of the home page with the logo and welcome text again (with confirmation). Other pages stay unchanged. “Reset complete website to factory settings”, in contrast, deletes everything: all pages, elements, menus, blocks of this website, colours, font, background image and read-aloud button. A warning appears first; the reset cannot be undone, so create a backup beforehand. Saved templates are kept.
• Website language: German or English for the fixed texts of the finished page (e.g. menu, video notice, read-aloud button). You write your own texts yourself.

8. Mobile view

The “Desktop / Mobile” switch changes the view. Each element has its own position and size for both views so that the page looks good on a phone.

The quickest way: finish the desktop view first, then press “Generate mobile view automatically” in the website settings and fine-tune the phone layout. Note: the button overwrites the existing phone layout of all elements (you will be asked to confirm).

9. Preview, backup and load

• 👁 Preview shows the finished page in a new tab, as visitors will see it.
• 💾 Backup saves a backup file with all websites, images, videos, music tracks and saved blocks.
• 📂 Load restores a backup file. Note: this replaces all websites and blocks in this browser (you will be asked to confirm).

The backup file is also your way to switch devices: back up on the old device, load on the new one. In this version you can create up to 10 websites.

10. Publishing: ZIP and FTP

Website Sandbox produces an ordinary website made of HTML, CSS and media files. You can run it on any web hosting. There are two ways to get it there:

Way A: download a ZIP and upload it yourself

1. Click “⬇ ZIP for web hosting”. You get a ZIP file.
2. Unzip it on your computer.
3. Connect to your web space with an FTP program (e.g. FileZilla); the login details are provided by your hosting company.
4. Upload the contents (not the folder itself) to the root directory of your domain, usually “httpdocs”, “html” or “public_html”.
5. Open your domain in the browser. The start page is index.html.

The ZIP contains a LIESMICH.txt (German) with the same notes.

Way B: upload directly via FTP (Windows app only)

The installed Windows app has the button “⇪ Upload via FTP”. Enter server, username, password and optionally a target folder; the app uploads the finished website straight to your web space. Existing files with the same name are replaced, missing folders are created. The connection is encrypted (FTPS) if the server offers it; you only need “Ignore certificate errors” if your provider uses a certificate for a different server name. The app can remember server, user and folder; the password is never stored.

For security reasons a web page in a browser may not open FTP connections. There the button shows a notice and you use way A.

New domains sometimes need a few hours before they are reachable. If you see “page not found”, first check that the files are directly in the root directory and not in a subfolder.

11. The Windows app

The file “Website-Sandbox-Setup.exe” installs Website Sandbox with a double-click: it creates shortcuts in the Start menu and on the desktop and registers itself under “Apps & features” so you can remove it like any other program. The app opens in its own window (Edge or Chrome); your websites stay on your computer.

The file is not (yet) digitally signed, so Windows SmartScreen shows a warning on first start: “More info”, then “Run anyway”. Only download the file from the official page.

12. Keyboard shortcuts

The keys only work when no input field has focus.

13. Limits at a glance

14. FAQ and troubleshooting

My websites are gone.

Websites are stored in the browser. They are gone if browser data was cleared, you use another device or profile, or a private mode. A backup file brings them back, so back up regularly.

The app says it did not start after 4 seconds.

• The ZIP file must be fully unzipped before you open or upload the files.
• The files must stay together in the same folder.
• The browser must allow local storage (IndexedDB); it does not work in private mode or with blocked site data. The message shows a “storage test” with the result at the bottom.
• The most reliable way is to run it over https on your web space.

The video does not play.

Your own videos must be MP4 or WebM. With YouTube/Vimeo links the video only loads after the visitor has clicked (privacy).

The parallax background does not move in the editor.

That is normal. The effect is only visible in the preview and on the finished page.

The browser blocks the file when downloading.

Some systems block .exe files. That is why it is offered as a ZIP: download, unzip, then start.

15. Contact

Questions, bugs or wishes? Write to contact@vcreate.info. Helpful details: your browser, your operating system and a short description of what you did.