Layout Editor Widgets - HL Vanilla Community
<main> <article class="userContent"> <p>You can use Layout Editor to add custom pages to your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. Vanilla makes it easy for you to <em>customize the layout of your pages</em> and to then <em>populate the pages with content via a variety of Widgets</em>.</p><p>Widgets are a great device in communities because they can host either <strong>static</strong> or <strong>dynamic content</strong>. Serving up dynamic content to your users enhances the value of your Vanilla community because it feels fresh and up-to-date with its ever-changing content.</p><p>This article lists and describes the various <strong>widgets in Layout Editor</strong>. To learn how to add and configure Widgets, see <a href="https://success.vanillaforums.com/kb/articles/547" rel="nofollow noreferrer ugc">Add and Configure Custom Layout Widgets</a>.</p><h2 data-id="access-the-widgets">Access the Widgets</h2><p>Widgets are individually added to <strong>columns</strong> in a <strong>Section</strong>.</p><p>1. Access the Dashboard.</p><p>2. Navigate to the <strong>Appearance</strong> tab and expand the <strong>LAYOUTS</strong> section.</p><p>3. Expand the <strong>Home Page</strong> or <strong>Discussions Page</strong> subsection and click <strong>Add Custom Layout</strong>.</p><p>📝 <strong>NOTE</strong>: In the future, you'll be able to create custom layouts for the Categories page as well.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/L4DGVXKVX29Z/access-layout-editor.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/L4DGVXKVX29Z/access-layout-editor.png" alt="access_layout_editor.png" height="475" width="850" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. Click a Section to select it. (✔️ <strong>TIP</strong>: See <em>Sections</em> in <a href="https://success.vanillaforums.com/kb/articles/544" rel="nofollow noreferrer ugc">Create a Custom Layout</a> to learn how to add, remove, and rearrange Sections.)</p><p>📝 <strong>NOTE</strong>: Before choosing a Section, consider which and how many Widgets you plan to add, and then <em>choose an appropriate Section to host the content</em>.</p><p>5. Click the <strong>(+) </strong>in a Section column to open the Widget selector.</p><p>6. Click a Widget to select it and then click <strong>Add</strong> in the bottom right.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/I89FI32TS01F/selector.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I89FI32TS01F/selector.png" alt="Selector.png" height="703" width="716" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="layout-editor-widgets">Layout Editor Widgets</h2><p>The sections that follow describe the Widgets that are available in Layout Editor.</p><h2 data-id="announcements">Announcements</h2><p>A list of Announcements that have been posted in your Vanilla community. Each entry:</p><ul><li>provides a <strong>summary</strong>,</li><li>displays <strong>user activity</strong>, and</li><li>links to the Announcement where users can get <strong>more information</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/PVNY5L7IHMLD/announcements.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PVNY5L7IHMLD/announcements.png" alt="Announcements.png" height="367" width="859" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="articles">Articles</h2><p>A carousel-type list of community knowledge base articles. Each entry:</p><ul><li>provides a <strong>summary</strong> and</li><li>links to the knowledge base where users can read the <strong>full article</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/APLEU1D3B3UC/articles.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/APLEU1D3B3UC/articles.png" alt="Articles.png" height="250" width="882" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="banner">Banner</h2><p>Adds a page-specific banner that displays:</p><ul><li>the default <strong>title</strong> of the page,</li><li>a <strong>description</strong>,</li><li>a <strong>background colour or image</strong>, and</li><li>a <strong>search bar</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/AEQV08FDWAJ2/banner.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AEQV08FDWAJ2/banner.png" alt="Banner.png" height="150" width="881" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: This widget can be used <strong>only with the <em>Full Width</em> section</strong>.</p><h2 data-id="call-to-action">Call to Action</h2><p>Allows Administrators to insert a title, description, and button anywhere in their Vanilla community prompting users to take a particular action.</p><ul><li>Buttons can have a Primary and Secondary color, which are pulled from your Style Guide.</li><li>Place Call to Action Widgets across your community (e.g., sign up today!, join our meeting!, check out our KB, etc.) to get the word out to your users about anything important to your organization.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/TVDGRKEXHKAK/call-to-action.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TVDGRKEXHKAK/call-to-action.png" alt="Call to Action.png" height="229" width="804" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: When configuring the Widget, if you're inserting an image via the <strong>Image</strong> option, the recommended dimensions are <strong>1920x480px</strong>. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.</p><h2 data-id="categories">Categories</h2><p>A list of your Vanilla community Categories. Each entry:</p><ul><li>provides a <strong>summary</strong>,</li><li>displays <strong>user activity</strong>, and</li><li>links to the Category.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/XF7LA193UAYU/categories.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XF7LA193UAYU/categories.png" alt="Categories.png" height="348" width="880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="custom-html">Custom HTML</h2><p>Adds custom code (<strong>HMTL</strong>, <strong>CSS</strong>, and <strong>JavaScript</strong>) to a page to target specific content, such as including <em>advertisements</em> and embedding <em>iframes</em> (for videos, podcasts, calendars, feeds, etc.). The code is:</p><ul><li>separated by type,</li><li>validated to help with organizing code and troubleshooting.</li></ul><p>📝 <strong>NOTE</strong>: This can add visible content to the page or it can host code that operates in the background.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ROF1D42K21OG/custom-html.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ROF1D42K21OG/custom-html.png" alt="Custom HTML.png" height="153" width="894" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="discussions">Discussions</h2><p>A list of Discussions that have been posted in your Vanilla community. Each entry:</p><ul><li>provides a <strong>excerpt</strong> (unless the <strong>Excerpt</strong> setting is toggled off),</li><li>displays various <strong>user activity</strong> as icon-based or text-based metadata (toggle the <strong>Meta Options</strong> on/off), and</li><li>links to the Discussion so that users can <strong>read more</strong> and <strong>participate</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/NHJWY18OZ8XI/discussions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/NHJWY18OZ8XI/discussions.png" alt="Discussions.png" height="365" width="858" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="events">Events</h2><p>A list of future and/or past Events that have been posted in your Vanilla community. Each entry:</p><ul><li>provides a <strong>summary</strong> and</li><li>links to the Event where users can see Event <strong>details and registration options</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/D547D0UXHG71/events.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/D547D0UXHG71/events.png" alt="Events.png" height="291" width="882" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="guest-sign-in">Guest Sign In</h2><p>Allows Administrators to insert a title, description, and two buttons: <strong>Sign In</strong> and <strong>Register</strong>.</p><ul><li>You cannot modify the links for these buttons: they from your site's registration.</li><li>Buttons can have a Primary and Secondary color, which are pulled from your Style Guide, or be plain text.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/YNFBUO1LN7CY/guest-sign-in.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YNFBUO1LN7CY/guest-sign-in.png" alt="Guest sign-in.png" height="200" width="797" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: When configuring the Widget, if you're inserting an image via the <strong>Image</strong> option, the recommended dimensions are <strong>1920x480px</strong>. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.</p><h2 data-id="ideas">Ideas</h2><p>A list of Ideas that have been posted in your Vanilla community. Each entry:</p><ul><li>provides a <strong>summary</strong>,</li><li>displays <strong>user activity</strong>, and</li><li>links to the Idea so that users can <strong>learn more</strong> and see <strong>feedback and comments</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/PBCYAN0I1LII/ideas.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PBCYAN0I1LII/ideas.png" alt="Ideas.png" height="366" width="860" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="leaderboard">Leaderboard</h2><p>A list of the top contributors (those who have earned the most activity-based points) in your Vanilla community <em>during a selected time period</em>. Each entry:</p><ul><li>provides the <strong>member's name</strong>,</li><li>their <strong>earned-points total</strong>, and</li><li>links to the <strong>member's profile</strong>.</li></ul><p>📝 <strong>NOTE</strong>: The "grid" view (shown below) also includes the <strong>member's role</strong> within the community.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/CGABBVO0WL2B/leaderboard.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CGABBVO0WL2B/leaderboard.png" alt="Leaderboard.png" height="559" width="861" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="new-post-button">New Post Button</h2><p>Adds a "new action" button that users can click to start a new <strong>Discussion</strong>, <strong>Question</strong>, <strong>Idea</strong>, <strong>Poll</strong>, or <strong>Event</strong>. You can:</p><ul><li>use the default <strong>+ New Post</strong> button which contains all of the "new action" options in a dropdown list - AND/OR...</li><li>add individual "new action" buttons.</li></ul><p>📝 <strong>NOTE</strong>: As you add individual action buttons, they are removed from the <strong>+ New Post</strong> button list.</p><p><strong>Excluded Buttons</strong> - If there are actions that you <em>do not want presented</em>, add them in this field. They won't be available in the <strong>+ New Post</strong> list or as individual buttons.</p><p><strong>Custom Labels</strong> - Slide the toggle to the right to enable text fields in which you can <em>customize the label of each button</em>.</p><p>📝 <strong>NOTE</strong>: Customizing button labels is <strong>not</strong> currently supported on multi-lingual communities; this functionality is in development.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/2PVF26NT82U5/new-post-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2PVF26NT82U5/new-post-button.png" alt="New Post Button.png" height="376" width="784" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="questions">Questions</h2><p>A list of Questions that have been posted in your Vanilla community. Each entry:</p><ul><li>provides a <strong>summary</strong>,</li><li>displays <strong>user activity</strong>, and</li><li>links to the Question so that users can <strong>review it</strong>, see <strong>other members' answers</strong>, and <strong>submit an answer</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8G1RQGF6OOR5/questions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8G1RQGF6OOR5/questions.png" alt="Questions.png" height="366" width="859" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="quick-links">Quick Links</h2><p>A list of links to the more popular areas of your Vanilla community.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/33IFWM9BG2YI/quick-links.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/33IFWM9BG2YI/quick-links.png" alt="Quick Links.png" height="344" width="860" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="rss-feed">RSS Feed</h2><p>A list of feeds that you can use to provide easy access to and promote community blog content and/or external news feeds. Each entry:</p><ul><li>provides a <strong>summary</strong> and</li><li>links to the community blog or external feed where they can see the <strong>full content</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/A1CADGWDYDIO/rss-feed.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/A1CADGWDYDIO/rss-feed.png" alt="RSS Feed.png" height="355" width="883" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="site-totals">Site Totals</h2><p>Display a range of site totals data, such as total:</p><ul><li>members</li><li>posts</li><li>online users</li><li>discussions</li><li>comments</li><li>questions</li></ul><p>You can choose which metrics to display, and in what order, and even filter the data by a specific subcommunity.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/RG260NYWJ80Y/site-totals.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RG260NYWJ80Y/site-totals.png" alt="site_totals.png" height="147" width="796" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: This Widget is only available in the <strong>Full Width</strong> layout.</p><h2 data-id="subcommunities">Subcommunities</h2><p>A list of your subcommunities. Each entry:</p><ul><li>provides a <strong>summary</strong> and</li><li>links to the subcommunity for <strong>better visibility</strong> and <strong>easy access</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/CQCYAE4PE89X/subcommunities.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CQCYAE4PE89X/subcommunities.png" alt="Subcommunities.png" height="394" width="879" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="tabs">Tabs</h2><p>Multiple lists of Discussion, Question, and/or Idea content in a tabbed format on one page; users can access the lists by clicking the tabs.</p><p>Choose how many (3, 5, or 10) items to display in each list and click the <strong>Edit</strong> button to manage the tabs and their content. You can:</p><ul><li>drag and drop to <strong>arrange</strong> the tabs,</li><li><strong>hide</strong> and <strong>show</strong> the tabs,</li><li><strong>choose what content</strong> to display, and</li><li><strong>relabel</strong> the tabs.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/EDXCGBA9PUOW/tabs.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EDXCGBA9PUOW/tabs.png" alt="Tabs.png" height="309" width="704" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="tag-cloud">Tag Cloud</h2><p>A list of the most used tags in your community. Each tag "pill":</p><ul><li>links to a filtered list of all <strong>discussions</strong>, <strong>questions</strong>, and <strong>ideas</strong> to which that tag has been applied.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/XRWHKHDN5BZ1/tag-cloud.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XRWHKHDN5BZ1/tag-cloud.png" alt="Tag Cloud.png" height="149" width="883" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="user-spotlight">User Spotlight</h2><p>A list of noteworthy community users (e.g., <em>new members</em>, <em>most-active members</em>, <em>idea submitters</em>). Each entry:</p><ul><li>provides a <strong>bio/description</strong>,</li><li>includes the <strong>member's name</strong> and <strong>role</strong> within the community, and</li><li>links to the member's <strong>community profile</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/N6ZBQLIOS2ZI/user-spotlight.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/N6ZBQLIOS2ZI/user-spotlight.png" alt="User Spotlight.png" height="256" width="882" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="who's-online">Who's Online</h2><p>A list of users who are currently online in the community. Each entry:</p><ul><li>provides a <strong>count</strong> of online users,</li><li>can have <strong>avatars or linked usernames</strong>, and</li><li>can include a count of <strong>guest users</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QTPVQ8WM6F9A/whos-online.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QTPVQ8WM6F9A/whos-online.png" alt="Whos Online.png" height="175" width="882" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>