Usage Guides

For your convenience, there is a free Installation service.

You can also install your Zendesk help center custom theme by yourself if you like. It is rather simple. Use the following instructions.

1. In Guide, click on the Customize design icon in the sidebar.

   The Theming center page opens.

   

2. Click the Add new theme in the upper-right corner.

   

3. Click Import theme.

   

   Find and select your theme file.

   The theme is imported and appears on your Themes page.

4. Click the Customize button on the theme you would like to preview.

   

5. Click the Help Center link at the top bar panel to test the new theme with your real content in preview mode.

   Your Help Center visitors see the previous theme since the new one is not published yet.

   

   • You can preview what different pages look like if you choose the corresponding page in the Templates menu.
   • You can also test the theme as an end-user, anonymous, or agent by clicking the Preview role menu at the top bar panel and selecting the corresponding role.

   

6. Publish the theme. When you're ready to implement the changes, go back to Guide admin.

   

   Click the Settings icon on the theme image and select the Set as live theme option. Confirm this action.

   Note

   You may not see the Submit a request button because you are logged in as the agent. You can view the theme as an end-user or anonymous if you select the corresponding option in the Preview role dropdown.

   Alternatively, you can enable access request forms for your agents. 

   Note

   If you want to embed videos or use article formatting components, you must allow unsafe content within your Zendesk Guide settings.

Changes you can make in our themes:

1. Main colors of the theme, fonts from Google Fonts, logo, favicon, background image in the search area

2. Icons on the main page, as well as their names and links

3. Home page layout. You can choose which blocks to show, for example custom blocks, category list, category tree, promoted articles.

4. Colors for formatting components

5. Social media links in the footer

Follow these steps to add the code:

1. Open the article editor.
2. Click on the "Source code" button as show the below. 
   
   
3. Paste one of the following examples of code to the code editor.
   
   
4. Edit the text as desired.
5. Click on the "OK" button. It will close the modal window.
6. Continue editing an article as usual.
7. Save and publish the changes.

• Accordions
• Tabs
• Font sizes
• Text styles
• Codes
• Quote
• Descriptions
• Lists
• Links
• Tables
• Callout blocks
• Images
• Videos
• Font Awesome

Accordions

Accordions are useful when you need to toggle between hiding and showing large amount of content:

<div class="accordion accordion--default">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

One more accordion type:

<div class="accordion accordion--colored">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>

  <pre><code class="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet. &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Ruby code

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute

<pre><code class="ruby"># The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute</code></pre>

Other languages are compatible. Learn more.

Simple notes

<div class="note note--default">
  <h4 class="note-title">Default</h4>
  <p>This is a default block</p>
</div>

<div class="note note--info">
  <h4 class="note-title">Info</h4>
  <p>This is an info block</p>
</div>

<div class="note note--warning">
  <h4 class="note-title">Warning</h4>
  <p>This is a warning block</p>
</div>

<div class="note note--success">
  <h4 class="note-title">Success</h4>
  <p>This is a success block</p>
</div>

<div class="note note--danger">
  <h4 class="note-title">Danger</h4>
  <p>This is a danger block</p>
</div>

Callout block by default

<div class="callout">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

<div class="callout callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

Transparent callout

<div class="callout callout--transparent">
  <h4 class="callout__title">This is a transparent callout</h4>
  <p>I'm a transparent callout!</p>
</div>

With dashed border:

<div class="callout callout--transparent callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a transparent callout!</p>
</div>

Success callout

<div class="callout callout--success">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

<div class="callout callout--success callout--dashed">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

Info callout

<div class="callout callout--info">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

<div class="callout callout--info callout--dashed">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

Warning-callout

<div class="callout callout--warning">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>And now I'm going to tell you something very important! Pay attention to me!</p>
</div>

<div class="callout callout--warning callout--dashed">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>I'm a warning callout with dashed border!</p>
</div>

Caution callout

<div class="callout callout--danger">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>And here there's some critical information you have to know!</p>
</div>

<div class="callout callout--danger callout--dashed">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>I'm a caution callout with dashed border!</p>
</div>

Callout in primary color

<div class="callout callout--primary">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color</p>
</div>

<div class="callout callout--primary callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color with dashed border!</p>
</div>

Callout blocks with the Font Awesome icons

It is possible to combine your callouts with Font Awesome icons:

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-paper-plane">&nbsp;</em> Subscribe icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-lock">&nbsp;</em> Lock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-phone">&nbsp;</em> Phone icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-clock">&nbsp;</em> Clock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-file">&nbsp;</em> File icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="far fa-smile">&nbsp;</em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>

Combine colors and icons!

<div class="callout callout--success">
  <h4 class="callout__title"><em class="far fa-smile-o">&nbsp;</em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout callout--warning">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>

Default description list

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Horizontal description list

Description lists

Such description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Font Awesome is a variety of scalable vector icons that can instantly be customized — size, color, shadow, and other changes that can be done with the power of CSS.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon to any text of your Help Center  . Font Awesome is completely free for commercial use  . The icons are vector, which means they're gorgeous on high-resolution displays  . It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS  .

<p>It is rather simple to insert a Font Awesome icon to any text of your Help Center <em class="fas fa-flag">&nbsp;</em>. Font Awesome is completely 
free for commercial use <em class="fas fa-hand-left">&nbsp;</em>. The icons are vector, which means they're gorgeous on high-resolution displays <em class="fas fa-eye">&nbsp;</em>. 
It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS <em class="fas fa-pencil-alt">&nbsp;</em>.
</p>

<em class="fas fa-pencil"> </em>

<em class="fas fa-pencil">&nbsp;</em>

Font Awesome titles

You can use any icons from Font Awesome library for making your titles more stylish and memorable!

  Title with a motorcycle

  Title with a calculator

  Title with binoculars

  Title with a heartbeat

<h4><em class="fas fa-2x fa-motorcycle">&nbsp;</em> Title with a motorcycle</h4>
<h4 class="wysiwyg-color-green120"><em class="fas fa-2x fa-calculator">&nbsp;</em> Title a the calculator</h4>
<h4 class="wysiwyg-color-pink"><em class="fas fa-2x fa-binoculars">&nbsp;</em> Title with binoculars</h4>
<h4 class="wysiwyg-color-red"><em class="fas fa-2x fa-heartbeat">&nbsp;</em> Title with a heartbeat</h4>

And not only your titles:

Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.

<div class="fas fa-quote-left fa-3x fa-pull-left fa-border">&nbsp;</div>
<p>Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Animate them!

<div class="fas fa-spinner fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-circle-notch fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-sync fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-cog fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-venus fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-mars fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-firefox fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-opera fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-chrome fa-spin fa-3x fa-fw">&nbsp;</div>

And mix them:

<div style="text-align: center;">
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fab fa-twitter fa-stack-1x">&nbsp;</div>
    </div>
    <p>fa-twitter and fa-square</p>
  </div>
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-circle fa-stack-2x">&nbsp;</div>
      <div class="fas fa-flag fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-flag and fa-circle</p>
  </div>
  <div style="display: inline-block;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fas fa-terminal fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-terminal and fa-square</p>
  </div>
</div>