SYNTHLUCIDAWEBZENith — Build a website easily and quickly — no coding, for FREE.
🏠 Home
Guide
📖 This is a quick overview of the main features. The complete, detailed manual is at synthlucida.com/webzen-manual-en.html.

SYNTHLUCIDA WEBZENith is a simple website generator — anything from a one-page site to a site with multiple subpages. You fill in a form on the left, and see a live preview on the right straight away. There's no coding involved — at the end you download a ready-made, working HTML file (or several files, if you also have custom subpages) that you just upload to any hosting. It's great for a personal website, a product showcase, a service page, or a landing page.

Getting started

At the top, fill in the Website name, the Domain (used in links for search engines and social media), and the page Title + Description for SEO. In the Site icons section, upload a single image (a logo or icon) — the app generates the favicon, apple-touch-icon, and both PWA icons from it automatically; just adjust the crop with the sliders and click "Apply crop and generate icons". Then set up the Hero section — the main heading and subheading that visitors see first.

CTA buttons and visual

Below the hero text you can add one or more buttons — each can link to a section of the site, a custom URL, or the FAQ. For each one you can set whether it's primary (bold) or secondary, and whether it opens in a new tab. You can optionally add an image to the hero section too — either by uploading a file or by pasting a URL — and it's a good idea to add alt text (it helps both SEO and accessibility).

Video and audio

The optional "Video / Audio" section adds a playable video and/or audio recording to the main page (after Cards/Features). For video you can pick a YouTube/Vimeo link (automatically converted to an embedded player) or your own file/URL (.mp4, .webm). Audio works the same way — upload a file or paste a URL (.mp3, .wav). Both can have an optional caption above the player.

Appearance — style, colors, fonts, and layout

The fastest way to set the overall style (colors + fonts together) is through the ready-made presets in the "Website style" section, then fine-tune the result manually in Colors (accent, glow, and two background colors) and Fonts (a separate choice for headings and body text). The "Website layout" section controls arrangement, not color — for the hero section you can choose centered, split into two columns (image left/right), left-aligned, image as full background, or boxed (text and image in a card with a shadow, centered); for cards/features you can choose a grid, a list, numbered steps, or a minimal borderless style.

Navigation

In the Navigation section you turn on/off and rename the links to Hero, Features, and FAQ in the site's left-hand menu. The "Show custom pages in menu" option determines whether custom pages (see below) are automatically added to the menu on every page, or whether you link to them only manually via buttons and cards. Further down in the same section you can add social media icons (Instagram, Facebook, TikTok, YouTube, email…) — they appear as a bottom row in the left-hand menu on every page.

Custom pages

In the "Custom pages" section you add extra subpages for your site — each one is exported as its own separate .html file (named after the menu text, e.g. about-us.html) with its own URL, <title>, meta description, and canonical/OG tags, which is better for SEO and link sharing than hidden sections within one file. For each page you choose a type: Simple (heading + text, optional image — as before) or Landing (its own hero, subtitle, optional button, and feature cards). If showing in the menu is enabled, the page appears automatically as an item in the left-hand menu on every page; otherwise you have to link to it manually — both CTA buttons and clickable cards can point to a specific custom page. Sitemap.xml then automatically includes the URLs of all custom pages.

Cards, FAQ, contact form, and footer

In the Cards / features section you describe individual benefits or services (icon, heading, text). In the FAQ section you add frequently asked questions and answers — structured data for Google is automatically generated from them too. The optional "Contact form" section adds a form to the main page (after FAQ) with a choice of where submissions go — Formspree, Web3Forms, Netlify Forms (only works when hosted on Netlify), or a plain "mailto" with no third-party service; you can also add an optional Phone field and a required consent checkbox for personal-data processing with your own wording. In the Footer you set whether to show "© year brand", an optional custom text (e.g. business ID, address), and links (terms of service, contact, etc.).

PWA, sitemap, and robots.txt

Further down you'll find advanced options: generating manifest.json and sw.js, which let visitors "install" the site as an app (PWA); plus sitemap.xml and robots.txt for search engines. These files can also be downloaded separately with their own buttons, but they're now included in "Download entire site" from the menu too, so there's no need to handle them by hand. The generated sw.js automatically accounts for the main page under both its actual downloaded file name and "index.html", and likewise for the manifest and icons you set above, so the offline cache works no matter whether you rename the main page on your hosting. The icon images themselves (favicon, apple-touch-icon, 192×192, 512×512, OG image) are generated in the "Site icons" section — just upload one image and adjust the crop, the app prepares every size and correct filename itself.

404 page, cookie banner, and GDPR page

The "404 page" section generates a standalone 404.html file, which most hosts (Netlify, GitHub Pages, Vercel…) automatically show instead of the browser's generic error page for a non-existent address — it's downloaded separately with its own button and is deliberately excluded from search indexing. "Cookie banner" shows a one-time notice at the bottom of the page (remembered in the visitor's browser) — if your Footer has a link whose label contains "privacy", "personal", "gdpr", or "cookie", the banner automatically links to it. The "GDPR / Privacy Policy" section generates a privacy.html page whose text automatically adapts to whether — and which — service your contact form uses. It's a general template, not legal advice, so depending on your site you may need to expand it or have it checked by a lawyer.

Custom code (advanced)

The "Custom code" section lets you add your own CSS, code for <head> (e.g. verification codes, custom fonts), and code before </body> (e.g. a chat widget or tracking script) — it's inserted on the main page, all custom subpages, and the 404 page, so you only need to fill it in once. Whatever you type here goes into the site exactly as written, with no validation, so a mistake in the code can break the page.

Mobile preview

On the right you can switch the preview between Desktop and Mobile, so you can see how the site will look on a phone. If you're editing the site directly from a mobile device, a "Edit content / Site preview" switch appears at the top for more comfortable work on a small screen.

Saving work in progress

The app continuously auto-saves your work in progress to the browser (localStorage), so you won't lose anything if you close the tab. Using "💾 Save project" you can also download a .json file with the whole site in progress and later re-open it via "📂 Load project" — for example on another computer. The "🗑️ New project" button resets everything back to the sample text.

Exporting the finished site

The "↓ Download" button at the top right opens a menu with two options: "Download HTML" downloads just the main page as a single .html file, and "Download entire site" downloads the main page and all custom pages at once, each as a separate file (one after another). Upload all the downloaded files together to any hosting — you can keep the main page under its downloaded name, or rename it to index.html if you want the site to load at the bare domain without a file name in the address; the PWA offline cache works automatically either way. If you're also using PWA, sitemap/robots.txt, the 404 page, or the GDPR page, download those files separately using the buttons in their own sections and upload them alongside the rest.

🌿

Time for a break

You've been building your website for a while — take a break and try Relax Player. A few minutes of calm won't hurt.

Preview:
Edit text
Changes are saved right away. Close with the Esc key, by clicking outside the window, or with the Close button.