Add & Configure Custom Layout 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>✔️ <strong>TIP</strong>: Be sure to test these changes on your staging site before committing them to your production site.</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 focuses on <strong>adding and configuring Widgets in Layout Editor</strong>. To learn about the individual Widgets that you can add, see <a href="https://success.vanillaforums.com/kb/articles/548-layout-editor-widgets" rel="nofollow noreferrer ugc">Layout Editor Widgets</a>.</p><p>✔️ <strong>TIP</strong>: We recommend that you first review <a href="https://success.vanillaforums.com/kb/articles/544" rel="nofollow noreferrer ugc">Create a Custom Layout</a> to understand the fundamentals of Layout Editor.</p><p><strong>🛑 IMPORTANT</strong>: The Layout Editor does not automatically save your work. The best practice is to occasionally click <strong>Save </strong>at the top right of the editor to ensure your work is not lost.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/KSUI9Y24UUHL/save-layout-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KSUI9Y24UUHL/save-layout-button.png" alt="save_layout_button.png" height="182" width="711" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h2 data-id="add-a-widget">Add a Widget</h2><p>Widgets are individually added to <strong>columns</strong> in a <strong>Section</strong>; each column can host only one Widget.</p><ol><li>While editing a layout, click the <strong>(+) </strong>in a Section column.</li><li>Select a Widget in the resulting popup and click <strong>Add</strong>.</li><li>You can now update the Widget's details and configure its parameters. Refer to the <a href="https://success.vanillaforums.com/kb/articles/547#configure-the-widget" rel="nofollow noreferrer ugc">Configure the Widget</a> section (and subsequent sections) below to learn about all of the configuration options.</li><li>Click <strong>Save </strong>to add the Widget.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/J69GFQ8MVI3F/add-widget.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/J69GFQ8MVI3F/add-widget.gif" alt="add_widget.gif" height="840" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="configure-the-widget">Configure the Widget</h2><p>The <strong>Add/Edit</strong> dialog for each Widget has a section at the top right in which you can set the <em>title</em>, <em>description</em>, and <em>other options</em>. The options that display differ from one Widget to another.</p><p>Depending on the Widget, several other sections may be available, such as <strong>Display Options</strong>, <strong>Container Options</strong>, and <strong>Conditions</strong>. </p><ul><li>The available Display Options and Container Options are dependent on which Widget you're configuring. </li><li>The Conditions options are universal to all Widgets.</li></ul><p>All of these options are described in the sections below.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/DSS2ULZQXMFJ/widget-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/DSS2ULZQXMFJ/widget-settings.png" alt="widget-settings.png" height="427" width="473" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="widget-preview">Widget preview</h3><p>As you configure Widget options, the preview on the left automatically updates in real time to reflect your changes, as shown below.</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/8W16YILUH8SU/add-edit-correlation.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8W16YILUH8SU/add-edit-correlation.png" alt="Add-Edit-correlation.png" height="538" width="864" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: Required fields are prepopulated with a default value. You can customize the value but these fields <strong>cannot</strong> be blank.</p><h2 data-id="widget-options">Widget Options</h2><p>In the upper part of the <strong>Widget Options</strong> panel, you could encounter any of the following <em>optional settings</em>, depending on which Widget you're configuring. The most common options are <em>Title</em>, <em>Subtitle</em>, and <em>Description</em>.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/HYX29Q8XKMKS/widget-options-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HYX29Q8XKMKS/widget-options-example.png" alt="widget_options_example.png" height="437" width="485" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h4 data-id="widget-options-notes">Widget options notes</h4><ul><li>Some options are <em>available with multiple Widgets</em>. The option's <strong>functionality is the same</strong>, regardless of the Widget.</li><li>Any option that is available in Layout Editor AND Theme Editor is <strong>identical across both editors</strong>. If you've used an option in Theme Editor, its functionality in Layout Editor is identical.</li></ul><h3 data-id="title">Title</h3><p>The name or subject of the Widget. This text displays in the Widget, above the Description (if you provide one).</p><h3 data-id="subtitle"><strong>Subtitle</strong> </h3><p>Ideal for "classification" type information based on the subject/title. The Subtitle displays in small, uppercase letters above the Title on any Widget it is added to.</p><h3 data-id="description"><strong>Description</strong></h3><p>Allows you to provide information about the Widget to your users. This text displays in the Widget, below the Title (if you provide one).</p><p>🛑 <strong>IMPORTANT</strong>: Before adding text to this field, review the <strong>Description field and SEO</strong> section at the end of this article.</p><p>📝 <strong>NOTE</strong>: To aid in locating a configuration option, the remaining options are listed <strong>alphabetically</strong>.</p><h3 data-id="advertisement">Advertisement</h3><p>Slide the toggle to the right (ON) in order to set the Widget as an advertisement. <a href="https://success.vanillaforums.com/kb/articles/39" rel="nofollow noreferrer ugc">Role permissions</a> then control whether the Widget is visible to various users.</p><h3 data-id="background-image">Background Image</h3><p>Select an image to display as the background of the Widget.</p><h3 data-id="border-radius">Border Radius</h3><p>Specify a number (1 - 100) to control how "rounded" the button's corners will be. A higher number means more rounded.</p><p>📝 <strong>NOTE</strong>: This option only applies to Widgets that display buttons (e.g., the <strong>New Post Button</strong> Widget).</p><h3 data-id="categories">Categories</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Categories</strong> Widget.</p><p>By default, content from <em>all </em>Categories is displayed. However, you can click the <strong>Categories</strong> dropdown and select one Category if you'd like to limit content <em>to</em> a specific Category.</p><h3 data-id="category">Category</h3><div class="blockquote"><div class="blockquote-content"><p class="blockquote-line"></p><p class="blockquote-line">📢</p><p class="blockquote-line"> <strong>COMING SOON!</strong></p></div></div><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Leaderboard </strong>Widget.</p><p>By default, leaders are determined by tallying activity across <em>all</em> of your Vanilla community's Categories. However, you can click the <strong>Category</strong> dropdown and select one Category if you'd like to limit the Leaderboard to a specific Category.</p><h3 data-id="custom-labels">Custom Labels</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>New Post Button </strong>Widget.</p><p>Slide the toggle to the right to enable text fields in which you can <em>customize the label of each "new action" button</em>.</p><h3 data-id="display-guests">Display Guests</h3><p>Click the dropdown and select whether to display <em>registered users only</em> or to <em>include guests</em> in the Widget.</p><h3 data-id="excerpt">Excerpt</h3><p>Slide the toggle to the right to display an excerpt of the <em>announcement</em>, <em>discussion</em>, <em>idea</em>, or <em>question</em> under the title.</p><h3 data-id="excluded-buttons">Excluded Buttons</h3><p>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><h3 data-id="fallback-image-url">Fallback Image URL</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>RSS Feed</strong> Widget.</p><p>Specify the URL of an image to display in the Widget if there is not an image associated with the RSS feed content.</p><h3 data-id="featured">Featured</h3><p>Slide the toggle to the right (ON) in order to display only the Categories that an admin has set as <strong>Featured</strong>.</p><h3 data-id="filtered-by">Filtered By</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Categories</strong> Widget.</p><p>Use this option to filter the Categories displayed in the Widget. You can filter by:</p><ul><li>None</li><li>Current Category</li><li>Parent Category (if chosen, a new dropdown appears where you can select a single parent Category)</li><li>Specific Categories (if chosen, a new dropdown appears where you can select one or more Categories)</li><li>Current Subcommunity</li><li>Subcommunity (if chosen, a new dropdown appears where you can select a single subcommunity)</li></ul><h3 data-id="followed">Followed</h3><p>Slide the toggle to the right (ON) in order to display to each user <em>only the Categories that the user is following</em>.</p><h3 data-id="includedexcluded-roles">Included/Excluded Roles</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Leaderboard</strong> Widget.</p><p>By default, all users are eligible to appear in the Leaderboard Widget, as long as they've met the chosen criteria. However, you can use the <strong>Included Roles</strong> and/or <strong>Excluded Roles</strong> dropdowns to filter the Leaderboard to users based on their Role membership.</p><p><strong>✔️ TIP</strong>: This option makes it easy to create user-specific Leaderboards (e.g., perhaps you want to make a Leaderboard showcasing just your MVPs).</p><p><strong>✔️ TIP</strong>: In instances where you want to make the Widget available to numerous Roles, it's often easier to <em>exclude </em>the one or two that it <em>doesn't</em> apply to rather than <em>include </em>all of the ones that it <em>does</em>.</p><h3 data-id="leaderboard-type">Leaderboard Type</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Leaderboard</strong> Widget.</p><p>Click the dropdown and select one "qualifier" as the points basis to display in the Widget. You can select <strong>Reputation points</strong>, <strong>Posts and comments count</strong>, or <strong>Accepted answers count</strong>.</p><h3 data-id="links-list">Links List</h3><p>Click <strong>Edit</strong> to manage what links to include in the Widget. In the dialog, you can <em>create</em> a link, and <em>edit</em>, <em>hide</em>, and <em>show</em> existing links.</p><h3 data-id="meta-options">Meta Options</h3><p>Slide the toggles to the right to display system information (e.g., comments, views, tags, author) relating to the <em>announcement</em>, <em>discussion</em>, <em>idea</em>, or <em>question</em>.</p><p>📝 <strong>NOTE</strong>: The <strong>Grid</strong>, <strong>Carousel</strong>, and <strong>Links</strong> settings (in <strong>CONTAINER OPTIONS > Display Type</strong>) reduce the number of metadata options.</p><h3 data-id="name">Name</h3><p>📝 <strong>NOTE</strong>: This option only pertains to the <strong>Custom HTML</strong> Widget.</p><p>Specify a name for the Widget. This displays on the preview of the layout (because the code is not shown) to indicate to admins <em>which Widget it is and its position</em>.</p><h3 data-id="rss-feed-url">RSS Feed URL</h3><p>Specify the URL of an RSS feed to display in the Widget.</p><h3 data-id="separate-buttons">Separate Buttons</h3><p><strong>📝 NOTE</strong>: This option pertains to the <strong>New Post Button</strong> Widget.</p><p>If this option is left in its default state, clicking the <strong>New Post</strong> button will prompt users to then choose what type of Discussion to create (i.e., Discussion, Question, Idea, Poll, or Event). However, you can also click the <strong>Separate Buttons </strong>dropdown and select one or more of these discussion types to create a separate button for them. This, then, allows users to immediately begin creating that Discussion type.</p><h3 data-id="style">Style</h3><p>Click the dropdown and select whether to represent the users who are online by their <em>name</em> or <em>profile icon</em>.</p><h3 data-id="timeframe">Timeframe</h3><p><strong>📝 NOTE</strong>: This option pertains to the <strong>Leaderboard </strong>Widget.</p><p>Click the dropdown and select a timeframe for which the Widget will display point totals.</p><ul><li>Daily</li><li>Weekly</li><li>Monthly</li><li>Yearly</li><li>All Time</li></ul><h3 data-id="type">Type</h3><p>Click the dropdown and select the source of the events to display in the Widget (Category or Group).</p><h3 data-id="user">User</h3><p>Click the dropdown and select one user to spotlight in the Widget.</p><h2 data-id="display-options">Display Options</h2><p>Click to expand the <strong>Display Options</strong> section to view additional options. The available settings depend on the Widget you're configuring. </p><p><strong>📝 NOTE</strong>: All possible options are listed below, in alphabetical order.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/7WRKUWJNTWR0/display-options-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7WRKUWJNTWR0/display-options-example.png" alt="display_options_example.png" height="657" width="616" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="featured-image">Featured Image</h3><p><strong>🛑 IMPORTANT</strong>: The <strong>Cloudflare Image Resize</strong> addon must be enabled in your Vanilla community for this feature to work.</p><p>If enabled, the <strong>first image</strong> in a post (by location, not first image uploaded) will automatically display in the Widget. These "thumbnail" type images help provide visual interest to a list of posts. </p><p>✔️ <strong>TIP</strong>: You can control which image is featured in a post by editing the post and ensuring the one you want is positioned as the first image.</p><ul><li>Recommended featured image size is <strong>16:9</strong>.</li><li>If there isn't an image in a post, a default, gradient-style image will display instead. The colors of this default are pulled from your Theme, via the <strong>Global Styles > Brand Color</strong> option.</li><li>When <strong>Featured Image</strong> is enabled, the <strong>Fallback Image</strong> option also becomes available. Read more about the Fallback Image option below to learn how these two options work together.</li><li>In addition to controlling the Featured Image option on a Widget-by-Widget basis, you can also set a "global" default by setting this option in a Theme. To do so, edit a Theme and select <strong>Discussions List </strong>from the "Styles" menu.</li></ul><h3 data-id="fallback-image">Fallback Image</h3><p>As mentioned above, a default, gradient-style image will display for any post without an image. </p><ul><li>If desired, you can override this default image with a fallback image that you control. To do so, click <strong>Choose </strong>and locate the image to use.</li><li>Recommended size = <strong>1200 x 600px</strong>.</li></ul><h3 data-id="knowledge-base">Knowledge Base</h3><p>Articles from the selected knowledge base will display in the Widget.</p><h3 data-id="limit">Limit</h3><p>Most Widgets include the <strong>Limit </strong>option, allowing you to define the maximum number of entries to display. Most commonly, your options are <strong>3</strong>, <strong>5</strong>, or <strong>10</strong>, but a few Widgets offer unique selections, such as Tag Cloud and RSS Feed.</p><h3 data-id="personalized-idea-filter">Personalized Idea Filter</h3><p>Click the dropdown and select a filter for which Ideas to display in the Widget. You can display Ideas based on <strong>Ideas Created</strong> or <strong>Ideas Upvoted</strong>.</p><h3 data-id="show-featured">Show Featured</h3><p>Slide the toggle to the right (ON) in order to display <strong>Featured</strong> articles only.</p><h3 data-id="sort-order">Sort Order</h3><p>Choose how you'd like Vanilla to sort and display the entries in the Widget. You can prioritize the sort order by:</p><ul><li>Recently Commented</li><li>Recently Added</li><li>Top (rated)</li><li>Hot (score + activity)</li></ul><h3 data-id="status">Status</h3><p>By default, all Questions display in the Widget. However, you can click the <strong>Status </strong>dropdown and filter by:</p><ul><li>Accepted answers only </li><li>Answered questions only</li><li>Unanswered questions only</li><li>All </li></ul><h3 data-id="time-frame">Time Frame</h3><p><strong>📝 NOTE</strong>: This option pertains to the <strong>Events</strong> Widget.</p><p>Click the dropdown and select to display (<em>past</em>, <em>future</em>, or <em>all</em>) community events in the Widget.</p><h2 data-id="container-options">Container Options</h2><p>In this section, you could encounter any of the following <em>optional settings</em>. These descriptions are applicable whenever the setting is present.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/CWEKEY8VBKCR/container-options-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CWEKEY8VBKCR/container-options-example.png" alt="container_options_example.png" height="331" width="375" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <ul><li><strong>Background color</strong> - set a color to fill the background of the Widget. This defaults to the Style Guide setting.</li><li><strong>Background image</strong> - choose an image to fill the background of the Widget.</li><li><strong>Border Type</strong> - choose whether to enclose the Widget entries with a border. This defaults to the Style Guide setting.</li><li><strong>Header Alignment</strong> - choose whether the header is centered or left-justified.</li><li><strong>Max Columns</strong> - choose the number of columns the Widget displays. (<em>Refer to </em><strong><em>Max Columns notes</em></strong><em> below for guidance.</em>) Use with <strong>Display Type</strong> for best results. This defaults to the Style Guide setting.</li><li><strong>Display Type</strong> - choose how to display the Widget content (as a <strong>Grid</strong>, <strong>List</strong>, <strong>Carousel</strong>, or <strong>Links</strong>). Use with <strong>Max Columns</strong> for best results. This defaults to the Style Guide setting.</li><li><strong>View All Button</strong> - slide the toggle to the right (ON) in order to enable the <strong>View All</strong> button, which will take the user to the full paginated list. When enabled, specify:<ul><li>the <strong>URL</strong> of the full paginated list,</li><li>a <strong>Label</strong> (e.g., <em>See all content...</em>) for the button, and</li><li>the <strong>Position</strong> (top or bottom) of the button.</li></ul></li></ul><p><strong>📝 NOTE</strong>: This button displays only for Widgets that <em>provide a partial list of content from a larger list</em>, such as an RSS feed and lists of Discussions, Questions, Ideas, etc. </p><h4 data-id="max-columns-notes">Max Columns notes</h4><p>Consider the following column behaviors.</p><ul><li>If you select the <strong>2 Column</strong> Section type, the maximum number of columns is actually four across.</li><li>If you select the <strong>3 Column</strong> Section type, the maximum of three columns is enforced.</li><li>If <strong>Max Columns</strong> = <strong>5</strong>, the full five columns display only in the <strong>Full Width</strong> and <strong>1 Column</strong> Section types.</li></ul><h2 data-id="conditions">Conditions</h2><p>In this section, you will only ever see the following two settings. These options are available for ALL Widgets.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/TMS3Z8PD45C7/conditions-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TMS3Z8PD45C7/conditions-example.png" alt="conditions_example.png" height="130" width="376" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <ul><li><strong>Roles</strong> - choose one or more Roles to control which users this Widget is visible to. The default is <strong>All</strong>. <em>Any custom Roles than admins create for your Vanilla community will be available in the list.</em></li><li><strong>Visibility</strong> - choose the devices (desktop, mobile, or both) on which the Widget will display. The default is <strong>Desktop & Mobile</strong>.</li></ul><p>To learn about the individual Widgets that you can add, check out the article below.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"You can use Layout Editor to add custom pages to your Higher Logic Vanilla (Vanilla) community. Vanilla makes it easy for you to customize the layout of your pages and to then populate the pages with content via a variety of Widgets. Widgets are a great device in communities because they can host either static or dynamic…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/548","embedType":"link","name":"Layout Editor Widgets - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/548" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/548 </a> </div><h2 data-id="description-field-and-seo">Description field and SEO</h2><p>The <strong>Description </strong>field of Widgets will be queried for <strong>search engine optimization</strong> (<strong>SEO</strong>). However, whatever text you specify in this field will be <em>visible to your users</em>. So if you want to add SEO text BUT not have it visible to users:</p><p>1. Make sure that the Description field of your Widget is <strong>blank</strong>.</p><p>2. Navigate to <strong>Appearance > Branding & Assets > Branding & SEO</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/ANLO0SO2C7VU/seo-description.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ANLO0SO2C7VU/seo-description.png" alt="SEO-Description.png" height="339" width="1154" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. In the <strong>Site Description</strong> field, type/paste your SEO text.</p><p>4. Click <strong>Save</strong>.</p><p>Now, the Site Description field contains your SEO text, but the SEO text <strong>does</strong> not display to users in the on-page Widget!</p><p>📝 <strong>NOTE</strong>: If text gets added (by an Admin) to the Description field of a Widget, that text will be used for SEO.</p> </article> </main>