--- title: Editing your B12 website description: Learn how to edit your B12 website using the AI Agent, Visual Edit, and code editor to update content, style, and images. --- [Skip to content](https://support.b12.io/en/v3/editing-your-b12-website#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [Getting started](https://support.b12.io/en/getting-started?hsLang=en) 3. [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) # Editing your B12 website ## Learn how to use the AI Agent, Visual Edit, and code editing to update your site's content, style, and images. | ![ronnel](https://support.b12.io/hs-fs/hubfs/Ronnel%20DG.png?width=60&height=60&name=Ronnel%20DG.png) Written by: Ronnel DG Last updated: 12 Sep., 2026 | | --- | 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 | **Tip:** Visual Edit is the fastest option for targeted fixes, and left sidebar changes don't use any AI credits. Use the AI Agent when you need to generate copy or images, when a change spans multiple sections or pages, or when you want the AI to decide how to implement. ### 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](https://support.b12.io/en/v3/editing-your-websites-style?hsLang=en). ### 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 ![ai-sparkle](https://support.b12.io/hubfs/B12%20UI%20Icons/Editing/ai-sparkle.svg) 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](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0?hsLang=en). ### 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. **Note:** Generating an image uses [AI credits](https://support.b12.io/en/ai-message-credits?hsLang=en). #### 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. **Note:** Generating an image uses [AI credits](https://support.b12.io/en/ai-message-credits?hsLang=en).   #### 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`. **Note:** Generating an image with the AI Agent uses AI credits. Replacing from your library or from Pexels does not. See [AI credits](https://support.b12.io/en/ai-message-credits?hsLang=en) for details. #### **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](https://support.b12.io/en/v3/editing-images?hsLang=en). ### 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. **Warning:** Incorrect code edits can break your site's layout or functionality. Make one change at a time and be ready to restore a previous version if something goes wrong. 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](https://support.b12.io/en/v3/editing-your-websites-code?hsLang=en). ### Undoing changes Every change you make through the AI Agent, Visual Edit, or the code editor creates a restore 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`. **Tip:** You can restore versions in any order, including returning to a more recent version after reverting. If the first restore doesn't solve the problem, try a different version. ### 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 automatically saves the current state as a version. 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. - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×