In this article, you'll learn how to apply legacy layouts (think of these as default layouts) and custom layouts to one or more of your community pages. Currently, you can apply layouts to the following areas of your community:
- Home Page - your community's "landing page." Here, your users are welcomed to your community, so it's your chance to make the proverbial "first impression."
- Discussions page - displays a list of recent discussions; users can click a discussion to view its full details.
- Categories page - displays a list of your community Categories, which are the high-level organizers of your discussions.
What is a layout?
Before we continue, let's take a moment to refresh ourselves as to what layouts are, as well as the two types available.
Types of layouts
There are two types of layouts you can apply to pages in your community:
- Legacy: You can think of these as the default, out-of-the-box layouts Vanilla provides. There are a few types of legacy layouts for each area of your community. Learn more here.
- Custom: As you'd expect, these are layouts you can customize to meet your exact needs. While some custom layouts include widgets you cannot remove, as they're required for it to function, you're free to add sections and widgets and move them around as needed. Learn more here.
Components of a layout
The building blocks of a layout are:
- sections, which dictate the page's available "real-estate,"
- and widgets, which are added to sections to control the page's content.
Access your layouts
Legacy and custom layouts are available on the Dashboard > Appearance tab, in the LAYOUTS section.
All layouts are accessible in the three subsections highlighted below: Home Pages (including Site and Subcommunity), Discussions Pages, and Category Pages (including Discussion and Nested).
Choose between legacy and custom layouts
Because there are two types of layouts (legacy and custom), you need to instruct the system which type to use for each area of your community:
As shown below, each of these main areas has a Layout Settings page.
Layout Settings overview
On each of these pages, you'll notice the Layout Version section highlighted below. This is where you choose whether this area of your community will use a legacy or custom layout.
In the example below, we're managing the Home Layout Settings page, and so we're deciding whether our community's Home page will use a legacy or custom layout.
- Custom Layouts option: Select this to tell the system you're going to use a custom layout for this area of your community. When selected, you'll then need to edit one of your available custom layouts and apply it (more on this below).
- Legacy Layouts option: Select this to tell the system you're going to use a legacy layout for this area of your community. When this option is selected, the available legacy layouts are enabled below. Check out this article to learn more about the various legacy layouts.
Once you've made your selection, click Save at the top right of the page to apply the change.
Apply a custom layout
Once a custom layout has been created and saved, it can be applied in several ways. To apply a custom layout:
- Locate and select the layout you want to apply.
- Click the ellipsis (...) menu at the top right, followed by Apply.
- At this point, a dialog will display offering you a few choices on how to apply the layout. Refer to the sections and images below for more information.
Home page layouts
You can apply custom Home page layouts at the Site and Subcommunity Home level.
- Site Homepage layouts apply to just the "main site" (no subcommunities).
- Subcommunity Home layouts can be applied as the:
- default for ALL subcommunity home pages
- or granularly to one or more specific subcommunities.
Discussion page layouts
You can apply custom Discussion page layouts as the:
- default for ALL discussion pages
- or granularly for specific subcommunities (if applicable).
Category page layouts
As you may know, there are a few types of Categories. Check out this article to learn more about each type.
For the purpose of custom layouts, you can apply them for the Discussion and Nested Category types.
- Discussion Categories are the default type. They enable users to post discussions.
- Nested Categories are high-level placeholders for other Categories. They cannot directly host discussions.
Apply custom Category layouts
- Discussion Category layouts can be applied as the:
- default for all Discussion Category pages,
- set as the default for specific subcommunities,
- or applied to specific Categories.
- Nested Categories layouts can be applied as the:
- default for all Nested Category pages,
- set as the default for specific subcommunities,
- or applied to specific Categories.
Keyboard accessibility
- Expand the Home Page subsection and click to select the custom layout want to apply.
- A preview of the custom layout is shown on the right, along with an ellipsis (...) menu. Click this menu and select Apply.
- In the resulting popup, click the Pages dropdown and select the page(s) to apply the layout to.
- Click Apply.
Custom layout tips
- You can apply a custom layout to multiple pages at once. In addition, you can apply a layout to your global site home page and to subcommunity home pages (if enabled). This allows you to uniquely customize each of your subcommunities, if needed.
- When a custom layout is applied, a visual indicator is displayed when it's selected (to the right of the title) and in the dropdown menu, as shown below. In addition, details let you know when the layout was created, who created it, the last update date, and where it's applied. This info is helpful for Vanilla communities that have multiple layouts applied to different home pages (or Category pages in the future).
- You cannot delete custom layouts that are currently applied: the Delete option in ellipsis (...) menu will be greyed out and there will be an alert to indicate why.
