Apply a Custom Layout - HL Vanilla Community
<main> <article class="userContent"> <p>In this article, you'll learn how to locate your custom layouts and apply them to one or more pages.</p><p><strong>📝 NOTE</strong>: You cannot apply a custom layout during the creation process; it must be done <em>after</em> it's saved.</p><h2 data-id="access-your-custom-layouts">Access your custom layouts</h2><p>All custom layouts are stored in the <strong>Appearance </strong>tab of your Dashboard, in the <strong>LAYOUTS </strong>section. Here, you'll notice three subsections: <strong>Home Page</strong>, <strong>Discussions Page</strong>, and <strong>Categories Page</strong>. Your custom layouts are stored based on where they were created.</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/ZDH8BLD5ISVC/access-layouts.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZDH8BLD5ISVC/access-layouts.png" alt="access_layouts.png" height="641" width="1016" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: 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.</p><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 apply a custom layout:</p><ol><li>Locate and select the layout you want to apply.</li><li>Click the <strong>ellipsis (...)</strong> menu at the top right, followed by <strong>Apply</strong>.</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/TI25KYMWOHVI/apply-layout-menuoption.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TI25KYMWOHVI/apply-layout-menuoption.png" alt="apply_layout_MenuOption.png" height="440" width="1080" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="home-page-layouts">Home page layouts</h3><p>When applying custom Home page layouts:</p><ul><li><strong>All Homepages</strong> applies the layout to your "main site" <em>and </em>any subcommunities</li><li><strong>Site Homepage </strong>apples it to <em>just</em> the "main site" (no subcommunities)</li><li>You can also select one or more specific subcommunities for more granular control</li></ul><p><strong>✔️ TIP</strong>: You can mix and match these options.</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/KCNFOOP7KMZ2/apply-homepage-layout.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KCNFOOP7KMZ2/apply-homepage-layout.png" alt="User: "apply_HomePage_layout.png"" height="180" width="320" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="discussions-page-layouts">Discussions page layouts</h3><p>When applying custom Discussions page layouts:</p><ul><li><strong>Recent Discussions Page </strong>applies the layout to the Recent Discussions page of your "main site"</li><li><strong>Site Homepage </strong>applies the layout to ALL Recent Discussions pages (main site <em>and</em> any subcommunities)</li><li>You can also select one or more specific subcommunities for more granular control</li></ul><p><strong>✔️ TIP</strong>: You can mix and match these options.</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/PZWBXOWVMBTR/apply-discpage-layout.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PZWBXOWVMBTR/apply-discpage-layout.png" alt="User: "apply_DiscPage_layout.png"" height="180" width="320" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h2 data-id="keyboard-accessibility">Keyboard accessibility</h2><ol><li>Expand the <strong>Home Page</strong> subsection and click to select the custom layout want to apply.</li><li>A preview of the custom layout is shown on the right, along with an <strong>ellipsis (...) </strong>menu. Click this menu and select <strong>Apply</strong>.</li><li>In the resulting popup, click the <strong>Pages </strong>dropdown and select the page(s) to apply the layout to.</li><li>Click <strong>Apply</strong>.</li></ol><h2 data-id="custom-layout-tips">Custom layout tips</h2><ul><li>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.</li></ul><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/YYK1T3IG6FJS/layout-applied-multiple-pages.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YYK1T3IG6FJS/layout-applied-multiple-pages.png" alt="layout_applied_multiple_pages.png" height="243" width="375" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <ul><li>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 <em>when </em>the layout was created, <em>who </em>created it, the <em>last update date</em>, and <em>where </em>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).</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/9YHVOMHAAM00/layout-applied-details.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9YHVOMHAAM00/layout-applied-details.png" alt="layout_applied_details.png" height="213" width="650" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>You cannot delete custom layouts that are currently applied: the <strong>Delete </strong>option in <strong>ellipsis (...)</strong> menu will be greyed out and there will be an alert to indicate why.</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/ZOHCBB0H7MAH/delete-layout.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZOHCBB0H7MAH/delete-layout.png" alt="delete_layout.png" height="203" width="425" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>