Editing your B12 website

After generating your site, you have three tools available for making changes. Each one is suited to different kinds of edits, knowing which to reach for saves time and AI credits. This article explains when to use each tool, then walks you through the most common editing tasks.

Choosing your editing tool

Here's a quick overview of what each editing tool does and when it works best.

	AI Agent	Visual Edit	Code editing
How you use it	Describe what you want in the chat	Click directly on elements in the preview	Edit HTML or CSS directly
Best for	Broad or structural changes: rewrites, layout shifts, multi-section updates	Targeted changes to a specific element: text, image, style, or form	Precise layout or styling control
Uses AI credits	Yes	No - Left sidebar changes Yes - AI messages and Image generation	No
Requires coding	No	No	Yes

Changing your site's look and feel

Style changes, such as colors, fonts, shadows, and backgrounds , can be made through the AI Agent or Visual Edit, depending on the scope of the change.

Using the AI Agent

For sweeping style changes across your entire site, describe what you want in the AI Agent chat. This is the fastest approach when you want to overhaul your color scheme or overall design direction.

Change my color scheme to [primary color] and [secondary color]. Keep the fonts the same.

Using Visual Edit

For precise control over individual colors, fonts, or effects, use Visual Edit's style panel.

1. In the AI Agent chat, click Visual Edit. The style settings panel appears in the left sidebar.
2. Under Style, adjust Colors (brand, surface, and UI colors), Fonts (sans-serif, serif, and monospace), or Effects (shadow and border radius). These changes apply sitewide.
3. To change the style of a specific section, click directly on it in the preview. You can update the text color, background color, or background image for that section only.
4. Click Save when you're done. Style updates may take up to two minutes to appear.

For a full walkthrough of every style setting, see Editing your website's style.

Updating text and content

Text edits range from a single word fix to a full page rewrite. Choose your approach based on the scope of the change.

Using the AI Agent

Use the AI Agent when you want to rewrite a section, add or remove content, or update copy across multiple areas at once. Be specific about what to change. and tell the Agent what to leave alone.

Rewrite the hero headline to: "[your headline]". Update the subheadline to: "[your subheadline]". Don't change anything else on the page.

Update the Services section to list these three services: [service 1], [service 2], and [service 3]. Give each a short description.

Using Visual Edit

For a quick fix to a specific heading, paragraph, or button label, Visual Edit is faster and uses no credits.

1. In the AI Agent chat, click Visual Edit.
2. Click the text element you want to change. A settings panel appears in the left sidebar.
3. Update the text directly. You can also adjust typography: font, size, weight, alignment, and more.
   Or send a message to the AI agent to generate or edit your text. Credits usage will apply. 
4. Click Save when you're done.

For a full guide to Visual Edit text options, see Left sidebar editing in B12 3.0.

Swapping or adjusting images

Image changes can be handled through Visual Edit. Click any image in the preview to open its settings panel.

Generating an image

Use the AI Agent to generate a custom image by typing a prompt in the chat. A good prompt includes the action, location on your site, and a description of the image's style and subject.

Use this structure:

Generate a [style] [illustration/photo] of [subject] and [action + location]

Example:

Generate a warm professional photo of a financial advisor at a desk and replace the hero image on my homepage.

Replacing an image with the AI Agent

1. In the left sidebar, select Visual Edit.
2. Click the image you want to replace. A pop-up will appear.
3. In the Ask AI Agent for quick change, type a description starting with "Generate an image of..." then click the up arrow.

The AI Agent automatically generates and replaces the image.

Replacing an image in the left sidebar

1. In the AI Agent chat, click Visual Edit.
2. Click the image you want to replace, then select Replace in the settings panel.
3. Choose your source: Library to upload from your device or reuse a previously uploaded image, Search to browse free stock photos from Pexels, or AI Agent to generate a custom image.
4. Click Save.

Editing an image

To crop, rotate, or apply a filter to an existing image, click the image in Visual Edit mode and select Edit. Make your adjustments, then click Save.

To add alt text (a description that improves accessibility and SEO), click the image and select Metadata.

For a full walkthrough, see Adjusting images with Visual Edit.

Advanced code editing

If you're familar with code and you want exact control over content, spacing, layout, or styling, you can edit your site's code directly. B12 generates real HTML and CSS, so code changes give you full precision.

There are two ways to reach the code editor:

For a specific element — turn on Visual Edit, click the element you want to adjust, then select Edit Code from the popout. The editor opens directly at the code that controls that element.

For sitewide changes — click Code at the top of the website preview to open the full code editor. Click Save when done; changes aren't applied until you save.

For a full guide, see Editing your website's code.

Undoing changes

Every change you make through the AI Agent, Visual Edit, or the code editor creates a restore point automatically. You can revert to any earlier version of your site at any time, without using credits.

1. In the AI Agent chat, find the message linked to the change you want to undo.
2. Click Restore.

Frequently asked questions

→Which editing method should I use?

⇒It depends on the type of change. Use the AI Agent for broad or structural edits that span sections or pages. Use Visual Edit for targeted changes to a single element — text, image, style, or form. Use code editing when you need exact control and are comfortable with HTML and CSS.

→Does Visual Edit use AI credits?

⇒No — changes made through Visual Edit don't use AI credits. The one exception is generating a new image using the AI Agent option in the image replacement panel, which does use credits.

→Can I undo a code edit?

⇒Yes. Every saved code edit creates a restore point automatically. Find the corresponding entry in the AI Agent chat and click Restore to revert.

→What's the difference between Visual Edit and the AI Agent?

⇒Visual Edit lets you click directly on an element and edit it using AI or with B12's built-in editing tool. The AI Agent lets you describe what you want in plain language and handles the implementation, including changes that span multiple sections or pages. Many edits can be done either way — use whichever feels more natural for the task.