Promoted articles
This theme supports a multi-language setup. Most components of the Help Center are using Zendesk translation engine. This article will cover additional steps to make some Homepage components to support multilanguage. This includes custom header links, custom block descriptions and text, footer copyright text, etc.
Before you follow the steps below, please ensure you have followed the steps outlined in thisdocument.
Add Dynamic Content
For detailed steps to add Dynamic Content, please see this Zendesk support article.
Here is the list of Dynamic Content required for this theme:
- info_notification_title
- info_notification_body
- info_notification_title_2
- info_notification_body_2
- info_notification_title_3
- info_notification_body_3
- header_url_title_1
- header_url_title_2
- header_url_title_3
- header_url_link_1
- header_url_link_2
- header_url_link_3
- help_center_title
- hero_title
- search_placeholder
- popular_search_keyword
- custom_block_1_title
- custom_block_1_description
- custom_block_1_url
- custom_block_2_title
- custom_block_2_description
- custom_block_2_url
- custom_block_3_title
- custom_block_3_description
- custom_block_3_url
- custom_block_4_title
- custom_block_4_description
- custom_block_4_url
- custom_block_5_title
- custom_block_5_description
- custom_block_5_url
- custom_block_6_title
- custom_block_6_description
- custom_block_6_url
- site_contact_1_description
- site_contact_2_description
- site_contact_3_description
- site_contact_4_description
-
com_custom_block_1_url
-
com_custom_block_2_url
-
com_custom_block_3_url
-
com_custom_block_1_title
-
com_custom_block_2_title
-
com_custom_block_3_title
-
com_custom_block_1_description
-
com_custom_block_2_description
-
com_custom_block_3_description
- footer_copyright
- footer_description
- footer_url_title_1
- footer_url_title_2
- footer_url_title_3
- footer_url_title_4
- footer_url_title_5
- footer_url_link_1
- footer_url_link_2
- footer_url_link_3
- footer_url_link_4
- footer_url_link_5
- facebook_url
- twitter_url
- youtube_url
- linkedin_url
- instagram_url
Turn on Multilanguage Settings
In the theme settings, enable the option "Enable dynamic content translations".
Tabs
Takes the basic nav and adds the .tabs-nav class to generate a tabbed interface. Use them to create tabbable regions.
Display Unsafe Content
Display Unsafe Content needs to enabled for this format to show up. See this Zendesk article for detail.
Example Tab
<div class="tabs">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Tab with active tabs color
<div class="tabs colored-1">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Tab with active tabs color and background color
<div class="tabs colored-2">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Callout
Provide contextual feedback messages for typical user actions with the handful of available and flexible messages.
This is default callout
A simple callout—check it out!
<div class="callout">
<p class="callout-title">This is default callout</p>
<p>...</p>
</div>
This is dashed callout
A simple dashed callout—check it out!
<div class="callout callout-dashed">
<p class="callout-title">This is dashed callout</p>
<p>...</p>
</div>
This is transparent callout
A simple transparent callout—check it out!
<div class="callout callout-transparent">
<p class="callout-title">This is transparent callout</p>
<p>...</p>
</div>
This is info callout
A simple infocallout—check it out!
<div class="callout callout-info">
<p class="callout-title">This is info callout</p>
<p>...</p>
</div>
This is success callout
A simple success callout—check it out!
<div class="callout callout-success">
<p class="callout-title">This is success callout</p>
<p>...</p>
</div>
This is warning callout
A simple warning callout—check it out!
<div class="callout callout-warning">
<p class="callout-title">This is warning callout</p>
<p>...</p>
</div>
This is alert callout
A simple alert callout—check it out!
<div class="callout callout-alert">
<p class="callout-title">This is alert callout</p>
<p>...</p>
</div>
Accordion
Build vertically collapsing accordions in combination.
Display Unsafe Content
Display Unsafe Content needs to enabled for this format to show up. See this Zendesk article for detail.
Example Accordion
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
<div class="accordion">This is accordion 1</div>
<div class="accordion-panel">
<p>...</p>
</div>
<div class="accordion">This is accordion 2</div>
<div class="accordion-panel">
<p>...</p>
</div>
<div class="accordion">This is accordion 3</div>
<div class="accordion-panel">
<p>...</p>
</div>
With Video Blocks, you have the option to pop-up the video on the homepage or direct users to an URL. If you'd like the video to pop-up on the homepage, you would need to choose the "Embed" option. Ensure to enter the embed URL instead of the regular URL.
For example, enter
https://www.youtube.com/embed/zMiClV-gVLs
instead of
https://www.youtube.com/watch?v=zMiClV-gVLs
Through theme settings, configure your brand's color, logo, icons, etc. to align with your company's brand guideline. Here are some examples of designs possible with Innovare 360 theme.