How to edit an AI-generated website by hand

A website made with TeleportHQ's AI is a normal, fully editable project, and editing it by hand uses no AI tokens. To change something everywhere at once, edit the saved colors, fonts and spacing in the Design Language panel, or edit a shared CSS class. To change one element, select it and use the style panel on the right.

Before you start#

• Your role needs permission to edit design values and CSS classes. See What can each role do? (Admin, Designer, Editor, Viewer).
• Close the AI Assistant if it's open (Back To Dev Mode). While the chat is open, it takes the place of the right panel.

Change colors, fonts and spacing everywhere#

When the AI Website Builder creates your site, it saves the colors, text sizes, spacing and other values it chose, and uses them across all pages. Change one value and every place that uses it updates.

1. In the TeleportHQ editor, press Esc or click an empty part of the canvas, so nothing is selected. The Design Language panel appears on the right.
2. Open a tab: Color, Text, Layout or Vars.
3. Find the value you want to change. The AI's colors appear on the Color tab under AI Generated. All AI values are also listed on the Vars tab.
4. Click the value to edit it. A small panel opens with its name and value. For example, pick a new shade for your brand color.
5. Click Update (or press Enter in the name field) to save.

For details, see What is the Design Language panel?, How to create and edit your site's colors and How to use CSS variables (Vars).

Change a style shared by many elements (CSS classes)#

The AI gives similar elements the same CSS class, so all your buttons or cards share one style. Editing the class changes all of them.

1. On the canvas, click an element that uses the class, for example a button.
2. In the right panel, find the Classes section.
3. On the class row, click Edit class.
4. Change the properties you want, for example the background color or corner radius.

Classes the AI created are grouped under the AI Generated category on the Classes tab of the Design Language panel. See How to edit a CSS class.

Change one element#

1. On the canvas, click the element.
2. In the right panel (style panel), change its size, spacing, colors, text style, borders or other settings.

Styles you set on one element override its class, so only that element changes. See How the style panel works (and where values come from).

Check that it worked#

Your changes appear on the canvas right away. A change to a saved value or a class shows on every page that uses it. Publish your site to see the changes live.

Good to know#

• Manual edits and AI edits mix freely. You can edit by hand, then ask the AI Assistant for more changes. New AI work uses your project's current design values.
• To switch the whole color set at once, see How to choose a color theme (and light or dark mode).
• To swap a picture, select the image and pick another from the Assets Manager. See What is the Assets Manager?.
• If you do want AI help later, see How to get better results from TeleportHQ's AI.