Your header and footer frame every page: your logo, menu, search and language picker at the top, and your links, social icons and credits at the bottom. Set them up once and they show across your whole help center.
Who can do this: Owners and Admins (Editors through Customize on your help center) · Plans: All plans. The language switcher needs more than one language (Growth and Catalyst plans).
Edit the header
In the template editor, open Pages, pick a page whose header already looks right, and click the Header region. The header is synced across all pages by default, so your changes show on every page.
Click the component you want to change: Logo, Navigation, Search bar or Language switcher. Use Add component to add one that's missing.
Change its settings. Use Position to arrange the row (see below).
Click Publish.
Header components
Logo shows the logo or site name from the Brand tab. Variant picks Logo image or Brand name (text), and Link target sends clicks to your Help center home or Your main website. See Add your logo, favicon and brand name.
Navigation shows the links you add in the Navigation tab. Variant: Horizontal, Vertical (sidebar) or Pills. See Add links to your header and footer.
Search bar lets visitors search from every page. See Customize the hero and search bar.
Language switcher lets readers change language. Variant: Dropdown or Inline list. Label style shows the language's name, its name plus the native name, or its code. It lists your default language and every language with at least one published translation.
Arrange the header row
Logo, Navigation, Search bar and Language switcher each have a Position: Own row (block), or inline on the left, in the center or on the right. Inline components next to each other share one row, such as a logo on the left with the menu and language switcher on the right. In the region's list, they're grouped as Inline row 1, Inline row 2 and so on.
Edit the footer
In Pages, click the Footer region, then the Footer component.
Under Footer columns, click Brand, Links, Text, Social or HTML to add a column. Until you add one, the footer shows your site name, tagline and navigation links.
Click a column to fill it in. Reorder columns with the arrows, or remove one with the trash icon.
Set Columns to how many columns sit side by side on larger screens (1 to 4).
To hide "Powered by HelpCenter.io", open Advanced and turn off Show attribution.
Scroll the preview to the bottom to check your footer, then click Publish.
Column | What it holds |
|---|---|
Brand | Your site name and tagline from the Brand tab. |
Links | A Column title and a list of links. Each link goes to the Home page, a Category, an Article or an External URL. Click Add link for more. |
Text | A Column title and a paragraph of text. |
Social | Icons that link to your social profiles. Paste each profile's full link, and leave a field empty to hide its icon. |
HTML | Your own HTML for the column. |
Removing the attribution works on every plan. See Remove "Powered by HelpCenter.io".
Social links
For a row of social icons outside the footer columns, add the Social links component to your footer, header or Utility region. Fill in the networks you use (Twitter, LinkedIn, GitHub, Facebook, Instagram and YouTube) with your handle, such as company/acme for LinkedIn, or paste your profile link. Each icon always links to that network's own site, and empty fields don't show.
One header and footer for every page
Header and Footer are synced across all pages by default, so a change you make on one page shows on every page. When you edit a synced region, the version on the page you're editing is copied to all the others. If some pages need their own header or footer, open the region, click Manage and choose Give each page its own setup. See Pages, regions and shared headers explained.
Troubleshooting
The menu in my header is empty. The Navigation component shows the links from the Navigation tab. Add your links there.
The language switcher is missing. It needs a second language with at least one published translation. On a help center with one language, themes leave it out: add it with Add component once you have a second language.
A header change removed something from my other pages. The page you edited had a different header, and syncing copied it everywhere. Press ⌘Z, or add the missing component back: the change syncs to every page.
My logo links to the help center, not my website. Fill in Your main website under Brand, and set the Logo's Link target to Your main website.
Comments
Be the first to comment.