Editing your website's style

Written by: Ronnel DG Last updated: 16 Apr., 2026

Visual Edit is a point-and-click editing tool in the B12 AI Agent chat. It lets you adjust the look and feel of your website without writing code or asking the AI Agent for help.

Style settings work at two levels:

• Sitewide – Changes apply to every page on your website.
• Section-specific – Changes apply only to the section or element you select.

Editing sitewide styles

1. In the AI Agent chat, click Visual Edit. The style settings panel appears in the left sidebar.
2. Under Style, you'll see three settings groups: Colors, Fonts, and Effects.
3. Make your changes (see each section below for details). Changes to styles appear immediately in the editor.
4. Click Save when you're done. This process may take up to two minutes.

Changing colors

The Colors section is organized into five categories. Each controls a different part of your website's color scheme:

• • Brand – Your primary, secondary, and accent colors. These appear most prominently throughout your site.
  • Surface – Background, card, popover, and muted colors that appear behind content areas.
  • UI – Colors for interactive elements like borders, input fields, and actions (such as delete buttons).
  • Charts – Colors used in any data charts on your site.
  • Sidebar – Colors specific to your website's sidebar, if your site includes one.

Click any color swatch to open the color picker. You can select a color using one of two tabs:

• • Theme – Choose from a set of colors based on your website's current theme, including background, foreground, card, and popover colors.
  • Tailwind – Choose from preset color swatches and shade variations.
  • Custom – Pick any color using the color canvas and sliders. You can also type a specific value directly into the Hex, R, G, B, or A fields.

Changing fonts

The Fonts section lets you change the three default font styles used across your site:

• • Sans-serif – Fonts without small decorative strokes at the ends of letterforms. Generally considered clean and modern.
  • Serif – Fonts with small decorative strokes at the ends of letterforms. Generally considered traditional or editorial.
  • Mono – Fonts where every character takes up the same amount of horizontal space.
• Not all three font styles may appear on your site — which ones are used depends on your site's design theme.
• You can also use your own font:

1. In the AI Agent chat, click Visual Edit. The style settings panel appears in the left sidebar.
2. Click Fonts.
3. Select any from the Sans Serif, Serif, or Mono dropdown, then click Upload custom font.
4. Select the font file from your device.

The custom font is applied sitewide as soon as it's uploaded.

Adjusting effects

The Effects section controls two visual properties: shadow and border radius. These settings apply to elements across your site, including buttons, cards, and images.

Shadow settings let you add or adjust a drop shadow on elements across your site. Use the sliders to set the following:

• • X Offset – How far the shadow shifts horizontally.
  • Y Offset – How far the shadow shifts vertically.
  • Blur – How soft or sharp the shadow edge appears.
  • Spread – How far the shadow extends outward.
  • Opacity – How transparent the shadow is.
  • Shadow color – The color of the shadow. Click the swatch to open the color picker.

Radius controls how rounded the corners of elements appear, such as buttons, cards, and images. Drag the slider to adjust.

Editing section-specific styles

1. In the AI Agent chat, click Visual Edit. 
2. Click directly on the element in the website preview that you'd like to edit. The settings panel updates to show options for that section only. You can update the following: 
   • Text color – The color of the text within the section.
   • Background color – The color behind the section's content.
   • Background image – The background picture for the section.
3. Make your changes, then click Save when you're done.

Changing the background image

1. In the AI Agent chat, click Visual Edit. 
2. Click directly on the section in the website preview that you'd like to edit.
3. In the left sidebar, scroll to Background image. Click Choose from library.
4. Do one of the following:
   • Click Upload media to use an image from your device, or you can select a previously uploaded image from your library.
   • Click Search to browse free stock photos from Pexels.
   • Click AI Agent to generate a custom image.
5. Click Save when you're done.