Apply a Custom Layout - Vanilla Success
<main> <article class="userContent"> <div class="blockquote"><div class="blockquote-content"><p class="blockquote-line"><strong>🛑 IMPORTANT</strong>: The new Layout Editor will be available with the <a href="https://success.vanillaforums.com/kb/articles/555-release-2022-012" rel="nofollow noreferrer ugc">2022.012 release</a>.</p></div></div><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><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><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/OBK197BRQFQP/apply-layout.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/OBK197BRQFQP/apply-layout.png" alt="apply_layout.png" height="617" width="974" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <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>