You can use the B12 Editor to edit your AI website draft and add your content and copy. The B12 Editor is also where you’ll update your website once it’s launched.
Want help? If you’re unsure how to build a website on your own, you can have one of B12’s expert designers build your website for you. Click here to schedule your design consultation call.
Before you begin
- The B12 Editor saves all changes you make automatically, so you don’t need to worry about losing your work.
- Use a laptop or desktop to access the B12 Editor. The B12 Editor doesn’t support editing from a phone or tablet.
Getting to know the B12 Editor
The B12 Editor has two main areas:
The left side is your Home Menu, where you can manage and edit everything related to your B12 website. The Home Menu includes:
- Account - Update your account and billing information.
- Pages - A list of your website’s pages, starting with your homepage.
- Website - Tools to manage your website’s style, online presence, custom domains, and more.
- Your business - Set your availability for appointments with customers and send email blasts to your contacts.
- Need help? panel - Submit a request for an expert to build your website for you.
The right side is your website preview. It includes:
- Device - A dropdown menu that shows how your website appears on different devices, such as desktop and mobile.
- Support - Click Support to view our helpful guides on how to use your B12 website and account.
- Choose a plan - Select an annual or monthly subscription.
- Website preview - An editable preview of your site. Click anywhere in the preview to open up that section in the Edit Panel.
- Ask for help - Open up a chat with member of our support team.
After subscribing, Preview and Publish buttons will replace the Choose a plan button in the top-right corner.
- Preview - Creates a link to your website that is hidden from public view. You can share this link with friends or colleagues to show them edits you’ve made without publishing these changes to your live website.
- Publish - Makes your website preview live and findable online. Publish every time you make edits you want everyone to see.
The Edit panel
Clicking on a section in the website preview turns your Home Menu into the Edit panel. The Edit panel is where you make edits.
To return to your Home Menu, you can either click the Home icon ⌂ or the Back arrow in the top corner.
You can enable expert mode to unlock advanced editing features. These features include additional settings knobs, layout titles, appearance options, and device views.
To enable expert mode, while on the Home Menu:
- Click Account.
- In the dropdown menu, click Enable expert mode.
Understanding your website’s structure
Websites are an organized set of one or more pages. Some of these pages will be linked in your header, also known as the navigation menu, helping visitors move around your website.
Pages are made up of individual sections. You can build and organize your website by adding pages, creating sections within those pages, and then adding page links to your header.
Adding pages and sections
To add a page or section, go to the Home Menu and follow these steps:
To add a page:
- Click Add page.
- Select the type of page you want, such as About or Services.
After adding a page, help your visitors find it by adding it as a link to your header.
To add a section:
- Click the page where you want to add a section.
- Click Add section.
- Select the type of section you want.
- Select a layout.
Note: New sections are added to the bottom of your page. Read this guide to rearrange the order of your sections.
Hiding pages and sections
You can hide pages or sections that you don’t want shown on your live website. This is a great option for pages or sections you’re still building.
To hide a page or section:
- Click the page or section you want to hide.
- Click Actions.
- Click Hide.
To show a hidden page or section:
- Click the hidden page or section you want to show.
- Click Actions.
- Click Show.
Deleting pages and sections
Only delete pages or sections you’re certain you’ll no longer need. If you think you might use this page or section again in the future, we recommend hiding it instead.
- Click the page or section you want to delete.
- Click Actions.
- Click Delete.
Note: If you accidentally delete a page or section, you can recover it by restoring your website to a past version.
Edit existing sections on your website to rewrite placeholder copy, add images, or make other changes.
To edit a section, click on it in the website preview. The Edit panel will appear on the left side.
- Click the section with the text you want to edit.
- Edit the text in the corresponding textbox in the Edit panel.
Editing text in the textbox is similar to editing a Word doc. You can delete, replace, and style the text however you want.
You can upload your own images or choose from thousands of stock images in the B12 Editor.
- Click the section with the image you want to replace.
- In the Edit panel, under the image thumbnail, click Replace.
- To use an image you own, click Upload media, select the image file from your computer, and click Continue.
- To use a stock image, click Search, search for an image by subject, select an image, then click Continue.
To remove an image, click the 𝗫 in the top corner of the thumbnail.
Tip: To add a collection of images, add a Gallery page or section.
Changing a section’s layout
To change the layout of a section, click Change layout, then pick from the options presented. Different layouts come with different features, so feel free to experiment until you find the right one.
Styling your website
You can apply style changes, like new themes, colors, or fonts to your entire website to save time over editing each section individually. To make changes to your entire website’s style, read Changing Website Theme, Colors, and Fonts.
To change the style an individual section, scroll down the Edit panel to see style options for:
- Buttons & links - Change button size and colors.
- Images - Change an image’s shape and size.
- Background - Add and style a background image.
- Alignment - Align a section's content left, right, or center.
- Order & positioning - Change the order of content in that section.
Tip: Enable expert mode for more styling options for sections.
Launching your website
Now that your website looks great, it's time to get it online by launching your website.