In this article, you'll learn the fundamentals of the Higher Logic Vanilla (Vanilla) Layout Editor to obtain the skills necessary to create custom layouts.
✔️ TIP: You can copy your custom layouts to effortlessly replicate and tweak them, saving you time and effort when trying to create a consistent look or experiment with variations.
What is the Layout Editor?
The Layout Editor enables Administrators to create custom page layouts they can apply to various pages across their Vanilla community. The editor gives you complete control over the layout of the page and the content within it.
Currently, you can create custom layouts for:
- Home pages, with the ability to create unique layouts for:
- Site (your main site)
- Subcommunities (allows you to customize the appearance of individual subcommunity homepages, tailoring the experience for specific subcommunities)
⚠️ IMPORTANT: The Subcommunity Home Layout option will only be available if (a) you're using our Subcommunities feature and (b) you have not configured a specific subcommunity as the default.
- Discussion pages
- Category pages, with the ability to create unique layouts for:
- Discussion Categories
- Nested Categories
Access the Layout Editor
- Access the Dashboard.
- Navigate to the Appearance tab and expand the LAYOUTS section.
- Here, you'll find subsections dedicated to Home pages, Discussion pages, and Category pages, and within these you can access the Layout Editor by editing an existing layout or by clicking Add Custom Layout to create one.
Create a custom layout
🛑 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.
1. On the Appearance tab, expand the LAYOUTS section.
2. Depending on the custom layout you want to create, expand the Home Page, Discussions Page, or Category Page subsection and click Add Custom Layout.
3. Give your layout a name.
4. Select your first Section. You're now editing your custom layout in the Layout Editor.
📝 NOTE: When creating a Discussions page layout or Category page layout, the Discussion List widget or Category List widget cannot be removed (it's needed to display the discussions or Categories on the page). It can, however, be moved and configured just like any other widget.
Continue reading the sections below to learn more about managing Sections and Widgets, as well as the Layout Editor's other features.
Sections
Sections provide the foundation or layout of the page, and are containers in which to hold its content. Sections can have one or more columns, and one or more widgets can be added to each column.
📝 NOTE: The widgets you can add to a Section are filtered based on the section type. For example, you can only add three widgets to the Full Width section type, and two of them are banners.
Breadcrumbs
You can add breadcrumbs to your Sections. To do so:
- click to select a Section.
- Click the button highlighted below.
Once added, you're free to move the breadcrumbs around.
Add a Section
- Hover your cursor above or below another Section; a (+) appears, as shown below.
- Click the (+) and select a section type in the resulting popup.
- Click Add to insert the section type.
Move & delete Sections
Hover your cursor slightly outside a Section's border, and click to select it. In the resulting pop-up menu, you can:
- Click the up and down arrows to reposition the Section vertically.
- Click the trashcan to delete it. Note that no confirmation is prompted; the deletion is immediate.
✔️ TIP: The 2 Columns layout has a unique option: click the right/left arrows to swap the columns back and forth. An example of this is shown below.
🛑 IMPORTANT: You cannot undo an action, so keep this in mind while working. This is especially important when deleting Sections, as all associated widgets are also deleted.
Widgets
Widgets are what you add to Section columns to control what content is available.
✔️ TIP: This article only focuses on how to add, move, and delete widgets. To learn about each widget, including its purpose and configuration options, check out:
Add a Widget
Numerous widgets are available, and each has a set of configuration options you can use to tailor the widget to your needs.
📝 NOTE: The widgets you can add to a Section are filtered based on the section type. For example, you can only add three widgets to the Full Width section type, and two of them are banners.
- Click the (+) in a Section column.
- Select a Widget in the resulting popup and click Add.
- You can now update the widget's basic details and configure any available parameters. A preview of the Widget is provided, which updates in real-time as you work, making it easy to get everything just right before you even add the Widget to the layout.
- Click Save to add the Widget.
Move & delete Widgets
Click a Widget to select it. In the resulting pop-up menu, you can:
- Click the arrows to reposition the Widget around the layout.
- Click the trashcan icon to delete it. Note that no confirmation is prompted; the deletion is immediate.
✔️ TIP: As shown above, Widgets move independently of their Section and can be moved outside their Section. For this reason, if you want to move a group of Widgets, it's often better to simply move the entire Section to keep the Widgets together.
🛑 IMPORTANT: There's no way to undo an action, so keep this in mind while working.
Edit a Widget
- Click to select a Widget, and then click the pencil icon.
- You can make changes to all details and configuration options just like when adding the Widget originally. A preview of the Widget is provided, which updates in real-time as you work, making it easy to get everything just right before you save your edits.
- Click Save to apply your changes.
Save a layout
You can save a custom layout at any time during the creation process; in fact, this is recommended at certain intervals to ensure no work is lost (no drafts of your layouts are automatically saved).
To save your custom layout, click Save at the top right of the editor.
Afterward, your custom layout is stored in its applicable location, as highlighted below. For each custom layout, you can:
- Select it to view a preview of the layout,
- click Edit to make changes,
- click the ellipsis (...) menu to apply the layout to one or more pages or delete it. Refer to the Apply a custom layout section below to learn more about this process.
Apply a custom layout
Once a custom layout has been created and saved, it can be applied in several ways. To learn more about this process, check out the article below.
Keyboard accessibility
The Layout Editor includes full keyboard accessibility. Below is an overview of the usable keys and their functionality.
Layout Editor levels
The Layout Editor has three levels: (1) Main editor, (2) Section, and (3) Widget.
- Press enter (Windows) or return (Mac) to "move in" to the Section and Widget levels.
- Press esc to "move out."
Navigate the editor
- Use a combination of tab and the arrow keys to navigate the editor. This includes popups like when selecting a Widget.
- Press the spacebar to make a selection, such as to add a Widget to a column, to add a Section, or to select Cancel or Add in a popup.
- With a Section selected, press tab to access the options menu, and then the up and down arrow keys to navigate the options. Press the spacebar to select an option.
- Similarly, with a Widget selected, press tab to access the options menu, and then the left and right arrow keys to navigate the options. Press the spacebar to select an option.
Advanced editor
You can click Advanced at any time to view a textual representation of your layout's structure and content. This is known as the Advanced editor.
✔️ TIP: All work done in the Layout Editor is automatically added to the Advanced editor, and vise-versa.
What is the Advanced editor used for?
Generally speaking, you don't create or edit a layout via the Advanced editor, as this is more easily accomplished using the Layout Editor. Rather, this editor has two uses:
- Building layouts via the API
- Copying layouts between sites
Additional resources
Click the link below to access a video expanding on what you learned in this article.
