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: Be sure to test 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.
- 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, Subtitle, and Description.
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 in Layout Editor is identical.
Title
The name or subject of the Widget. This text displays in the Widget, above the Description (if you provide one).
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
Allows you to provide information about the Widget to your users. This text displays in the Widget, below the Title (if you provide one).
🛑 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
🛑 IMPORTANT: The Cloudflare Image Resize addon must be enabled in your Vanilla community for this feature to work.
If the addon is 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 is 16:9.
- 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 Global Styles > Brand Color option.
- When Featured Image is enabled, the Fallback Image option also becomes available. Read more 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, a default, gradient-style image will display for any post without an image.
- If desired, you can override this default image with a fallback image that you control. To do so, click Choose and locate the image to use.
- Recommended size = 1200 x 600px.
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 two settings. 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 than admins create for your Vanilla community will be available in the list.
- Visibility - choose the devices (desktop, mobile, or both) on which the Widget will display. The default is Desktop & Mobile.
To learn about the individual Widgets that you can add, check out the article below.
Description field and SEO
The Description 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 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.
