Sections

Customize the footer

The footer of your Help Center plays an important role in communicating your company brand to visitors.

The footer of your Zendesk theme is contained within the footer.hbs page template and by default only includes elements required by every Help Center:

For the purpose of this post we consider the footer to be part of your Help Center contained in the footer.hbs template of your theme, which is present on all pages.

We recommend either making changes to the default footer or copying one directly from the Pattern Library. Start simple and only add elements when they can be shown to be of value to your visitors.

The footer of your Zendesk theme is practically free from constraint.

Changing the layout

The Pattern Library contains a variety of different page footer layout options. They range from simple to complex in terms of content and layout structure, so you can choose one that best suits your company and simple add or remove links and change the appearance using our utilities.

The examples below represent two such possibilities; one complex and one simple.

Adding elements

Companies sometimes include some or all of the links and text from the footer of their main website, however the pros and cons of this approach should be weighed in the same way they are when customizing the theme header.

Often a few simple background color and text color changes are all that’s required to give you a professional looking footer in minutes.

Make page-specific changes

All of our themes automatically add page-based class names to the top-most <html> element of each page so that you can have common elements like the page header look or behave differently on different pages. The class names added to the <html> element are always the name of the page template in snake case (each space replaced by an underscore with all letters in lowercase).

For example, on the Home page the <html> element has a class name of .home-page added by our framework:

<!DOCTYPE html>
<html class="home-page" dir="ltr" lang="en-US">
  ...
</html>

To change the color of links in the footer to red only on the Home page, you could add the following custom CSS to your theme’s style.css stylesheet:

.home-page .footer a {
  color: red;
}

Questions or feedback about this guide? Let us know