Create a Custom Layout - HL Vanilla Community
<main> <article class="userContent"> <p>In this article, you'll learn the fundamentals of the Higher Logic Vanilla (Vanilla) <strong>Layout Editor </strong>to obtain the skills necessary to create <strong>custom layouts</strong>.</p><h2 data-id="what-is-the-layout-editor">What is the Layout Editor?</h2><p>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 <em>layout </em>of the page and the <em>content </em>within it.</p><p>Currently, you can create custom layouts for:</p><ul><li>your <strong>Home </strong>page </li><li>and <strong>Recent Discussions </strong>page.</li></ul><h2 data-id="access-the-layout-editor">Access the Layout Editor</h2><ol><li>Access the Dashboard.</li><li>Navigate to the <strong>Appearance</strong> tab and expand the <strong>LAYOUTS</strong> section. </li><li>At this point, you can only create custom layouts for the <em>Home Page</em>. This will be expanded to the <em>Discussions </em>and <em>Categories </em>pages in a future update. Expand this subsection to view any existing custom layouts. You can access the Layout Editor by editing an existing layout or by clicking <strong>Add Custom Layout </strong>to create one.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/PLXH0ZS984T5/access-layout-editor.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PLXH0ZS984T5/access-layout-editor.png" alt="access_layout_editor.png" height="475" width="850" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="create-a-custom-layout">Create a custom layout</h2><p><strong>🛑 IMPORTANT</strong>: The Layout Editor does not automatically save your work. The best practice is to occasionally click <strong>Save </strong>at the top right of the editor to ensure your work is not lost.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/6UJW8CMFN2MD/save-layout-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6UJW8CMFN2MD/save-layout-button.png" alt="save_layout_button.png" height="182" width="711" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>1. On the <strong>Appearance</strong> tab, expand the <strong>LAYOUTS</strong> section. </p><p>2. Currently, you can create custom layouts for the <em>Home </em>page and<em> Recent Discussions </em>page. Depending on the custom layout you want to create, expand the <strong>Home Page</strong> or <strong>Discussions Page</strong> subsection and click <strong>Add Custom Layout</strong>.</p><p><strong>📝 NOTE</strong>: This will be expanded to the <em>Categories </em>page in a future update.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/31RMFKXJZ52T/create-layout-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/31RMFKXJZ52T/create-layout-1.png" alt="create_layout-1.png" height="444" width="500" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>3. Give your layout a name.</p><p>4. Select your first Section. You're now editing your custom layout in the Layout Editor.</p><p><strong>📝 NOTE</strong>: When creating a Discussions page layout, the <strong>Discussion List</strong> widget <em>cannot be removed </em>(it's needed to display the discussions on the page). It can, however, be moved and configured just like any other widget.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/01CJJGUCS2MD/create-layout-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/01CJJGUCS2MD/create-layout-2.png" alt="create_layout-2.png" height="629" width="800" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <div class="blockquote"><div class="blockquote-content"><p class="blockquote-line"><strong>Continue reading the sections below to learn more about managing Sections and Widgets, as well as the Layout Editor's other features</strong>.</p></div></div><h2 data-id="sections">Sections</h2><p><strong>Sections </strong>provide the <em>foundation </em>or <em>layout </em>of the page, and are containers in which to hold its <em>content</em>. Sections can have one or more <strong>columns</strong>, and one or more <strong>Widgets</strong> can be added to each column.</p><p><strong>📝 NOTE</strong>: The Widgets you can add to a Section are filtered based on the <em>section type</em>. For example, you can only add three Widgets to the <em>Full Width</em> section type, and two of them are banners.</p><h3 data-id="add-a-section">Add a Section</h3><ol><li>Hover your cursor above or below another Section; a <strong>(+) </strong>appears, as shown below.</li><li>Click the <strong>(+)</strong> and select a section type in the resulting popup.</li><li>Click <strong>Add </strong>to insert the section type.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/73S6EQVOQPAR/add-section.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/73S6EQVOQPAR/add-section.gif" alt="add_section.gif" height="840" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="move-delete-sections">Move & delete Sections</h3><p>Hover your cursor slightly outside a Section's border, and click to select it. In the resulting pop-up menu, you can:</p><ul><li>Click the <strong>up </strong>and <strong>down arrows </strong>to reposition the Section vertically.</li><li>Click the <strong>trashcan</strong> to delete it. Note that no confirmation is prompted; the deletion is immediate.</li></ul><p><strong>✔️ TIP</strong>: The <strong>2 Columns</strong> layout has a unique option: click the <strong>right/left arrows</strong> to swap the columns back and forth. An example of this is shown below.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/RL4IHQ0PTO0F/move-delete-sections.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RL4IHQ0PTO0F/move-delete-sections.gif" alt="move_delete_sections.gif" height="840" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>🛑 IMPORTANT:</strong> There's no way to undo an action, so keep this in mind while working. This is especially important when deleting Sections, as all associated Widgets are also deleted.</p><h2 data-id="widgets">Widgets</h2><p><strong>Widgets </strong>are what you add to Section columns to control what <em>content </em>is available.</p><p><strong>✔️ TIP</strong>: 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 the articles below.</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/547" rel="nofollow noreferrer ugc">Add & Configure Custom Layout Widgets</a></li><li><a href="https://success.vanillaforums.com/kb/articles/548" rel="nofollow noreferrer ugc">Layout Editor Widgets</a></li></ul><h3 data-id="add-a-widget">Add a Widget</h3><p>Numerous Widgets are available, and each has a set of configuration options you can use to tailor the Widget to your needs.</p><p><strong>📝 NOTE</strong>: The Widgets you can add to a Section are filtered based on the <em>section type</em>. For example, you can only add three Widgets to the <em>Full Width</em> section type, and two of them are banners.</p><ol><li>Click the <strong>(+) </strong>in a Section column.</li><li>Select a Widget in the resulting popup and click <strong>Add</strong>.</li><li>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. </li><li>Click <strong>Save </strong>to add the Widget.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Z5O6Y40H2OG6/add-widget.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z5O6Y40H2OG6/add-widget.gif" alt="add_widget.gif" height="840" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="move-delete-widgets">Move & delete Widgets</h3><p>Click a Widget to select it. In the resulting pop-up menu, you can:</p><ul><li>Click the <strong>arrows </strong>to reposition the Widget around the layout.</li><li>Click the <strong>trashcan</strong> to delete it. Note that no confirmation is prompted; the deletion is immediate.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4D4EQUTG1A4U/move-delete-widgets.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4D4EQUTG1A4U/move-delete-widgets.gif" alt="move_delete_widgets.gif" height="768" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: As shown above, Widgets move independently of their Section, and can even be moved <em>outside</em> 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.</p><p><strong>🛑 IMPORTANT:</strong> There's no way to undo an action, so keep this in mind while working.</p><h3 data-id="edit-a-widget">Edit a Widget</h3><ol><li>Click to select a Widget, and then click the <strong>pencil icon</strong>.</li><li>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. </li><li>Click <strong>Save </strong>to apply your changes.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/MC54V8H7CJO4/edit-widget.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MC54V8H7CJO4/edit-widget.gif" alt="edit_widget.gif" height="768" width="1132" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="save-a-layout">Save a layout</h2><p>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).</p><p>To save your custom layout, click <strong>Save </strong>at the top right of the editor.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/NH10R4KU69G8/save-layout.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/NH10R4KU69G8/save-layout.png" alt="save_layout.png" height="285" width="550" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Afterward, your custom layout is stored in its applicable location, as highlighted below. For each custom layout, you can:</p><ul><li>Select it to view a preview of the layout,</li><li>click <strong>Edit </strong>to make changes,</li><li>click the <strong>ellipsis (...)</strong> menu to apply the layout to one or more pages or delete it. Refer to the <strong>Apply a custom layout</strong> section below to learn more about this process.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/OQHT76ZQCK7N/save-layout-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/OQHT76ZQCK7N/save-layout-2.png" alt="save_layout-2.png" height="475" width="850" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="apply-a-custom-layout">Apply a custom layout</h2><p>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.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"In this article, you'll learn how to locate your custom layouts and apply them to one or more pages. 📝 NOTE: You cannot apply a custom layout during the creation process; it must be done after it's saved. Access your custom layouts All custom layouts are stored in the Appearance tab of your Dashboard, in the LAYOUTS…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/GXW21TRYG1JP\/share-imagevanilla-community.jpg","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/546","embedType":"link","name":"Apply a Custom Layout - HL Vanilla Community"}"> <a href="https://success.vanillaforums.com/kb/articles/546" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/546 </a> </div><h2 data-id="keyboard-accessibility">Keyboard accessibility</h2><p>The Layout Editor includes full keyboard accessibility. Below is an overview of the usable keys and their functionality.</p><h3 data-id="layout-editor-levels">Layout Editor levels</h3><p>The Layout Editor has three levels: <strong>(1)</strong> Main editor, <strong>(2)</strong> Section, and <strong>(3)</strong> Widget.</p><ul><li>Press <strong>enter </strong>(Windows)<strong> </strong>or <strong>return</strong> (Mac) to "move in" to the Section and Widget levels.</li><li>Press <strong>esc</strong> to "move out."</li></ul><h3 data-id="navigate-the-editor">Navigate the editor</h3><ul><li>Use a combination of <strong>tab</strong> and the <strong>arrow keys</strong> to navigate the editor. This includes popups like when selecting a Widget.</li><li>Press the <strong>spacebar</strong> 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.</li><li>With a Section selected, press <strong>tab</strong> to access the options menu, and then the <strong>up </strong>and <strong>down arrow keys</strong> to navigate the options. Press the <strong>spacebar </strong>to select an option.</li><li>Similarly, with a Widget selected, press <strong>tab</strong> to access the options menu, and then the <strong>left </strong>and <strong>right arrow keys</strong> to navigate the options. Press the <strong>spacebar </strong>to select an option.</li></ul><h2 data-id="advanced-editor">Advanced editor</h2><p>You can click <strong>Advanced </strong>at any time to view a textual representation of your layout's structure and content. This is known as the <strong>Advanced editor</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/YBI9IHVPE0OD/advanced-editor-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YBI9IHVPE0OD/advanced-editor-1.png" alt="advanced_editor-1.png" height="286" width="550" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: All work done in the Layout Editor is automatically added to the Advanced editor, and vise-versa.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/BDJALDL78VGB/advanced-editor-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BDJALDL78VGB/advanced-editor-2.png" alt="advanced_editor-2.png" height="462" width="1020" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="what-is-the-advanced-editor-used-for">What is the Advanced editor used for?</h3><p>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 primary uses:</p><ul><li>Building layouts via the API</li><li>Copying layouts between sites</li></ul><h2 data-id="additional-resources">Additional resources</h2><p>Click the link below to access a video expanding on what you learned in this article.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"For more information, please see:","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/GXW21TRYG1JP\/share-imagevanilla-community.jpg","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/581","embedType":"link","name":"P. Layout Editor [video] - HL Vanilla Community"}"> <a href="https://success.vanillaforums.com/kb/articles/581" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/581 </a> </div><p><br></p> </article> </main>