When setting up your community, you have a number of layout options available to you for each part of your site, allowing you to customize the look and feel of your user experience.
Your homepage is your users’ first impression of your brand and will set the tone for how they begin to interact with your community.
You have the option between 4 different layouts, which we’ll get into. Just hover over your selection and click Apply.
This will present a list of all your discussions on the homepage in order of most recent, with no particular grouping.
The most widely used homepage layout, this will display your entire category structure with headings that allow for greater organization.
This displays a showcase of your top content based on user reactions, in a tiled view. It’s required to have set up the Best Of page beforehand.
This layout will take your users directly to your Knowledge Base, as opposed to the forum side of your site. This layout works well for Support communities that wish to promote a self-serve approach to their members looking to solve issues or learn about a certain topic on their own. It may however decrease engagement in the discussion side of your forum.
In the Dashboard, under the “Appearance” panel there is a “Layout” section. In this area, there are options for how to display the Discussion page for your users.
The layout you choose for your discussions is what will be displayed anywhere a discussion list is shown. This list can appear on any category page (if discussions are allowed), on your recent discussions page, on your bookmarks page, on your homepage (if you’ve opted for the Discussions layout) or even within a group.
Note: This will not apply to the tabbed discussion list in the Tabs Widget, which will always display the Foundation Layout.
Take a look at the three different display options below and try them in your community:
A simple and clean layout, displays meta info in alphanumeric format.
A throwback to the forums of yore, meta info is displayed in columns with headers. Slightly busier and less streamlined than Modern Layout.
Vanilla’s latest layout; includes a new Discussions List section where you can configure things like border styles, and text colours. You'll also have the flexibility to enable or disable specific meta-data such as the discussions view count, comment count, excerpt, avatars, and more. Learn more about styling the Discussion List with Foundation Layout here.
Meta info can optionally be displayed as icons. Go to Theme Editor -> Discussion List to explore your options.
The layout you choose for your categories is what will be displayed on any page that displays a list of categories. It will show on your homepage (if you’ve opted for the Categories layout) and on any top-level or parent category page that contains child categories.
Before modifying your individual categories, you can choose how they will appear on your homepage. In the Dashboard, under the “Appearance” panel there is a “Layout” section. In this area, there are options for how to display the Categories page for your users:
A simple and clean layout, displays meta info in alphanumeric format, it removes the extra columns for discussion and comment totals, making for a clean look.
A throwback to the forums of yore, meta info is displayed in columns with headers. Slightly busier and less streamlined than Modern Layout. It shows discussion and comment totals as columns, along with user avatar and the thread title of the most recent post in the section.
Displays all your categories and each of their top 5 discussions at the same time. Category titles are displayed as headers and are used to organize discussions. This provides quick navigation to new content.
Note: Mixed Layout is content-heavy and therefore is not recommended if your community has a large number of categories, as this may impact page load times and site performance. If your site is loading too slowly, consider trying another layout style.
The Tile Layout option displays your categories as tiles. Once enabled this layout can be customized using our Theme Editor. In the Widgets section, under Tiles you can configure options for borders, images and colours, as well as enable or disable meta-data like counts and category descriptions*.
*Please note that category descriptions will not display if the Background image type is selected (as seen below).
Additional Category Styling
There are several additional styling options for your categories:
- Add a description
- Add a photo
- Add a banner image
All of these can be configured in your dashboard > settings > categories > edit / add category:
Add a description: the description will show on the main Category page (if using the tile layout option, it will only appear with the Icon tile style). The description will also show in the specific category page under the category name.
Add a photo: the photo will show on the main Category page if you use the Icon tile style.
Add a banner image: the banner image will show on the main category page if you use the Background or Image tile style. It will also replace the standard banner image for that category page.