Use full-width strips to structure your content and break it into horizontal sections, creating a professional feel. Choose from a variety of elements to add to your strip, then customize the strip ba...

Wix Editor: Adding and Setting Up a Strip

<div data-component-type="text"><div>Use full-width strips to structure your content and break it into horizontal sections, creating a professional feel. Choose from a variety of elements to add to your strip, then customize the strip background using color, image or video. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-strip" level="3">Adding a strip</h2></div><div data-component-type="text"><div>Add a strip to begin structuring your page. You can use strips to divide your page's content and information. Popular ideas for strips include contact details and price lists.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Strips look particularly great on <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-creating-a-one-page-site" target="">one-page sites</a>.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add a strip:</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 <strong>Add Elements </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" /> on the left side of the editor.</li>  <li>Click <strong>Strip</strong>.</li>  <li>Select the type of strip you want to add.</li>  <li>Drag a strip element onto your page.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/70898dd7-09fa-4d2f-a5a4-2b40f30b6db1/6e65741d-5e09-4191-aea5-a4cec9013679.png" alt="A screenshot of selecting a strip from the editor panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-elements-to-your-strip" level="3">Adding elements to your strip</h2></div><div data-component-type="text"><div>Build your strip by adding relevant content. Once elements have been <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-attaching-elements-to-strips-and-columns#attaching-elements-to-a-strip" target="">attached to your strip</a>, you can easily move the strip and elements around your site pages.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Before you begin: </div><div class="info-content"><div>Resize the strip or element so the element fits within strip before trying to attach it. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to your strip:</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>Drag the element over the strip.</li>  <li>Drop the element when you see the message <strong>Attach to Strip</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/15/7ad03664-c2e4-4403-9475-e39cceb068d6/45bd0255-715e-41ae-8ce2-7969cb1768f6.gif" alt="A GIF of dragging an element onto a strip." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-the-alignment-of-your-strip" level="3">Adjusting the alignment of your strip</h2></div><div data-component-type="text"><div>Choose how the content of your strip is aligned on your site to ensure that your visitors can always view important and relevant information. You may want to change the alignment to organize your content in a different layout.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>You can only change the alignment of strip content if the strip doesn't contain columns.</div>    </div></div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the strip alignment:</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 strip on your page.</li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7e4ebaa2-ac6f-41c0-98b7-a878f57d6f39.png" />.</li>  <li>Select a layout: 
    <ul>
      <li><strong>Center: </strong>The content is aligned to the center of the strip.</li>      <li><strong>Left:</strong> The content is aligned to the left of the strip.</li>      <li><strong>Right: </strong>The content is aligned to the right of the strip.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/1706cf8f-f5d8-40fd-af20-0715c2212fc0/0a79427f-dc15-4d4a-bab2-459d45e29ccf.png" alt="A screenshot of selecting a layout for the strip in the editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-strip-background" level="3">Changing your strip background </h2></div><div data-component-type="text"><div>Choose a background for your strip to suit your site's look and feel. There are a variety of options available. You can choose from a range of colors, images, or videos.</div></div><div data-component-type="heading"><h2 id="" level="4">To change your strip background:</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 strip on your page.</li>  <li>Click <strong>Change Background</strong> and choose from one of the following options:
    <ul>
      <li><strong>Color:</strong> Choose from a range of colors to either match your site's palette, or create something bold. </li>      <li><strong>Image:</strong> Select from a variety of striking free images, or upload your own.</li>      <li><strong>Video:</strong> Choose a free eye-catching video from Wix, or upload your own through the Media Manager. </li>      <li><strong>Create an AI Image:</strong> Generate a custom image with the <a data-composite="true" href="https://support.wix.com/en/article/wix-media-creating-images-with-the-wix-ai-image-creator" target="">AI Image Creator</a>.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/ece9984a-bf4c-493f-8713-ae9731da8422/ab9c7ed2-4a11-48b7-a3a2-f02849df8215.png" alt="A screenshot of selecting a strip background." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>A strip automatically spans the width of your site, however you can change the width by clicking the <strong>Stretch</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/hFsLkzXM6691wSkj0XgIFyepmmnLsTe9HwRDedC6P6-zas753GHSFnvtxaxeTR1Gn-V52KxwZqNIllf6_AbKadP3KA6CJFVPFUr_lMvS_1YZGkF9vAJ2yLyUuYL3AoSKHk4WtiKm=s0" />. The maximum height for a strip is 15,000 px.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-strip" level="3">Customizing your strip</h2></div><div data-component-type="text"><div>You can customize the strip element to look exactly how you want. Adjust settings such as the border, corners, and shadow so that it nicely matches your site.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize your strip:</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 strip on your page.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/e4328628-cdc4-44bc-8523-d64731e45031/590b4e1d-2a26-4ecb-a66c-db4c0660730f.png" />.</li>  <li>Choose what you want to customize:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Border</h4><div class="collapsible-content"><div>Customize the strip's borders:</div><ul>
  <li><strong>Opacity &amp; color: </strong>Click the color box and select a color for the strip's borders. Drag the slider to increase or decrease the opacity.</li>  <li><strong>Border style: </strong>Select a border style (<strong>None</strong>, <strong>All sides</strong>, <strong>Bottom</strong>).</li>  <li><strong>Width:</strong> Drag the slider to increase or decrease the strip's border width. <br />
<strong>Note: </strong>This option will not appear if you select <strong>None </strong>under <strong>Border style</strong>.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Corner</h4><div class="collapsible-content"><div>Round the corners of the strip to make it more circular. Enter a number in each text field to round the corner.</div><div><br /></div><div><strong>Tip:</strong> Click the <strong>Lock </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/05/0f00085d-c9a2-49dc-afb2-d9974dc6e57d/3d9a647f-b86b-4db1-9778-1daa4258d129.png" /> to keep all corners and proportions the same.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Shadow</h4><div class="collapsible-content"><div>Create a shadow for your strip element. Click the <strong>Apply shadow</strong> toggle to enable or disable the shadow on the element.</div><div>When the toggle is enabled, continue customizing the shadow:</div><ul>
  <li><strong>Angle:</strong> Select a position on the circle or enter a value.</li>  <li><strong>Distance: </strong>Drag the slider to increase or decrease the distance.</li>  <li><strong>Size:</strong> Drag the slider to increase or decrease the size.</li>  <li><strong>Blur: </strong>Drag the slider to increase or decrease the shadow blur.</li>  <li><strong>Opacity &amp; color: </strong>Select a color and drag the slider to increase or decrease the opacity of the shadow.</li></ul></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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/22e9af24-365c-4617-8e3a-b3f6d6982ad8/9e304ac1-f221-434f-bb02-a1ea21c88282.png" alt="A screenshot of customizing the strip design." /></div></div>

Strips are an excellent way to build a site. You can divide them by into sections by adding columns, and attach any element to them including images, text, videos and galleries.Tips:
  When attaching ...

Wix Editor: Attaching Elements to Strips and Columns

<div data-component-type="text"><div>Strips are an excellent way to build a site. You can divide them by into sections by adding columns, and attach any element to them including images, text, videos and galleries.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tips:</div><div class="info-content"><ul>
  <li>When attaching elements to a strip or column, the layers of the editor may cause them to be hidden behind the strip / column. To view and select hidden elements, right-click the area and use the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-viewing-and-selecting-overlapping-elements" target="">Overlapping Items</a> feature.</li>  <li>You might need to move your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-arranging-elements-using-right-click" target="">strip or column backward, and your elements forward</a> for them to attach to the strip / column.</li></ul>   </div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="attaching-elements-to-a-strip" level="3">Attaching elements to a strip</h2></div><div data-component-type="text"><div>Once you have added elements to your strip, they become attached to it and you can move the strip around with the elements.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Before you begin: </div><div class="info-content"><div>Make sure the element fits within the strip (resize it if needed).</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To attach elements to strip:</h2></div><div data-component-type="text"><ol>
  <li>Click and drag the element over the strip.</li>  <li>Drop the element when you see <strong>Attach to Strip</strong>.<br />
<strong>Note: </strong>Make sure to attach elements within the vertical <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-the-editor-gridlines" target="">gridlines</a> of the strip so they display on smaller screens.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/19/f0b302a5-7466-48a9-8fe3-d8aa7c732bf3/128958b4-981c-4873-bc0f-7f26458b2b31.gif" /></div></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 detach an element from a strip, click and drag the element completely out of the strip. If you want to delete a strip without deleting the elements inside, drag them outside of the strip before deleting it.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="attaching-elements-to-a-column" level="3">Attaching elements to a column</h2></div><div data-component-type="text"><div>Splitting a strip into columns allows you to apply different designs and show different content in each column. Once you've added columns to your strip, you can attach elements to the columns.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Before you begin: </div><div class="info-content"><div>Make sure the element fits within the column (resize it if needed).</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To attach elements to a column:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-columns-on-your-strip" target="">Split a strip into columns</a>.</li>  <li>Click and drag the element over the column.</li>  <li>Drop the element when you see <strong>Attach to Column</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/14/ec79e640-9757-42ad-aa1e-bd83f02b5fbd/4ba682c6-7b41-4efc-bfe0-b1c58ec03736.gif" /></div></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 detach an element from a column, click and drag the element completely out of the column. If you want to delete a column without deleting the elements inside, drag them outside of the strip before deleting it.</div></div></div></div>

Update your site's design and impress your visitors by customizing your strip background. Add a color, image or video background to your strip. You can choose from a variety of professional imagery an...

Wix Editor: Changing Your Strip Background

<div data-component-type="text"><div>Update your site's design and impress your visitors by customizing your strip background. Add a color, image or video background to your strip. You can choose from a variety of professional imagery and video from the Wix libraries, or upload your own.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/05/d2677c91-2cc3-4794-b2c9-5813e66666a8/44bbc5c2-d4d7-467a-b324-329b02fb2a71.gif" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-color-or-gradient-to-your-strip-background" level="3">Adding a color or gradient to your strip background</h2></div><div data-component-type="text"><div>Add a block color or a gradient background to your strip. You can choose from your site's colors, or create your own. </div></div><div data-component-type="heading"><h2 id="" level="4">To add a color or gradient to your strip:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Color </strong>and select from one of the following options:
    <ul>
      <li><strong>Color:</strong> Choose a block color to apply to your strip.</li>      <li><strong>Gradient: </strong>Apply a cool effect to your strip background with a Linear, Radial, or Conic gradient. </li>      <li><strong>Fluid gradient: </strong>Make your strips stand out with a sophisticated fluid gradient.</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/2024/04/17/2f874c2f-ea89-45d7-a9c7-1e9cb1b47115/5ebbd722-a837-46c3-ac29-0b8bcc76b46f.png" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>You can add a color <strong>and </strong>an image or video. The color appears while the image or video is loading. You can see the color behind the image or video in the <strong>Strip Background</strong> panel:</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/2e983a7b-a9c5-442a-b196-180bd8b61c74/693dda78-efc3-40df-b7b0-c5ee868516ec.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-an-image-to-your-strip-background" level="3">Adding an image to your strip background</h2></div><div data-component-type="text"><div>Draw your visitors' eyes to your strip by adding striking imagery. Use <a data-composite="true" href="https://support.wix.com/en/article/wix-media-using-the-wix-photo-studio-tools" target="">Wix Photo Studio</a> to apply a variety of imagery elevating effects from unique filters to crop and resizing. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>We recommend uploading images with a resolution of no less than 1920px by 1080px. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add an image to your strip:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Image</strong>.</li>  <li>Select an image from the Media Manager.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>(Optional) Clicking the <strong>Edit</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/04/12/80e19ca2-2daf-4835-a8ab-becc2dbd68f6/fcd40534-3fe2-4a5d-b848-bf727f7fe206.png" /> to access the Wix Photo Studio, where you can crop the image and make other adjustments.</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/2024/04/17/a8473e9b-e0e4-43d2-b4d0-380bbafb23c1/ca1486ce-d427-4414-8452-088c1c41fc74.png" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-video-to-your-strip-background" level="3">Adding a video to your strip background</h2></div><div data-component-type="text"><div>Add movement to your site by giving your strip a video background. Choose from free Wix videos or upload a video of your own. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>By default, video backgrounds on strips are set to not play on mobile. However, you can select the strip and enable the video background in the mobile editor. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add a video to your strip:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Video</strong>.</li>  <li>Select a video from the Media Manager or click <strong>Upload Videos</strong> to upload your own.</li>  <li>Click <strong>Change Background</strong>.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/05/7b77ab89-8b56-45ee-ae22-241100e1043f/82ac5623-d4fe-436e-8e15-a295e516aa6f.gif" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Notes:</div><div class="info-content"><ul>
  <li>Depending on the file size, your video may take a while to upload. You can continue editing your site while the upload is in progress. <a data-composite="true" href="https://support.wix.com/en/article/wix-media-supported-media-file-types-and-file-sizes" target="">Learn about file types and sizes</a>.</li>  <li>After upload, the video finalizes its properties to ensure that it is optimized for all devices. This may take a few minutes, and you will not see the full resolution video on your page background until it has finalized. </li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="removing-an-image-or-video-from-a-strip" level="3">Removing an image or video from a strip</h2></div><div data-component-type="text"><div>To remove an image or video from a strip, you simply need to replace the strip background with another color, image or video.</div></div><div data-component-type="heading"><h2 id="" level="4">To remove an image or video from a strip:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Select another background.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tips:</div><div class="info-content"><ul>
  <li>To remove your strip background completely, change your strip color to white. </li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-applying-background-scrolling-effects-to-your-strip" target="">Add a cool scroll effect</a> to create a sense of movement around your strip.</li></ul></div></div></div>

Change your strip's background settings so that it appears exactly as you like on your site. You can customize the settings of each strip background type; color, image, and video.Changing your strip s...

Wix Editor: Changing Your Strip Settings

<div data-component-type="text"><div>Change your strip's background settings so that it appears exactly as you like on your site. You can customize the settings of each strip background type; color, image, and video.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-strip-settings" level="3">Changing your strip settings</h2></div><div data-component-type="text"><div>Strip settings are different depending on the background type you choose (color, image or video). You have the option to customize aspects such as color and image opacity, overlay patterns and video play speed.</div></div><div data-component-type="heading"><h2 id="" level="4">To change your strip settings:</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 strip.</li>  <li>Click <strong>Change Strip Background</strong>.</li>  <li>Click <strong>Settings </strong></li>  <li>Customize your strip type using the options available:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Color settings</h4><div class="collapsible-content"><div>Click the color box to select a new color for your strip background. Then drag the slider to adjust the strip's transparency to perfectly suit your site's design.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/10/28/31678030-b262-4fb6-b8ae-21418b6652cf/2a393ea3-e078-415e-940c-6674236aa47d.png" /><br />
</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Image settings</h4><div class="collapsible-content"><div>Adjust the settings of your strip image to suit your site's design.</div><div><br /></div><ul>
  <li><strong>Image Opacity:</strong> Drag the slider to adjust the transparency of the image and expose some elements that the strip covers.</li>  <li><strong>Color Behind Image:</strong> Choose a color to appear behind your image when you lower the opacity of the image.</li>  <li><strong>How's the image scaled?: </strong>Enlarge or reduce the size of the strip's image.
    <ul>
      <li><strong>Original Size:</strong> The original size image is displayed. Parts of it may be cut off.</li>      <li><strong>Scale to Fill:</strong> The image is resized to fill the available space. You may want to reposition it.</li>      <li><strong>Tile: </strong>The image is displayed in tile formation across the available space.</li>    </ul>  </li>  <li><strong>Where is it positioned?: </strong>Select a section of the grid to choose which part of your image is in focus within the confines of your strip.</li>  <li><strong>Image Text: </strong>Add a description of your strip image to improve your site's SEO and accessibility.</li></ul><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/10/28/7ebbf3a0-1b3b-4f1d-9f7f-e8518166061e/795c50be-5b2b-41d9-a3ce-87ef3373dbe8.png" /><br />
</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Video settings</h4><div class="collapsible-content"><div>Adjust the settings of your strip video to suit your site's design.</div><div><br /></div><ul>
  <li><strong>Want to add an overlay pattern?: </strong>Choose a cool overlay pattern that sits on top of your background video. Click <strong>Darker </strong>or <strong>Lighter </strong>to change the contrast of the overlay.</li>  <li><strong>Video opacity:</strong> Drag the slider to make the video more or less visible.</li>  <li><strong>Color behind video:</strong> Select the color that's behind the video background.</li>  <li><strong>Where's the video positioned?: </strong>Select a section of the grid to choose which part of your video is in focus within the confines of your strip.</li>  <li><strong>How does the video play?:</strong>
    <ul>
      <li><strong>Play Speed:</strong> Choose to play your video at its original speed (normal) or at 0.5 / 0.25 times the original speed.</li>      <li><strong>Play in a loop: </strong>Click the toggle to enable automatic looping of your background.</li>    </ul>  </li></ul><div><br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/10/28/f2a53cf5-1f24-4cd0-9859-99c5bf1ef913/0823adf6-cb69-4bf0-afd0-5d0e87bf87ea.png" /></div><div><br /></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/10/28/590cf437-6adc-4aaa-92f1-55674a1d6a72/50ff3042-a106-4e98-95d9-5cd7728ea6d5.png" alt="The settings panel for a video background on a strip in the Wix Editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>We recommend that you play around with the settings and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site" target="">preview your site</a> to see what looks best.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>The strip settings are different depending on the background type (color, image or video).</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-image-scaling-and-position-on-a-strip" level="3">Changing the image scaling and position on a strip</h2></div><div data-component-type="text"><div>If the image you're using on your strip is a different size or shape to the strip itself (or column inside the strip), part of the image might be cut off or simply not appear as you wish. You can play around with the image scaling and positioning to fix this.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the image scaling and position on a strip:</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 image on the strip.</li>  <li>Depending on whether the your image takes up the whole strip or just a column, do one of the following:
    <ul>
      <li>Whole strip: Click <strong>Change Strip Background</strong>.</li>      <li>Column only: Click <strong>Change Column Background</strong>.</li>    </ul>  </li>  <li>Click <strong>Settings</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/7953fb02-4498-45c1-9471-2498fad967cc/83136bfd-a130-4673-9f44-a252b683358a.png" alt="The panel for a strip background in the Wix Editor." /></div></div><div data-component-type="text"><ol><li>Scroll down to <strong>Scaling &amp; Positioning</strong>.</li><li>Click the <strong>How's the image scaled? </strong>drop-down and select an option:<ul><li><strong>Original Size:</strong> The original size image is displayed. Parts of it may be cut off.</li><li><strong>Scale to Fill:</strong> The image is resized to fill the available space. You may want to reposition it.</li><li><strong>Tile: </strong>The image is displayed in tile formation across the available space.</li></ul></li><li>Select a position for your image under <strong>Where is it positioned?</strong>.<br /><strong>Tip:</strong> This is helpful if your image is not centered or is focused on the wrong area.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/a1fc1f67-6d63-4b81-a763-7726f3fc83c9/9ba6655f-de75-49b1-ba55-91cd09207d09.png" alt="The scaling and positioning panel for a strip background in the Editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Alternatively, you can crop the image to better fit the available space.</div></div></div></div>

Columns are a great way to section and organize strips on your site. Customize each column individually to suit your site's look and layout, and create eye-catching pages for your visitors.Splitting a...

Wix Editor: Adding and Setting Up Columns on Your Strip

<div data-component-type="text"><div>Columns are a great way to section and organize strips on your site. Customize each column individually to suit your site's look and layout, and create eye-catching pages for your visitors.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="splitting-a-strip-into-columns" level="3">Splitting a strip into columns</h2></div><div data-component-type="text"><div>Add a column to a strip quickly and easily from the strip's layout settings to begin constructing and arranging your site's content. </div></div><div data-component-type="heading"><h2 id="" level="4">To split a strip into columns:</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 strip element on your page.</li>  <li>Click the <strong>Layout</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Click <strong>Add Column</strong>.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/9834d3cd-dfdd-412f-a9bd-7943c158dbe4/15e6a4ee-d609-466b-b203-442be345b997.png" alt="screenshot of strip selected in wix editor. layout icon selected, add column panel button displayed." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-more-columns-to-a-strip" level="3">Adding more columns to a strip</h2></div><div data-component-type="text"><div>Once you've added your first columns, you can add more to continue organizing and building your strip. You can add up to five columns.</div></div><div data-component-type="heading"><h2 id="" level="4">To add more columns to a strip:</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 strip element (with at least two columns) on your page.</li>  <li>Click <strong>Manage Columns</strong>.</li>  <li>Click <strong>Add Column</strong>.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/f3f6d931-1194-427f-8350-937058a87feb/13157d4f-8755-453e-865e-778ac3c9e503.png" alt="screenshot of column on strip selected in wix editor. manage column selected, add column button displayed." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-column-background" level="3">Changing the column background</h2></div><div data-component-type="text"><div>Select an <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-the-background-of-your-columns" target="">individual background</a> for each of your columns to create an interesting and engaging design. You can choose a color, an image or a video for the column background.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the column background:</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 column on the strip on your page.</li>  <li>Click <strong>Change Background </strong>and choose from one of the following options:
    <ul>
      <li><strong>Color:</strong> Choose from a range of colors to either match your site's palette, or create something bold. </li>      <li><strong>Image:</strong> Select from a variety of striking free images, or upload your own.</li>      <li><strong>Video:</strong> Choose a free eye-catching video from Wix, or upload your own through the Media Manager.</li>      <li><strong>Create an AI Image:</strong> Generate a custom image with the <a data-composite="true" href="https://support.wix.com/en/article/wix-media-creating-images-with-the-wix-ai-image-creator" target="">AI Image Creator</a>.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/bd8265ba-8832-44ee-ad22-1860ac9dcf18/fe647773-593c-462f-9e59-6ce4e5193d8e.png" alt="Screenshot of strip Change Background panel in wix editor. Different backgrounds available displayed." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-elements-to-columns" level="3">Adding elements to columns</h2></div><div data-component-type="text"><div>Build your page's content by <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-attaching-elements-to-strips-and-columns#attaching-elements-to-a-column" target="">adding elements</a> to columns on your strip. Popular elements to add to columns include text, buttons, and vector art. </div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to columns:</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>Drag the element to your chosen position on the column.</li>  <li>Drop the element when you see <strong>Attach to Column</strong>.</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>For larger elements, make sure the element is smaller than the column. If necessary, resize the element to fit it in the column.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/15/5d0fe6dd-dc5c-45b8-a361-f8fbde7ff318/fc52aa74-2456-45b5-99b7-0f594ddd91f7.gif" alt="Gif of vector art being dragged and attached to columns in Wix Editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-columns" level="3">Customizing your columns</h2></div><div data-component-type="text"><div>You can customize the columns to look exactly how you want. Adjust settings such as the border, corners, and shadow so that it nicely matches your site.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize your columns:</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 a column on your page.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/e4328628-cdc4-44bc-8523-d64731e45031/590b4e1d-2a26-4ecb-a66c-db4c0660730f.png" />.</li>  <li>Choose what you want to customize:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Border</h4><div class="collapsible-content"><div>Customize the column's borders:</div><ul>
  <li><strong>Opacity &amp; color: </strong>Click the color box and select a color for the column's borders. Drag the slider to increase or decrease the opacity.</li>  <li><strong>Border style: </strong>Select a border style (<strong>None</strong>, <strong>All sides</strong>, <strong>Bottom</strong>).</li>  <li><strong>Width:</strong> Drag the slider to increase or decrease the column's border width.<br />
<strong>Note: </strong>This option will not appear if you select <strong>None </strong>under <strong>Border style</strong>.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Corner</h4><div class="collapsible-content"><div>Round the corners of the column to make it more circular. Enter a number in each text field to round the corner.</div><div><br /></div><div><strong>Tip:</strong> Click the <strong>Lock </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/05/0f00085d-c9a2-49dc-afb2-d9974dc6e57d/3d9a647f-b86b-4db1-9778-1daa4258d129.png" /> to keep all corners and proportions the same.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Shadow</h4><div class="collapsible-content"><div>Create a shadow for your column. Click the <strong>Apply shadow</strong> toggle to enable or disable the shadow on the element.</div><div>When the toggle is enabled, continue customizing the shadow:</div><ul>
  <li><strong>Angle:</strong> Select a position on the circle or enter a value.</li>  <li><strong>Distance: </strong>Drag the slider to increase or decrease the distance.</li>  <li><strong>Size:</strong> Drag the slider to increase or decrease the size.</li>  <li><strong>Blur: </strong>Drag the slider to increase or decrease the shadow blur.</li>  <li><strong>Opacity &amp; color: </strong>Select a color and drag the slider to increase or decrease the opacity of the shadow.</li></ul></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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/262c2d31-dd28-417b-9dee-c46ec48161a0/4eb61d20-c4b2-4708-bc0b-c9cb64c04464.png" alt="A screenshot of the column design settings in the Wix editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">What's next?</div><div class="info-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adjusting-the-layout-of-your-columns" target="">Adjust the spacing</a> and sizing of your columns. </li>  <li>Learn about managing your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-strips-and-columns-on-your-mobile-site" target="">columns on your mobile site</a>.</li></ul></div></div></div>

Adjust the layout of your columns to suit the look and alignment of your page. You can change the sizing and spacing to fit your content to make sure that your site is clear and easy to navigate.Resiz...

Wix Editor: Adjusting the Layout of Your Columns

<div data-component-type="text"><div>Adjust the layout of your columns to suit the look and alignment of your page. You can change the sizing and spacing to fit your content to make sure that your site is clear and easy to navigate.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resizing-your-columns" level="3">Resizing your columns</h2></div><div data-component-type="text"><div>Adjust the size of columns to suit your strip's content. You can select a preset layout, or use the customization option to change the proportions to whatever you'd like.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/cb5fae53-9044-4020-b173-c49ad8c0591c/49c0e88a-3d40-4616-b781-8dedc4f7e8a8.png" /></div></div><div data-component-type="heading"><h2 id="" level="4">To resize your columns:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip that contains the columns in the editor.</li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Click a layout under <strong>Column Proportions. </strong></li>  <li>(Optional) Click <strong>Customize Proportions</strong> and customize the layout by dragging the column edges.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>If you have 5 columns, you cannot customize their proportions - they are always distributed equally.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-column-spacing" level="3">Changing the column spacing</h2></div><div data-component-type="text"><div>Choose the amount of space between your columns and the margins around them by adjusting the spacing and padding.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/14/0fe09427-cb7d-4d25-b3fd-917b977cd397/0c43ceb0-a163-420a-8bb8-eaf32dfc7446.png" /></div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the spacing and padding:</h2></div><div data-component-type="text"><ol>
  <li>Click your strip that contains your columns in the editor.</li>  <li>Click the <strong>Layouts </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Drag the <strong>Column Spacing</strong> slider to increase or decrease the gap between each column, or enter a value.</li>  <li>Drag the <strong>Padding </strong>slider to increase or decrease the space between the columns and the edge of the strip, or enter a value.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="aligning-the-column-content" level="3">Aligning the column content</h2></div><div data-component-type="text"><div>Each column in your strip can have a different alignment for its content. </div></div><div data-component-type="heading"><h2 id="" level="4">To change the alignment of the content in your columns:</h2></div><div data-component-type="text"><ol>
  <li>Click the column in your strip element.</li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7e4ebaa2-ac6f-41c0-98b7-a878f57d6f39.png" />.</li>  <li>Select a layout: 
    <ul>
      <li><strong>Center: </strong>The content is aligned to the center of the column.</li>      <li><strong>Left:</strong> The content is aligned to the left of the column.</li>      <li><strong>Right: </strong>The content is aligned to the right of the column.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/14/81c28e03-ba26-4047-9047-a5fcbcdf0703/a640e52f-d18f-4b08-b2f1-aa8c18f9bb1c.png" /></div></div>

Upgrade your site's design and impress your site visitors by changing up the background of each individual column. You can opt for a color, image, or video background. Choose from a variety of profess...

Wix Editor: Changing the Background of Your Columns

<div data-component-type="text"><div>Upgrade your site's design and impress your site visitors by changing up the background of each individual column. You can opt for a color, image, or video background. Choose from a variety of professional imagery and video from the Wix libraries, or upload your own.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">What's the difference between strips and columns?</div><div class="info-content"><div>You can split your strip into columns to organize your content into neat, easily digestible sections.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/06/9117665a-2e15-460d-8cc0-27beb93a29db/be8ad0c9-e6e8-4c15-9578-f14b4853874d.gif" alt="A GIF showing an example of a strip with 4 columns, some include image backgrounds and others show a video background" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-color-or-gradient-to-your-column-background" level="3">Adding a color or gradient to your column background</h2></div><div data-component-type="text"><div>Add a block color or a gradient background to your strip. You can choose from your site's colors, or choose your own. </div></div><div data-component-type="heading"><h2 id="" level="4">To add a color or gradient to your column background:</h2></div><div data-component-type="text"><ol>
  <li>Click the column on the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Color </strong>and select from one of the following options:
    <ul>
      <li><strong>Solid:</strong> Choose a color to apply to your strip.</li>      <li><strong>Gradient  </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/06/28d70a3a-ae83-4954-8d9b-073aa3b38f20/e8713ee8-70f5-4452-9556-0a9cff5a6b1b.png" /><strong>: </strong>Apply a cool effect to your strip background with a Linear, Radial, or Conic gradient. </li>      <li><strong>Fluid gradient </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/06/ef82e401-93f4-46ab-a657-9dfa2a826274/63c1e3a7-ec0f-4f50-8f6b-edb83e17463a.png" /><strong>:</strong> Make your strips stand out with a sophisticated mesh gradient.</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>Learn more about <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-your-strip-background#adding-a-color-or-gradient-to-your-strip-background" target="">adding gradients to your strip background</a>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/01/13/37bee15a-5eed-4928-9a0c-3bf0c9a27306/07431f32-971e-4014-a9dd-1567b618da35.png" alt="A screenshot of the color picker inside the Column Background panel" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-an-image-to-your-column-background" level="3">Adding an image to your column background</h2></div><div data-component-type="text"><div>Add striking imagery to your column backgrounds to keep visitors engaged as they explore your site. You can upload your own image or select from a huge variety of professional images offered by Wix.</div></div><div data-component-type="heading"><h2 id="" level="4">To add an image to your column background:</h2></div><div data-component-type="text"><ol>
  <li>Click the column on the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Image</strong>.</li>  <li>Select an image from the Media Manager or click <strong>Upload Media</strong> to upload your own.</li>  <li>Click <strong>Change Background</strong>.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/06/09ac32fa-a7f9-4371-b538-5826deb94918/a6b99369-4b0b-42ae-9678-2a5135d8f089.png" alt="A column with an image background, alongside the Column Background panel" /></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>You can set an image you've added to the column as its background by selecting the image, then clicking the Set image as background icon <img data-composite="true" src="https://lh7-us.googleusercontent.com/YEVLofEBhLGpsMeS2d4zcI-mKCuJb1U_hXNRPjL-jH19P47FS3gR3RhY5PqfZ1-POyM_t1EhVwDxkndKMvghDi6S9iFNa-14qPIOr0S7WBvzH0Fpadx6POTXvyHhjSWdONNAhZQrsQYsZDjDa_3Raic" />.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-video-to-your-column-background" level="3">Adding a video to your column background</h2></div><div data-component-type="text"><div>Increase your site's visual appeal, as well as your visitors' experience, by adding compelling videos to your column backgrounds. You can upload your own image or select from a huge variety of professional videos offered by Wix.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a video to your column background:</h2></div><div data-component-type="text"><ol>
  <li>Click the column on the strip in your editor.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click <strong>Video</strong>.</li>  <li>Select a video from the Media Manager or click <strong>Upload Media</strong> to upload your own.</li>  <li>Click <strong>Change Background</strong>.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/06/3c240fce-5321-493c-aaf3-80437f375dc1/aa6a4596-58f4-4c1a-87a2-44a857a82142.png" alt="A screenshot of a column alongside the Column Background panel" /></div></div>

Manage columns on your strip to keep your content aligned and organized. You can easily delete columns, change their order, and duplicate them to arrange your content in the best way possible. Tip:Lea...

Wix Editor: Managing Your Columns

<div data-component-type="text"><div>Manage columns on your strip to keep your content aligned and organized. </div></div><div data-component-type="text"><div>You can easily delete columns, change their order, and duplicate them to arrange your content in the best way possible. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Learn how to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adjusting-the-layout-of-your-columns" target="">resize your columns</a> and adjust spacing and padding.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="duplicating-columns" level="3">Duplicating columns</h2></div><div data-component-type="text"><div>Duplicating your columns is a great way to keep the design of the columns inside your strip consistent.</div></div><div data-component-type="text"><div>When you duplicate a column, the style and design is automatically copied to the new one, so all you need to do is edit the content; making it a quick and easy way to build your site. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/14/99c816af-1fa0-454e-bbe5-4f2748fa0f71/e11ff3c0-47f6-4a81-a295-abeda399d081.png" /></div></div><div data-component-type="heading"><h2 id="" level="4">To duplicate columns:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip that contains the columns in the Editor.</li>  <li>Click <strong>Manage Columns</strong>.</li>  <li>Click a column under<strong> Pick a column</strong>.</li>  <li>Click the <strong>Duplicate</strong><strong> </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/876559a5-4408-4fa7-bd44-163fd6fa6f0c.png" />.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-order-of-columns" level="3">Changing the order of columns</h2></div><div data-component-type="text"><div>Change the order of the columns inside your strip to best suit your content.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/14/02d636ab-e24f-4f93-8499-6c54392eea5a/9c299e28-bce4-4ff7-b5c2-de6153fcd5ce.png" /></div></div><div data-component-type="heading"><h2 id="" level="4">To change the order of columns on a strip:</h2></div><div data-component-type="text"><ol>
  <li>Click the relevant strip in the editor.</li>  <li>Click <strong>Manage Columns</strong>.</li>  <li>Click a column under<strong> Pick a column</strong>.</li>  <li>Click the<strong> </strong> <strong>Move left</strong> <img data-composite="true" src="https://lh3.googleusercontent.com/PTvY0Wdlcn1hL_qROGrc2sWH8gwldGyiiLdptjH8bnKhYK2Wb2e-DHpqvtiWj7kJGzLnlSjIhBWs8Bpco_IVTekXkgbHxfqFGpfv9knWRVXBgYZPmLpvTGq6fYsyc_rn37Z2LDyx" /> or <strong>Move right</strong> <img data-composite="true" src="https://lh5.googleusercontent.com/HptQa3rSOMBLpHXJHmPkn5lz-ICs1kzK5Zfureg5jaTmz3fd665J_wT8jJt6tVWdkAkwkIzyGUBginAyTOigmmGvO7lGuEYNZPMUO5Ovs8J7-snLdqNzhMebrPihVDiYsY8Z5q8_" /> icons. </li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="deleting-columns" level="3">Deleting columns</h2></div><div data-component-type="text"><div>You can delete a column inside your strip at any time. If you delete all of your columns except one, the element reverts back to a regular strip.</div><div><br /></div><div>When you delete a column, the other columns are automatically resized to fit the space.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/c85b3512-57e3-48af-a899-cbd9917cf18c/2b1f0f9e-6311-4e40-ad0d-9abe3346db2f.png" /></div></div><div data-component-type="heading"><h2 id="" level="4">To delete a column:</h2></div><div data-component-type="text"><ol>
  <li>Click the strip with the columns in the editor.</li>  <li>Click <strong>Manage Columns</strong>.</li>  <li>Click a column under<strong> Pick a column</strong>.</li>  <li>Click the <strong>Delete</strong><strong> </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/10/1e7f05d1-83c2-4706-83c9-a9ee5482ad12.png" />.</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>You can also delete a column by selecting it inside the strip and pressing <strong>Delete</strong> on your keyboard. If you want to delete a column without deleting the elements inside, click and drag them anywhere outside of the column first.</div>    </div></div></div>

Columns are a great way to showcase important site information. You can do this by adding a strip to your site and organizing your text into neat, structured columns. Design your columns to be equal i...

Wix Editor: Creating Text Columns

<div data-component-type="text"><div>Columns are a great way to showcase important site information. You can do this by adding a strip to your site and organizing your text into neat, structured columns. Design your columns to be equal in size, or customize each column's proportions individually.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/13/cc85f433-9943-4b95-8b2b-4547e902b9f7/44e56ca0-c443-4e74-a996-2e9767a39236.png" alt="screenshot of site displaying strips with 3 columns." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-split-your-strip-into-columns" level="3">Step 1 | Split your strip into columns</h2></div><div data-component-type="text"><div>First, split your strip into the desired amount of columns. You can have up to five columns.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/06/8ab8ae2e-320a-4d35-9d92-01f73545f907/a767f629-465d-4640-8c39-b1d7c0e6fc59.png" alt="screenshot of manage columns panel in wix editor." /></div></div><div data-component-type="heading"><h2 id="" level="4">To split your strip into columns:</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 strip. </li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Click <strong>Add Column</strong>.</li>  <li>(Optional) Click <strong>Manage Columns</strong> and then <strong>Add Column</strong> to add more columns.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-resize-your-columns" level="3">Step 2 | Resize your columns</h2></div><div data-component-type="text"><div>Adjust your column proportions to suit the amount of text you want to display. You can choose from one of our column proportions presets or create a custom layout.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>If you have 5 columns, you cannot customize their proportions. They are always distributed equally.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/cb5fae53-9044-4020-b173-c49ad8c0591c/49c0e88a-3d40-4616-b781-8dedc4f7e8a8.png" alt="screenshot of strip layout proporiton options in wix editor." /></div></div><div data-component-type="heading"><h2 id="" level="4">To resize your columns:</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 strip.</li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/04/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Click a layout under <strong>Column Proportions. </strong></li>  <li>Click <strong>Customize Proportions</strong> and customize the layout by dragging the column edges.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-add-text-to-your-columns" level="3">Step 3 | Add text to your columns</h2></div><div data-component-type="text"><div>Next, add a text element to your site. Then, resize the element using the drag handles and drop it in place on your column.</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/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/08/06/9a007a81-a575-4af6-af73-b957f6f89517/c9b3a6fb-b8b0-47d1-a394-240d34679300.gif" alt="gif of text element being attached to column in wix editor" /></div></div><div data-component-type="heading"><h2 id="" level="4">To add text to your columns:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-editing-text" target="">Add a text element</a> to your site.</li>  <li>Re-size the text element so that it fits completely inside your column borders.</li>  <li>Click and drag the text element to your chosen position on the column.</li>  <li>Drop the text element when you see <strong>Attach to Column</strong>.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>Make sure that your text is placed in the gridlines of each column to ensure that the text is visible on all devices.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>If you don't want your strip (behind your columns) to be visible, make it transparent by decreasing the opacity in the background settings.</div></div></div></div>

Add shape dividers to your strips and sections to create an interesting and stylish layout. Instead of using clear-cut lines to divide content, choose a shape (e.g. Ellipse, Waves) or upload your own....

Wix Editor: Adding and Customizing Shape Dividers

<div data-component-type="text"><div>Add shape dividers to your strips and sections to create an interesting and stylish layout. Instead of using clear-cut lines to divide content, choose a shape (e.g. Ellipse, Waves) or upload your own. These dividers can go at the top and bottom of a strip or section, and you can customize their design 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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/09/52be9d66-5c9b-4a5c-b182-06f2e4f68770/58528999-be9d-43ff-a5c6-0cd22bf27062.png" alt="A shape divider on a live site." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Before you begin:</div><div class="info-content"><div>Make sure you <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-strip" target="">add and set up the strip</a> first.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-shape-divider" level="3">Adding a shape divider</h2></div><div data-component-type="text"><div>Get started by adding a shape divider to your section or strip. You can add the divider to the top or bottom of your strip / section, or both. </div></div><div data-component-type="text"><div>There are a range of shapes you can choose from, as well as additional designs in the Wix Media catalog. You can also upload your own shape to give this transition a personal touch.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a shape divider to your section or strip:</h2></div><div data-component-type="text"><ol>
  <li>Select your section or strip:
    <ul>
      <li>(For strips) Click the strip in your editor.</li>      <li>(For sections) Double-click the section in your editor.</li>    </ul>  </li>  <li>Click the <strong>Shape Dividers</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/yHvLJbsmJOP1SXxMEIAAUQzJzJqnvzFR3y8-E9_PwkbtQdoj-Pv7g8BFc2HSJ7YajwNIbLV4IabXbdEANAx7u2IbMeDkCF2SFrQ5FYwDr55yXsFfs8BKIBqu9WgP7VPOlYxbQMWfL0AlK1Ao1Q" />.</li>  <li>Click the <strong>Top</strong> or <strong>Bottom </strong>tab to choose where to add the divider.</li>  <li>Select a divider to add:
    <ul>
      <li><strong>Suggested designs:</strong> Click one of the styles available in the panel.</li>      <li><strong>Additional designs offered by Wix:</strong>
        <ol>
          <li>Click <strong>+</strong> <strong>More Shapes</strong>.</li>          <li>(In the Media Manager) Select a design from the <strong>Media from Wix</strong> tab.</li>          <li>Click <strong>Choose File</strong> to apply it.</li>        </ol>      </li>      <li><strong>Your own shape divider: </strong>
        <ol>
          <li>Click <strong>+ More Shapes</strong>.</li>          <li>(In the Media Manager) Select the shape you want to use from the <strong>Site Files</strong> tab, or upload a new one.</li>          <li>Click <strong>Choose File</strong> to apply it.</li>        </ol>      </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/17/5bb8cfc6-e8ea-400b-ba8b-2107ccd0cda5/8e5c7b01-3a24-4b7f-8801-81e769c6276f.jpg" alt="The Shape Divider panel in the Editor. A skyline shape has been selected." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-shape-divider" level="3">Customizing your shape divider</h2></div><div data-component-type="text"><div>After adding a divider, you can customize its design to your liking. Adjust the height, color, opacity and layers to personalize the transition and make it look exactly how you want.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>The available options depend on the shape divider you choose.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To customize your shape divider:</h2></div><div data-component-type="text"><ol>
  <li>Select your section or strip:
    <ul>
      <li>(For strips) Click the strip in your editor.</li>      <li>(For sections) Double-click the section in your editor.</li>    </ul>  </li>  <li>Click the <strong>Shape Dividers</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/yHvLJbsmJOP1SXxMEIAAUQzJzJqnvzFR3y8-E9_PwkbtQdoj-Pv7g8BFc2HSJ7YajwNIbLV4IabXbdEANAx7u2IbMeDkCF2SFrQ5FYwDr55yXsFfs8BKIBqu9WgP7VPOlYxbQMWfL0AlK1Ao1Q" />.</li>  <li>Click the <strong>Top</strong> or <strong>Bottom </strong>tab to access the divider you want to design.</li>  <li>Click <strong>Customize Design </strong>at the bottom.</li>  <li>Choose how you want to adjust the look of your shape divider:
    <ul>
      <li><strong>Opacity &amp; color:</strong> Choose whatever color you want for your divider, and make it more or less visible on the section or strip.</li>      <li><strong>Height:</strong> Set how high or low you want the divider to go on your section or strip.</li>      <li><strong>Horizontal offset: </strong>Re-position your shape divider, moving it to the left or right. </li>      <li><strong>Layer effect:</strong> Click the toggle to add a fade effect to the divider, then select a direction from the drop-down:
        <ul>
          <li><strong>Centered:</strong> The effect is visible on the entire divider.</li>          <li><strong>Fade to top: </strong>The effect lessens towards the top of the divider.</li>          <li><strong>Fade to bottom: </strong>The effect lessens towards the bottom of the divider.</li>        </ul>      </li>      <li><strong>Invert:</strong> Invert the shape of the divider (vertically).</li>      <li><strong>Flip:</strong> Set the divider to display the opposite way (horizontally) on your strip / section.</li>      <li><strong>Number of repeats:</strong> Set how many times the pattern repeats across the divider.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/17/a7f0e68c-8dd1-4163-8f02-19e52d3023ae/b951c5a2-8ec1-4287-a8fb-eb5fdeb17e5e.jpg" alt="The Customize Design panel for a shape divider in the Editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-a-custom-shape-divider" level="3">Designing a custom shape divider</h2></div><div data-component-type="text"><div>When you upload your own shape divider, you can use a variety of options to further personalize it. Adjust settings like the divider's color, visibility and scale to create a unique structure and design on your page. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Note:</div><div class="info-content"><div>The available design options for your custom divider depend on the specific file you upload. </div><div><br /></div><div>In order to customize the design of your SVG, the file needs to:</div><ul>
  <li>Be a closed shape. </li>  <li>Only contain one level of opacity (transparency).</li>  <li>Not contain any text, strokes, gradients, filters etc.</li></ul><div><br /></div><div>Additionally, you can only change the color of SVG files that are the color RGB = #000000 (black).</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To customize the design of your own shape divider:</h2></div><div data-component-type="text"><ol>
  <li>Select your section or strip:
    <ul>
      <li>(For strips) Click the strip in your editor.</li>      <li>(For sections) Double-click the section in your editor.</li>    </ul>  </li>  <li>Click the <strong>Shape Dividers</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/yHvLJbsmJOP1SXxMEIAAUQzJzJqnvzFR3y8-E9_PwkbtQdoj-Pv7g8BFc2HSJ7YajwNIbLV4IabXbdEANAx7u2IbMeDkCF2SFrQ5FYwDr55yXsFfs8BKIBqu9WgP7VPOlYxbQMWfL0AlK1Ao1Q" />.</li>  <li>Click the <strong>Top</strong> or <strong>Bottom </strong>tab to access the divider you want to design.</li>  <li>Click <strong>Customize Design </strong>at the bottom.</li>  <li>Choose how you want to adjust the look of your shape divider:
    <ul>
      <li><strong>Opacity &amp; color:</strong> Choose whatever color you want for your divider, and make it more or less visible on the section or strip.</li>      <li><strong>How's the divider scaled?:</strong> Select whether you want the divider pattern to stretch across the strip / section or repeat.</li>      <li><strong>Height:</strong> Set how high or low you want the highest point of the divider to be on your strip or section.</li>      <li><strong>Horizontal offset: </strong>Set the divider's offset from the sides of the section / strip.</li>      <li><strong>Flip:</strong> Set the divider to display the opposite way (horizontally) on your strip or section.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/03/06/14eaa300-24a9-46d6-8299-7fe3be3e7f5f/800fa520-ff6a-44d6-afdb-4bbecfbf075d.png" alt="The design panel of a shape divider on a section." /></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">What kind of custom shape dividers can I upload?</h4><div class="collapsible-content"><div>It is only possible to upload and use SVG files as shape dividers on your site. PNG and JPG files are not supported.</div><div><br /></div><div>When uploading your SVG, keep the following in mind:</div><ul>
  <li>SVG files you upload must be no larger than 250KB.</li>  <li>The recommended proportion size for your own SVG files is a width of 1920px, and a height between 50-300px.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Are shape dividers responsive?</h4><div class="collapsible-content"><div>Some shape divider designs are fully responsive, which means they adjust to the size of your visitors' screens. </div><div><br /></div><div>More complex designs (such as New York Skyline and Bottom of the Sea) cannot stretch without losing their proportions, so they're automatically scaled / cropped for the screen size.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I add dividers to columns on a strip?</h4><div class="collapsible-content"><div>It is not possible to add shape dividers to columns. However, you can add columns to strips that include shape dividers.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do they work on mobile?</h4><div class="collapsible-content"><div>Shape dividers are automatically carried over to your mobile site, and are fixed at 50px. </div><div><br /></div><div>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-shape-dividers-on-your-mobile-site" target="">customize dividers you've added from the desktop editor</a> to create unique content for mobile visitors, however it is not possible to add mobile-only dividers from the <strong>Add to Mobile</strong> panel.</div></div></div></div>

Shape dividers are graphic shapes you can use to create unique, fluid transitions between strips and sections. There are lots of designs and customization options available, so you can really personal...

Wix Editor: About Shape Dividers

<div data-component-type="text"><div>Shape dividers are graphic shapes you can use to create unique, fluid transitions between strips and sections. There are lots of designs and customization options available, so you can really personalize your layout and create eye-catching pages.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/19/5fe1c5ed-2be2-433e-8715-9f40fd4ce5a4/0f44a4f7-78c8-47db-8e34-5b7aad38364c.gif" alt="a GIF showing shape dividers on a live site." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enhance-the-design-of-your-sections-and-strips" level="3">Enhance the design of your sections and strips</h2></div><div data-component-type="text"><div>Shape dividers are graphic shapes you can apply to the top and / or bottom of your strip or section to add a unique, professional touch. Since they divide the sections / strips on your page, you can use shape dividers to create the perfect transition between pieces of content.</div></div><div data-component-type="text"><div>Whether you want strong, impactful angles, or prefer soft, fluid shapes, there are a variety of designs available to suit your needs. In the Media Manager, you can find even more complex shapes and patterns. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/19/946b8cf8-817f-4694-b968-7f366dcb535f/ae222303-7d4a-4acf-a550-b782d7d73c8a.png" alt="The wix media catalog showing additional shape divider designs" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="use-your-own-unique-shapes" level="3">Use your own unique shapes</h2></div><div data-component-type="text"><div>In addition to our suggested shapes, you can also upload your own custom dividers. Custom shape dividers are a great way to reinforce your brand, and add a personal touch to your content. </div></div><div data-component-type="text"><div>Choose a file from your computer, or export a file from a vector editing software. After adding your file, you can adjust the design to make it look exactly how you want.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/09/037421f8-6db0-4e5e-ae18-5f344ad39049/fefd3f0e-e430-4601-b4ed-54615cc03297.gif" alt="A GIF showing a site SVG file being added as a shape divider, and being edited." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="personalize-the-shape-divider" level="3">Personalize the shape divider</h2></div><div data-component-type="text"><div>After selecting a divider, <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-shape-dividers" target="">adjust its design</a> to create striking, streamlined layouts. You can use the design options to complement your strip or section's theme, or stand out against the content. Choose the color, set the visibility, and change its position to make it look how you want. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/09/a9701ff4-7e6f-4fe3-87b4-9a0caa33acf6/ff555398-15d6-4047-82d8-cf4c9402d5ae.png" alt="The shape divider design panel. The cursor is hovering over the 'Effect direction' dropdown." /></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="collapsible"><div><h4 class="collapsible-title">Are shape dividers responsive?</h4><div class="collapsible-content"><div>Some shape divider designs are fully responsive, which means they adjust to the size of your visitors' screens. </div><div><br /></div><div>More complex designs (such as New York Skyline and Bottom of the Sea) cannot stretch without losing their proportions, so they're automatically scaled / cropped for the screen size.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What kind of custom shape dividers can I upload?</h4><div class="collapsible-content"><div>It is only possible to upload and use SVG files as shape dividers on your site. PNG and JPG files are not supported.</div><div><br /></div><div>When uploading your SVG, keep the following in mind:</div><ul>
  <li>SVG files you upload must be no larger than 250KB.</li>  <li>The recommended proportion size for your own SVG files is a width of 1920px, and a height between 50-300px.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I customize the design of my own uploads?</h4><div class="collapsible-content"><div>Yes. The available design options for your custom divider depend on the specific file you upload. </div><div><br /></div><div>In order to customize the design of your SVG, the file needs to:</div><ul>
  <li>Be a closed shape. </li>  <li>Only contain one level of opacity (transparency).</li>  <li>Not contain any text, strokes, gradients, filters etc.</li></ul><div><br /></div><div>Additionally, you can only change the color of SVG files that are the color RGB = #000000 (black). <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-shape-dividers#customizing-a-custom-shape-divider" target="">Learn how to customize custom shape dividers</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I add dividers to columns on a strip?</h4><div class="collapsible-content"><div>It is not possible to add shape dividers to columns. However, you can add columns to strips that include shape dividers.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do they work on mobile?</h4><div class="collapsible-content"><div>Shape dividers are automatically carried over to your mobile site, and are fixed at 50px. </div><div><br /></div><div>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-shape-dividers-on-your-mobile-site" target="">customize dividers you've added from the desktop editor</a> to create unique content for mobile visitors, however it is not possible to add mobile-only dividers from the <strong>Add to Mobile</strong> panel.</div></div></div></div>

Currently, it is not possible to make your site content fade when you or your visitors scroll down your site.However, you can set your strip background to fade on scroll, which has a similar effect. L...

Wix Editor Request: Fading Content When Scrolling

<div data-component-type="text"><div>Currently, it is not possible to make your site content fade when you or your visitors scroll down your site.</div></div><div data-component-type="text"><div>However, you can set your strip background to fade on scroll, which has a similar effect. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-applying-background-scrolling-effects-to-your-strip" target="">Learn how</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is hugely appreciated.</div></div>

Currently, it is not possible to add hover interactions to strips and columns. As an alternative, you can add hover interactions to container boxes on your site. Learn HowWe are always working to upda...

Wix Editor Request: Adding Hover Interactions to Strips and Columns

<div data-component-type="text"><div>Currently, it is not possible to add hover interactions to strips and columns. </div></div><div data-component-type="text"><div>As an alternative, you can add hover interactions to container boxes on your site. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-hover-interaction" target="">Learn How</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to adjust the radius of corners on strips or columns. As an alternative, you can display content with container boxes, and adjust the corner radius from the design panel....

Wix Editor Request: Adjusting the Radius of Corners on Strips and Columns

<div data-component-type="text"><div>Currently, it is not possible to adjust the radius of corners on strips or columns. </div></div><div data-component-type="text"><div>As an alternative, you can display content with container boxes, and adjust the corner radius from the design panel. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-box#customizing-your-box-design" target="">Learn More</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to divide columns you have added to strips.Dividing columns allows you to edit each part separately, as shown in the image below.As an alternative, you can attach element...

Wix Editor Request: Dividing Columns in Strips

<div data-component-type="text"><div>Currently, it is not possible to divide columns you have added to strips.</div></div><div data-component-type="text"><div>Dividing columns allows you to edit each part separately, as shown in the image below.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/15/0f56ddf4-fb6a-4e08-8be0-c88735ce9cc6/25f5fefd-e337-4232-bdf7-0af58ed96db2.png" /></div></div><div data-component-type="text"><div>As an alternative, you can attach elements such as lines and text to different parts of the column to give the effect that they are divided. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-attaching-elements-to-strips-and-columns#attaching-elements-to-a-column" target="">Learn how</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, Wix does not support adding and customizing shadows to strips and columns on your site.However, there are lots of design options available for strips and columns, such as changing the backg...

Wix Editor Request: Adding Shadows to Strips and Columns

<div data-component-type="text"><div>Currently, Wix does not support adding and customizing shadows to strips and columns on your site.</div></div><div data-component-type="text"><div>However, there are lots of design options available for strips and columns, such as changing the background, and choosing scroll settings. <a data-composite="true" href="https://support.wix.com/en/the-wix-editor/strips-columns" target="">Learn More</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, Wix does not support adding and customizing borders on strips and columns. As an alternative, you can add lines to the edges of your strips and columns from the Add Elements panel on the le...

Wix Editor Request: Adding Borders to Strips and Columns

<div data-component-type="text"><div>Currently, Wix does not support adding and customizing borders on strips and columns. </div></div><div data-component-type="text"><div>As an alternative, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-decorative-shapes-and-lines" target="">add lines</a> to the edges of your strips and columns from the <strong>Add Elements</strong> panel on the left. </div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to adjust the proportions of columns by manually entering a percentage amount. As an alternative, you can adjust your column's proportions by dragging the slider in the L...

Wix Editor Request: Adjusting Column Proportions by Entering the Percentage

<div data-component-type="text"><div>Currently, it is not possible to adjust the proportions of columns by manually entering a percentage amount. </div></div><div data-component-type="text"><div>As an alternative, you can adjust your column's proportions by dragging the slider in the Layout panel. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adjusting-the-layout-of-your-columns" target="">Learn how</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/09/ec11d0ed-3d39-437f-9070-85d23f8c218d/6c13f32d-e363-4a37-9141-d6ef30a54f6c.png" /></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible for strips to automatically adjust their height for different viewports or screensizes (such as mobile devices). However, you can make your strip smaller or bigger in the...

Wix Editor Request: Automatically Adjusting the Height of a Strip to Fit Different Viewports

<div data-component-type="text"><div>Currently, it is not possible for strips to automatically adjust their height for different viewports or screensizes (such as mobile devices). </div></div><div data-component-type="text"><div>However, you can make your strip smaller or bigger in the mobile Editor by clicking and dragging the stretch handles. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-strips-and-columns-on-your-mobile-site#strips-on-your-mobile-site" target="">Click here to learn how</a> </div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

You can customize your shape dividers on your strips and sections by adjusting settings such as the layers and opacity, and changing the color. However, it is not possible to add a gradient to a shape...

Wix Editor Request: Adding Gradients to Shape Dividers

<div data-component-type="text"><div>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-shape-dividers#customizing-your-shape-divider" target="">customize your shape dividers</a> on your strips and sections by adjusting settings such as the layers and opacity, and changing the color. However, it is not possible to add a gradient to a shape divider on a section / strip. </div></div><div data-component-type="text"><div>As an alternative, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-your-strip-background" target="">add a gradient to a strip or section background</a>, and adjust the opacity of the divider so that the gradient is more visible. </div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Your header is the section at the top of your website and usually contains your menu and logo. As your header gives visitors their first impression of your site, we recommend customizing it to fit you...

Wix Editor: Customizing Your Site Header

<div data-component-type="text"><div>Your header is the section at the top of your website and usually contains your menu and logo. As your header gives visitors their first impression of your site, we recommend customizing it to fit your brand and aesthetic.</div></div><div data-component-type="text"><div>Choose a design and scroll effect for your header, and set the size and borders to make a bold impression on your visitors.  </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>The elements inside your header are automatically shown on all pages that your header appears on. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-headers-design" level="3">Changing your header's design</h2></div><div data-component-type="text"><div>You can change your header's design to suit your site. Select a design from a variety of presets, and customize the settings such as the color, spacing, and corners.</div></div><div data-component-type="heading"><h2 id="" level="4">To change your header's design:</h2></div><div data-component-type="text"><ol>
  <li>Click the header.</li>  <li>Click the<strong> More Actions </strong>icon <img data-composite="true" src="https://lh3.googleusercontent.com/sM1xuXhGAEjX6heOglUTUcGNGAi5ALcSvkPZJ0NbHSZ2rqIQaqR5ilfOk0nzQVWcFfd3Z-w0D8RhtggFNQy9sICz-oy6mKeAMR2Yl31UB69Thg5WQPU76IrhYU6sXd96hGRNudri-eHgaqbqxjwZcA" /> on the right.</li>  <li>Click <strong>Change Header Design</strong>.</li>  <li>Click the <strong>Regular</strong> or <strong>Scroll</strong> state.</li>  <li>Use the options to customize the header design:
    <ul>
      <li><strong>Fill Color &amp; Opacity:</strong> Choose a color for your header and adjust its opacity.</li>      <li><strong>Border: </strong>Add borders to your header to make it stand out on your page.</li>      <li><strong>Corners:</strong> Make the corners of your border rounder, or more square.</li>      <li><strong>Shadow:</strong> Add and design a shadow to give your header a cool 3D effect.</li>    </ul>  </li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>The 'Scroll' state lets you design your header to look different once visitors scroll down the page. For example, you can make the header change colors or add a border so it stands out.  </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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/18/db2b9d85-9351-4eb7-8c4a-b02c6a23d62c/bf593564-c5be-45be-9e3a-d3e98d805b22.png" alt="Screenshot of change header design panel in wix editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="setting-an-image-as-your-sites-header" level="3">Setting an image as your site's header</h2></div><div data-component-type="text"><div>To further personalize your site, you can set an image as your site's header. Drag the image onto the header to attach it, then use the drag handles to stretch the image across the header. You can then move the image to the back so that it does not hide your header's elements.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title"></div><div class="info-content"><div>The image must be smaller than your header in order to fit inside it and be attached properly. We recommend using an image with a resolution and size that is compatible with the size of your header, such as a banner image. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To use an image as your site's header:</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>Add a new image or select an existing one on your page.</li>  <li>Drag the image to the header and drop it when you see the <strong>Attach to Header</strong> message. </li>  <li>(Optional) Drag the resize handles to stretch the image to the width of your header.</li>  <li>Move the image to the back:
    <ol>
      <li>Right-click the image.</li>      <li>Hover over<strong> Arrange</strong> and click <strong>Move Backward</strong>.</li>    </ol>  </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/2024/11/29/32a790d9-f0fd-4dca-8108-18e25278085a/56185aa5-971d-4f99-9ecc-b741eaccbb92.png" alt="screenshot of quick edit panel for header in wix editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Replace your header image anytime using the <strong>Quick Edit </strong>panel, clicking <strong>Change </strong>next to the current image. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resizing-your-header" level="3">Resizing your header</h2></div><div data-component-type="text"><div>You can resize your header to make it as big or as small as you want.</div></div><div data-component-type="text"><div>Big headers are useful if you have a lot of elements such as a site title, site menu, and logo. Smaller headers are great for minimal sites, or if you have most of your elements on the page. </div></div><div data-component-type="heading"><h2 id="" level="4">To resize your header:</h2></div><div data-component-type="text"><ol>
  <li>Click the header.</li>  <li>Drag the stretch handle at the bottom of the header to make it taller or shorter. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/23/93987c42-8afd-4340-9de2-e7ab527f6c40/dfa3ae50-6612-4914-a334-7f425446b47d.gif" alt="GIF showing the header being made bigger and smaller with the drag handles." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-scroll-effect-to-your-header" level="3">Adding a scroll effect to your header</h2></div><div data-component-type="text"><div>Add a cool scroll effect to your header to choose how it behaves as visitors scroll up and down. For example, keep the header at the top as visitors scroll, or make it gradually fade away.</div></div><div data-component-type="heading"><h2 id="" level="4">To choose a scroll effect for your header</h2></div><div data-component-type="text"><ol>
  <li>Click the header.</li>  <li>Click <strong>More Actions </strong>icon <img data-composite="true" src="https://lh3.googleusercontent.com/sM1xuXhGAEjX6heOglUTUcGNGAi5ALcSvkPZJ0NbHSZ2rqIQaqR5ilfOk0nzQVWcFfd3Z-w0D8RhtggFNQy9sICz-oy6mKeAMR2Yl31UB69Thg5WQPU76IrhYU6sXd96hGRNudri-eHgaqbqxjwZcA" /> on the right.</li>  <li>Click <strong>Header Scroll Settings</strong>.</li>  <li>Select a scroll effect:
    <ul>
      <li><strong>Scrolls with site: </strong>No scroll effect is applied. When visitors scroll down the page, they also scroll away from the header (i.e. the top of the page). </li>      <li><strong>Freezes: </strong>Your header remains on top of the page as visitors scroll up and down, giving them easy access to your site's menu.<br />
<strong>Tip: </strong>When choosing this effect, we recommend keeping the header rather short so it doesn't cover any content on scroll.</li>      <li><strong>Disappears: </strong>When visitors scroll through your site, the header gradually disappears. For the header to reappear, your visitors need to start scrolling up.</li>      <li><strong>Fades out: </strong>The header slowly fades out when your visitors scroll through the site and reappears when they start scrolling back to the top.</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>Your mobile and desktop sites can have different header scroll effects. <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-adding-header-scroll-effects" target="">Learn how to change the header scroll setting on your mobile site.</a></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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/18/85d9ad44-13c8-49e6-9203-850db095c0d1/98080799-71e3-4018-999e-2e9b78bd5e4a.png" alt="screenshot of header scroll settings in wix editor." /></div></div>

Your site pages are divided into 3 sections, which are defined by the gridlines in the editor; the header, the main part of the page, and the footer.Your header and footer are visible on all pages, me...

Wix Editor: Placing Elements in Your Header, Footer and Page

<div data-component-type="text"><div>Your site pages are divided into 3 sections, which are defined by the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-the-editor-gridlines" target="">gridlines</a> in the editor; the header, the main part of the page, and the footer.</div></div><div data-component-type="text"><div>Your header and footer are visible on all pages, meaning that elements you place inside them can be accessed from every page of your site. Elements on the page itself are only visible on that specific page.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="attaching-elements-to-the-header" level="3">Attaching elements to the header</h2></div><div data-component-type="text"><div>The header is usually one of the first things that visitors see when they open your site. It generally contains elements such as your business name, site menu, and logo. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-your-sites-header" target="">Learn more about your site's header</a></div></div><div data-component-type="text"><div>We recommend keeping your header clean and sophisticated, as it ensures a more pleasant experience for your site visitors.</div></div><div data-component-type="text"><div>To attach an element to your header, drag it over the header until the <strong>Attach to Header</strong> message appears.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/02/2bd16af1-76c1-4af1-946d-a2548e397cc2/655b22f6-3a89-49db-929b-a2581af78521.gif" alt="GIF showing a piece of text being moved and attached to a site header." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Elements must be smaller than the header in order to fit on it.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="placing-elements-on-the-main-area-of-the-page" level="3">Placing elements on the main area of the page</h2></div><div data-component-type="text"><div>The main part of your page contains most of your site's elements and content. The elements will differ from page to page, depending on what that page is about. You can add any content you like to the page, including galleries, text, and forms. </div></div><div data-component-type="text"><div>﻿To attach an element to the page, drag it to your chosen location and drop it when the <strong>Attach to Page</strong> message appears.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/02/223bebd2-80d0-4fff-8340-eb4b40dae12f/358d608a-82b9-42ec-8b62-2443ac9508ff.gif" alt="GIF showing vector art being attached to the page body in the Wix Editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="moving-elements-to-the-footer" level="3">Moving elements to the footer</h2></div><div data-component-type="text"><div>Your footer is at the bottom of your site and is displayed on all pages. It usually contains content such as contact and copyright information. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-your-sites-footer" target="">Learn more about your site's footer</a></div></div><div data-component-type="text"><div>We recommend to avoid putting important vital content on your site's footer, as visitors may not see it. </div></div><div data-component-type="text"><div>To move an element to the footer, drag it to the bottom of the page (as close to the footer as it goes), and click <strong>Move To Footer.</strong></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/02/3709cc6c-252a-47da-bcb6-69f6b4abf510/b24e01d6-c3f0-4a53-b0d5-a2ba040eacac.gif" alt="GIF showing a piece of text being moved to the site footer." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Elements must be smaller than the footer in order to fit on it.</div></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="collapsible"><div><h4 class="collapsible-title">How do I remove an element from my header or footer?</h4><div class="collapsible-content"><div>Just drag and drop the element away from the header or footer and into another area of your page. </div><div><br /></div><div>Once you remove an element from the header or footer, it is no longer displayed on all pages. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-showing-an-element-on-all-pages" target="">Learn how to set the element to show on all pages</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I place elements outside the gridlines?</h4><div class="collapsible-content"><div>The width of your site is fixed at 980 pixels, which are marked by the gridlines.<strong> </strong>You can design your site outside the gridlines, however we recommend that anything that you add outside of these borders be mainly decorative and not vital to your visitors' browsing experience.</div></div></div></div>

The footer appears at the bottom of your site, and usually includes content like your contact and copyright information. Customize your footer to match your site's look and needs. You can adjust the f...

Wix Editor: Customizing Your Site Footer

<div data-component-type="text"><div>The footer appears at the bottom of your site, and usually includes content like your contact and copyright information. Customize your footer to match your site's look and needs. You can adjust the footer's design, resize it to your liking, and add a freeze effect so it's always visible.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-design-of-the-footer" level="3">Changing the design of the footer</h2></div><div data-component-type="text"><div>Customize the footer to match your site's palette and theme. There are many footer designs to choose from, which you can further personalize for your needs.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>The available customization options depend on the footer design you choose.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To change the footer 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>Click the footer.</li>  <li>Click <strong>Change Footer Design</strong>.</li>  <li>Customize the design using the following options: 
    <ul>
      <li><strong>Fill Color &amp; Opacity:</strong> Choose a color for your footer, and adjust its intensity.</li>      <li><strong>Border: </strong>Adjust the borders around your footer by choosing the color, intensity, and width.</li>      <li><strong>Corners:</strong> Make the corners of your footer rounder, or more square.</li>      <li><strong>Shadow:</strong> Add and adjust a shadow for your footer. You can use the settings to make it more subtle, or to be more impactful. </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/2024/10/30/f3052d15-e3e0-438a-b24c-202ee0e7332a/8a5ea08f-8ed5-415f-b276-b59c82e7406f.png" alt="screenshot of footer design panel. boarder tab clicked, showing different opacity and color options." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resizing-the-footer" level="3">Resizing the footer</h2></div><div data-component-type="text"><div>Use the stretch handle to make your footer as big or as small as you want. </div></div><div data-component-type="text"><div>Bigger footers are useful if you have extra content you don't want to manually add to every page, like social media links and contact details. If you have little or no elements, small footers are great for a minimalist look. </div></div><div data-component-type="heading"><h2 id="" level="4">To resize your 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>Click and drag the stretch handle at the bottom of the footer to your chosen size.</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/2024/11/11/08eeefdc-1634-4546-9f83-0ea7879e8952/b478dd6f-f1f5-45dd-89e9-94f8f216b3eb.png" alt="Screenshot of footer in wix editor with drag handle highlighted." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Make sure that there are no elements at the bottom of the footer which might get in the way of the stretch handle. If you can't see the element, it may be hidden. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-viewing-and-selecting-overlapping-elements" target="">Learn how to find hidden elements</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="freezing-the-footer" level="3">Freezing the footer</h2></div><div data-component-type="text"><div>Freeze your footer so that it is always visible on your live site, no matter where visitors are on the page. This option is especially useful if your footer contains important information or content that you want your visitors to find easily.</div></div><div data-component-type="heading"><h2 id="" level="4">To freeze your 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>Click the <strong>Settings</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/05/20868072-786e-4b0f-ab2d-f3574b91a368.png" />.</li>  <li>Click the <strong>Freeze Footer</strong> toggle to enable or disable this option: 
    <ul>
      <li><strong>Enabled: </strong>The footer is frozen, so it is always visible when visitors view and scroll through your site.</li>      <li><strong>Disabled: </strong>Your footer remains at the bottom of your site and it is not visible when your visitors scroll away from it.</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/2024/10/30/8f7e14d3-c8dd-420c-83d1-6ee63ffae4c3/175e3578-41ba-4dc3-a5e6-b3c8a10e0f5a.png" alt="A screenshot highlighting the Freeze Footer toggle." /></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 about customizing your site footer:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why can’t I enable the &quot;Show On All Pages&quot; toggle?</h4><div class="collapsible-content"><div>If you place an element inside a frozen footer, the <strong>Show On All Pages</strong> toggle is disabled.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why am I unable to select elements within my footer? </h4><div class="collapsible-content"><div>Freezing your footer may prevent you from clicking or selecting elements. If you find that there are elements you cannot select or click, unfreeze your footer and check whether this solves the problem. </div></div></div></div>

Your site's header appears across the top of your site, throughout all of your pages. The header gives visitors their first impression of your site, and usually contains important information and elem...

Wix Editor: About Your Site's Header

<div data-component-type="text"><div>Your site's header appears across the top of your site, throughout all of your pages. The header gives visitors their first impression of your site, and usually contains important information and elements.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/17/ba7c5e1d-9ef5-4388-9d11-6067412f2299/6352dc77-01fa-477e-be41-82486ff9d470.png" alt="A Wix live site. The header is highlighted by an orange square." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="add-important-content-to-your-header" level="3">Add important content to your header</h2></div><div data-component-type="text"><div>Since your site header is the first thing your visitors see, it's important to optimize it for your brand or business. One of the best ways to do this is by adding relevant information and elements. </div><div><br /></div><div>We recommend adding your site title, company logo, and your site menu to the header. The title and logo reinforce your brand, while the menu allows visitors to navigate with ease.</div></div><div data-component-type="text"><div>As well as regular elements, you can also add features from apps that you've added to your site. For example, if you have Wix Stores you can add the cart icon to the header. Adding these elements to the header means your visitors can always access important information, no matter what page they're on. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-placing-elements-in-your-header-footer-and-page#attaching-elements-to-the-header" target="">Learn how to add elements to your site header</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/17/e0ad7204-8f42-4d4c-bce8-46fd7c62ae10/d665ee31-c3a7-4238-912d-0223ec8756a6.png" alt="The site header in the Editor. The header and its elements are highlighted." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customize-your-header-to-suit-your-site" level="3">Customize your header to suit your site</h2></div><div data-component-type="text"><div>As well as adding elements to your header, we also recommend designing it to fit with your site's theme and palette. There are a number of ways to personalize your header: </div></div><div data-component-type="text"><ul>
  <li><strong>Choose and customize the design:</strong> You can choose from a number of design presets, and customize settings such as the color, border, and corners to make it look how you want.</li>  <li><strong>Resize the header: </strong>If you find that your header isn't the right size, you can always make it bigger or smaller by using the stretch handle.</li>  <li><strong>Add a scroll effect:</strong> Choose from a number of exciting scroll effects to create something eye-catching and personal to your site.</li></ul></div><div data-component-type="text"><div>Customizing your header can ensure you make a lasting impression on your site visitors, and encourage them to continue browsing your site to learn more about your brand or business. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-site-header" target="">Learn how to customize your site's header</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/17/9713e241-ca66-4dd6-9e85-389c5f17635f/0558fcd4-0221-4e36-bc17-bfda5238ca80.png" alt="The 'Customize Header Design' panel in the Editor. The cursor is hovering over the border color box." /></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="collapsible"><div><h4 class="collapsible-title">Can I delete the header from my site?</h4><div class="collapsible-content"><div>It is not possible to delete the header from your site, however you can change the layout to one with no header or footer. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">Learn how to change the page layout</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I hide my header on specific pages?</h4><div class="collapsible-content"><div>You can hide your site header and footer from specific pages on your site by changing the page's layout. It is not possible to only hide the header, and not the footer. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">Learn how to hide the header and footer</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I move the header from the top of my page?</h4><div class="collapsible-content"><div>It is not possible to move the header to a different part of your site page. However, you can resize it by clicking and dragging the drag handles. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-site-header#resizing-your-header" target="">Learn how to resize your header</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Elements are disappearing from my site header. What do I do?</h4><div class="collapsible-content"><div>Elements may disappear from, or fall behind your site header if the header has a Freeze scroll effect, or if the elements are not set to show on all pages. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-fixing-spacing-and-alignment-issues-on-your-site#elements-disappearing-from-the-site-header" target="">Learn how to resolve this issue</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why can't I see my header in the Layers panel?</h4><div class="collapsible-content"><div>Your site header is not displayed in the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">Layers panel</a> if it doesn't contain any elements. However, you can still select and adjust your header by clicking it.</div></div></div></div>

The footer appears across the bottom of your site, throughout all of your pages. As it appears on every page, it usually contains content that is useful to your visitors wherever they are on your site...

Wix Editor: About Your Site's Footer

<div data-component-type="text"><div>The footer appears across the bottom of your site, throughout all of your pages. </div><div><br /></div><div>As it appears on every page, it usually contains content that is useful to your visitors wherever they are on your site, such as contact details, social media links, and copyright information.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/17/63f252eb-2ba2-4fe9-b3b6-cb9b12576d5c/69fb52dd-f914-471c-9c69-e284afe94c10.png" alt="A wix live site. The footer is highlighted." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="display-useful-content-on-all-pages" level="3">Display useful content on all pages</h2></div><div data-component-type="text"><div>Since your footer and its content appears on all pages of your site, it can be used to display content that you would like to always be visible, such as your business number, copyright information and links to your social media accounts. </div></div><div data-component-type="text"><div>As the footer is at the bottom of the site page, we recommend not putting any vital information (such as your site menu) in it, as visitors may not see it. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-placing-elements-in-your-header-footer-and-page#moving-elements-to-the-footer" target="">Learn how to attach elements to your site's footer</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/17/66ef2b6c-3983-472c-a4f6-ed7672e6d4b0/b88675dc-2c31-47da-9223-119b542cd2e8.png" alt="The footer in the Editor. The footer and its elements are highlighted." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to remove an element from the footer?</div><div class="info-content"><div>Drag and drop the element away from the footer and onto another area of your site.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customize-your-footer-to-suit-your-site" level="3">Customize your footer to suit your site</h2></div><div data-component-type="text"><div>Customize the footer to match your site's theme, or stand out to create something eye-catching for your visitors. There are a number of ways to adjust your footer:</div></div><div data-component-type="text"><ul>
  <li><strong>Change the design:</strong> You can adjust the color and corners, as well as add a border and shadow.</li>  <li><strong>Resize the footer:</strong> If you'd like to change the size of the footer, you can make it taller or shorter by dragging the stretch handle.</li>  <li><strong>Freeze the footer's position:</strong> You can freeze the footer so that it is always visible on your pages, even when visitors scroll through them.</li></ul></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/2024/10/18/22e8506a-d221-4a4e-8614-5c2e01b95671/09b1469e-693e-4586-818f-adcb26bfcb4e.png" alt="The 'Customize Footer Design' panel. The cursor is hovering over the slider to adjust the background opacity" /></div></div><div data-component-type="text"><div>Customizing the footer further personalizes your site and enhances your brand, even when your visitors have reached the bottom of the page. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-site-footer" target="">Learn how to customize the footer</a> </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="collapsible"><div><h4 class="collapsible-title">Can I delete the footer from my site?</h4><div class="collapsible-content"><div>It is not possible to delete the footer from your site, however you can change the page layout to one with no header or footer. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">Learn how to change the page layout</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I hide the footer on specific pages?</h4><div class="collapsible-content"><div>You can hide your site's header and footer from specific pages on your site by changing the page's layout. It is not possible to only hide the footer or the header. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">Learn how to hide the header and footer</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I move the footer up my page?</h4><div class="collapsible-content"><div>Absolutely. Although the footer is always at the bottom of your page, you can make the page length shorter by dragging the <strong>Adjust Page Height</strong> handle. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-the-length-of-your-page" target="">Learn how to change the length of your pages</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">The footer is covering some elements on my page. What do I do?</h4><div class="collapsible-content"><div>If you have elements on your page that are set to 'show on all pages', the footer may overlap them. You can use the Adjust Page Height Handle to make the page longer and prevent the footer from covering the elements. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-fixing-spacing-and-alignment-issues-on-your-site#footer-overlapping-elements-set-to-show-on-all-pages" target="">Learn how to resolve this issue</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why can't I see my footer in the Layers panel?</h4><div class="collapsible-content"><div>Your site footer is not displayed in the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">Layers panel</a> if it doesn't contain any elements. However, you can still select and adjust your footer by clicking it.</div></div></div></div>

Single page sites are often very impressive due to their simplicity and organization. They look modern and minimalist and are a great way to grab your site visitors' attention. Learn more about the Wi...

Wix Editor: Creating a One-Page Site

<div data-component-type="text"><div>Single page sites are often very impressive due to their simplicity and organization. They look modern and minimalist and are a great way to grab your site visitors' attention. Learn more about the Wix <a data-composite="true" href="https://www.wix.com/builder/one-page" target="_blank">one-page website builder</a>.</div></div><div data-component-type="text"><div>Wix offers many one-page templates that you can use. To get started, hover over any of our templates <a href="http://www.wix.com/website/templates/html/landing-pages/1">here</a> and click <strong>Edit</strong>.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="one-page-sites-vs-multi-page-sites" level="3">One-page sites vs. multi-page sites</h2></div><div data-component-type="text"><div>One-page sites only have one-page that contains all the site content. This is different to regular sites which usually have several pages.</div></div><div data-component-type="text"><div>A one-page site is split into blocks of content, and as you scroll down the page, you can view the different areas:<br />
<br />
</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/12/28/7b1841c9-2696-48d1-b77c-a1b6119e1e3b.jpg" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-a-menu-for-a-one-page-site" level="3">Creating a menu for a one-page site</h2></div><div data-component-type="text"><div>As the sites only have one page, they do not contain a pages menu like a regular site. Instead, we recommend that you set up a menu that links to your page sections and anchors.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Learn more</h4><div class="collapsible-content"><div><strong>There are two options for creating a menu:</strong></div><div><br /></div><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-creating-a-site-menu-with-anchors-and-sections-for-one-page-sites" target="">Using a regular menu with anchors and sections</a> (can be vertical or horizontal)</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-an-in-page-menu" target="">Using an in-page menu with anchors and sections</a> (always vertical)</li></ul><div><br /></div><div>Both of these menu options use anchors and sections to help your site visitors navigate around the content of your site.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-sections-on-one-page-sites" level="3">Using sections on one-page sites</h2></div><div data-component-type="text"><div>Sections are the building blocks of your site. Use them to organize, separate, and display content so visitors can easily navigate and find relevant and interesting content. Sections can be renamed and added to your menu, so visitors don't need to scroll to find what they need. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-sections" target="">Learn more about sections</a></div></div><div data-component-type="text"><div>There a variety of pre-designed options available to help you build an informative and aligned site, or you can start from scratch.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me how</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Add Section</strong> <img data-composite="true" src="https://lh5.googleusercontent.com/h3vOMLSsGLzs7lf4sQgXDA0uIveeU6rWo3mLILiAjy0DjZqFVcJ6N3QRjxaJsSqojjAjW0PB8lR_nVCiC1f5e6wvHdb84Mze7ufJIyTXccnEFP85uCz5JsgoEWpGwuxF2Git2LJgHzkzQt6nhM0dRA" /> on the left site of the Editor.</li>  <li>Click a category.</li>  <li>Click or drag the section to add it to your site.</li></ol></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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/11/17/90c9ad88-5754-4111-a80d-ce9fa40aee8d/27b0387f-5c2d-45f3-a920-eae5048a04c9.png" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-strips-on-one-page-sites" level="3">Using strips on one-page sites</h2></div><div data-component-type="text"><div>As an alternative to sections, you can use strips to build your site. </div></div><div data-component-type="text"><div>From the Add panel, you can choose from a variety of pre-designed and fully customizable strips to display your site's content and information. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me how</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Add Elements</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/05/f28b0f13-5223-430f-b490-ccfc66187efa.png" /> on the left side of the Editor.</li>  <li>Click <strong>Strip</strong>.</li>  <li>Select the type of strip you want to add.</li>  <li>Drag a strip element on to your page.</li>  <li>(Optional) Link to the strip from your menu:
    <ol>
      <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-renaming-and-deleting-an-anchor" target="">Add an anchor to the top of the strip</a>.</li>      <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-managing-links-in-your-menu" target="">Link to the anchor from your menu</a>.</li>    </ol>  </li></ol></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">What's next?</div><div class="info-content"><ul>
  <li>Add stunning images and videos to your strips to make them really awesome, and even add <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-applying-background-scrolling-effects-to-your-strip" target="">parallax scrolling</a> to give your site that extra wow factor.</li>  <li>As your site may be quite long, you may want to add a back to top button. Click <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-creating-a-back-to-top-button-for-your-site" target="">here</a> to learn more.</li></ul></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/2016/05/23/12e42fa9-6dd8-428e-9c6e-184034af215b.png" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-anchors-on-one-page-sites" level="3">Using anchors on one-page sites</h2></div><div data-component-type="text"><div>Sections you've added to your site do not need anchors. However, you can add anchors to mark important content that is not part of a section, such as strips or galleries.</div></div><div data-component-type="text"><div>Once you're done building the page, you can place an anchor at the top of each of these elements and add links to your menu, so visitors can easily navigate through your page. </div></div><div data-component-type="text"><div>Click an option below to learn more about using anchors on your site.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add anchors to your page</h4><div class="collapsible-content"><div>Add anchors to your page's strips and sections to direct your visitors to important and relevant information on your site. Some commonly used anchors are 'About Us' and 'Contact Details'.</div><div><br /></div><ol>
  <li>Click <strong>Add Elements</strong> <img data-composite="true" src="https://lh6.googleusercontent.com/AZpJ_GKartAMzPmGB-43LFoqyM6m-vlNuV5r3fiM5PyeOiiy4TrQJp0L7c_emNGNvbHKz1b3Ail0wYrq5kvPg4BEvXXHuNyxgaW5Lmz5mgBEWsNxiR-aeAtIcjO5fuywc8OASLuk" /> on the left side of the Editor.</li>  <li>Click <strong>Menu &amp; Anchor</strong>.</li>  <li>Click the anchor under <strong>In-Page Navigation</strong>, or drag it the relevant location on your page.</li>  <li>Click the anchor and click <strong>Rename</strong>.</li>  <li>Repeat steps 1-4 for each section you wish to mark on your site.</li></ol><div><br /></div><div><strong>Note: </strong>We recommend attaching no more than one anchor to a strip or page segment. Attaching more than one may cause issues for visitors that rely on keyboards to navigate.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Arrange anchors in the layers panel</h4><div class="collapsible-content"><div>After placing anchors on your site pages, open the Layers panel to arrange them. Your anchors should be placed right above the relevant strip or section – this ensures that visitors with disabilities or impairments are able to navigate to the correct sections.</div><div><br /></div><ol>
  <li>Click the Layers icon <img data-composite="true" src="https://lh4.googleusercontent.com/BvRt3HuyjZylCQ0NKHgMU8QHrQelCR2iJ3ou4ruRCi-VKN6cJd3dJLV418zSHOC1urRhGOwt7yF6DTxEmjdDokqLiT8OfzaCFXBgiMOlbJeg21JfsxS-_Jy2ET2fMxabPceyqUf_OTehXzpC05XAzg" /> on the bottom of the Editor.</li>  <li>Drag each anchor to be before the strip / section that it's attached to.</li>  <li>Repeat steps 1-2 on the Mobile Editor.</li></ol></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/8696077d-830a-4b1e-bd86-9df98f89994a/2021/07/18/52a9cd0b-f8f5-4eb8-9bd5-7b3cc9d4f295/8167705f-5316-45a4-9a38-69070130c503.gif" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="rearranging-your-pages-content" level="3">Rearranging your page's content</h2></div><div data-component-type="text"><div>As a one-page site is built in blocks, it's much easier to rearrange your content whenever needed.</div></div><div data-component-type="text"><div>To see your page's sections and blocks, click the<strong> </strong>Zoom out icon <img data-composite="true" src="https://lh4.googleusercontent.com/3TFnfcJP3xe9qp0HC39j4NnnlAqZKxXgvCrFdwlpTp9RHerwGyWU_MBEfR0SRbnD_4l0RQkzMFmKlYTE36tZatl1eqxvD7sNIS46F1Gz6wbATLuSL_Xxc86_6yGdXV-4HqWtFpiRw2lEZK-n7IJcNg" /><strong> </strong>on the top bar of the Editor. Click and drag the page sections and blocks to reorder them.</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/8696077d-830a-4b1e-bd86-9df98f89994a/2021/07/18/3cf0953c-f320-41fd-93c0-0dad031b3b9d/5876f4bf-3a94-4637-a5b6-a3c35492b05e.gif" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to learn more?</div><div class="info-content"><div>Check out our <a data-composite="true" href="https://www.wix.com/blog/how-to-create-one-page-website" target="_blank">full guide on creating a one-page website</a> to get tips and find out if a one-page site is right for you.</div></div></div></div>

Your site pages do not have a predetermined size, and they automatically adjust their length to accommodate the content you add to them. This ensures that your information and elements aren't cut off ...

Wix Editor: Changing the Length of Your Page

<div data-component-type="text"><div>Your site pages do not have a predetermined size, and they automatically adjust their length to accommodate the content you add to them. This ensures that your information and elements aren't cut off on your live site. </div></div><div data-component-type="text"><div>You can manually change the length of your pages to make them longer or shorter, depending on your layout and content needs.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-page-length" level="3">Changing your page length</h2></div><div data-component-type="text"><div>Resize your page with the Page Height handle in the editor. You can find this handle in different places on your site, depending on whether you do or don't have a footer on that page. </div></div><div data-component-type="heading"><h2 id="" level="4">To change the height of a page that has a footer:</h2></div><div data-component-type="text"><ol>
  <li>Click your footer.</li>  <li>Click and drag the <strong>Adjust Page Height</strong> handle on the top of the footer to the desired position.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/20/551fd3aa-9d04-454e-9699-be341f2186aa/b7f9f6ed-ad48-4885-9acd-54b37b120b86.gif" alt="A page with a footer being resized with the page height handle." /></div></div><div data-component-type="heading"><h2 id="" level="4">To change the height of a page without a footer:</h2></div><div data-component-type="text"><ol>
  <li>Click your page.</li>  <li>Click and drag the <strong>Adjust Page Height</strong> handle at the bottom of the page to the desired position.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/20/3240e795-27e4-4311-ab27-166702c52513/f86716dd-3c09-493f-80de-b0d88ecdbf8d.gif" alt="A page without a footer being resized with the page height handle." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>This option is only available if you have chosen the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">No Header &amp; Footer layout</a> for your page. </div></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="collapsible"><div><h4 class="collapsible-title">Can each page be a different length?</h4><div class="collapsible-content"><div>Your site's pages can all have different lengths. This also applies to your mobile site.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I reset the height of my page?</h4><div class="collapsible-content"><div>Absolutely. Just double-click the <strong>Adjust Page Height</strong> handle to reset the height of your page. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">I'm clicking the Page Height Handle but it isn't moving. Why not?</h4><div class="collapsible-content"><div>If your page isn't resizing, there may be an element that's getting in the way. For example, you cannot make a page shorter if doing so will cut off an element at the bottom of the page. In order to resize your page length, you need to move or <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-deleting-elements#deleting-elements-from-your-site" target="">delete</a> the element first. </div><div><br /></div><div><strong>Note:</strong> If you can't find the element, you can use the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">Layers panel</a> to locate it.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What are the minimum and maximum lengths my page can be?</h4><div class="collapsible-content"><div>Your page length can be a minimum of 500 pixels, and a maximum of 60,000 pixels. </div><div>Pages with more content take longer to load than those with less content and elements. Therefore, if you have a lot of content on your site, we recommend dividing and displaying it on multiple pages.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">I resized my page, but now there's a gap between the page and the footer. What do I do?</h4><div class="collapsible-content"><div>You can remove gaps between your page and footer by adjusting the length of the page again, or by changing the page design. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-fixing-spacing-and-alignment-issues-on-your-site#gaps-between-the-page-content-and-footer" target="">Learn more about removing gaps between a page and a footer</a></div></div></div></div>

You can hide the header and footer on specific pages of your site. This allows visitors to focus on the page's content, preventing them from navigating to other pages. If you have a one-page site, a h...

Wix Editor: Hiding the Header and Footer on a Specific Page

<div data-component-type="text"><div>You can hide the header and footer on specific pages of your site. This allows visitors to focus on the page's content, preventing them from navigating to other pages. If you have a <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-creating-a-one-page-site" target="">one-page site</a>, a header and footer may also not be necessary. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="hiding-the-header-and-footer" level="3">Hiding the header and footer </h2></div><div data-component-type="text"><div>You may want to hide the header and footer from your page for several reasons. Certain pages do not require a header and footer, such as &quot;Coming Soon&quot; and &quot;Down For Maintenance&quot; pages, or a landing page aimed at collecting leads. </div></div><div data-component-type="heading"><h2 id="" level="4">To hide the header and footer on a specific page:</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://lh4.googleusercontent.com/78oSgFeIMp5aI1p-pjbs4Qas3jboaOudOvC7kH9B8r0ulkBbhu1KY6_JAuMJfsfkXmoN64979lHbPcNM5psjZPHslubRTrl2gyrI_fI_wm2HxgwlZbGvpggATt3Yg1su53pkKti8" /> on the left side of the editor.</li>  <li>Click the relevant page.</li>  <li>Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/ea5aa155-aa5e-4ef1-8bea-69375765e8c4.png" />.</li>  <li>Click <strong>Settings</strong>. </li>  <li>Click the <strong>Layouts </strong>tab.</li>  <li>Select <strong>No Header &amp; Footer.</strong></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/04/15/539a89db-a7b1-4595-802a-120963651bca/22c13d74-4034-42fe-b8ce-3963b77952a3.png" alt="Page settings in the Wix Editor. The No Header &amp; Footer option has been selected." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="important-information" level="3">Important information</h2></div><div data-component-type="text"><div>When you hide the header and footer on a specific page, elements added to these areas are also hidden, including <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-showing-an-element-on-all-pages" target="">elements that are set to show on all pages</a>. </div></div><div data-component-type="text"><div>In addition, when hiding the header and footer, it's important to keep in mind:</div></div><div data-component-type="text"><ul>
  <li>The page does not display the menu in the header. If you want your visitors to be able to navigate to the rest of your site, you need to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button" target="">link a button</a> to your site's main page, or a page where the menu is displayed. </li>  <li><a data-composite="true" href="https://support.wix.com/en/article/app-disappearing-from-page-with-hidden-footer" target="">Certain apps</a> (e.g. Back to Top, LiveChat) do not appear on your live site. </li>  <li>This also affects your mobile site – the header and footer aren't displayed on the mobile version of this page.  </li></ul></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>It is not possible to only hide the footer or the header. If you choose the <strong>No Header &amp; Footer </strong>layout, neither of them are displayed.</div></div></div></div>

Sections are an easy way to organize and display content on your site. Sections span the full width of your site, allowing you to space and customize its elements. They also adjust to your screen size...

Wix Editor: Adding and Setting Up Sections

<div data-component-type="text"><div>Sections are an easy way to organize and display content on your site. </div></div><div data-component-type="text"><div>Sections span the full width of your site, allowing you to space and customize its elements. They also adjust to your screen size, so visitors see all of your chosen content, whether on desktop or mobile.</div></div><div data-component-type="text"><div>You can build your site by adding as many sections as you like, and easily rearrange and edit them.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-section-to-your-site" level="3">Adding a section to your site</h2></div><div data-component-type="text"><div>Add a section to your site to begin structuring your pages and their content. </div></div><div data-component-type="text"><div>There are a range of pre-designed options available that include layouts and elements to help you build your site. You can also choose a blank section to build it from scratch. </div></div><div data-component-type="heading"><h2 id="" level="4">To add a section:</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 <strong>Add a Section</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/11/03/6c7ba228-57cb-4435-9a60-561d206cc74b/48d7ab00-3a02-406c-8e03-0944d3cab341.png" /> on the left side of the editor.</li>  <li>Click a category.</li>  <li>Click your chosen section to add it to your page.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/1787cb86-3b93-4d77-af4e-224489469b32/dd861f91-eed0-4354-913d-ed962edeed0e.png" alt="The Add Section panel in the Editor. The cursor is hovering over the 'Text' tab." /></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>The panel may show section templates based on your site's business type (such as stores, blogs, etc.). </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="naming-your-sections" level="3">Naming your sections</h2></div><div data-component-type="text"><div>Name your sections for quick and easy navigation. You can use section names to identify them in the layers panel. </div></div><div data-component-type="text"><div>If you choose to add a section to your menu, names are also a great way for your visitors to know what they're clicking on. </div></div><div data-component-type="heading"><h2 id="" level="4">To name your section:</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 relevant section.</li>  <li>Click the <strong>More Actions </strong>icon <img data-composite="true" src="https://lh4.googleusercontent.com/cu38R5ZOvmnaEcp6pOT08y0oZADAo5S3VYdjaSjFun0cXq79LpP55-XBYpC8gbAEHrARaxD-iGqJrAVVfV3APFLUqISrETB_1Cx3ifPhz3OfP1oa0rAyInyaJMGo3iLmN7LWmbZurNKi99SaCMExcw" />.</li>  <li>Click <strong>Section Settings</strong>.</li>  <li>Enter the section name into the field under <strong>What's this section's name?</strong>.</li>  <li>Press the Enter key on your keyboard.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/975defbf-129e-4e99-bfdc-6a38c32b8fd4/795e3347-acdd-4c84-b9e3-782f561eebfb.png" alt="The Section settings modal. The cursor is hovering over the text field for the section name." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Section names are not visible to site visitors unless you add them to a menu.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-sections-to-your-menu" level="3">Adding sections to your menu</h2></div><div data-component-type="text"><div>Adding sections to your menu is a great way to help your visitors navigate your site, and direct them to the right content. </div></div><div data-component-type="text"><div>Making sections a menu item is also particularly useful if you have a one-page site that contains a lot of information, as visitors will be able to find what they're looking for without having to scroll.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a section to your 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>Click the menu.</li>  <li>Click <strong>Manage Menu</strong>.</li>  <li>Click <strong>Add Menu Item</strong> at the bottom of the panel.
    <ul>
      <li>(For advanced menus) Select <strong>Section </strong>from the list.</li>      <li>(For site menus) Click <strong>Section or anchor</strong>.</li>    </ul>  </li>  <li>Select the page the section is on from the dropdown menu.</li>  <li>Select the section from the dropdown menu.</li>  <li>Click <strong>Done</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/f29afd02-cd0b-412a-895d-23510c39da24/9923b40d-a6e0-476e-bfc5-18d7c8704a6d.png" alt="The link panel. The cursor is hovering over the 'Where on the page?' dropdown.." /></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>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-linking-to-sections-on-your-site#linking-elements-to-sections" target="">link elements to sections</a> on your site, and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-linking-to-sections-on-your-site#creating-and-sharing-unique-section-urls" target="">create a unique link to your sections</a> to share across external platforms. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="rearranging-sections-on-your-page" level="3">Rearranging sections on your page</h2></div><div data-component-type="text"><div>You can easily adjust the layout of your site page by rearranging your sections. Move sections up or down to arrange your site content, and provide an aligned, easy experience for your visitors.</div></div><div data-component-type="heading"><h2 id="" level="4">To move a page section:</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>Zoom Out</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/7gOVRelfYyHrty6-jjsuADxzwtw72mzXbHz5BwYHIH9p6WS3c3YvVERLkhJuVkNCGBxMsY-PEMu4f7t2XuAeSx7lGqeptcnkWk2i1Bf7bLYI-tkwMqT2y9rWJc5gVxn16BExX99L" /> on the top toolbar of the editor.</li>  <li>Click the section, then click one of the arrows:
    <ul>
      <li><strong>Move section down </strong><img data-composite="true" src="https://lh3.googleusercontent.com/kZC8LguFU4C9gLui1-y5_4kQcNcBeHxh8H-zSemi82yM7RKvXtOArV0CVUzfPCdCYbM3WWh-kvLLuL0gb7mWzXvxE2QVH6t4GFqDgYqoqOES1ZOZjNdPyGRmJozPfzriZEHqotoK" /><strong>: </strong>Move the selected section below the section underneath it.</li>      <li><strong>Move section up </strong><img data-composite="true" src="https://lh3.googleusercontent.com/lPJX1MUdquUdWNyl5WZdk2U2KKjp9gCDJ9cOq-_Ma2W4VbDKK5A7-EqTWcmZMM3NQs8Yn1KaWDFu1LoKUD5HCwCtlYLKA5sNPCywGV5gryvyK92XLWtLTXka70emqEA9XTYeuYRd" /><strong>:</strong> Move the selection section above the section on top of it.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/11/03/10ff16bb-3e93-49f0-af54-f630840262c5/c69b86a4-fcad-4664-98d5-16b13756c7a0.png" alt="The Zoomed out view of the Editor. A section is highlighted. The cursor is hovering over the option to move it downwards." /></div></div>

Page sections are the building blocks of your site pages. Use them divide your page content, and create a clear, structured layout for your visitors.Once you've added and set up your sections, use the...

Wix Editor: Customizing Your Sections

<div data-component-type="text"><div>Page sections are the building blocks of your site pages. Use them divide your page content, and create a clear, structured layout for your visitors.</div></div><div data-component-type="text"><div>Once you've added and set up your sections, use the options to customize them to your liking. You can add additional elements, change the background and size, and much more.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-elements-to-your-section" level="3">Adding elements to your section</h2></div><div data-component-type="text"><div>Add elements to your sections to display important information, such as opening hours, products, or services, or to decorate your site with visuals.</div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to your section:</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 <strong>Add Elements </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" /> on the left side of the editor.</li>  <li>Click a category.</li>  <li>Drag an element on to the section.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/6e97ee4d-81fb-42aa-8b0e-a3899cf7a3ba/22e988b3-9e2c-4d15-be28-dbb780adbf91.png" alt="The 'Add Elements' panel in the Editor. The 'Decorative' tab is open, and the cursor is hovering over the 'Icons' option." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-background-of-your-section" level="3">Changing the background of your section</h2></div><div data-component-type="text"><div>Change the background of your section to suit your site's look and feel. Keep it simple with a block of color, or add media to make your pages fun and dynamic. </div></div><div data-component-type="heading"><h2 id="" level="4">To change your section background:</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 section.</li>  <li>Click <strong>Change Background</strong> and choose from the following options:
    <ul>
      <li><strong>Color / Gradient:</strong> Select a color from the picker. You can choose one from your site's theme, or add a custom color to make it pop. You can also click <strong>Gradient</strong> or <strong>Fluid Gradient</strong> from the top of the panel to add a unique gradient background.</li>      <li><strong>Image: </strong>Choose from a range of free images from Wix and Unsplash, purchase an image from Shutterstock, or upload your own for a unique touch.</li>      <li><strong>Video:</strong> Select a stunning, high-quality video from Wix or Shutterstock, or upload and add your own video to the background. </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/2024/12/10/9ed8c47d-d19a-4427-862c-0ee392a13af3/b669a811-9472-4d9c-83fc-e99eaefcf3aa.png" alt="screenshot of section background settings panel in wix editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-the-size-of-your-section" level="3">Adjusting the size of your section</h2></div><div data-component-type="text"><div>You can make your section bigger to fit more elements and content, or smaller for a more minimalist look. </div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the size of your section:</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 section.</li>  <li>Click and drag the Adjust section height handle <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/04/28/26eb58a9-735b-4fda-84fa-0f0eae67e386/54dcd162-4d89-4217-b44c-ae9d66bd7d04.png" /> at the bottom of the section to make it taller or shorter.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/04/28/83539058-fa26-40b9-bea7-21f72741e501/6587dc84-2d21-4244-927b-1ad9d25232c6.gif" alt="A GIF showing a section being resized. The cursor clicks the handle, and drags it to resize it." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>The smallest size you can make your section is 40px.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-scroll-effect-to-your-section" level="3">Adding a scroll effect to your section</h2></div><div data-component-type="text"><div>Scroll effects give your sections that extra touch, and create an eye-catching experience on your site. Select an effect that works for your needs, and further personalizes your site and brand.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a scroll effect:</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>Right-click the section. </li>  <li>Click <strong>Background Scroll Effects</strong>.</li>  <li>Select an effect from the options.</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/2024/12/10/bb1dda29-ff26-4030-965a-c311abe3cdbc/46fbd72d-276f-4cee-a438-47e01feee3bd.png" alt="screenshot of choose scroll effect panel for section in wix editor" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-shape-divider" level="3">Adding a shape divider</h2></div><div data-component-type="text"><div>Shape dividers are graphic shapes you can use to create eye-catching structure between section content, or sections themselves.</div></div><div data-component-type="text"><div>There are a range of design options available from Wix, or upload your own to add a personal touch. You can even apply a shape divider to the top and / or bottom of a section to fit your layout needs.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a shape divider:</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>Double-click the section.</li>  <li>Click the <strong>Shape Dividers</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/yHvLJbsmJOP1SXxMEIAAUQzJzJqnvzFR3y8-E9_PwkbtQdoj-Pv7g8BFc2HSJ7YajwNIbLV4IabXbdEANAx7u2IbMeDkCF2SFrQ5FYwDr55yXsFfs8BKIBqu9WgP7VPOlYxbQMWfL0AlK1Ao1Q" />.</li>  <li>Click the <strong>Bottom</strong> or <strong>Top </strong>tab to choose where to add the divider.</li>  <li>Select a divider to add to your section:
    <ul>
      <li><strong>Suggested designs:</strong> Click one of the styles available in the panel.</li>      <li><strong>Additional designs offered by Wix:</strong>
        <ol>
          <li>Click <strong>+</strong> <strong>More Shapes</strong>.</li>          <li>(In the Media Manager) Select a design from the <strong>Media from Wix</strong> tab.</li>          <li>Click <strong>Choose Files</strong> to apply it to your section.</li>        </ol>      </li>      <li><strong>Your own shape divider: </strong>
        <ol>
          <li>Click <strong>+ More Shapes</strong>.</li>          <li>(In the Media Manager) Select the shape you want to use from the <strong>Site Files</strong> tab, or upload a new one.</li>          <li>Click <strong>Choose Files</strong> to apply it to your section.</li>        </ol>      </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/2024/12/10/91a42c2f-fcdb-4112-851d-47395f0bf95f/1d80c66b-7f3d-4c7a-9dad-f69ec110445f.png" alt="screenshot of section shape divider panel in wix editor" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to know more?</div><div class="info-content"><div>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-shape-dividers#customizing-your-shape-divider" target="">customize a shape divider's design</a> to complement your section's look and theme.</div></div></div></div>

Sections are a quick and easy way to structure your pages. Use them to organize your site's content, and create a clear, comprehensive design. There are a variety of predesigned sections available wit...

Wix Editor: About Sections

<div data-component-type="text"><div>Sections are a quick and easy way to structure your pages. Use them to organize your site's content, and create a clear, comprehensive design. There are a variety of predesigned sections available with different layouts and elements, so you have everything you need to get started.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/6a63999e-0d81-4a41-baf1-20b54c1d9646/646263cd-6e21-4182-af6d-e8dedea2b635.png" alt="A live Wix site, designed into sections." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="organize-and-divide-your-content" level="3">Organize and divide your content</h2></div><div data-component-type="text"><div>Sections are the building blocks of a page, and you can use them to divide and organize your page's content. For example, you may have a section for your company's services, and another for your contact details. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/37f49c51-8ae8-4466-91b5-8257e0619e38/e8744fdd-abd3-4ab0-a969-378607e7bd94.png" alt="Two sections in the Editor. The 'Contact Me' section is selected and highlighted." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="get-started-with-our-pre-designed-sections" level="3">Get started with our pre-designed sections</h2></div><div data-component-type="text"><div>You can add a blank section to start from scratch, or choose from a variety of ready-made designs. The sections are organized by topic such as Promotion, Team, and List, and may include designs based on your business type (blog, store etc.). Pre-designed sections include handpicked elements to help you get started. </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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/bc3b75a4-ebd4-4126-9398-2a4a54ebf99f/3e5d9840-7390-4841-ad74-a8eeed5631f0.png" alt="The 'Add Section' panel. The 'Subscribe' tab is open, and there are presets displayed." /></div></div><div data-component-type="text"><div>Whether you choose a blank or pre-designed section, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-sections#adding-elements-to-your-section" target="">add all the elements you need</a> and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-icons-available-when-clicking-on-elements-in-the-editor" target="">customize them</a> to suit the section's intent.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/094e68cb-d94b-48f6-9229-09deb75b8b42/49e240b8-d48e-4ce4-b2c7-5cd5e6e3e3cc.png" alt="The 'Add Elements' panel in the Editor is open. The cursor is hovering over the 'Icon Buttons' tab." /></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>Sections span the full width of your visitors' browser and maintain their grouping when visitors view your site on mobile devices. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="design-your-section-for-your-needs" level="3">Design your section for your needs</h2></div><div data-component-type="text"><div>You can customize any section you add to your site, whether it's pre-designed or blank. Choose the background and size to make it look how you want, and add scroll effects to create unique, eye-catching content. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-sections" target="">Learn more about customizing your sections</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/8910e528-42e7-486e-8b3e-7af45bbd8706/772243c7-e794-4900-83f1-9ad93f9a525d.png" alt="A section in the Editor. The 'Section Background' panel is open." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjust-sections-to-mobile" level="3">Adjust sections to mobile</h2></div><div data-component-type="text"><div>Sections you've added on desktop automatically appear your mobile site. However, you may want to change the order in which they appear on your mobile site, or even hide certain sections. These changes don't affect the desktop version of your site.</div></div><div data-component-type="text"><div>Rearranging your sections on mobile is a great way to adapt and customize which information your visitors see first. For example, you may want to highlight your business' phone number by moving that section to the top of your home page.  </div></div><div data-component-type="text"><div>If you have information on a section that isn't relevant to visitors on mobile, you can hide it completely, and you can easily display the section again if you so choose. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-sections-on-your-mobile-site" target="">Learn more about sections on your mobile site</a></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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/22/5c12a9f8-9afc-49ae-a3cb-5bbc7057f837/d8f9ef1d-e2ce-463d-ae3a-d362dea3c0bb.png" alt="A section, highlighted in the mobile Editor. The cursor is hovering over the option to move the section down." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Ready to get started?</div><div class="info-content"><div>Click <strong>Add Section</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/11/03/6c7ba228-57cb-4435-9a60-561d206cc74b/48d7ab00-3a02-406c-8e03-0944d3cab341.png" /> on the left side of the Editor to add and set up a section on your site. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-sections" target="">Learn more about adding sections</a> </div></div></div></div>

Sections are building blocks you can use to structure your content. After you've added and set up sections, you can link to them to ensure that visitors have access to everything they need.There are s...

Wix Editor: Linking to Sections on Your Site

<div data-component-type="text"><div>Sections are building blocks you can use to structure your content. After you've <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-sections" target="">added and set up sections</a>, you can link to them to ensure that visitors have access to everything they need.</div></div><div data-component-type="text"><div>There are several ways that you can share sections on your site; by adding them to a menu, linking elements to them, and creating unique section URLs.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-sections-to-a-menu" level="3">Adding sections to a menu</h2></div><div data-component-type="text"><div>Adding sections to your menu is a great way to help your visitors navigate your site, and direct them to the right content. </div></div><div data-component-type="text"><div>Making sections a menu item is also particularly useful if you have a one-page site that contains a lot of information, as visitors will be able to find what they're looking for without having to scroll.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a section to your 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>Click your site menu.</li>  <li>Click <strong>Manage Menu</strong>.</li>  <li>Click <strong>Add Menu Item </strong>at the bottom of the panel.
    <ul>
      <li>(For advanced menus) Select <strong>Section </strong>from the list.</li>      <li>(For site menus) Click <strong>Section or anchor</strong>.</li>    </ul>  </li>  <li>Select the page the section is on from the dropdown menu.</li>  <li>Select the section from the dropdown menu.</li>  <li>Click <strong>Done</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/f29afd02-cd0b-412a-895d-23510c39da24/9923b40d-a6e0-476e-bfc5-18d7c8704a6d.png" alt="The link panel. The cursor is hovering over the 'Where on the page?' dropdown.." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="displaying-sections-on-an-in-page-menu" level="3">Displaying sections on an in-page menu</h2></div><div data-component-type="text"><div>You can display all of your sections in a cool floating menu on your site. An <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-an-in-page-menu" target="">in-page menu</a> allows your visitors to access different parts of your site page by clicking the section name, and is always visible to visitors on your page. </div></div><div data-component-type="heading"><h2 id="" level="4">To add an in-page 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>Click <strong>Add Elements ﻿</strong><img data-composite="true" src="https://lh5.googleusercontent.com/2_Q3UWFeRrr5eTMMy5BcmnSAohKtI_dMraA_5NEO86PZzJ1C6RLZFszKuF-1mKgkvV4ee4eSdDzyvTbeogg8P5XGH8QMTpNCPtZMEWh1kJV1_Jk7RjMl4g4JvgeWtKfTBU5Wfg_V" /><strong> </strong>on the left side of the editor.</li>  <li>Click <strong>Menu &amp; Anchor</strong>.</li>  <li>Click<strong> In-Page Menu</strong>.</li>  <li>Drag your chosen menu on to your page.</li>  <li>(Optional) Right click on your anchor and select <strong>Pin to Screen</strong> to change its location on your page.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/ee982885-aa0c-48de-b683-20a44fdb668e/2102d99a-b623-4784-a92d-6b553ade2dbe.png" alt="screenshot of add elements panel in wix editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="linking-elements-to-sections" level="3">Linking elements to sections</h2></div><div data-component-type="text"><div>Link elements on your site to page sections. When visitors click the element on your live site, they're brought directly to the relevant content. </div></div><div data-component-type="heading"><h2 id="" level="4">To link an element to a section:</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 element you want to link from.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/8zZfdpxqwt9lhV0e31WR3fVTZaAeF6how0CkEyDwW0xX4262TslqWaHFmxu4rZFjhipV1BNWlD1WnF23EBMNIe_amzYk8jsYqmkkCQV0CTmc2H4ab2qmodtGDFu8RGyKL4P475Ni=s0" />.</li>  <li>Click <strong>Section or anchor</strong>.</li>  <li>Select the page the section is on from the dropdown menu.</li>  <li>Select the section from the dropdown menu.</li>  <li>Click <strong>Done</strong>.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/3e86cedf-0bda-4022-b2d5-438f394ec851/38b7f568-e0cc-4abf-9927-92d434df2910.png" alt="screenshot of what do you want to link to panel in wix editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-and-sharing-unique-section-urls" level="3">Creating and sharing unique section URLs</h2></div><div data-component-type="text"><div>Generate a unique URL that you can share across platforms to showcase relevant and important content. When visitors click the link, they're brought directly to the section on your page, so they don't need to scroll to find information. </div></div><div data-component-type="text"><div>Choose the suffix to make the link look how you want. Once you've created a unique URL for your section and published the changes, you can preview the link and copy it to share across platforms and accounts.</div></div><div data-component-type="heading"><h2 id="" level="4">To create and share a section URL:</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 relevant section in your editor.</li>  <li>Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/cu38R5ZOvmnaEcp6pOT08y0oZADAo5S3VYdjaSjFun0cXq79LpP55-XBYpC8gbAEHrARaxD-iGqJrAVVfV3APFLUqISrETB_1Cx3ifPhz3OfP1oa0rAyInyaJMGo3iLmN7LWmbZurNKi99SaCMExcw" />.</li>  <li>Click <strong>Section Settings</strong>.</li>  <li>Click <strong>Section URL</strong>.</li>  <li>Enter the suffix into the field under <strong>What's the URL suffix?</strong>.</li>  <li>Press the Enter key on your keyboard.</li>  <li>Publish the site changes.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/26868dd9-223c-45f0-9c53-8bfdb99cb79d/b9bf63a1-3a34-4ff3-98a9-34b34ef3685d.png" alt="screenshot of section settings panel in wix editor." /></div></div><div data-component-type="text"><ol>
  <li>(Optional) Hover over the relevant section in your editor.</li>  <li>Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/cu38R5ZOvmnaEcp6pOT08y0oZADAo5S3VYdjaSjFun0cXq79LpP55-XBYpC8gbAEHrARaxD-iGqJrAVVfV3APFLUqISrETB_1Cx3ifPhz3OfP1oa0rAyInyaJMGo3iLmN7LWmbZurNKi99SaCMExcw" />.</li>  <li>Select <strong>Section Settings</strong>.</li>  <li> Click <strong>Section</strong> <strong>URL</strong>.</li>  <li>Choose what you want to do with the URL:
    <ul>
      <li><strong>Copy URL:</strong> Copy the link to your device's clipboard in order to paste and share it on external sources.</li>      <li><strong>Go to URL:</strong> Open the URL directly to see how it looks for visitors.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/24/90e40fb0-690c-4009-913a-ba4fb2527613/408687ec-98b1-4c95-ad42-812c7c2fa35b.png" alt="screenshot of section settings panel in wix editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Notes:</div><div class="info-content"><ul>
  <li>The options to share and open the URL only work if you publish the site after setting up the link.</li>  <li>Linking sections to elements on your site or adding them to a menu does not generate a URL. These steps only apply if you've created a unique URL from the Settings panel.</li></ul></div></div></div>

The Quick Edit panel allows you to make changes to your section content and structure on the go. You can change the content of elements to keep your site pages fresh and informative.Editing section co...

Wix Editor: Using the Quick Edit Panel with Sections

<div data-component-type="text"><div>The Quick Edit panel allows you to make changes to your section content and structure on the go. You can change the content of elements to keep your site pages fresh and informative.</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/2024/12/10/e26ab6f2-8df5-43ca-8dd8-86d65b4c4af3/b08e80e8-b322-4918-9cb9-b045a4183ffb.png" alt="screenshot of quick edit panel in the wix editor with a section selected." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-section-content" level="3">Editing section content</h2></div><div data-component-type="text"><div>Update all of your section's content from one easy place. Replace elements such as text and images, and change your section's background to keep the design fresh.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the section content:</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 section.</li>  <li>Click the <strong>Quick edit</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/20/661f2944-ffbc-431d-90a2-dfaffb5f7251/26433683-6dff-4f53-9958-70c39032c3c9.png" /> icon.</li>  <li>Select the relevant element from the panel.</li>  <li>Update / replace the element.</li>  <li>(Optional) Click the <strong>Settings</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/7lalJ2U1zesZXkQHtmh5G6Ga-50kmXKoR_kCOA5F2atMeeNQYRSDfH4iZStTkBtSd4jiskOmkvjyKPe3Wi-ffmJA0e6mFRJGYM-h2Q_3RUKhatWqv90PlEKY4KrX12YeMcsPQPwCg_A1oPfky0MOCQ" /><strong> </strong>to update the element's settings.</li>  <li>Click the <strong>Close </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/12/02/557b534c-5732-4482-8e1f-75ea80aa7ae8/fb740840-dad5-4b95-a4e7-2b9826bc1644.png" /> to exit the panel.</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/2024/12/10/f7277e96-e2a3-4f5e-8adc-8c7041924a5e/367bfd06-c2d2-4f56-85a1-1e8773664c3c.png" alt="screenshot of the quick edit bar in the wix editor." /></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>Select a question to learn more about what you can do with the Quick Edit panel in your editor:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I switch back to a previous layout in the panel?</h4><div class="collapsible-content"><div>Absolutely. While previewing options in the <strong>Explore section layouts</strong> tab, select the preview under <strong>Current layout</strong> to revert your section. </div><div><br /></div><div><strong>Note:</strong> If you select a new layout and close the panel, it is not possible to switch back to your section's previous layout from the panel. However, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-undo-and-redo" target="">use the Undo and Redo tools</a> to revert the changes.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Is there another way to access the panel?</h4><div class="collapsible-content"><div>You can also access the panel by selecting your section, then clicking <strong>Quick Edit</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/20/661f2944-ffbc-431d-90a2-dfaffb5f7251/26433683-6dff-4f53-9958-70c39032c3c9.png" />.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I update text in a section?</h4><div class="collapsible-content"><ol>
  <li>Open the <strong>Content</strong> tab in the <strong>Quick Edit</strong> panel.</li>  <li>Select the relevant text field, and enter your new text into it.</li>  <li>Click the <strong>Close</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/12/02/557b534c-5732-4482-8e1f-75ea80aa7ae8/fb740840-dad5-4b95-a4e7-2b9826bc1644.png" /> to exit the panel.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I use the panel to customize the design of elements?</h4><div class="collapsible-content"><div>The Quick edit panel provides a way to change your section's layout and content on the go. As element types have different features and options, they're customized individually. You can change the design of section elements with the following steps:</div><div><br /></div><ol>
  <li>Close the Quick edit panel.</li>  <li>Select the relevant element.</li>  <li>Click the <strong>Design </strong>icon  <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/05/24cbcae1-ce69-445c-95b9-aac1f45cb155.png" /> and make the changes you want.</li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/05/17/ea5dc161-f497-481d-89d9-fc78172d91ea/7c230dbc-c44a-414b-a1b4-4f56dbc6f96f.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I customize the design of my section?</h4><div class="collapsible-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-sections" target="">Use tools such as scroll effects, shape dividers, and more</a> to make your section look how you want.</div></div></div></div>

The elements on your site pages are organized into a certain order. This order has both visual and functional aspects. It determines the display, loading, and tabbing sequence of elements on your live...

Wix Editor: About the Order of Your Site's Elements

<div data-component-type="text"><div>The elements on your site pages are organized into a certain order. This order has both visual and functional aspects. It determines the display, loading, and tabbing sequence of elements on your live site.</div></div><div data-component-type="text"><div>The order of your site's elements is automatically determined, however you can make manual changes if needed.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="the-order-of-elements-on-your-site" level="3">The order of elements on your site</h2></div><div data-component-type="text"><div>Elements you add to your site are organized in your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">page's layers</a>, and are displayed in a specific order. This sequence is taken from your site's <a data-composite="true" href="https://support.wix.com/en/article/site-performance-your-sites-dom-order" target="">DOM order</a>, which refers to the loading and reading sequence of page elements.</div></div><div data-component-type="text"><div>The order of elements on your site is an <a data-composite="true" href="https://support.wix.com/en/article/site-performance-your-sites-dom-order#dom-order-and-site-performance" target="">important part of your site's performance</a>. It is also essential for your site's accessibility, as it <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checking-and-adjusting-a-sites-dom-order" target="">determines the sequence</a> in which visitors using assistive technologies (or the tab key) navigate your page content.</div></div><div data-component-type="text"><div>Wix automatically sets a DOM order for you. The sequence uses the visual order of the elements; from left to right, and from top to bottom. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="manually-changing-the-order-of-your-site-elements" level="3">Manually changing the order of your site elements</h2></div><div data-component-type="text"><div>Automatic DOM order is automatically enabled on your desktop site. If the visual and tabbing order of your site is logical, we recommend keeping the sequence as it is. However, if your site's DOM order is not logical, you can manually change it in the <a data-composite="true" href="https://support.wix.com/en/article/accessibility-about-the-accessibility-wizard-7284021" target="">Accessibility Wizard</a>. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to check your site's DOM order?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site" target="">Preview</a> or open your live site, and press the <strong>Tab key</strong> on your keyboard to move through the page elements.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To change the DOM settings:</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 <strong>Settings</strong> on the top bar of your editor.</li>  <li>Select <strong>Accessibility Wizard</strong>.</li>  <li>Select the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/08/91fbe34c-3491-4ef6-8c92-ebbc86841818/6e2b4e22-9ca8-4711-951a-51f8ba127511.png" /> at the top right of the Wizard.</li>  <li>Select <strong>Advanced accessibility settings</strong>.</li>  <li>Select<strong> Automatic DOM order</strong>.</li>  <li>Disable the toggle in the panel.</li>  <li>Select <strong>Turn It Off </strong>in the pop-up window.</li>  <li>Reorganize the elements manually:
    <ol>
      <li>Select the <strong>Layers</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/22/f52b1de4-3721-47b4-8588-8e0f10fbe5cb/33bdef84-9b33-4f67-bfb3-adef581774af.png" /> at the bottom left of the editor.</li>      <li>Check over the list and delete any redundant elements. This includes duplicate elements that do not have a use on your site and can confuse screen reader users.</li>      <li>Drag and drop the remaining elements into the desired order.</li>    </ol>  </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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/08/23446a58-77b9-4b4b-8092-2db23c31714e/25361114-abbb-4f3c-8c4a-1cd503b999f4.png" alt="The advanced settings panel of the accessibility wizard. The automatic DOM order toggle has been disabled." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="potential-issues-and-troubleshooting-steps" level="3">Potential issues and troubleshooting steps</h2></div><div data-component-type="text"><div>Issues with your site's DOM order can impact your site's performance and accessibility, as well as the overall structure of your site pages. Select an option to learn more about these issues, and discover potential resolutions.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">The loading order of elements on my live site does not match the visual order of elements</h4><div class="collapsible-content"><div>If you have disabled your site's automatic DOM order, the order in which they load may not match the visual order of elements. </div><div><br /></div><div>For example, if a button appears at the bottom of a page but is first in the DOM order, it loads before the elements above it. As additional content loads, the page's layout may shift and move around. </div><div><br /></div><div>We recommend enabling your site's automatic DOM order to ensure that the loading and visual sequence of your elements match. If the automatic order is not logical, however, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">manually re-arrange the DOM order in the Layers panel</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Elements move around on the page when I save my site</h4><div class="collapsible-content"><div>Your site's DOM order is taken from the visual order of elements on your pages; from left to right, and top to bottom. This may cause elements to move position, or be hidden behind other elements when you save your site changes.</div><div><br /></div><div>You can rectify this issue with the following steps:</div><ol>
  <li>Disable the automatic DOM order in your site's advanced accessibility settings.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-viewing-and-selecting-overlapping-elements" target="">Open the Layers panel in the Editor to locate and select the relevant elements</a>.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">Manually rearrange the elements into your desired order</a>.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">The tabbing order of elements on my live site does not match the visual order of elements</h4><div class="collapsible-content"><div>If you have disabled your site's automatic DOM order, the tabbing order may not match the visual sequence of elements. This can impact your site's accessibility, as it makes it more difficult for visitors using assistive technologies to navigate your site.</div><div><br /></div><div>We recommend enabling your site's automatic DOM order to ensure that the tabbing and visual sequence of your elements match. If the automatic order is not logical, however, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">manually re-arrange the DOM order in the Layers panel</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">The automatic DOM order doesn't match my site's language</h4><div class="collapsible-content"><div>The automatic DOM order on desktop Editor sites has been built for left-to-right scripts (e.g. English, Spanish, etc.). If your site uses a right-to-left script such as Arabic or Hebrew, you need to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-the-layers-panel" target="">manually re-arrange the DOM order in the Layers panel</a>.</div></div></div></div>

Add sections generated by AI (Artificial Intelligence) to optimize your site building experience. The generator takes your site information into account, and creates content that you can adjust to you...

Wix Editor: Generating Page Sections with AI

<div data-component-type="text"><div>Add sections generated by AI (Artificial Intelligence) to optimize your site building experience. The generator takes your site information into account, and creates content that you can adjust to your liking.</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>You can harness the power of our <a data-composite="true" href="https://www.wix.com/ai-website-builder" target="_blank">AI Website builder</a> to create a one-of-a-kind site, tailored to your business needs. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="generating-new-sections-with-ai" level="3">Generating new sections with AI</h2></div><div data-component-type="text"><div>Organize and display content by adding AI-generated sections. Any sections you add are fully customizable, so you can change the design and content as needed.</div></div><div data-component-type="heading"><h2 id="" level="4">To add an AI-generated section:</h2></div><div data-component-type="text"><ol>
  <li>Select <strong>Add Section </strong><img data-composite="true" src="https://lh3.googleusercontent.com/TjYeZuWkbCLatKNmawGnaIFMAwb3sNqUSdwzsGsNG76H09d_JCSw-YtvdnuW27id0m4oxjTV7Z5Qea79WQuvjGW63-3csO1dW04CT4WcFnxQjfDDaKF3GVGqcQp7kn_sJ5TzVwCIfngObmKFGq1QoA" /> in the left editor menu.</li>  <li>Select <strong>AI Creator</strong>.</li>  <li>Add / edit your site information and desired section content:
    <ul>
      <li><strong>Site info: </strong>This includes your site type and name. If you want to update it, select <strong>Edit</strong> and make the necessary changes.</li>      <li><strong>Section type: </strong>Choose the type of section you want from the drop-down menu.</li>      <li><strong>Text details:</strong> Enter text details into the field, such as keywords and important information.</li>    </ul>  </li>  <li>Select <strong>Create Section</strong>.</li>  <li>Click and drag the section you want to add it to your page.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/09/21/90b7c291-0f2b-4549-ad97-3baef50477c5/4e76bf2a-0e73-4689-a79d-14eda116da3f.png" alt="The AI section creator panel in the Editor. The Create Section button is highlighted." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-your-section-content" level="3">Adjusting your section content</h2></div><div data-component-type="text"><div>After you add an AI-generated section to your site, you can manually change the text and / or images to suit your brand aesthetic. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>You need to check and edit the text where necessary before you publish the changes to ensure that it aligns with the <a data-composite="true" href="https://www.wix.com/about/terms-of-use" target="_blank">Wix Terms of Use</a>, and that you have all the necessary rights and licenses to use and publish this content.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To adjust your section content:</h2></div><div data-component-type="text"><ol>
  <li>Click the section in your editor.</li>  <li>Click the content you want to change or adjust:
    <ul>
      <li><strong>Text:</strong>
        <ol>
          <li>Select the text box.</li>          <li>Click <strong>Edit Text</strong>.</li>          <li>Make the text changes as needed.</li>          <li>(Optional) Use the panel to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">change the text font, size, color, and more</a>.</li>        </ol>      </li>      <li><strong>Image:</strong>
        <ol>
          <li>Select the image.</li>          <li>Click <strong>Change Image</strong>.</li>          <li>Select from a range of stock photos or site files, or upload your own.</li>          <li>Click <strong>Choose Image</strong>.</li>          <li>(Optional) Click the icons to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-cropping-an-image" target="">crop your image</a>, <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-editing-and-customizing-images" target="">add a frame</a>, and more.</li>        </ol>      </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/651c25b0-2d60-43c8-addf-1df2fd575568/2023/09/21/6d1d4bb4-eba0-40f4-9160-309468146ecf/154c066b-7678-4c70-a83d-55a2b9976ac5.png" alt="The text settings panel of text created in an AI section. The cursor is hovering over the highlighted text." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">What's next?</div><div class="info-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-sections" target="">Customize your sections</a> to complement your pages and brand.</li>  <li>Learn about everything you can do with <a data-composite="true" href="https://www.wix.com/features/ai" target="_blank">Wix's AI features</a>.</li></ul></div></div></div>

Currently, it is not possible to create a header which shrinks as you scroll down.We are always working to update and improve our products, and your feedback is greatly appreciated.

Wix Editor Request: Creating a Header that Shrinks as You Scroll Down

<div data-component-type="text"><div>Currently, it is not possible to create a header which shrinks as you scroll down.</div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to access the CSS code of your site. Many CSS changes can be made by updating your content in the Editor. The changes take effect when you click Publish. Tip:CSS editing ...

Wix Editor Request: Accessing the CSS Code (Style Sheet) of Your Site

<div data-component-type="text"><div>Currently, it is not possible to access the CSS code of your site. </div></div><div data-component-type="text"><div>Many CSS changes can be made by updating your content in the Editor. The changes take effect when you click <strong>Publish</strong>. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/studio-editor-about-css-editing" target="">CSS editing</a> is one of many advanced features that are available in the <a data-composite="true" href="https://support.wix.com/en/article/wix-studio-about-the-studio-editor" target="">Studio Editor</a>.</div></div></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is hugely appreciated. </div></div>

You may see a gap under your footer on some screens. This appears because your site's content is shorter than the viewport height. Currently, Wix offers solutions to help you build a horizontally resp...

Wix Editor Request: Removing the Space Under the Footer

<div data-component-type="text"><div>You may see a gap under your footer on some screens. This appears because your site's content is shorter than the viewport height. </div></div><div data-component-type="text"><div>Currently, Wix offers solutions to help you build a horizontally responsive site. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-request-responsive-sites" target="">Click here to learn which elements are horizontally responsive</a></div></div><div data-component-type="text"><div>We are still working on solutions for vertical responsiveness. In the meantime, you can try our recommendations. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-fixing-spacing-and-alignment-issues-on-your-site#gaps-below-the-footer" target="">Learn more about space under your footer and view possible solutions</a></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to have different header or footer designs on different pages of your Wix site. The same header and footer designs are applied to all site pages. However, you can hide th...

Wix Editor Request: Different Header and Footer Designs on Different Site Pages

<div data-component-type="text"><div>Currently, it is not possible to have different header or footer designs on different pages of your Wix site. The same header and footer designs are applied to all site pages. However, you can hide them on certain pages. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page" target="">Click here to learn how</a></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>The Studio Editor allows you to display different headers and footers across different site pages. <a data-composite="true" href="https://support.wix.com/en/article/wix-studio-about-the-studio-editor" target="">Learn more about the Studio Editor</a></div></div></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

Currently, it is not possible to enable horizontal scrolling on your live site for different screen sizes (such as iPads and tablets).We are always working to update and improve our products, and your...

Wix Editor Request: Horizontal Scrolling on Your Live Site

<div data-component-type="text"><div>Currently, it is not possible to enable horizontal scrolling on your live site for different screen sizes (such as iPads and tablets).</div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

How to begin

Choosing a template 

Hiring a professional to build your site

Use Wix to build your site and business. Try our AI tools to create a site, customize our templates or hire a professional to create or enhance your web presence.

Getting started

Learn how to use Wix to build your site and business.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Structuring your site

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 animation

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

Building a mobile site

Troubleshooting your Editor site

Using the Wix Editor

Using your site dashboard

Site management

Managing roles and permissions

Managing your site

Getting started with AI

Using AI to create & manage your site

Using AI to set up your business

AI tools

Media Manager basics

Uploading media

Purchasing media

Managing media

Media issues

Adding and managing your media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Managing your media

Setting up your multilingual site

Translating your site

Managing your languages

SEO in Wix Multilingual

Creating a multilingual site

Privacy & GDPR

About Accessibility

Making your site accessible

Advanced accessibility features

Creating 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 the CMS

Using CMS with other Wix products

Advanced CMS features

Wix for developers

Test Sites

SSO Logins

Wix Blocks

Advanced features

Learn how to create a site and manage its content with our intuitive editors. Know how to protect visitors' privacy and make sites compliant with accessibility laws.

Creating your site

Design and manage your site using intuitive Wix features.