Get started with Template Editor v2

Template Editor v2 lets you design your help center while watching the result in a live preview. You can update your brand, choose a starter theme, arrange every page, add components, manage navigation, and test different screen sizes before publishing.

Open the Template Editor

1. Sign in to HelpCenter.io and select your help center.
2. Select Template Editor from the dashboard navigation.
3. If your help center still uses the classic editor, select Try the new editor from the customization page. Your live site remains on the classic design until you publish from v2.

Find your way around

The editor has three main areas:

• Toolbar: leave the editor, check the save status, undo or redo changes, reset the draft, publish, or hide the settings panel.
• Live preview: see the page your visitors will get. Use the controls above it to switch device size and color mode.
• Settings panel: move between Brand, Theme, Theme gallery, Pages, Navigation, Advanced, and Version history.

Understand drafts and publishing

Changes are saved automatically to a private draft. The save status in the toolbar changes while the editor is saving and returns to All changes saved when it is safe to leave.

Your visitors do not see the draft. Select Publish when you are ready to replace the live design with the current preview.

Every publish creates a restore point, so you can return to an earlier design from Version history.

A good first setup

For a new help center, work through the editor in this order:

1. Add the site name, tagline, logo, and favicon in Brand.
2. Choose a starting point in Theme gallery.
3. Fine-tune light and dark colors, fonts, and spacing in Theme.
4. Arrange the Home, Category, Article, Search, Contact, and 404 pages in Pages.
5. Add the links visitors need in Navigation.
6. Test Desktop, Tablet, Mobile, Light, and Dark previews.
7. Publish with a short version note.

Useful safety controls

• Use Undo and Redo for recent edits.
• Use Reset draft to discard all unpublished changes and return the draft to the live version.
• Use Open in new tab for a larger preview.
• Use Version history to restore a previously published design.

Next steps

• Set your brand, SEO, and social sharing details
• Choose a theme and customize colors and fonts
• Build page layouts with regions and components