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.
✔️ TIP: Consider testing these changes on your staging site before committing them to your production site.
Widgets are a great device in communities because they can host either static or dynamic content. 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.
This article focuses on adding and configuring Widgets in Layout Editor. To learn about the individual Widgets that you can add, see Layout Editor Widgets.
✔️ TIP: We recommend that you first review Create a Custom Layout to understand the fundamentals of Layout Editor.
🛑 IMPORTANT: The Layout Editor does not automatically save your work. The best practice is to occasionally click Save at the top right of the editor to ensure your work is not lost.
Add a Widget
Widgets are individually added to columns in a Section; each column can host only one Widget.
- While editing a layout, click the (+) in a Section column.
- Select a Widget in the resulting popup and click Add.
- You can now update the Widget's details and configure its parameters. Refer to the Configure the Widget section (and subsequent sections) below to learn about all of the configuration options.
- Click Save to add the Widget.
Configure the Widget
The Add/Edit dialog for each Widget has a section at the top right in which you can set the title, description, and other options. The options that display differ from one Widget to another.
Depending on the Widget, several other sections may be available, such as Display Options, Container Options, and Conditions, each of which can be clicked to expand its associated options.
- The available Display Options and Container Options are dependent on which Widget you're configuring.
- The Conditions options are universal to all Widgets.
All of these options are described in the sections below.
Widget preview
As you configure Widget options, the preview on the left automatically updates in real time to reflect your changes, as shown below.
📝 NOTE: Required fields are prepopulated with a default value. You can customize the value but these fields cannot be blank.
Widget Options
In the upper part of the Widget Options panel, you could encounter any of the following optional settings, depending on which Widget you're configuring. The most common options are Title Type, Subtitle, and Description Type.
Widget options notes
- Some options are available with multiple Widgets. The option's functionality is the same, regardless of the Widget.
- Any option that is available in Layout Editor AND Theme Editor is identical across both editors. If you've used an option in Theme Editor, its functionality is the same in Layout Editor.
Each of the available Widget Options are described below. Many of these are unique to specific Widgets, which will be indicated where appropriate.
Title Type
The name or subject of the Widget. This text displays in the Widget, above the Description (if you provide one).
You have three title options:
- None - No title is displayed.
- Banner Title - A "default" title the system automatically applies, based on the Widget (e.g., Discussion List for the Discussion Widget).
- Custom - When selected, a new Title field appears in which you can type a custom Widget title.
Subtitle
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.
Description Type
Allows you to provide information about the Widget to your users. This text displays in the Widget, below the Title (if you provide one).
You have three description options:
- None - No description is displayed.
- Site Description - A "default" description the system automatically applies, based on what your organization has entered into the Site Description field on the Appearance > Branding & Assets > Branding & SEO. Check out the Description field and SEO section at the end of this article to learn more.
- Custom - When selected, a new Description field appears in which you can type a custom Widget description.
⚠️ IMPORTANT: Before adding text to this field, review the Description field and SEO section at the end of this article.
📝 NOTE: To aid in locating a configuration option, the remaining options are listed alphabetically.
Advertisement
Slide the toggle to the right (ON) in order to set the Widget as an advertisement. Role permissions then control whether the Widget is visible to various users.
Background Image
Select an image to display as the background of the Widget.
Border Radius
📝 NOTE: This option only applies to Widgets that display buttons (e.g., the New Post Button Widget).
Specify a number (1 - 100) to control how "rounded" the button's corners will be. The higher the number, the more rounded the corners.
Categories
📝 NOTE: This option only pertains to the Categories Widget.
By default, content from all Categories is displayed. However, you can click the Categories dropdown and select one Category if you'd like to limit content to just that Category.
Category
📝 NOTE: This option only pertains to the Leaderboard Widget.
By default, leaders are determined by tallying activity across all of your Vanilla community's Categories. However, you can click the Category dropdown and select one Category if you'd like to limit the Leaderboard to a specific Category.
Custom Labels
📝 NOTE: This option only pertains to the New Post Button Widget.
Slide the toggle to the right to enable text fields in which you can customize the label of each "new action" button.
Display Guests
Click the dropdown and select whether to display registered users only or to include guests in the Widget.
Excerpt
Slide the toggle to the right to display an excerpt of the announcement, discussion, idea, or question under the title.
Excluded Buttons
If there are actions that you do not want presented, add them in this field. They won't be available in the + New Post list or as individual buttons.
Fallback Image URL
📝 NOTE: This option only pertains to the RSS Feed Widget.
Specify the URL of an image to display in the Widget if there is not an image associated with the RSS feed content.
Featured
Slide the toggle to the right (ON) in order to display only the Categories that an admin has set as Featured.
Filter By
📝 NOTE: This option only pertains to the Categories Widget.
Use this option to set the Widget's contents (i.e., one or multiple Categories) or limit the contents to a Subcommunity. The filter options are:
- None
- Current Category
- Parent Category (click the Category dropdown and select a Category)
- Specific Categories (click the Categories dropdown and select one or more Categories)
- Current Subcommunity
- Subcommunity (click the Subcommunity dropdown and select a Subcommunity)
✔️ TIP: Specific Categories is the most versatile option because you can select multiple Categories, whereas Current Category, Parent Category, and the Subcommunity options limit your selections.
Followed
Slide the toggle to the right (ON) in order to display to each user only the Categories that the user is following.
Included/Excluded Roles
📝 NOTE: This option only pertains to the Leaderboard Widget.
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 Included Roles and/or Excluded Roles dropdowns to filter the Leaderboard to users based on their Role membership.
✔️ TIP: This option makes it easy to create user-specific Leaderboards (e.g., a Leaderboard showcasing just your MVPs).
✔️ TIP: In instances where you want to make the Widget available to numerous Roles, it's often easier to exclude the one or two that it doesn't apply to rather than include all of the ones that it does.
Leaderboard Type
📝 NOTE: This option only pertains to the Leaderboard Widget.
Click the dropdown and select one "qualifier" as the points basis to display in the Widget. You can select Reputation points, Posts and comments count, or Accepted answers count.
Links List
Click Edit to manage what links to include in the Widget. In the dialog, you can create a link, and edit, hide, and show existing links.
Meta Options
Slide the toggles to the right to display system information (e.g., comments, views, tags, author) relating to the announcement, discussion, idea, or question.
📝 NOTE: The Grid, Carousel, and Links settings (in CONTAINER OPTIONS > Display Type) reduce the number of metadata options.
Name
📝 NOTE: This option only pertains to the Custom HTML Widget.
Specify a name for the Widget. This displays on the preview of the layout (because the code is not shown) to indicate to admins which Widget it is and its position.
RSS Feed URL
Specify the URL of an RSS feed to display in the Widget.
Separate Buttons
📝 NOTE: This option pertains to the New Post Button Widget.
If this option is left in its default state, clicking the New Post 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 Separate Buttons 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.
Style
Click the dropdown and select whether to represent the users who are online by their name or profile icon.
Timeframe
📝 NOTE: This option pertains to the Leaderboard Widget.
Click the dropdown and select a timeframe for which the Widget will display point totals.
- Daily
- Weekly
- Monthly
- Yearly
- All Time
Type
Click the dropdown and select the source of the events to display in the Widget (Category or Group).
User
Click the dropdown and select one user to spotlight in the Widget.
Display Options
Click to expand the Display Options section to view additional options. The available settings depend on the Widget you're configuring.
📝 NOTE: All possible options are listed below, in alphabetical order.
Featured Image
If enabled, the first image 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.
✔️ TIP: 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.
- Recommended featured image size-ratio is 16:9.
- If there isn't an image in a post, a default, gradient-style image will display where the featured image would otherwise be. The colors of this default image are pulled from your Theme, via the Global Styles > Brand Color option.
- When Featured Image is enabled, the Fallback Image option also becomes available. Read about the Fallback Image option below to learn how these two options work together.
- 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 Discussions List from the "Styles" menu.
Fallback Image
As mentioned above, if a post doesn't have an image, the Widget will instead display a default, gradient-style image. However, you can override this default image by specifying a fallback image.
- Click Choose and select an image to use.
- Recommended size = 1200 x 600 px.
Knowledge Base
Articles from the selected knowledge base will display in the Widget.
Limit
Most Widgets include the Limit field where you can define the maximum number of entries to display. This text field accepts numeric values up to 100.
Personalized Idea Filter
Click the dropdown and select a filter for which Ideas to display in the Widget. You can display Ideas based on Ideas Created or Ideas Upvoted.
Show Featured
Slide the toggle to the right (ON) in order to display Featured articles only.
Sort Order
Choose how you'd like Vanilla to sort and display the entries in the Widget. You can prioritize the sort order by:
- Recently Commented
- Recently Added
- Top (rated)
- Hot (score + activity)
Status
By default, all Questions display in the Widget. You can click the Status dropdown and filter by:
- Accepted answers only
- Answered questions only
- Unanswered questions only
- All
Time Frame
📝 NOTE: This option pertains to the Events Widget.
Click the dropdown and select to display (past, future, or all) community events in the Widget.
Container Options
In this section, you could encounter any of the following optional settings. These descriptions are applicable whenever the setting is present.
📝 NOTE: This button displays only for Widgets that provide a partial list of content from a larger list, such as an RSS feed and lists of Discussions, Questions, Ideas, etc.
Max Columns notes
Consider the following column behaviors.
- If you select the 2 Column Section type, the maximum number of columns is actually four across.
- If you select the 3 Column Section type, the maximum of three columns is enforced.
- If Max Columns = 5, the full five columns display only in the Full Width and 1 Column Section types.
Conditions
In this section, you will only ever see the following options. These options are available for ALL Widgets.
- Roles - choose one or more Roles to control which users this Widget is visible to. The default is All. Any custom Roles that admins create for your Vanilla community will be available in the list.
- Ranks - choose one or more Ranks to control which users this Widget is visible to. The default is All. Any custom Ranks that admins create for your Vanilla community will be available in the list.
✔️ TIP: Check out the Notes about Roles & Ranks section below for some important considerations.
- Visibility - choose the devices (desktop, mobile, or both) on which the Widget will display. The default is Desktop & Mobile.
📝 Notes about Roles & Ranks
- If you choose both Roles and Ranks, they function as an OR operator. For example, if you've chosen Role A and Rank Z, the Widget will be visible to users who have either Role A OR Rank Z (i.e., they don't need both).
- Users can have multiple Roles but only a single Rank at a time, so keep this in mind when planning out your community's Widget visibility.
- Using Roles and Ranks to limit Widget visibility enables you to create sets of Widgets like events, discussion lists, featured content, call-to-actions, quick links, leaderboards, and more that are only visible to specific sets of users. This is a great way to craft curated and unique engagement experiences and opportunities for guests, new users, power users, and everyone in between.
- A great way to check what Widgets a user can see is to spoof them and see for yourself.
✔️ TIP: Check out the tips & tricks in this community post for even more insight!
To learn about the individual Widgets that you can add, check out the article below.
Description field and SEO
The Description Type field of Widgets will be queried for search engine optimization (SEO). However, whatever text you specify in this field will be visible to your users. So if you want to add SEO text BUT not have it visible to users:
1. Make sure that the Description Type field of your Widget is blank.
2. Navigate to Appearance > Branding & Assets > Branding & SEO.
3. In the Site Description field, type/paste your SEO text.
4. Click Save.
Now, the Site Description field contains your SEO text, but the SEO text does not display to users in the on-page Widget!
📝 NOTE: If text gets added (by an Admin) to the Description field of a Widget, that text will be used for SEO.
