Zeppelin Header - Content List Compact Template | Axero Documentation

The Zeppelin Header - Content List Compact template displays a list of content in a side modal (a panel that opens at the side of the page).

The template is built in and comes with your Axero site. The steps below create the example widget shown above. It gives quick links to the People Directory for every department in your organization.

1. Go to Control Panel > System > Page Builder > Header.
2. Set the Active Header to Global Header with Sub Navigation.
3. Click Save.
4. In the list below, edit the "Global Header with Sub Navigation" header.
5. Click Widgets.
6. On the "Sub Navigation" Section widget, click the gear icon > Expand.
7. Drag a new Section widget into the "Sub Navigation" Section widget.
8. On the Section widget you added, click the gear icon > Edit Properties.
9. Update the Title to Departments.
10. Click Template.
11. Select Zeppelin Header - Block Item.
12. Click Advanced.
13. Check Open content in modal.
14. Click Save Widget.
15. Drag a new Content List widget into the "Departments" Section widget you configured.
16. On the Content List widget, click the gear icon > Edit Properties.
17. Update the Title to Departments.
18. For Widget Sub Type, select Field Options List.
19. Click Template.
20. Select Zeppelin Header - Content List Compact.
21. Click Advanced.
22. Check Load list on opening dropdown (requires template that opens).
23. Save the widget and page.

Template HTML

Below is the HTML of this template, for your reference.

<div id="ContentFilterList{{WidgetID}}" class="ax-diamond-hover-box ax-diamond-hover-box-spaces{{CustomCSSClass}}">
    {{#if ShowWidgetHeader}}
    <ul class="ax-diamond-hover-box-header">
        <li class="nav-header">
            {{{WidgetTitle}}}
        </li>
        <li class="divider"></li>
    </ul>
    {{/if}}
    <ul class="ax-diamond-hover-box-dropdown ax-diamond-hover-box-dropdown-spaces" id="ScrollContainer{{WidgetID}}">
        {{#each Contents}}
        <li class="">
            <a href="{{ContentURL}}" class="space-home-link noimage"><span class="anchor-text">{{{Title}}}</span></a>
        </li>
        {{/each}}
    </ul>
    {{{PlaceholderHTML}}}
</div>
{{{ScriptBlock}}}

Related pages

• Clone Page Builder Template (to copy the template before changing it)
• Page Builder Template Language Syntax (the tokens a template can use)
• Content List Templates (the other Content List templates)