This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Organize your pa...

Wix Harmony Editor: Adding and Managing Pages

Discover how to effectively manage your site pages using the new Wix Harmony Editor. Learn to add, rename, and delete pages, customize their settings, and choose between different viewing options to keep your site organized and visually appealing. This article guides you through the features of the Harmony Editor, helping you create a stylish and engaging website that meets your needs.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-content"><div>This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-the-difference-between-wix-editor-and-wix-harmony" target="">view more information here</a>.</div></div></div></div><div data-component-type="text"><div>Organize your pages to keep your site stylish, engaging, and sophisticated. After adding a page, you can give it a fresh name, set it as your homepage, hide it from the menu, and customize it to fit your style perfectly. You can also choose how to view your pages, either in a minimal list view or a visual grid view with page previews.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2026/01/27/9b3746bd-ee9c-4b9d-b516-c513fd5c0064/abc8fb83-48ba-41bf-962a-2c62dacaf2e0.png" alt="screenshot of site pages panel in wix harmony editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Navigating between pages:</div><div class="info-content"><div>Click the <strong>Page</strong> dropdown at the top left of the page to navigate elsewhere on your site.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-new-page" level="3">Adding a new page</h2></div><div data-component-type="text"><div>Choose from a range of professionally designed pages by Wix, or start fresh with a blank page to bring your own vision to life. Every new page you add will instantly show up in your site menu, ready to go.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a new site page:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the <strong>Page</strong> dropdown at the top left of the page.</li>  <li>(In the Site Pages panel) Click <strong>+ Add Page</strong> at the bottom.</li>  <li>Choose how you want to create your new page:
    <ul>
      <li><strong>Generate with AI:</strong> Get page ideas and let AI create your page. Review the suggested page types in the chat and pick the one you want to add. Alternatively, you can write your own description of the page you're envisioning. </li>      <li><strong>Choose a design:</strong> Browse our designed page templates and select the one you like best.</li>      <li><strong>Blank page:</strong> Start with a completely blank page. The new page is added to your site, ready for you to customize.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2026/01/27/24fc2dc2-e811-4677-8683-b2f0ba753c50/c02677c9-9fa4-4725-a1f8-82cf7af59848.png" alt="Screenshot from Wix Harmony editor, add and manage page options being shown. Add page options displayed." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="managing-your-site-pages" level="3">Managing your site pages</h2></div><div data-component-type="text"><div>Manage all your site pages in one place to keep your content organized and up to date. Add new pages, rename or delete existing ones, and adjust key settings like SEO, member access, and social sharing.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2026/01/27/5b596023-d3ff-4a24-a81e-20fe4c83c14b/81167dae-e7dc-442a-a308-700faf90cb5b.png" alt="Screenshot of manage pages panel in wix harmony editor, more actions  menu being shown." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Change the view of the panel:</div><div class="info-content"><div>Click the <strong>Grid</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/ba3bb70f-7b8a-4e12-be88-e68c6ca16782/28a3230e-cfc3-4fdb-a11a-caf5556fc45d.png" /> or <strong>List </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/86af03f0-710a-4b92-8061-b9311c31018e/e3b3fd8d-2f55-40ea-a399-b5e475a7119c.png" /> icon at the top of the panel to switch the view. The list is more compact, while the grid shows you a preview of each page.  </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To manage your site pages:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the <strong>Page</strong> dropdown at the top left of the page.</li>  <li>(In the Site Pages panel) Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/10/16/207b5bd2-1894-4b71-a342-d5d859e4a03b/5aa7b874-694d-4e28-b7ce-c4af6370342f.png" /> next to the relevant page.</li>  <li>Choose what to do next: </li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Rename</h4><div class="collapsible-content"><div>Give your pages clear, descriptive names to help visitors navigate with confidence. Type the new name of the page and click <strong>Done</strong>. </div><div><br /></div><div><strong>Note:</strong> This automatically changes the page's name on your site menu. If needed, you can always <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-menus#managing-menu-items" target="">rename that specific menu item</a> without affecting the page's name. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Duplicate</h4><div class="collapsible-content"><div>Duplicate site pages to save time and keep your site looking sharp and consistent. After clicking <strong>Duplicate</strong>, give your new page a name and start editing. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Set as homepage</h4><div class="collapsible-content"><div>Make this page your site’s main landing page.<strong><br />
</strong></div><div><strong>Tip: </strong>If you want to delete your current homepage, just set a different page as the homepage first, then you can safely delete the old one.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Delete</h4><div class="collapsible-content"><div>Delete pages you no longer need to keep your site focused and visitor friendly. After selecting this option, click <strong>Delete Page</strong> in the popup to confirm.</div><div><br />
<strong>Important:</strong> If a page is linked to a Wix app (e.g. Blog, Stores, etc.), deleting the page also removes the app. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">SEO and accessibility</h4><div class="collapsible-content"><div>Choose what area you want to adjust:</div><ul>
  <li><strong>SEO: </strong>Set up how the page appears in search engines like Google. Go through the SEO checklist and add any missing settings (e.g. focus keyword, title tag), or <strong>Optimize With AI</strong> to get it done quicker. </li>  <li><strong>Social share: </strong>Set up the way the page looks when people share it on social media like Facebook, Instagram and Twitter. Click through the social networks' checklist, or <strong>Optimize With AI</strong> to get it done quicker. </li>  <li><strong>Accessibility: </strong>Scan this page and fix accessibility issues so everyone can enjoy your content. </li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Settings</h4><div class="collapsible-content"><div>Get an overview and adjust all of your page's settings in one place:</div><ul>
  <li><strong>Page URL: </strong>Update the ending of the page's URL to fit your style. You can also change the page's place in the site hierarchy by clicking the <strong>More options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/de196a05-2ee9-4eb9-baeb-be180561e6da/00acf16a-501d-4b48-8726-f0d95db0a4a4.png" />. </li>  <li><strong>Access: </strong>Decide who can access this page - everyone, visitors with a password or site members (or specific roles, badges and pricing plans). To change this setting, click<strong> Access</strong>, then <strong>Manage Access</strong>.</li>  <li><strong>SEO:</strong><strong> </strong>Get a preview of what this page looks like in search results. Click <strong>Go to Tasks</strong> to see a checklist of SEO tasks for each page on your site, so you can track your progress and optimize your pages step by step.</li>  <li><strong>Accessibility:</strong><strong> </strong>Get a preview of the existing accessibility issues on your site. Click <strong>Scan Site </strong>to get started, or <strong>Fix Issues</strong> if you've previously scanned your site.</li>  <li><strong>Social Share: </strong>Get a preview of what this page looks like when shared on social media. Click<strong> Customize </strong>to set a title, description, and preview image for each social platform.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Click a question below to learn more. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I edit the width of my page?</h4><div class="collapsible-content"><div>In the Wix Harmony Editor, your page is designed for a desktop width of 1280 pixels and a mobile width of 390 pixels.</div><div><br /></div><div>You don't need to worry about setting a custom page width — Wix Harmony automatically adjusts your site to look beautiful on any screen. Elements on your page either scale proportionally or keep their width relative to the screen size, so your content always looks great for your visitors.</div><div><br /></div><div><strong>Tip: </strong>While in <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-previewing-and-publishing-your-site" target="">Preview</a> mode, drag the screen size slider at the top to see how the design adapts.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I download a page from my site?</h4><div class="collapsible-content"><div>It is not possible to download a Wix site or any of its pages as the editor needs to be in constant connection with our servers. As such, it is not possible to work offline or save site pages to your computer.<br />
<br />
However, you can press <strong>Ctrl + P</strong> on your keyboard to save the page as a PDF, or take a screenshot of the page.</div></div></div></div>

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Your site’s head...

Wix Harmony Editor: Customizing Your Site's Header

Customize your site's header in the Wix Harmony Editor to enhance its appearance and functionality. Learn how to adjust backgrounds, borders, and scroll effects to create a unique look that reflects your style. You can also manage header behavior, such as overlapping sections or hiding it on specific pages, ensuring a seamless navigation experience for your visitors. Dive into the article for detailed steps and tips to make your header stand out.

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Sections help yo...

Wix Harmony Editor: Adding and Customizing Sections

Discover how to effectively use the new Wix Harmony Editor to enhance your website's layout and design. Learn to add, customize, and organize sections that adapt to any screen size, making your content visually appealing and user-friendly. This article guides you through changing section layouts, editing names and links, and personalizing designs to match your brand, ensuring your site stands out and engages visitors.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-content"><div>This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-the-difference-between-wix-editor-and-wix-harmony" target="">view more information here</a>.</div></div></div></div><div data-component-type="text"><div>Sections help you organize and present content across your site. Each section stretches to the full width of the page, letting you arrange and customize elements with ease, while automatically adapting to any screen size. You can add as many sections as you like, then easily edit or move them around the page.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-new-section-to-your-page" level="3">Adding a new section to your page</h2></div><div data-component-type="text"><div>Add sections to organize your pages' content. You can get started with our variety of designed sections to simplify the process, or start from scratch with a blank section. You can also generate new sections with AI, describing your exact needs. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/867958fd-841b-4016-83f4-3d17c77a76c7/8d4f3f2e-19e5-48db-8e80-5c2bdc6910c2.png" alt="A screenshot of adding a section in a the Wix Harmony Editor" /></div></div><div data-component-type="heading"><h2 id="" level="4">To add a new section to your site:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Hover over the top or bottom of a section and click <strong>+ Add Section</strong>.</li>  <li>Choose how you want to start your new section:
    <ul>
      <li><strong>Generate with AI:</strong> Get a section created for you, based on your needs, using AI.</li>      <li><strong>Designed Section:</strong> Select from a variety of ready-made section designs.</li>      <li><strong>Blank Section:</strong> Start with an empty section and customize it from scratch.</li>    </ul>  </li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>To move a section, select it and click one of the arrows on the left to move it up<strong> </strong><img data-composite="true" src="https://lh3.googleusercontent.com/lPJX1MUdquUdWNyl5WZdk2U2KKjp9gCDJ9cOq-_Ma2W4VbDKK5A7-EqTWcmZMM3NQs8Yn1KaWDFu1LoKUD5HCwCtlYLKA5sNPCywGV5gryvyK92XLWtLTXka70emqEA9XTYeuYRd" /> or<strong> </strong>down<strong> </strong><img data-composite="true" src="https://lh3.googleusercontent.com/kZC8LguFU4C9gLui1-y5_4kQcNcBeHxh8H-zSemi82yM7RKvXtOArV0CVUzfPCdCYbM3WWh-kvLLuL0gb7mWzXvxE2QVH6t4GFqDgYqoqOES1ZOZjNdPyGRmJozPfzriZEHqotoK" />.</div> </div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-section-layout" level="3">Changing your section layout</h2></div><div data-component-type="text"><div>Sections have a built-in grid that starts with a single cell holding your entire section. Split the grid into more cells to organize your content. Choose from different layouts, or adjust the grid yourself by splitting or merging cells, adding new ones, and dragging grid lines to resize them. You can also add gaps between cells for extra spacing and a more balanced look.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/fcc62f3f-4fac-409c-8d29-33afa73caef1/84ea2e40-eb87-473f-9241-5d7cba049b8c.png" alt="A screenshot of editing a section in a the Wix Harmony Editor" /></div></div><div data-component-type="heading"><h2 id="" level="4">To change a section’s layout:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the relevant section.</li>  <li>Click <strong>Change Layout</strong> on the action bar.</li>  <li>Choose the grid layout you want from the available options.</li>  <li>Customize the grid as you wish:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Resize a row / column</h4><div class="collapsible-content"><div>Make a whole row / column of cells bigger or smaller. </div><ol>
  <li>Hover over the relevant cell until the blue gridlines appear.</li>  <li>Drag the gridlines around a cell to change the row or column size. <br />
<strong>Note: </strong>The minimum row height is 40px.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Resize the gap between cells</h4><div class="collapsible-content"><div>Change the gap between cells to bring them closer together or further apart.  </div><ol>
  <li>Hover over the relevant cell until the blue gridlines appear.</li>  <li>Hold and drag the <strong>Resize gap</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/b61fb663-2ab6-4a73-b20d-d06a956519e0/8df3da7b-ae34-4dfa-848f-751c0a08802d.png" /> to customize the gap.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add more rows and columns</h4><div class="collapsible-content"><div>Enhance your grid and give room for more content by adding more rows or columns.  </div><ol>
  <li>Hover over the relevant cell until the blue gridlines appear.</li>  <li>Click the <strong>Add cell</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/b2c9a4a4-ed8b-4a66-b91b-71efe63bb3bb/6a538832-882f-4d76-8af6-577d47011dd7.png" /> on the gridline where you want to add a row or column.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Swap cells, rows and columns</h4><div class="collapsible-content"><div>Quickly switch up your design by swapping the content of 2 cells, or 2 rows / columns. </div><div><br /></div><div><strong>To swap between rows / columns:</strong></div><ol>
  <li>Hover over the relevant cell until the blue gridlines appear.</li>  <li>Click the <strong>Swap content</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/06/5871cfdc-5c5c-419c-918d-8c532a38bc93/89cb38fa-30f6-459a-adbe-6dd689254c4f.png" /> on the gridline to switch between the rows or the columns. <br />
<strong>Tip: </strong>The icon on the side of the cell lets you swap between columns, while the icon on the bottom and top lets you switch between rows. </li></ol><div><br /></div><div><strong>To swap between cells:  </strong></div><ol>
  <li>Click to select the first cell, then hold <strong>Shift</strong> and click the second cell.  </li>  <li>Click <strong>Swap Content</strong> on the action bar.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design a cell</h4><div class="collapsible-content"><ol>
  <li>Click the relevant cell.</li>  <li>Choose what to do next:
    <ul>
      <li><strong>Design the cell's background: </strong>Click<strong> Replace Background</strong> on the action bar and apply a color, image or video background.</li>      <li><strong>Adjust other design settings:  </strong>
        <ol>
          <li>Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar.</li>          <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-designing-elements" target="_blank">Design</a> the cell:
            <ul>
              <li><strong>Border </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/283c65bd-44e0-457e-8317-12e095da63e8/1cf1fd0d-545e-4618-902a-176c71af929c.png" /><strong>: </strong>Define the cell borders so it stands out, choosing a color, width and style. Click the <strong>Edit individual corners </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/ca6d8a90-3325-4650-87ff-2e9bea53a664/9553598b-6eca-4f2a-a546-bc4b28d82edc.png" /> to design each side separately.</li>              <li><strong>Corners </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/18a27fb2-7300-40a9-b8fa-01abfa7fcec3/668fa510-f756-468e-b0e5-27721128665e.png" /><strong>: </strong>Make the corners of your cell more square or round by dragging the slider under <strong>Radius</strong>. Click the <strong>Edit individual corners </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/ca6d8a90-3325-4650-87ff-2e9bea53a664/9553598b-6eca-4f2a-a546-bc4b28d82edc.png" /> to design each corner separately.</li>              <li><strong>Shadow </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c58ddc92-ed60-4a11-b564-a010a97a891b/d4c7c831-59df-400c-a8f6-e2880427a247.png" /><strong>: </strong>Apply inner or outer shadow to give the cell an interesting 3D effect, setting the position, blurriness, color and more.</li>            </ul>          </li>        </ol>      </li>    </ul>  </li></ol><div><br /></div><div><strong>Tips: </strong></div><ul>
  <li>You can design multiple cells at the same time instead of customizing them one by one. Click to select the first cell, then hold <strong>Shift</strong> and select the other cells. Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar to apply the same settings to your chosen cells. </li>  <li>Make your cell more dynamic by adding an <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-an-animation" target="">animation</a> (entrance, loop, scroll or mouse effects). Click the <strong>Animation</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/04/34700774-9041-4e47-bf0b-c63f6fb8df4c/62bf5cf0-42fd-4e16-b808-48ad47cfe21f.png" /> on the action bar to get started.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Merge cells</h4><div class="collapsible-content"><div>You can merge 2 cells in your grid into a single cell, as long as they're part of the same row or column.</div><ol>
  <li>Click to select the first cell, then hold <strong>Shift</strong> and click the second cell.  </li>  <li>Click <strong>Merge Cells</strong> on the action bar.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Delete cells</h4><div class="collapsible-content"><ol>
  <li>Right click the cell you want to delete.</li>  <li>Select <strong>Delete</strong>.</li></ol></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-your-section-name-and-link" level="3">Editing your section name and link</h2></div><div data-component-type="text"><div>Custom section links are helpful for sharing in emails, on social media, or linking to different parts of your site. Edit your section name and link to clearly label each part of your page and make sharing even easier. When you rename a section, the link updates automatically to match the new name. You can also choose to only customize the link, without changing the section name. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Good to know:</div><div class="info-content"><div>You’re only changing the end of the link that comes after your site’s main address.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/d2c622f3-713a-4047-a654-c87deb9ac121/310db170-d69b-4902-b7b0-adbc34e718d7.png" alt="A screenshot of editing a section name in a the Wix Harmony Editor" /></div></div><div data-component-type="heading"><h2 id="" level="4">To edit your section name and link:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant section.</li>  <li>Hover on the section's blue label.</li>  <li>Click the <strong>Edit section name</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/f177b981-0aea-4d0a-9319-34bac8b84425/b8053c47-1db2-4131-a9d6-301bc5c2e23b.png" />.</li>  <li>Choose what you want to do next:
    <ul>
      <li><strong>Edit section name: </strong>Enter a new name in the field.</li>      <li><strong>Edit section link:</strong> Click <strong>Section link</strong> and type your preferred ending for the section's URL (up to 60 characters). Click <strong>Copy Link</strong> for sharing, or click <strong>Open Link</strong> to preview it.</li>    </ul>  </li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customize-your-section-design" level="3">Customize your section design</h2></div><div data-component-type="text"><div>Make your site stand out by customizing each section’s design. You can add dividers for separation, borders for emphasis, animation effects to capture attention, and unique backgrounds that match your brand. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/aa552558-b4ec-4374-b0e2-fec87f8da651/1107d285-0443-4ba1-b04c-f9d83c2feb68.png" alt="A screenshot of editing a section design in a the Wix Harmony Editor" /></div></div><div data-component-type="heading"><h2 id="" level="4">To customize your section design:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant section.</li>  <li>Choose what you want to customize from the action bar:
    <ul>
      <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-customizing-your-section-background" target=""><strong>Replace background</strong></a><strong>:</strong> Click <strong>Replace Background</strong> to change your section background by selecting a color, an image, or a video.</li>      <li><strong>Opacity:</strong> Click the <strong>Opacity</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/68a44d1f-72cc-45e4-8128-6bf3c02d139e/5b7ade33-6022-4163-ae2c-513c60ea046d.png" /> to adjust the opacity of the section background, image and colors, depending on what your section contains. </li>      <li><strong>Borders:</strong> Click the <strong>Borders</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/d2c09aa9-a76a-4f66-8a1c-edc0567a06fe/2ff6a260-07b8-433f-9b6b-7c9fc29e74d2.png" /> to add or adjust borders around your section. Change the border’s color, width, and style.</li>      <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-shape-dividers" target=""><strong>Section divider</strong></a><strong>:</strong> Click the <strong>Section divider</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/4f682f1f-044c-40b3-b6f4-eac38cc953c1/034ee741-d587-4f86-8981-b89c81a4baea.png" /> to add or edit a line to visually separate your section from the rest of the page. </li>      <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-customizing-your-section-background#animating-your-section-background" target=""><strong>Animations</strong></a><strong>:</strong> Click the <strong>Animation</strong> icon<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/3eddbec0-ca54-4b38-8b2c-a4a1509f3ff9/7714e774-161c-44bc-aa0d-4ef93eb6de50.png" /> and select a background scroll animation so your section looks more dynamic and attention-grabbing. <br />
<strong>Note: </strong>The available animations vary based on the section background (i.e. color, image or video). </li>    </ul>  </li></ol></div>

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Think of your fo...

Wix Harmony Editor: Customizing Your Site Footer

Customize your site's footer in the new Wix Harmony Editor to reflect your brand and enhance user experience. Learn how to personalize elements like background, colors, and animations, as well as resize and add components such as social links or custom menus. This article guides you through the customization process, ensuring your footer serves as an effective signature for your website.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-content"><div>This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-the-difference-between-wix-editor-and-wix-harmony" target="">view more information here</a>.</div></div></div></div><div data-component-type="text"><div>Think of your footer as your site’s signature at the bottom of every page — it’s the perfect spot for contact details, copyright, a <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-menus" target="">custom menu</a> or social links. Add elements, resize to make more room and design the footer as needed. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/18e77e9e-71f2-4f91-b836-e098b4a11da6/a970c8dd-4657-4ba7-865d-e023d829b09e.png" alt="A screenshot of editing a site's footer in a the Wix Harmony Editor" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-sites-footer" level="3">Customizing your site's footer</h2></div><div data-component-type="text"><div>Personalize your footer's background, borders, dividers, and animation until it reflects your brand. Use the resize handle to make the footer as roomy or minimal as you want. Need to share more info? Make your footer bigger. Prefer a clean, simple look? Keep it small. The choice is yours.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize your site's footer:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the footer.</li>  <li>Choose what you want to do next:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design the footer</h4><div class="collapsible-content"><div>Choose what you want to customize from the action bar:</div><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-customizing-your-section-background" target=""><strong>Replace background</strong></a><strong>:</strong> Click <strong>Replace Background</strong> to change your footer background by selecting a color, an image, or a video.</li>  <li><strong>Colors:</strong> Click the <strong>Colors</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/231dd69f-c942-425e-bb07-e3e7b21c25a1/c5c435dc-c2bc-423d-b98b-4f95540237b4.png" /> to change your footer's colors to one of your site's brand colors. </li>  <li><strong>Opacity:</strong> Click the <strong>Opacity</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2026/01/28/68a44d1f-72cc-45e4-8128-6bf3c02d139e/5b7ade33-6022-4163-ae2c-513c60ea046d.png" /> to adjust the opacity of the section background, image and colors, depending on what your section contains. </li>  <li><strong>Borders:</strong> Click the <strong>Borders</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/d2c09aa9-a76a-4f66-8a1c-edc0567a06fe/2ff6a260-07b8-433f-9b6b-7c9fc29e74d2.png" /> to add or adjust borders around your footer. Change the border’s color, width, and style.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-shape-dividers" target=""><strong>Section divider</strong></a><strong>:</strong> Click the <strong>Section divider</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/4f682f1f-044c-40b3-b6f4-eac38cc953c1/034ee741-d587-4f86-8981-b89c81a4baea.png" /> to add or edit a line to visually separate your footer from the rest of the page. </li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-an-animation" target=""><strong>Animations</strong></a><strong>:</strong> Click the <strong>Animation</strong> icon<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/04/3eddbec0-ca54-4b38-8b2c-a4a1509f3ff9/7714e774-161c-44bc-aa0d-4ef93eb6de50.png" /> to make your footer fade in or fade out when the page loads. </li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Resize the footer</h4><div class="collapsible-content"><div>Hold the stretch handle at the bottom of your footer and drag it to the size that works for you.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Hide the footer</h4><div class="collapsible-content"><div>Right-click the footer and select <strong>Hide footer</strong> to remove the footer from this specific page.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add elements to the footer</h4><div class="collapsible-content"><div>Add any elements you wish to the footer. For example, the footer is a great place to share links to your socials or a custom menu to make navigation easier. </div><ol>
  <li>Click <strong>+ Add</strong> at the top left of the editor.</li>  <li>Choose the element you want to add, such as <strong>Menu</strong>.</li>  <li>Drag your chosen element into the footer area.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-working-with-elements" target="">Position and customize the elements</a> as you like.</li></ol></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Click a question below to learn more.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I add a section below my footer or make a copy of it?</h4><div class="collapsible-content"><div>You can’t add another section underneath your footer or duplicate it — your site has 1 single footer, keeping things simple and consistent.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I create different types of footers on my site?</h4><div class="collapsible-content"><div>No, every page shares the same footer style and content. That way, your visitors always know where to find your important info.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Should I add a menu to my footer? </h4><div class="collapsible-content"><div>While it's not mandatory, we recommend <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-menus" target="">adding a custom menu</a> to your footer as it can help  visitors to quickly find important pages that you may prefer hiding from the site menu (e.g. your privacy policy, sitemap, etc.) </div><div><br /></div><div>It also helps search engines to better understand your site structure, which could improve your ranking in search results. </div></div></div></div>

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Menus make it ea...

Wix Harmony Editor: Adding and Managing Menus

Discover how to effectively add and customize menus in the new Wix Harmony Editor to enhance your site's navigation. You can create site menus that automatically update with new pages, or design custom menus for specific sections. Learn to manage menu items, including adding dropdowns, changing layouts, and adjusting styles, ensuring a seamless experience for your visitors across all devices.

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.Hamburger menus ...

Wix Harmony Editor: Using Hamburger Menus

Discover how to add and customize a hamburger menu in the new Wix Harmony Editor to enhance your site's navigation. You can easily create a new menu or convert an existing one, tailoring its design to match your brand. Learn to personalize the buttons that open and close the menu, as well as the container that houses it, ensuring a user-friendly experience for your visitors.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-content"><div>This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-the-difference-between-wix-editor-and-wix-harmony" target="">view more information here</a>.</div></div></div></div><div data-component-type="text"><div>Hamburger menus offer a clean, space-efficient solution that only appears when visitors click the menu icon. </div><div><br /></div><div>You have full control over the design elements of the hamburger menu, allowing you to tailor it to your  specific branding and style. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-hamburger-menu" level="3">Adding a hamburger menu</h2></div><div data-component-type="text"><div>There are 2 easy ways to add a hamburger menu to your site. You can add a brand new hamburger menu from the Add Elements panel, or quickly switch an existing menu to the hamburger style right from the action bar. </div></div><div data-component-type="heading"><h2 id="" level="4">To add a hamburger menu:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Choose what to do next:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add a new hamburger menu</h4><div class="collapsible-content"><ol>
  <li>Click <strong>+ Add</strong> at the top left of the editor.</li>  <li>Select the <strong>Menu </strong>category.<br />
<strong>Tip: </strong>Click the<strong> Arrow</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2025/12/07/584e3364-261a-4c90-a44e-8eb1504bf7e2/c4cf09c2-e2cf-481c-b6fd-a92150cb6437.png" /> next to the categories to browse through the list.</li>  <li>Select the <strong>Hamburger Menu </strong>tab.</li>  <li>Drag and drop the relevant menu to the desired location on the page. </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Change the existing layout to hamburger</h4><div class="collapsible-content"><ol>
  <li>Click the relevant menu. </li>  <li>Click <strong>Change Format</strong> on the action bar.</li>  <li>Select <strong>Hamburger</strong> under <strong>Menu</strong>.</li></ol></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Did you know?</div><div class="info-content"><div>When you add a horizontal or vertical menu to your header on desktop, it automatically becomes a hamburger menu on mobile. This ensures that your visitors are able to access your menu from all devices. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-button-that-opens-the-menu" level="3">Customizing the button that opens the menu</h2></div><div data-component-type="text"><div>Your hamburger menu button is a key part of your site’s navigation, and you can easily make it match your style. Adjust the icon and text to say exactly what you want, then fine-tune the design details—down to the colors, spacing, and animation.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize the 'Open' button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the hamburger menu icon. </li>  <li>Choose how to customize the button:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Replace the icon</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Customize Icon</strong> on the action bar. </li>  <li>Choose if your icon is <strong>Static</strong> or<strong> Animated</strong>.<br />
<strong>Tip: </strong>You can click <strong>Create Animated Icon </strong>to create one of your own, using a start and an end icon.</li>  <li>Click the <strong>Replace </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/ff9d7424-3cbd-4e11-9c3b-1014b5752546/9e71118c-50d6-4b6d-9faf-cd1f91dd43a5.png" /> under <strong>Choose an icon</strong>.</li>  <li>Select a new icon from the Media Manager and click <strong>Update</strong>.</li>  <li>(For animated icons) Set the duration of the animation. </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Set up the button's text</h4><div class="collapsible-content"><ol>
  <li>Click the <strong>Settings</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/12/24/eb26b96f-1f9f-4533-aaaa-03d7d336eeba/fbc225b1-33f6-46f0-85a6-df1bee41e60c.png" /> on the action bar.</li>  <li>Choose what to do next:
    <ul>
      <li>Enter text to appear next to the icon on the button (e.g. 'Menu', 'Open').</li>      <li>Replace the icon that visitors click to open the menu.</li>      <li>Add an accessible name (alt text) that describes the icon to search engines and screen readers.</li>    </ul>  </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design the button</h4><div class="collapsible-content"><ol>
  <li>Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar.</li>  <li>Select the relevant part of the button under <strong>Choose what to design:</strong>
    <ul>
      <li><strong>Open Button: </strong><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-designing-elements" target="_blank">Design</a> the button as a whole – the fill color, border, corners, shadow, spacing, alignment and more.</li>      <li><strong>Text: </strong>Control the design and formatting of the text that appears next to the icon on the hamburger menu button.</li>      <li><strong>Animated Icon: </strong>Change the color, size and rotation angle of the icon.</li>    </ul>  </li></ol></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-hamburger-menus-container" level="3">Customizing the hamburger menu's container</h2></div><div data-component-type="text"><div>When visitors click your hamburger menu icon, your site menu opens in a spacious container with an overlay, making the menu easy to read. There's plenty of room to personalize — adjust the container, menu and overlay colors, and add more elements like your logo or a social bar. </div></div><div data-component-type="heading"><h2 id="" level="4">To customize the hamburger menu's container:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Access the container:
    <ol>
      <li>Click the hamburger menu icon.</li>      <li>Click the <strong>Regular Mode</strong> dropdown and select <strong>Hamburger Menu</strong>.</li>    </ol>  </li>  <li>Choose what to do next:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design the container</h4><div class="collapsible-content"><div>Customize the container that houses your menu. Change the background color, add borders, re-position the menu, and much more. </div><ol>
  <li>Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar.</li>  <li>Verify that <strong>Hamburger menu</strong> is selected under <strong>Choose what to design</strong>.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-designing-elements" target="_blank">Design</a> the container:
    <ul>
      <li><strong>Fill colors </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/48fc7a9b-f035-4716-afa5-2c6aa85795f5/725b11a7-b4c9-46bb-9637-3d7f3374e5e7.png" /><strong>: </strong>Change the background color of the container and the overlay color, choosing one of your brand colors or a custom color.<br />
<strong>Tip: </strong>The overlay is a semi-transparent layer that blurs out the page and lets visitors focus on the menu.</li>      <li><strong>Border </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/283c65bd-44e0-457e-8317-12e095da63e8/1cf1fd0d-545e-4618-902a-176c71af929c.png" /><strong>: </strong>Define the borders of your the container so it stands out, choosing a color, width and style. Click the <strong>Edit individual borders </strong>icon<strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/07308240-4d35-4526-9583-8fd59df85e97/15386e65-92f9-4129-afaa-a0f7bc4be038.png" /><strong> </strong>to design each side of the border.</li>      <li><strong>Corners </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/18a27fb2-7300-40a9-b8fa-01abfa7fcec3/668fa510-f756-468e-b0e5-27721128665e.png" /><strong>: </strong>Make the corners of the container more square or round by dragging the slider under <strong>Radius</strong>. Click the <strong>Edit individual corners </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/7110092a-c0de-4bf1-b478-170dbc56fdfa/08e86672-1fee-42e8-8de3-f62c0da521c2.png" /> to design each corner separately.</li>      <li><strong>Shadow </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c58ddc92-ed60-4a11-b564-a010a97a891b/d4c7c831-59df-400c-a8f6-e2880427a247.png" /><strong>: </strong>Apply inner and outer shadow to give the container an interesting 3D effect, setting the position, blurriness, color and more.</li>      <li><strong>Spacing </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/88aafdc3-34ab-4a89-950c-93728d9254cb/25ead64b-38c8-4e68-b922-c7b8446316af.png" /><strong>: </strong>Add breathing room to your content by adding padding around the container.</li>      <li><strong>Layout </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/7b1799d3-88e3-4290-9ccf-71837d7132b6/dcbe8aef-b86f-43c7-944a-26a13bae5ea0.png" /><strong>: </strong>Decide where everything should be positioned – the close button, the menu within the container, and the container in relation to the page. You choose how much space the container takes up (e.g. third of page, half page, etc.)</li>    </ul>  </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Manage and design the menu</h4><div class="collapsible-content"><ol>
  <li>Click the menu.</li>  <li>Choose what to do next:
    <ul>
      <li><strong>Manage the menu items: </strong>Click <strong>Manage Menu</strong> on the action bar and <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-adding-and-customizing-menus#adding-and-managing-menu-items" target="">add, reorder or remove</a> menu items. </li>      <li><strong>Design the menu: </strong>Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar. Choose what you want to design – the menu items (e.g. font, text color, spacing) or the menu bar (e.g. background color, item width, space between menu items). </li>    </ul>  </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add elements to the container</h4><div class="collapsible-content"><div>Drag elements from the Add Elements panel onto the container. For example, you can show your logo, a social bar, info about a recent promotion or anything that comes to mind. </div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Done editing?</div><div class="info-content"><div>Click <strong>Done</strong> next to <strong>Editing: Hamburger menu</strong> on the floating bar to go back to your page.</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/1e13b3c7-327b-46c0-ba21-77a5c5f582e3/1eafeac7-424f-49d1-9679-8d8b2a88d0d5.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-button-that-closes-the-menu" level="3">Customizing the button that closes the menu</h2></div><div data-component-type="text"><div>Personalize the button that visitors click to close the hamburger menu. Replace the icon, add helpful text (e.g. 'Exit') and design it as you wish. </div></div><div data-component-type="heading"><h2 id="" level="4">To customize the 'Close' button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Access the 'Close' button:
    <ol>
      <li>Select the hamburger menu icon.</li>      <li>Click the <strong>Regular Mode</strong> dropdown and select <strong>Hamburger Menu</strong>.</li>      <li>Click the 'Close' button.</li>    </ol>  </li>  <li>Choose what to do next from the action bar:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add text to the icon</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Edit Text</strong> on the action bar.</li>  <li>Enter the text you want to appear next to the icon (e.g. 'Exit', 'Close').</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Customize the icon</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Customize Icon</strong> on the action bar. </li>  <li>Choose if your icon is <strong>Static</strong> or<strong> Animated</strong>.<br />
<strong>Tip: </strong>You can click <strong>Create Animated Icon </strong>to create one of your own, using a start and an end icon.</li>  <li>Click the <strong>Replace </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/ff9d7424-3cbd-4e11-9c3b-1014b5752546/9e71118c-50d6-4b6d-9faf-cd1f91dd43a5.png" /> under <strong>Choose an icon</strong>.</li>  <li>Select a new icon from the Media Manager and click <strong>Update</strong>.</li>  <li>(For animated icons) Set the duration of the animation. </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design the 'Close' button</h4><div class="collapsible-content"><ol>
  <li>Click the <strong>All design options</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/03/c304797a-7cbd-434c-80db-e6ac888f04a7/a6722dae-2e0d-44ac-b17e-92733d535008.png" /> on the action bar.</li>  <li>Select the relevant part of the element under <strong>Choose what to design</strong>:
    <ul>
      <li><strong>Close Button: </strong><a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-designing-elements" target="_blank">Design</a> the button as a whole – the fill color, border, corners, shadow, spacing, alignment and more. If your button includes both icon and text, you can also decide on their positioning.</li>      <li><strong>Icon: </strong>Change the size, color and angle of the icon.</li>      <li><strong>Text: </strong>Design the text that appears next to the icon. Change the font, formatting, alignment, character spacing and more.</li>    </ul>  </li></ol></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Done editing?</div><div class="info-content"><div>Click <strong>Done</strong> next to <strong>Editing: Hamburger menu</strong> on the floating bar to go back to your page.</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/02/1e13b3c7-327b-46c0-ba21-77a5c5f582e3/1eafeac7-424f-49d1-9679-8d8b2a88d0d5.png" /></div></div></div></div>

This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, view more information here.The Document Obj...

Wix Harmony Editor: Working with DOM Order

Discover how to optimize your site's performance and accessibility by understanding the importance of the Document Object Model (DOM) order in the new Wix Harmony Editor. This article explains how a clear DOM order impacts loading times, accessibility for assistive technologies, and search engine rankings. Learn how to manually adjust the DOM order and utilize the Accessibility Wizard to ensure your site is organized effectively for all users.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-content"><div>This article refers to the new Wix Harmony Editor, released in January 2026. If you're unsure whether you’re using the Wix Harmony Editor or the Wix Editor, <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-the-difference-between-wix-editor-and-wix-harmony" target="">view more information here</a>.</div></div></div></div><div data-component-type="text"><div>The Document Object Model (DOM) order refers to how your site pages are structured. It determines the loading and selection order of your page's elements—which comes first, then second, and so on.</div></div><div data-component-type="text"><div>Having a clear, logical DOM order can optimize your site in a number of ways. Use the information in this article to learn more about why DOM is important, and how you can work with it. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-dom-order-is-important" level="3">Why DOM order is important</h2></div><div data-component-type="text"><div>Site DOM is the loading and reading order of elements on site pages, and can impact your site's:</div></div><div data-component-type="text"><ul>
  <li><strong>Accessibility: </strong>Some site visitors may use the Tab key, a screen reader, or other assistive technologies to navigate your site. These technologies rely on the DOM order to know the order to select or read elements. </li>  <li><strong>Performance:</strong> DOM determines the sequence in which elements load on a site. If it doesn't match the visual order of elements, it can impact the site's loading (e.g. it may cause the page's layout to shift as the content loads).</li>  <li><strong>Search results ranking:</strong> Search engines use DOM to determine the order in which a site is crawled (left to right, and top to bottom). An unorganized or incorrect DOM may cause the search engine to 'read' the content in the wrong order, and misunderstand the content.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to test your site's DOM order?</div><div class="info-content"><div>You can test out the automatic DOM order of a Wix site by using your keyboard's Tab key or a screen reader on the live version of the site.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="manually-adjusting-the-dom-order" level="3">Manually adjusting the DOM order</h2></div><div data-component-type="text"><div>Wix automatically organizes your site's DOM order by default—keeping page content optimized for performance and ranking. However, you can manually adjust the DOM order of specific sections and containers.</div></div><div data-component-type="heading"><h2 id="" level="4">To disable auto DOM:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the <strong>Layers</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/09/02/8b9c0589-c455-431a-8224-b36d2ff50988/8391824e-7092-493c-8278-53c4a215ed8b.png" /> at the bottom left of the editor.</li>  <li>(In the Layers panel) Click the <strong>More Actions </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/09/d0b53340-5f4e-46f3-8e00-15817425f71d/9003c22a-91b6-479a-899c-6a105f622d6d.png" /> next to the relevant section or container.</li>  <li>Click <strong>On</strong> next to <strong>Optimize DOM Order </strong>to disable it.</li>  <li>Drag and drop the relevant elements into the order you want.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-dom-order-in-the-accessibility-wizard" level="3">Adjusting DOM order in the Accessibility Wizard</h2></div><div data-component-type="text"><div>You may be prompted to automatically organize DOM order in <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-using-the-accessibility-wizard" target="">the Accessibility Wizard</a>. This can appear under specific pages, or for the overall site:</div></div><div data-component-type="text"><ul>
  <li><strong>Site level issues: </strong>Different languages have different reading directions (e.g. French reads left-to-right, and Arabic reads right-to-left). This task is displayed when the reading direction of the site's language is not aligned with the visual order of your elements.</li>  <li><strong>Page issues:</strong> This task is displayed when DOM is disabled on at least one of the page's sections or containers. </li></ul></div><div data-component-type="heading"><h2 id="" level="4">To organize DOM order with the wizard:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click your site’s name at the top left of the editor.</li>  <li>Scroll down to <strong>Accessibility</strong> and click <strong>Fix Issues</strong>.</li>  <li>Click <strong>Scan Site</strong>.</li>  <li>Organize the DOM order with the task type:
    <ul>
      <li><strong>Site level: </strong>Select the <strong>Site level</strong> drop-down.</li>      <li><strong>Page level: </strong>
        <ol>
          <li>Click the relevant page collection (e.g. Main Pages, Store Pages).</li>          <li>Click the specific page.</li>        </ol>      </li>    </ul>  </li>  <li>Click the <strong>Organize DOM order</strong> drop-down.</li>  <li>Select<strong> Automatically (recommended)</strong>.</li>  <li>Click <strong>Apply</strong>.</li>  <li>(Optional) Check the visual display of site elements to ensure they're aligned.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Where does Wix get its accessibility information?</div><div class="info-content"><ul>
  <li>We make recommendations as per the <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Web Content Accessibility Guidelines (WCAG) document</a>, which has been developed by the <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a>. </li>  <li>We've based our guidelines on the following success criteria:
    <ul>
      <li><a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html" target="_blank">Meaningful sequence (1.3.2)</a></li>      <li><a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html" target="_blank">Focus order (2.4.3)</a></li>    </ul>  </li></ul></div></div></div>

How to begin

Choosing a template

Hiring a professional to build your site

Build your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.

Getting started with Wix

Learn how to build your website and business using Wix.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Your site's structure

Designing your site

Pages

Menus

Managing pages and menus

Text

Buttons

Containers and boxes

Slideshows

Shapes and lines

Adding and customizing elements

Images

Galleries

Videos

Documents and files

Adding files and media

Working with elements

Using effects and animations

Sharing and promoting your site

Adding advanced elements

Getting started

Mobile tools

Pages on mobile

Background on mobile

Mobile site layout

Site menu on mobile

Text on mobile

Media on mobile

Other elements on mobile

Troubleshooting your mobile site

Building a mobile site

Troubleshooting Editor sites

Using the Wix Editor

Using your dashboard

Managing your site

Managing Roles & Permissions

Getting started with AI

Using AI to create & manage your website

Using AI to set up your business

AI tools

Getting started with the editor

Using the editor tools

Structuring your site

Adding animations and effects

Branding your site

Troubleshooting your site

Using the Wix Harmony Editor

Media Manager basics

Uploading media

Purchasing media

Managing media

Troubleshooting media

Adding & managing media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Getting started with Wixel

Creating and managing projects

Designing with Wixel

Upgrading and account management

Wixel

Managing your media

Wix Multilingual basics

Translating your website

Managing languages

SEO in Wix Multilingual

Creating a multilingual website

Privacy and GDPR

About accessibility

Making your site accessible

Advanced accessibility features

Building an accessible site

About the CMS (Content Management System)

Managing CMS collections

Connecting CMS collection content to your site

Working with dynamic pages and the CMS

Connecting user input elements to CMS

Using CMS with other Wix products

Advanced CMS features

Wix for Developers

Test Site

SSO Login

Wix Blocks

Advanced features

Getting started with  Wix Vibe

Managing your Wix Vibe site

Customizing your Wix Vibe site

Publishing your Wix Vibe site

Using Wix Vibe

Read how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.

Creating a website

Design and manage your site with smart functionalities.


Changing your account settings

Sign in issues

Managing your account

Upgrading to a Premium plan

Billing for Premium Plans

Billing for Domains

Billing for Google Workspace Business Emails

Managing your subscriptions

Charges, payments and tax

Invoices for Wix services

Using vouchers and promotions

Billing & premium subscriptions

Review your account settings, manage your subscriptions and plans and understand your invoices.

Account & billing

Manage subscriptions, plans and invoices.

Managing your site with the Wix app

Mobile apps basics

Customizing your own mobile app

Managing your own mobile app

Submitting your mobile app for approval

Building your own mobile app

Customizing your site on the Wix member apps

Managing your site on the Wix member apps

Using mobile apps as a member

Using the Wix member apps

Mobile apps for your customers

Use our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch. 

Using the Wix mobile apps

Run your business and connect with members.

Domain basics

Wix domains

Domains purchased elsewhere

Transferring domains

Managing domains

Troubleshooting domains

Follow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.

Connecting a domain

Learn to purchase, connect or transfer a domain to your site.

Setting up your store

Managing products and categories

Setting up shipping & fulfillment

Setting up payment and checkout

Designing your store

Managing your orders

Managing store inventory

Managing the Members Area

Managing store emails

Promoting stores sales

Dropshipping with Wix Stores

Setting up sales channels

Using the Wix app for Wix Stores

Wix Stores

Setting up Wix Bookings

Creating your services

Managing your staff

Managing your calendar & bookings

Memberships, packages & payments

Customizing Wix Bookings pages

Emails, SMS, and promotions

Using the Wix app to manage your bookings

Video conferencing with Wix Bookings

Fit by Wix

Inquiry Services

Wix Bookings

Setting up Wix Events

Creating your event

Designing Wix Events

Managing your events

Managing your guests

Selling event tickets

Promoting your event

Using the Wix app for Wix Events

Check-in by Wix for Events

Wix Events

Business solutions & apps

Get tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.

Managing your business

Get tools to grow your business and web presence.