Zendesk hires Lotus Themes for their help center customization. View case studies

Overview

The variety of possible changes is amazing. You will be surprised how many of them we have for you. Just take a look! This article contains visual component samples included in our themes with explanations of how you can use them to extend your Help Center content. 

Accordions

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

Accordion item

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.

Accordion item
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.
Accordion item
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.

Learn how to use accordions.

Tabs

Tabs are perfect for displaying different subjects in your article!

Tab 1Tab 2
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

Learn how to use tabs.

Font sizes

This is a Zendesk huge size or Header 2

This is a Zendesk large size or Header 3

This is a Zendesk medium size or Header 4

This is a header 5

This is normal text. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasize design elements over content. It's also called placeholder (or filler) text.

Learn how to use font sizes.

Text styles

This is italic font-style

This is bold font-style

This is your underlined text

This text is deleted

Code block

This is what a code looks like:

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

Learn how to use code blocks.

Quotes

"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"

Learn how to use quote styles.

Description lists

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.

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.

Learn how to use description lists.

Lists

Bullet/unordered list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four
    • enclosed element one
    • enclosed element two

Bullet colored list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four

Ordered list

  1. bullet list one
  2. bullet list two
  3. bullet list three
  4. bullet list four
    1. enclosed element one
    2. enclosed element two

Ordered list with colored numbers

This type of list is a great way to display content with longer, step-by-step instructions, descriptions, etc.

  1. Mix flour, cinnamon, salt, and starch in a bowl.
  2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
  3. Continue to whisk, and gradually add the flour mixture to the egg mixture. Whisk until it is a homogeneous mass.
  4. Peel the apples and cut them into small cubes.
  5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
    1. Mix flour, cinnamon, salt, and starch in a bowl.
    2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
    3. Continue to whisk, and gradually add the flour mixture to the egg mixture. Whisk until it is a homogeneous mass.
    4. Peel the apples and cut them into small cubes.
    5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.

Learn how to use lists.

Tables

Generic Table

Month Savings
Sum $270
January $100
February $80
March $90

Color Header table

Month Savings
Sum $270
January $100
February $80
March $90

Bordered table

Month Savings
January $100
February $80
March $90
Sum $270

Striped table

Month Savings
January $100
February $80
March $90
Sum $270

Hover-colored table

Month Savings
January $100
February $80
March $90
Sum $270

Learn how to use tables.

Callout blocks

Success callout

This is a success callout

I'm a success callout!

Info callout

This is an info callout

I'm a neutral info callout!

Warning-callout

This is a warning callout

And now I'm going to tell you something very important! Pay attention to me!

Danger callout

This is a danger callout

And here there's some critical information you have to know!

Learn how to use callouts.

Images

By default, images don't have any borders:

But if you want, they can be framed:

Or they can have a shadow:

Or they can even have overlay:

Image Lightbox

It's possible to open a larger version of the image in the lightbox:

Learn how to use images.

Videos

Video in a lightbox:

Learn how to use videos.

Font Awesome icons

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.

You can use any of 650+ icons free of charge anywhere in your Help Center (layout, articles, etc.). They are already included in all our themes. Find all Font Awesome icons and their codes on this page.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon in 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  .

Font Awesome titles

Additionally, you can use any icons from Font Awesome library to make your titles more eye-catching.

  Title with a motorcycle

  Title with a calculator

  Title with binoculars

  Title with a heartbeat

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.

 

Animate them!

 
 
 
 
 
 
 

Learn how to use Font Awesome.

We use cookies to provide you with a better service and for promotional purposes. By continuing to use this site you consent to our use of cookies as described in our Privacy & Cookie Policy .
Thank you!

We’ll get back to you within 24 hours.

In the meantime, you may look at the examples of Zendesk help centers we customized.

Bonus: We’ve emailed you “Zendesk Help Center Best Practices from CX Leaders”

Get a Personalized Solution for Your Help Center

Answer 7 questions and get an exact quote. It will take 2-3 minutes, and you'll get a custom help center solution that solves your business problems.

Bonus: Get a compilation of Help Center Best Practices from CX Leaders

What is your Help Center URL, if you have one?

Where can we find your website? *

Add a link to your mockup if you have it.

What problems do you want to solve with the help center?

The better you describe your current situation, the more personalized solution we’ll offer you.

What is important to you in this help center project?

Please describe what is important to you to make a decision (except the price).

Which of our themes would suit your brand best?

Choose as many themes as you like. You may skip the question if you aren’t sure.

What is your budget range for this project?

The higher the budget is, the more customized your help center can be. Lower budgets allow you to get more standard changes.

Enter your corporate email to get your personalized solution and quote

Email *
Name Phone number (optional)
Please submit recaptcha