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.
✔️ TIP: If you're not already familiar with the fundamentals of Layout Editor, we recommend that you review Create a Custom Layout.
Widgets allow you to host either static or dynamic content anywhere you'd like in your Vanilla community. 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.
⚠️ Before we begin…
- This article focuses on describing the common widget options that are shared among all widgets, such as their display options, container options, and conditions.
- To learn about each widget's unique options—those you'll configure to define its core functionality—see Layout Editor Widgets.
🛑 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. (See Create a Custom Layout to learn more about creating and managing layouts.)
- 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 options. 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
After adding a widget to a Section column, you'll be presented with the Add/Edit dialog to begin configuring its options; in this article, we'll be focusing on the options in the following areas:
- Widget Options
- Display Options
- Container Options
- Conditions
⚠️ IMPORTANT: This article focuses on describing the common widget options in these four areas that are shared among all widgets. See Layout Editor Widgets to learn about each widget's unique options—those you'll configure to define their core functionality.
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
While some widgets have unique Widget Options, we're going to focus on the three that are common to all widgets: Title Type, Subtitle, and Description Type.
Title Type
The name or subject of the widget. This text displays in the widget, above the Description (if you provide one).
There are three potential title options (depending on the widget):
- None - No title is displayed.
- Subcommunity 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.
- Subcommunity 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.
Display Options
Click to expand the Display Options section to view additional options.
⚠️ IMPORTANT: These options are only available for the following content-based widgets:
- Announcements
- Articles
- Discussions
- Events
- Ideas
- Questions
📝 NOTE: This article covers the Display Options that are shared among these widgets, while the Layout Editor Widgets article covers each widget's unique Display Option(s).
Filter By
These options allow you to filter the widget's content in a few ways:
- Subcommunity: This filter has two options:
- Set: Show content only from the specific subcommunity you select.
- Contextual: If a page layout with this widget is applied to multiple subcommunities, it will dynamically show content based on the subcommunity a user is viewing.
- Category: Only show content from the selected Category. You can optionally choose to also include content from any associated subcategories.
- None: This is the default setting, and means all possible content is displayed in the widget.
Only Show Followed Categories
If checked, only content belonging to a user's Followed Categories displays in the widget. In some use-cases, this is a great way to ensure only content a user is likely to be interested in, and engage with, will display.
📝 NOTE: This option is not available if Filter By is set to Category (this is because you are filtering the widget by a specific Category, therefore Followed Categories will not be applicable.
Sort Order
Choose how you'd like Vanilla to sort and display the entries in the widget. You can prioritize the sort order by:
Announcements, Discussions, Events, Ideas, Questions widgets only
- Recently Commented
- Recently Added
- Top (rated)
- Hot (score + activity)
Articles widget only
- Recently Updated
- Recently Created
Limit
Controls the maximum number of entries to display in the widget. This text field accepts numeric values up to 100.
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 600px.
Container Options
Container Options allow you to control the visual aesthetic and layout of the widget's container.
- Background color - set a color to fill the background of the widget. This defaults to the Style Guide setting.
- Background image - choose an image to fill the background of the widget.
- Border Type - choose whether to enclose the widget entries with a border. This defaults to the Style Guide setting.
- Header Alignment - choose whether the header is centered or left-justified.
- Display Type - choose how to display the widget content (as a Grid, List, Carousel, or Links).
- View All Button - slide the toggle to the right (ON) to enable the View All button, which will take the user to the full paginated list for the content in question. When enabled, specify:
- the URL of the full paginated list,
- a Label (e.g., See all content...) for the button, and
- the Position (top or bottom) of the button.
📝 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.
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.
Meta Options
⚠️ IMPORTANT: These options pertain only to the content-based widgets listed below (the available Meta Options vary per widget):
- Announcements
- Articles
- Categories
- Discussions
- Ideas
- Questions
You can turn ON/OFF a host of Meta Options to control what content- and user-based details are provided for each widget entry (see image below). These options make it easy to show important, at-a-glance details and metrics, such as an entry's author, the user who last commented, its score, tags, and more.
📝 NOTE: A widget's configured Display Type (grid, list, carousel, links) controls what Meta Options are available: The List Display Type provides the most Meta Options (along with the ability to display them as text or icons), whereas the Link Display Type offers none.
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.
