# zlo — how to make a page

> zlo (https://www.zloapp.com) puts a page online in minutes: landing pages, courses, question papers, portfolios, product pages, articles, small tools. A page is either written text with markers, or one self-contained HTML file.

## Guides

- [How to make a Zlo page](https://www.zloapp.com/rules): Page creation, publishing, supported markers and HTML rules.
- [Help and support](https://www.zloapp.com/help): Find the creation guide and contact support.
- [Code Studio walkthrough](https://www.zloapp.com/help-center/code-studio): Two methods, step by step.

## Two ways to make a Zlo page

### Paste or upload a webpage
For anyone working in an AI chat
Make your page with ChatGPT, Claude or Gemini, then bring the finished webpage into Code Studio. No local project folder needed.
1. Ask your AI for a Zlo page: Share /rules or /llms.txt with your AI and describe what you want to make. Ask for a finished webpage, not instructions for building it yourself.
2. Bring the page into Create: Open Code Studio and choose Create. Paste the complete HTML, or upload the .html file. If the page has separate images or other files, ask your AI for one ZIP and upload that instead.
3. Include the pictures with the page: For a ZIP, put index.html at the top level and pictures in images/. Use relative paths such as images/hero.jpg. Zlo imports the page and its pictures together; you do not need to attach each picture separately. Keep the package under 25 MB. For pasted HTML, pictures must be embedded in the file or supplied separately through the optional Images workflow.
4. Preview and revise: Press Run to check the page. To change it, ask your AI to revise the webpage, then paste or upload the updated version and preview it again.

### Sync a local folder
For people working with local files or coding tools
Use Claude Code, Codex, Cursor or any editor to build in a folder on your computer. Link it once and keep updating the same page as you save.
1. Prepare your webpage folder: Keep index.html and the files it uses in one folder. Include pictures in that folder and reference them with relative paths, such as images/hero.jpg.
2. Link it in Sync: Open Code Studio, choose Sync, then select your webpage folder and allow the browser to read it. If there is no index.html, select the HTML page when prompted.
3. Save and check the preview: Edit your files with your coding tool and save. While Code Studio is open and linked, Sync updates the preview from the folder, including its pictures. You do not need to upload those pictures one by one.
4. Reconnect when needed: Keep the folder available on this computer. If the browser asks for access again or the folder moves, reconnect it in Sync before continuing.

After previewing, press Flash to publish and share the page link.

## Making an HTML page for zlo

### FILE
- For pasted HTML: ONE complete, self-contained HTML file. All CSS and JavaScript inline. No frameworks, CDNs or web fonts — use a system font stack.
- For a ZIP upload or local folder: index.html at the top level, with its images, CSS and JavaScript included and referenced by relative paths. A ZIP contains one HTML page; keep the package under 25 MB.
- Give the page a clear <title> and a one-sentence <meta name="description"> saying what it is. Zlo uses them for the shared link's preview and for search; the preview picture is the cover the creator picks in Zlo, so no og: tags are needed.

### IMAGES
- For ZIP uploads and folder sync, include the actual images in images/ and use relative paths such as <img src="images/hero.jpg" alt="…">. Zlo imports these pictures with the page; no separate image attachment step is needed.
- For pasted HTML, embed the pictures in the file. If the creator explicitly wants to add pictures separately in Zlo, use numbered spots: <img src="[img01]" alt="…">, <img src="[img02]" alt="…">. In CSS: background-image: url([img01]). The following spot rules apply only to that optional workflow.
- Write every spot out literally in the HTML/CSS — never build the name in JavaScript (no "[img" + n + "]"). A gallery of 6 lists [img01] … [img06].
- Number the spots in the order they appear on the page, top to bottom, starting at [img01].
- For numbered spots, do not substitute stock photos or placeholder services. The creator supplies the real pictures in Zlo. Packaged pages instead use the actual included image files.
- Put each image in a box with a fixed shape (aspect-ratio or a set height) and object-fit: cover, so any picture — tall, wide or square — fits without breaking the layout.

### INTERACTION
- Anything the user drags, swipes or rotates (sliders, carousels, 3D objects, maps): set draggable="false" and -webkit-user-drag: none on its images and links, touch-action: none on the draggable area, and call preventDefault() in its pointerdown handler — so the browser never picks up an image instead of the gesture.
- Links to other sites open in a new tab: target="_blank" rel="noopener".

### LIMITS
- It must work on phones and computers (responsive, no horizontal scrolling).
- The page runs inside a frame: don't rely on localStorage, cookies or saved progress, and don't change the parent page.
- No upload forms or file pickers — the page can't save anything.

For pasted HTML, return only the HTML starting with <!doctype html>. For an upload, return the requested HTML file or ZIP package.

## Optional: writing a text page with markers

- `[img01]` — The 1st picture in Images, right here. [img02] is the 2nd, and so on — drag the tiles to change the order.
- `[img01*2]` — The same picture, bigger (*0.5 for smaller).
- `[slide 01-04]` — Pictures 1 to 4 as a swipeable slideshow ([slide 01,03,05] picks some).
- `[banner: img01] Caption` — A picture as a full-width banner, with a caption.
- `[card: https://…] Name — description` — A link as a card with the page's own picture (and its price, when the shop shows one).
- `[banner: https://…]` — A link as one big full-width card.
- `[vid01]` — An uploaded video, playing in the page.
- `[3d01]` — An uploaded 3D model you can turn around.
- `[file01]` — A file — a PDF shows as pages; [file01-03] puts several in one row.
- `| a | b |` — Tables, numbered lists, **bold**, headings (#) and links work as in any document.

## What people build

- Landing pages & funnels: One page that sells one thing — headline, pictures, price and a Buy button.
- Courses & lessons: Lessons as items in a project, with files, videos and tasks people can hand in.
- Question papers & quizzes: A paper as a PDF or a page; students answer on it and you see every entry.
- Portfolios: Your work as a project, every piece its own page with a cover on the Wall.
- Product & shop pages: Product cards with pictures, prices and a button to your payment link.
- Articles & guides: Write like a document — headings, lists, tables, pictures in between.
- Events & announcements: Date, place, pictures and one link — live in a minute, shared everywhere.
- Small tools & games: A calculator, a quiz, a 3D model — any single-file web page runs as it is.

## Questions

- What is zlo? zlo puts webpages online: landing pages, courses, portfolios, product pages and more. Paste or upload a webpage from your AI chat, or sync a local folder. Preview it, then Flash it live.
- Do I need to code? No. Write in plain text with a few markers like [img01] for pictures, or let an AI write the page and paste it in.
- How do my pictures get into the page? Include pictures with the webpage: upload a ZIP containing index.html and its images, sync a local folder containing both, or embed pictures in pasted HTML. Separate Images tiles and [img01] markers are optional for manually added pictures.
- Can I use ChatGPT, Claude or Gemini? Yes. Share /rules or /llms.txt with your AI. Paste or upload the webpage it makes; use a ZIP when images are separate files. If you work with a local coding tool, sync its webpage folder instead.
- How do I publish? Press Flash. The page goes live on the Wall with its own short link you can share anywhere.
- Can people pay or hand in work? Yes. Turn on Price to show a price with a button to your payment link, or Accept submissions to collect answers with a deadline and results.

Full guide: https://www.zloapp.com/rules