Up next
The video did not load.
Lesson 9 of 13 · 1:32
Your own component with HTML
From The Template Editor · Verified against the live product on Oct 20, 2026
This lesson
Add a Custom HTML component, paste in a banner, and style it with CSS that follows your theme's colors.
Prefer to read? Follow it step by step
Moments in this lesson
Length 0:33
Up next · 0:33
10. Header links
Add a link to your main website, then show it in the header with a Navigation component.
Transcript
- 7:02Now for something a bit more advanced.
- 7:05Sometimes you'll want something that isn't in the list...
- 7:08like a banner for a new product.
- 7:10That's what the Custom HTML component is for.
- 7:13I'll go back to the home page, open the main region... and add Custom HTML.
- 7:19This gives me a code editor.
- 7:21I'll paste in a small piece of HTML I prepared earlier:
- 7:24a label, a heading, a short sentence, and a link.
- 7:28It's plain HTML.
- 7:30The class names are just names I made up... so that I can style them in a moment.
- 7:34I'll move it to the top of the region... and scroll down in the preview.
- 7:38There it is... though it doesn't look like much yet.
- 7:42To style it, I'll open the Advanced tab, and add a custom CSS snippet.
- 7:48I'll name it Product banner, so the rest of the team knows what it's for... and paste in the styles.
- 7:53Notice that instead of fixed colors, these styles use the theme's own color variables.
- 7:59That way, the banner always matches your theme.
- 8:02I'll click Save... and now the banner looks the part.
- 8:05Here's why those variables matter.
- 8:07If I change the primary color in the Theme tab... the banner follows right along.
- 8:12I'll undo that, because I like the blue.
- 8:15Two things to keep in mind.
- 8:17Scripts don't run inside Custom HTML... if you need analytics or a chat widget, add them here, under script injections.
- 8:25And your custom CSS only ever applies inside your help center... so it can't affect anything else.
Captions and this transcript come from the narration, word for word. Click any line to play from there.
About the course
Make your help center look exactly the way you want: themes, colors, pages, components and your own HTML.
What you'll learn
- Where the Template Editor is, and how the preview, settings and drafts work
- How to try a theme, keep what you like, and go back with Reset draft
- Brand, colors, fonts, spacing and corner radius
- The six page types, their layouts and regions, and how components fit together
- Select to edit: change text right in the preview
- Custom HTML, plus custom CSS that follows your theme's colors
- Header links, mobile and dark mode checks, publishing and version history
- Who it's for
- Anyone who owns the look of a help center, from a first-day trial to a redesign.
- Format
- 13 lessons, 10:35 in all. English captions and a full transcript.
- Last verified
- Oct 20, 2026, on the live product with the Northwind demo help center
- Plans
- Everything in this course works on every plan.
Articles
Every lesson pairs with a help article, so you can read the steps at your own pace.
-
Get started with the template editor self.helpcenter.io/content/template-editorGoes with these lessons
-
Choose a theme self.helpcenter.io/content/choose-a-themeGoes with
-
Which theme is right for you? self.helpcenter.io/content/theme-galleryGoes with
-
Add your logo, favicon and brand name self.helpcenter.io/content/logo-and-brandGoes with
-
Change colors, fonts and spacing self.helpcenter.io/content/colors-and-fontsGoes with
-
Pages, regions and shared headers explained self.helpcenter.io/content/pages-and-regionsGoes with
-
Add, move and remove components self.helpcenter.io/content/componentsGoes with
-
Edit text right in the preview self.helpcenter.io/content/edit-in-previewGoes with
-
Customize the article page self.helpcenter.io/content/article-pageGoes with
-
Add custom CSS self.helpcenter.io/content/custom-cssGoes with
-
Custom CSS reference: selectors and examples self.helpcenter.io/content/custom-css-referenceGoes with
-
Add links to your header and footer self.helpcenter.io/content/navigation-linksGoes with
-
Customize the header and footer self.helpcenter.io/content/header-and-footerGoes with
-
Preview on phones, tablets and in dark mode self.helpcenter.io/content/preview-your-designGoes with
-
Light and dark mode self.helpcenter.io/content/dark-modeGoes with
-
Publish your design self.helpcenter.io/content/publish-your-designGoes with
-
Restore an earlier design self.helpcenter.io/content/restore-a-designGoes with