• 0
  • 0

Shortcode Elements

Note block

You can use the Note message block in your Zendesk Help Center articles. To use this block, just add a class name of .note--message to an element using the Source Code view in the Zendesk Guide article editor.

Note: This is an example of a note message block. To use this block, just add a class name of .note--message to an element using the Source Code view in the Zendesk Guide article editor.

<p class="note--message"> 
  Note: Just copy this shortcode and paste into your Help Center article editor.
</p>

Warning block

You can use the Warning message block in your Zendesk Help Center articles. To use this block, just add a class name of .warning--message to an element using the Source Code view in the Zendesk Guide article editor.

Warning: This is an example of a note message block. To use this block, just add a class name of .warning--message to an element using the Source Code view in the Zendesk Guide article editor.

<p class="warning--message"> 
  Warning: Just copy this shortcode and paste into your Help Center article editor.
</p>

Quote block

To use this block, just add a class name of .quote--message to an element using the Source Code view in the Zendesk Guide article editor.

Quote: This is an example of a quote message block. To use this block, just add a class name of .quote--message to an element using the Source Code view in the Zendesk Guide article editor.

<p class="quote--message"> 
  Quote: Just copy this shortcode and paste into your Help Center article editor.
</p>

Check list style

To use this check list style, just add a class name of .check--list

  1. Check List Item 1
  2. Check List Item 2
  3. Check List Item 3
    <ul class="check--list">
 	<li>Check List Item 1</li>
 	<li>Check List Item 2</li>
 	<li>Check List Item 3</li>
    </ul>

Number list style

To use this number list style, just add a class name of .number--list

  1. Number List Item 1
  2. Number List Item 2
  3. Number List Item 3
    <ol class="number--list">
 	<li>Number List Item 1</li>
 	<li>Number List Item 2</li>
 	<li>Number List Item 3</li>
    </ol>

Accordion

To use this, just copy the below code and paste it into your article editor (Source code). Update/Add the title and content as per your need.

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Lorem ipsum dolor sit amet
  • Ut enim ad minim veniam
  • Tempor incididunt ut labore et dolore magna aliqua
Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  1. Lorem ipsum dolor sit amet
  2. Ut enim ad minim veniam
  3. Tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

<div class="accordion">

  <div class="accordion_block">
    <div class="accordion_title">Accordion title #1</div>
    <div class="accordion_content" >
      YOUR_CONTENT
    </div>
  </div>
  
  <div class="accordion_block">
    <div class="accordion_title">Accordion title #2</div>
    <div class="accordion_content">
      YOUR_CONTENT
    </div>
  </div>
    
</div>

Tabs

To use this, just copy the below code and paste it into your article editor (Source code). Update/Add the title and content as per your need.

Title 1

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Title 2

Tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod dolore magna aliqua. Ut enim ad minim veniam.

Title 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 


<div class="tabs">
  <ul id="tabs-nav">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tabs-content">
  
    <div id="tab1" class="tab-content">
      <h2>Title 1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>

    <div id="tab2" class="tab-content">
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>

    <div id="tab3" class="tab-content">
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    
  </div>
</div>

See Video Process -