{"id":2684,"date":"2026-06-15T23:23:48","date_gmt":"2026-06-15T23:23:48","guid":{"rendered":"https:\/\/localwp.com\/?p=2684&#038;post_type=help&#038;preview_id=2684"},"modified":"2026-06-16T00:02:10","modified_gmt":"2026-06-16T00:02:10","slug":"interaction-and-layout","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/designing-your-add-on\/interaction-and-layout\/","title":{"rendered":"Interaction &#038; layout"},"content":{"rendered":"\n<div class=\"wp-block-group help-doc-toc\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Table of Contents:<\/p>\n\n\n<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#interaction\">Interaction<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#the-sites-tab\">The &quot;Sites&quot; tab<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#full-width-layout\">Full-width layout<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#left-column-layout\">Left column layout<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#right-column-layout\">Right column layout<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#the-title-bar\">The title bar<\/a><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#responsiveness\">Responsiveness<\/a><\/li><\/ol><\/nav><\/div><\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"interaction\" class=\"wp-block-heading has-text-color has-link-color wp-elements-8f45c052ed86b8a84f32c0944031e135\" style=\"color:#000000\"><strong>Interaction<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/build.localwp.com\/designing-your-add-on\/creating-your-layout#interaction\"><\/a>Once you know what your Add-on is going to do and where it makes the most sense within the app, you can start to think about how the user will interact with it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Local is built on the premise of making complicated tasks simple. To achieve this, we work hard to design and build consistent and clear UI focused on achieving goals. To help you create these sorts of interactions, alongside this guide, we&#8217;ve provided various layout and UI components to help build your interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before you even start building, think about which layout best fits your Add-on&#8217;s goals, which components make the most sense for the goals your user is trying to achieve, and how you can maximize these early decisions to set your Add-on&#8217;s audience up for success. When in doubt, opt for clarity over complexity!<\/p>\n\n\n<div id=\"help-step-block_8a6a92de35739d238c186f98e736d82d\" class=\"help-note-container help-type-note\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>Before opening your code editor, break out a pencil and paper to quickly sketch your Add-on&#8217;s UI. It may seem tedious, but this clarity-of-thought will come through in the end!<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"the-sites-tab\" class=\"wp-block-heading has-text-color has-link-color wp-elements-b8511dd334bb7c9f0fb360311d744d40\" style=\"color:#000000\"><strong>The &#8220;Sites&#8221; tab<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Your Add-on can integrate with any part of Local, however, the most popular way will be adding on to the &#8220;Sites&#8221; tab. There are three core layouts within this section that you can use to build your Add-on&#8217;s interface.<\/p>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"full-width-layout\" class=\"wp-block-heading has-text-color has-link-color wp-elements-be0c03f80cae8647348907217bf3cfdf\" style=\"color:#000000\"><strong>Full-width layout<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Full-width layouts are great for disseminating lots of information, containing multiple sections of content, or for rich interactive experiences. Tables, for example, work really well in this layout, as it has the most horizontal space available for columns of information.<br><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2304\" height=\"1295\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout.png\" alt=\"\" class=\"wp-image-2686\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout.png 2304w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout-300x169.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout-1024x576.png 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout-768x432.png 768w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout-1536x863.png 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-layout-2048x1151.png 2048w\" sizes=\"(max-width: 2304px) 100vw, 2304px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"left-column-layout\" class=\"wp-block-heading has-text-color has-link-color wp-elements-56e6908eab5c3e18606b1abdf4dd9116\" style=\"color:#000000\"><strong>Left column layout<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Left columns are generally reserved for tabbed navigation.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"863\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/left-column-layout.avif\" alt=\"\" class=\"wp-image-2687\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/left-column-layout.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/left-column-layout-300x169.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/left-column-layout-1024x575.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/left-column-layout-768x432.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"right-column-layout\" class=\"wp-block-heading has-text-color has-link-color wp-elements-a9fe8ec443f137cccd17e8d87c51e822\" style=\"color:#000000\"><a href=\"https:\/\/build.localwp.com\/designing-your-add-on\/creating-your-layout#right-column-layout\"><\/a><strong>Right column layout<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Whether you&#8217;re creating an experience inside of its own tab of the site or expanding an existing tab, the right column is great for creating a secondary level of content hierarchy. Due to its relative size, the larger left side will always appear as more important hierarchically, so use a right sidebar for secondary or supplementary content.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"863\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/right-column-layout.avif\" alt=\"\" class=\"wp-image-2688\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/right-column-layout.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/right-column-layout-300x169.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/right-column-layout-1024x575.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/right-column-layout-768x432.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"the-title-bar\" class=\"wp-block-heading has-text-color has-link-color wp-elements-cf920adb327fecbf4f1b062fc6d1c2ad\" style=\"color:#000000\"><a href=\"https:\/\/build.localwp.com\/designing-your-add-on\/creating-your-layout#the-title-bar\"><\/a><strong>The title bar<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Regardless of where your Add-on lives, it&#8217;s important to create context around its functionality. Add-ons located inside of existing views, such as the table view, are naturally more likely to communicate their presence by default. For other situations, such as when placing an Add-on inside a right sidebar column or on its own tab, <strong>always use the title bar. <\/strong>This helps not only remind the user what functionality they&#8217;re seeing, but in the case of an Add-on inside a new tab, it becomes a useful way-finding device.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"440\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-1.avif\" alt=\"\" class=\"wp-image-2689\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-1.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-1-300x86.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-1-1024x293.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-1-768x220.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption class=\"wp-element-caption\">A title bar in a right column layout<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"249\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-2-1024x249.avif\" alt=\"\" class=\"wp-image-2690\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-2-1024x249.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-2-300x73.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-2-768x187.avif 768w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/title-bar-2.avif 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"responsiveness\" class=\"wp-block-heading has-text-color has-link-color wp-elements-cf0eb2b6c2d01d46381a83172645bc23\" style=\"color:#000000\"><a href=\"https:\/\/build.localwp.com\/designing-your-add-on\/creating-your-layout#responsiveness\"><\/a><strong>Responsiveness<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Local is responsive, to a point. These are the current interface dimensions.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td><strong>Default<\/strong><\/td><td><strong>Minimum<\/strong><\/td><\/tr><tr><td><strong>Width<\/strong><\/td><td>1200<\/td><td>1000<\/td><\/tr><tr><td><strong>Height<\/strong><\/td><td>800<\/td><td>650 (Mac)<br>620 (Windows)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:89px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents: Interaction Once you know what your Add-on is going to do and where it makes the most sense within the app, you can start to think about how the user will interact with it. Local is built on the premise of making complicated tasks simple. To achieve this, we work hard to&#8230;<\/p>\n","protected":false},"author":78,"parent":2658,"menu_order":16,"template":"","tags":[],"helpcategories":[68],"class_list":["post-2684","help","type-help","status-publish","hentry","helpcategories-designing-your-add-on"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/78"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2684\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2658"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=2684"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=2684"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=2684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}