The range of available modifications is impressive. You'll be amazed at the extensive options we offer. Dive in and explore! This article showcases visual component samples from our themes, complete with explanations on how to leverage them to enhance your Help Center content.
Content Organizing
Content Formatting
Accordions
Accordions are useful when you need to toggle between hiding and showing large amount of 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.
Doscover how to use accordions.
Tabs
Tabs are perfect for displaying different subjects in your article!
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 |
Carousels
Carousels are content elements designed to organize your content into steps, making it simpler for visitors to comprehend and navigate.
Start by crafting a bulleted list in your article, with each bullet point encompassing the content for an individual carousel slide. This list should be structured as a <ul> element, with each item within as <ul> element.
After populating the list with your content, assign a class name of .js-slider to the list to transform it into an interactive carousel. For instance:
Doscover how to use Carousels.
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.
Doscover how to use description lists.
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
Small size
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.
Doscover 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
Doscover how to use text styles.
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>
Doscover 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?"
Doscover how to use quotes styles.
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
- bullet list one
- bullet list two
- bullet list three
- bullet list four
- enclosed element one
- enclosed element two
Ordered list with colored numbers
This type of lists is a great way to display content with longer, step-by-step instructions, descriptions, etc.
- Mix flour, cinnamon, salt and starch in a bowl.
- Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
- Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
- Peel the apples and cut them into small cubes.
- 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.
- Mix flour, cinnamon, salt and starch in a bowl.
- Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
- Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
- Peel the apples and cut them into small cubes.
- 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.
Links
Link by default
This is a simple link. Click me!
Button link
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!
Images
By default, images don't have any borders:
But if you want, they can be framed:
Or they can have shadow:
Or they can even have overlay:
Image Lightbox
It's possible to open a larger version of the image in the lightbox:
Videos
Embedded video
Video in a lightbox:
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!
And mix them:
fa-twitter and fa-square-o
fa-flag and fa-circle
fa-terminal and fa-square
Comments
Please sign in to leave a comment.