How can I re-order/organize my category block buttons?

16 Comments

  • Wes Drury

    @Christin - You can rearrange and combine your categories and sections without touching any of the code.  In the Guide Admin settings look for "three bars" and if you hover on the bars it will say "Arrange Content".  Go there and drag and drop your categories and sections around and those changes will reflect in the Help Center.  Hope this helps.

    0
  • Christian Brennan

    Thx @wes. So that sounds great, but I can't find the "Guide Admin settings" anywhere in the UI.  Please advise exactly how to get to this section if you can.

    Thanks again.

    CB

    0
  • Nicole S.
    Zendesk Community Team

    Hey Christian -

    First, be sure that you are logged in to an account that has Guide Administrator permissions. 

    When you're logged in to your account and go to your Help Center, at the very top there should be a white bar, and it will say "Guide Admin" in the upper right-hand corner. Here's how it looks to me in our Help Center:

     

    Once you have clicked "Guide Admin," here's the three bars Wes is referring to; they're in the left-hand side of the menu: 

     

    Hope that helps!

     

    0
  • Christian Brennan

    Thx guys.

    So I made it to "Arrange Articles" ...I don't have an option that says "Arrange Content."  Should I have this option?  Is that what I'm missing?

    I can drag/drop the categories around w/ ease, but my challenge here is that I don't want to necessarily re-arrange the (15) categories as much as I want to organize them.

    They are currently (15) categories listed on the homepage.  I still want all 15, but I want to be able to cluster these categories together in parent categories w/ sub-headers.  Into possibly 2 rows or possibly 2 columns, etc.  Attached is a screen shot of our current categories listed and a mockup of what I'm after here as well.

    Thoughts?  Thx again.

    Current UI for categories:

    New UI we'd like to use:

    0
  • Christian Brennan

    If it's easier, this is our homepage welcome screen UI.

    https://a2zinc.zendesk.com/hc/en-us

    Thx again. - CB

    0
  • Wes Drury

    @Christian - From a system standpoint you can't break up your categories like you are wanting to do.  A category is the top level then section then article.

    You can manually do this from modifying the homepage.hbs code but would require some modifications of the default code and you would have to specify which blocks fall under which Header.

    Looking at your current Help Center I'm only seeing 4 blocks there on your homepage and not 15.  Are you wanting to change that or did you already make some changes to get it to 4 blocks.

    0
  • Christian Brennan

    Hey Wes.

    Thx for getting back to me.  So you're not seeing this for the homepage UI as far as categories?  See attached below.

    Yeah, we'd like to adjust the .hbs code, but I'm not familiar w/ doing that. Only adding content via html/css to this section.  I posted the .hbs code for this page in the very 1st post here.  Thoughts on accomplishing this?  Any assistance here would be awesome.  Thx again.

    0
  • Wes Drury

    @Christian - If you are not logged into your Help Center you only see 4 total categories so I assume you only see all 15 if you are logged in.  I'll post some code for you as soon as I can.

     

    0
  • Christian Brennan

    Thank you Wes.  I'd really appreciate it.  Let me know exactly what file I would touch as well w/ this new code you'll be providing.

    0
  • Christian Brennan

    @Wes any word yet on some code to help us out here?  Just checking back in.  Thx again.

    0
  • Wes Drury

    @Christian - Sorry no updates as of yet, I have several client projects going on at the time so my primary focus is on that at the moment.

    0
  • Wes Drury

    @Christian - Here is some code for you.  This is a quick and dirty version but it will get the job done.  Copy and paste the below code into the HomePage.hbs (if you've modified this page the code below may not work as this is from the default homepage.hbs from the Copenhagen theme.  Check out those {{is}} statements in there and repeat them so {{is}} {{else}} {{/is}} and change the id to your category IDs.  A sample of how it will look can be found here.

    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <h2>My favorite categories</h2>
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    {{#is id 360001485892}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{else}}
    {{#is id 115001243123}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/is}}
    {{/is}}
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    <section class="section knowledge-base">
    <section class="categories blocks">
    <h2>My least favorite categories</h2>
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    {{#is id 360001486092}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/is}}
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}

    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section>
    </div>
    0
  • Christian Brennan

    Actually copy and pasted your code and the UI didn't change at all, oddly enough.  On another note, how would I add Font Awesome icons to "each" of my category buttons?  Please advise.

    Thx. - CB

    0
  • Wes Drury

    @Christian - You will see a change if you copied my code, you have to save and publish in order to see it but you will need to make a copy of your current theme, don't do it in the live version.  You will also have to provide the ID's of your categories.  For images, you can take a look at this tip that I wrote.

    0
  • Wes Drury

    My code is written for categories so if you only have one category with alot of sections then the code I gave you will not work.  You would have to move my code down to the section level of the homepage.  Are the buttons you see categories or sections. 

    0
  • Christian Brennan

    They are categories:

    <section class="categories blocks">Name</section>

    0

Please sign in to leave a comment.

Powered by Zendesk