Layout Editor Widgets - Vanilla Success
<main> <article class="userContent"> <div class="blockquote"><div class="blockquote-content"><p class="blockquote-line"><strong>🛑 IMPORTANT</strong>: The new Layout Editor will be available with the <a href="https://success.vanillaforums.com/kb/articles/555-release-2022-012" rel="nofollow noreferrer ugc">2022.012 release</a>.</p></div></div><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> subsection and click <strong>Add Custom Layout</strong>.</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="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="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="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>