Choose from hundreds of free shapes and lines to give your site more style, design or structure. Customize the colors of your shapes and lines, and combine them to create unique visuals for your page....

Wix Editor: Adding Decorative Shapes and Lines

Discover how to enhance your site’s visual appeal by adding and customizing decorative shapes and lines in the Wix Editor. You can choose from a variety of free options, adjust colors, and combine elements to create unique designs. Learn how to group shapes, change sizes, and customize the look of your lines to match your brand, making your page more engaging and stylish.

<div data-component-type="text"><div>Choose from hundreds of free shapes and lines to give your site more style, design or structure. Customize the colors of your shapes and lines, and combine them to create unique visuals for your page. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-shape-or-line" level="3">Adding a shape or line</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Add Elements </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/13691038-5aa8-4672-9b95-348c0733cabc/2022/11/16/92845eb5-1147-41b6-9ead-d7ccc0f6a873/ed093c3a-f2d9-43b6-bd03-527c703cd789.png" /><strong> </strong>on the left side of the editor.</li>  <li>Click <strong>Decorative</strong>.</li>  <li>Drag a shape, arrow or line onto your page.</li>  <li>(Optional) Use the available options to customize the shape, arrow or line.</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/11/15/3fd918f7-d251-4828-9747-2b43c496f08f/cf5ee9e5-1ee1-4408-9ddb-e3ffee78e258.jpg" alt="A screenshot of the Decorative section of the Add Elements panel, highlighting the shape, arrow and line categories" /></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 decorative shapes and lines.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Are there diagonal lines?</h4><div class="collapsible-content"><div>To add a diagonal line, simply follow the instructions above to add a line, and then <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-elements#rotating-elements" target="">rotate the line</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I create groups of shapes?</h4><div class="collapsible-content"><div>You can group shapes, lines, text or images together within a <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-box" target="">container box</a>. This allows you to move your shape designs around your page together.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I change the size or colors of my shape?</h4><div class="collapsible-content"><div>Yes. Once you have added your shape, you can customize the color and border, resize it, or even turn it into a button. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-a-decorative-shape" target="">Learn more about customizing your shape</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I customize the design of my line?</h4><div class="collapsible-content"><div>Yes, you can choose the color, design and border of your decorative lines to match the look of your site. Different line designs have different customization options. Click the line in your editor, click the <strong>Change</strong> <strong>Design </strong>and click <strong>Customize Design</strong>.</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2024/09/25/056a7cc8-e1a7-4c7c-9b1e-07d0837b7572/85fd0c10-222d-4d2c-8209-61dfbf44343e.png" /></div></div></div></div>

Customize your decorative shapes to match the look of your site, including the size, colors and borders. If you want, you can also add a link to your shape to turn it in to clickable button. If you ch...

Wix Editor: Customizing a Decorative Shape

Discover how to customize decorative shapes in your Wix Editor to enhance your site's design. You can adjust the size, colors, and borders of your shapes, and even turn them into clickable buttons by adding links. Learn to resize your shapes while maintaining proportions, switch between different shapes easily, and utilize arrows as decorative elements. This article empowers you to get creative and make your site visually appealing.

<div data-component-type="text"><div>Customize your decorative shapes to match the look of your site, including the size, colors and borders. If you want, you can also add a link to your shape to turn it in to clickable button. </div></div><div data-component-type="text"><div>If you change your mind about the shape, switch it to another one at any time. </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>Arrows are also considered basic shapes in the editor. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customize-your-shape-design" level="3">Customize your shape design</h2></div><div data-component-type="text"><div>Get creative and customize the color, border and shadow of your decorative shape using the design options.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize your shape:</h2></div><div data-component-type="text"><ol>
  <li>Click the shape in your editor.</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/5d46f7eb-37b2-4b1d-811d-d17e85f656d7.png" />.</li>  <li>Customize your shape using the options: 
    <ul>
      <li><strong>Fill color:</strong> Select the shape's color and opacity.</li>      <li><strong>Border:</strong> Enable the <strong>Apply border</strong> toggle to customize the color, opacity and width of a border.</li>      <li><strong>Shadow: </strong>Enable the <strong>Apply shadow</strong> toggle to customize a shadow.</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/11/15/fd5133c6-5483-4497-b9f3-d22b21eb5023/3ade7b97-e512-40ec-82c8-f5140ddf3394.jpg" alt="A basic shape in Wix Editor alongside the Design panel" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resizing-your-shape" level="3">Resizing your shape</h2></div><div data-component-type="text"><div>Make your shape larger or smaller as you need. When resizing your shape, you can stretch it, or keep the proportions the same as the original shape.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the size of your shape:</h2></div><div data-component-type="text"><ol>
  <li>Click the shape in your editor.</li>  <li>Drag the handles on the edges of the shape to make it bigger or smaller.</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/11/15/619673c7-e0de-451c-bf76-c906a5bcb148/e4045491-b3c3-4a71-824d-7ad8d9d26e18.jpg" alt="A basic shape in Wix Editor, highlighting one of the handles you can drag in order to resize the shape" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Don't want to stretch your shape?</div><div class="info-content"><div>To keep your shape in the same proportions, click the <strong>Settings</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/05/9f521775-046c-4e5d-8b9c-80bf6346ae35.png" />, then enable the <strong>Keep original proportions </strong>toggle.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="switching-to-a-different-shape" level="3">Switching to a different shape</h2></div><div data-component-type="text"><div>You can play around with different shapes, and change them as often as you want.</div></div><div data-component-type="heading"><h2 id="" level="4">To switch to a different shape:</h2></div><div data-component-type="text"><ol>
  <li>Click the shape in your editor.</li>  <li>Click <strong>Change Basic Shape</strong>.</li>  <li>(In the Media Manager) Browse the shape library using the categories on the left and select a new shape.</li>  <li>Click <strong>Add to Page</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/11/15/82cdea01-c99e-4488-80ab-47ae02160cb8/ae5f6f52-630c-45c2-8fdc-e679976d6384.jpg" alt="A basic shape in Wix Editor alongside the button that lets you change the basic shape" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-your-shape-as-a-button" level="3">Using your shape as a button</h2></div><div data-component-type="text"><div>Add a link to your shape so that when your site visitors click it, they are taken to the link destination. This can be used in a variety of ways, such as linking a 'contact' shape to your contact page, or a 'burger' shape to your food menu page.</div></div><div data-component-type="heading"><h2 id="" level="4">To turn your shape into a button:</h2></div><div data-component-type="text"><ol>
  <li>Click the shape in your editor.</li>  <li>Click the <strong>Link </strong>icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/cdff0ec4-6b02-4f12-8539-cf6a845d4dac.png" />.</li>  <li>Enter the link details.</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/11/15/523268e9-99d0-45b1-a1d0-16888f076be8/72ebd231-8e11-4abc-aaf0-adcb8b03bca4.jpg" alt="A basic shape in Wix Editor alongside the link panel" /></div></div>

Text plays a crucial role in your site, grabbing your visitors' attention and keeping them engaged. With the Wix Editor, you can easily add, edit, and delete text to ensure your content is always fres...

Wix Editor: Adding and Editing Text

Discover how to add, edit, and customize text in the Wix Editor to enhance your site's content and engage visitors effectively. Learn to choose from various text elements, including themed titles and paragraphs, to ensure your message resonates with potential customers. By following these steps, you can create compelling text that complements your site's design and improves user experience.

<div data-component-type="text"><div>Text plays a crucial role in your site, grabbing your visitors' attention and keeping them engaged. With the Wix Editor, you can easily add, edit, and delete text to ensure your content is always fresh and compelling.</div></div><div data-component-type="text"><div>Clear and engaging text helps potential customers understand what you provide, making them more likely to choose your business.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-text-to-your-site" level="3">Adding text to your site</h2></div><div data-component-type="text"><div>Add a text element to your page to begin building your site content. There are a variety of title and paragraph designs available, as well as options that match your site's current theme.</div></div><div data-component-type="heading"><h2 id="" level="4">To add text:</h2></div><div data-component-type="text"><ol>
  <li>Open the relevant page in your editor.</li>  <li>Click <strong>Add Elements</strong> <img data-composite="true" src="https://lh6.googleusercontent.com/wxyz6iTTXelz2xXwuasGwpKeKXJ48QqQbsqnvNHXPPFhUoFwEpbyvVnUAUuu5P8Lb49aWypUXNJKNXLtraRABJlDtAArfyAtS2Q098MAGk2dUow8dG6qo4arZexOqrvH0MydkF_f3lmFOB_hYV8O_KKJqhaDEm8mj3NJ6n9VIGrR5rUn20dQN0moP1cm" />.</li>  <li>Click <strong>Text</strong>.</li>  <li>Select a text type: 
    <ul>
      <li><strong>Themed Text: </strong>These text elements have been handpicked for you as they match your template's look and feel.</li>      <li><strong>Titles: </strong>These should be used for headings on your site to let your site visitors know what the pages or sections are about.</li>      <li><strong>Paragraphs:</strong> These should be used for most of the text on your site, and should contain most of your site's content.</li>    </ul>  </li>  <li>Click and drag your chosen text element 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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/96ad5e07-f2ee-4ae8-bcca-fad6221bc0c6/8e78beb6-f138-408f-979a-8b5d8b438e04.png" alt="The Add Elements panel in the Wix Editor. The Text tab is open, and text previews are displayed." /></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>Your editor uses your browser's spell check whenever you add text to your site. If you can't see spell check in your editor, make sure it is enabled in your browser. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-your-text" level="3">Editing your text</h2></div><div data-component-type="text"><div>Once you've chosen and added text to your page, edit its content. We recommend entering information that is relevant to the page or section to ensure an engaging experience for your visitors.</div></div><div data-component-type="heading"><h2 id="" level="4">To edit your text:</h2></div><div data-component-type="text"><ol>
  <li>Click the text element in your editor.</li>  <li>Click <strong>Edit Text.</strong></li>  <li>Type or paste your text in the text box.</li>  <li>Press <strong>Enter</strong> 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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/fe690a1f-3636-4f25-9fc0-bb108732ed93/d321f237-c532-4267-9003-c10502c358e4.png" alt="The Edit Text panel. The text content has been updated, and formatting options are displayed." /></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"><div>Customize your text's <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">formatting</a> and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-your-text-font" target="">design</a> to complement your page's look.</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="text"><div>Click a question below to learn more about adding and editing text. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Do text boxes in the editor have a character limit?</h4><div class="collapsible-content"><div>The character limit per text box is 60,000 characters (roughly 10,000 words) including spaces. If you run over the limit, you can: </div><ul>
  <li>Add another text box by following the steps in this article.</li></ul><div>or</div><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/adding-and-setting-up-collapsible-text" target="">Add a collapsible text box</a>, as they can hold up to 120,000 characters.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I paste text into a text box?</h4><div class="collapsible-content"><div>Absolutely. There are just a few points to keep in mind:</div><ul>
  <li>We recommend <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-copying-text-from-an-external-source-eg-word-document" target="">following our instructions</a> to ensure your text pastes into the box as expected. </li>  <li>If you paste a block of text into the box that goes over the character limit, you may find that some of the text is removed. To resolve this, you can paste the remaining text into a new text box.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I edit text in menus on my site?</h4><div class="collapsible-content"><div>You can edit menu text by selecting the menu itself, and opening its design options. <a data-composite="true" href="https://support.wix.com/en/the-wix-editor/menu" target="">Learn more about menus</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Is it possible to place text in front of an image?</h4><div class="collapsible-content"><div>Yes. To place text in front of an image, drag the relevant text box and place it over the image. </div><div><br /></div><div>If you are unable to see the text box in front of the image, it means that it is located on a layer behind the image. </div><ol>
  <li>Right-click the image.</li>  <li>Hover over <strong>Arrange</strong>.</li>  <li>Click <strong>Move Backward</strong> until you are able to see the text box.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Anything else I should know?</h4><div class="collapsible-content"><div>The editor has a variety of features, tools, and options you can keep in mind when using text on your site. Some of these options include:</div><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-creating-ai-generated-text" target="">Creating AI generated text to streamline the way you build your site</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/accessibility-preparing-your-text-and-graphics" target="">Creating a high color contrast on text to improve your site's accessibility</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-uploading-and-using-your-own-fonts" target="">Uploading and using your own fonts to create a personalized site</a></li></ul></div></div></div>

Add a site title to the top of your page to give your visitors a clear idea of what you, your site, or your brand is all about. Titles are a great way to grab your visitors' attention, and get them in...

Wix Editor: Adding a Site Title

Discover how to add a site title to the top of your page, making it clear what your site or brand represents. A well-placed title not only grabs your visitors' attention but also enhances your site's SEO and accessibility. By following simple steps in the editor, you can create a title that improves user experience and helps with Google indexing. Learn more about the benefits of a clear site title and how to optimize it for better visibility.

<div data-component-type="text"><div>Add a site title to the top of your page to give your visitors a clear idea of what you, your site, or your brand is all about. Titles are a great way to grab your visitors' attention, and get them interested in exploring 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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/049ba8b3-595f-40fe-a4b1-6de65f0559c0/9f33bb1d-53a3-42be-8ee3-5feb85de9b53.png" alt="The Add panel in the Editor. A site title has been added to the header." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-site-title" level="3">Adding a site title</h2></div><div data-component-type="text"><div>Site titles should be placed at the top of your site and have a larger font than the rest of the text on your home page. This ensures that your visitors can clearly see it when they enter your site.</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>Adding a site title to your header means that it will appear on all pages.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add a site title:</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>Text</strong>.</li>  <li>Click <strong>Titles</strong>.</li>  <li>Click and drag the text you want to use onto the top of your page or onto your header.</li>  <li>Click the text in your editor.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>Enter your site's title.</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 how to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">format your text</a> to suit the look and feel of your site.</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/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/4488eace-fef0-4db1-9d1b-0c6015d9245c/7b3bdcfa-69f5-4775-884f-d390ff37e918.png" alt="A screenshot of the title options in the editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="improving-your-site-with-titles" level="3">Improving your site with titles</h2></div><div data-component-type="text"><div>Having a site title can enhance many aspects of your site, such as SEO and accessibility.</div></div><div data-component-type="text"><div>As well as enhancing your site, it can also improve your visitors' experience by providing a clear summary of your site.  </div></div><div data-component-type="text"><div>Click below to learn more about the benefits of having a clear site title.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">SEO benefits</h4><div class="collapsible-content"><div>Having a clear site title that matches your URL means that when Google indexes your site, your site title will show up along with your web address.</div><div>We recommend adding your site title as text, and making sure it's the same name as it is within your site's dashboard settings to ensure that Google indexes it correctly. <a data-composite="true" href="https://support.wix.com/en/article/renaming-your-site" target="">Learn how to change your site's name on your dashboard</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Accessibility benefits</h4><div class="collapsible-content"><div>Having a clear site title can help visitors with disabilities or impairments understand what your site is about. </div><div>We recommend adding your site title as text, as well as defining the heading tags. This ensures that visitors using screen readers can navigate your site with ease. <a data-composite="true" href="https://support.wix.com/en/article/accessibility-preparing-your-site-structure" target="">Learn how to define your text headings</a>.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Ready to keep improving your site?</div><div class="info-content"><div>Add unique title tags to each of your pages to enhance your site's SEO and Accessibility. <a data-composite="true" href="https://support.wix.com/en/article/adding-seo-title-tags-and-meta-descriptions-to-your-pages" target="">Learn how to add title tags to your site pages</a>.</div></div></div></div>

You can customize the look of your text at any time in the Text Settings panel. Adjust options such as the size, fonts, and colors to keep providing visitors with the information they need to know in ...

Wix Editor: Customizing Your Text

Customize your text effortlessly in the Wix Editor using the Text Settings panel. Learn how to adjust text size, choose fonts, change colors, and apply formatting to enhance your site's appearance. By following the steps outlined, you can create a unique and visually appealing experience for your visitors, ensuring your content stands out effectively.

<div data-component-type="text"><div>You can customize the look of your text at any time in the Text Settings panel. Adjust options such as the size, fonts, and colors to keep providing visitors with the information they need to know in a unique, streamlined way.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-size-of-your-text" level="3">Changing the size of your text</h2></div><div data-component-type="text"><div>Adjust your text size to suit your needs. We recommend using bigger sizes for titles and headings, and smaller sizes for text paragraphs. You can also choose to resize only part of the text in your text box (e.g. make a specific word bigger than the rest).</div></div><div data-component-type="heading"><h2 id="" level="4">To change the text size:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant text box.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>(Optional) Highlight the specific word(s) you want to resize.</li>  <li>Drag the <strong>Font size </strong>slider to resize the text, or enter a specific value between 6 and 999 pixels. </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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/0bc3ce5e-19c1-406a-a738-fe6c4e0d4f93/2b4228f9-77a0-4338-8a2a-7698b5a4428f.png" alt="The text settings panel is open. The cursor has selected the Font size slider." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="choosing-a-new-font" level="3">Choosing a new font</h2></div><div data-component-type="text"><div>Customize your content by changing the text font. Select from a variety of fonts provided by Wix, or upload your own. You can also choose a different font for a specific part of the text in your text box. </div></div><div data-component-type="heading"><h2 id="" level="4">To change your text font:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant text box.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>(Optional) Highlight the specific word(s) you want to show in a different font.</li>  <li>Click the <strong>Fonts</strong> drop-down.</li>  <li> Do one of the following:
    <ul>
      <li>Select a Wix font.</li>      <li>Click <strong>Upload Fonts</strong> to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-uploading-and-using-your-own-fonts" target="">upload your own font</a>. </li>      <li>Click the <strong>Add Languages</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/71d20af0-560e-44a5-bb38-bf3f513b58fa/2024/12/18/58477fa5-4f18-40b0-864c-2d037379947b/0c333354-a7fe-418f-b1fa-2f14cefdbf4f.jpg" /> to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-language-fonts" target="">add a language font</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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/09e23079-b3bc-4ad4-a0cc-0bf5a51804ca/44951542-a16e-441a-bdb6-f80134be144a.png" alt="The Fonts dropdown menu of the text settings panel. The Montserrat font has been selected." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><ul>
  <li>View the <a data-composite="true" href="https://support.wix.com/en/article/about-fonts-available-in-wix" target="">complete list of fonts</a> available in the editor that are licensed for use on your site. Note that these fonts are licensed for digital use only within your Wix site. For more information, see the <a data-composite="true" href="http://www.wix.com/about/terms-of-use" target="">Wix Terms of Use</a>.</li>  <li>You cannot download the fonts to use, but you may find the open source versions and install them to your computer. Be careful with fonts found in external URLs. These are not owned by Wix, and you need to contact the author for permission to use them.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-color-of-your-text" level="3">Changing the color of your text</h2></div><div data-component-type="text"><div>Complement pages and sections by changing the text color. You can display different colors in a text box, or apply one color to the entire text.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the color of your text:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant text box.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>(Optional) Highlight the specific word(s) you want to show in a different color.</li>  <li>Click the <strong>Color</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/TbsMXzxux9GOCv1TTNo4fWM-veIfpEAgW9u1WrLSJASWXpqbZzANFTR0kFdKT8NmUPRB0vc27DMpVQijg1Qbm1n49Mx5IoTQVC5qoPtjDxqHgtRngRQEhHjQixPGKvfFq9Um5e8dERYvksXFRu3Qv9E" />.</li>  <li>Select the color you want from the panel.</li>  <li>(Bulleted or numbered lists) Change the color of your bullet points or numbering:
    <ol>
      <li>Highlight all the text in the text box, including the bullets or numbers.</li>      <li>Select the color you want for the bullets or numbers.<br />
<strong>Note:</strong> All the text in the text box changes to the selected color.  </li>      <li>Highlight the relevant text (without the bullets or numbers).</li>      <li>Select the color you want for the text.<br />
<strong>Note:</strong> The text changes to the new color, but the bullets and numbers stay the color you chose in step b.</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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/35fcc67d-441e-405e-a1f9-326ee7fa7f15/1264aee4-4160-4b2a-b891-bb78ea489896.png" alt="The color picker has been opened from the settings panel. Some of the text box has been changed to white." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-formatting-to-your-text" level="3">Adding formatting to your text</h2></div><div data-component-type="text"><div>Emphasize and personalize your site content with text formatting. Add effects such as bold and italics, and change the alignment to suit your page or section layout.</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>Explore the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">available text formatting options</a>.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To format your text:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant text box.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>(Optional) Highlight the specific word(s) you want to format.</li>  <li>Choose how you want to format the text:
    <ul>
      <li><strong>Formatting effects:</strong> Select the Bold , Italics, or Underline icons to add effects to the text.</li>      <li><strong>Alignment:</strong> Open the Alignment dropdown and choose whether to align text to the left, right, or center.</li>      <li><strong>Spacing:</strong> Select <strong>Character &amp; line spacing</strong>, and adjust the spacing of text.</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/a1c473d0-e600-4b63-ae67-997d73da1139/2025/03/21/87ce11b0-60e3-4897-a2db-5b73a48112f3/2a0f421f-d48e-4c5f-b9a5-bbe2a9d02482.png" alt="Formatting options are highlighted in the text settings panel. The cursor is hovering over the Character spacing slider." /></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">How can I ensure my site’s fonts are consistent across all pages?</h4><div class="collapsible-content"><div>To ensure font consistency, use the Text Theme settings under <strong>Site Design</strong>. Apply the same font style and size to all headings, paragraphs, and other text elements.</div><div><strong>Tip: </strong>Preview your site on different devices to ensure font consistency on both desktop and mobile versions.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why is my text invisible in the editor or on the live site?</h4><div class="collapsible-content"><div>Text may be invisible if its color matches the background. Select the text box and change the text color to a contrasting color.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How can I remove duplicate titles or unwanted text from my site?</h4><div class="collapsible-content"><div>Duplicate titles or unwanted text may be part of a template or design element. Double-click the text box and delete the content. If the duplicate title is part of a background or cannot be edited directly, try hiding it by matching its color to the background.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I fix text alignment issues across different devices?</h4><div class="collapsible-content"><div>To fix text alignment issues, select the text box in the editor and use the alignment options in the toolbar to position the text. Then, switch to the mobile editor to check and adjust the alignment specifically for mobile devices.</div><div><br /></div><div><strong>Tip: </strong>Misaligned text is a common issue when switching between desktop and mobile views. Always preview your site on both views before publishing to ensure consistency.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why can't I see the text on my dropdown menu?</h4><div class="collapsible-content"><div>If your dropdown menu is not displaying correctly, check the text color and background color settings. If the text color matches the background, it may appear invisible. Adjust these settings in the editor under the design options for the menu.</div><div><br /></div><div><strong>Tip: </strong>Test your dropdown menu in both desktop and mobile views to ensure it works properly across all devices.</div></div></div></div>

Direct your visitors to relevant sites, sections, and pages using text links. You can either create clickable URLs or hyperlink an existing piece of text. Tip:To see the your links in action, publish ...

Wix Editor: Adding a Link to Text

Learn how to effectively direct your visitors by creating clickable URLs and hyperlinking text in your Wix site. This article guides you through adding links to other pages or external sites, customizing text links, and managing link functionality. By following these steps, you can enhance navigation and improve user experience, ensuring your visitors easily access relevant content.

<div data-component-type="text"><div>Direct your visitors to relevant sites, sections, and pages using text links. You can either create clickable URLs or hyperlink an existing piece of text. </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 see the your links in action, <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-publishing-your-site" target="">publish your site</a> and click the URL or element from your mobile or tablet. Links do not work from inside the editor.</div>     </div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-clickable-urls" level="3">Creating clickable URLs</h2></div><div data-component-type="text"><div>Adding a clickable URL to your site means that visitors know exactly what page they're opening. You can add URLs to other pages on your site, or to external web addresses.</div></div><div data-component-type="text"><div>URLs that you enter directly into a text box automatically become clickable, which means that you don't need to manually add any links. </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>Clickable URLs can currently only be created with an English language URL.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To create a clickable URL:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://www.wix.com/my-account/site-selector/?title=&amp;buttonText=&amp;actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7B%7BmetaSiteId%7D%7D%3FeditorSessionId%3D%7B%7Besi%7D%7D%26openpanel%3Daddpanel.text" target="_blank">Add text to your site</a>.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>Enter the URL.</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/28/50951937-68da-428a-9dc7-9aa11308e29a/caec4765-70c8-43c4-9e20-d7126141f4f4.gif" alt="GIF showing the URL www.wix.com being entered into a text box in the Editor." /></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>Do not add any other text into the text box, as this will make the URL unclickable</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="hyperlinking-text" level="3">Hyperlinking text</h2></div><div data-component-type="text"><div>As well as creating a clickable URL, you can also add links to regular text content. You can decide exactly what section of text you want to link, and even customize the color. </div></div><div data-component-type="text"><div>Some popular text links include &quot;Visit Our Store&quot;, or &quot;Keep Reading&quot;.</div></div><div data-component-type="heading"><h2 id="" level="4">To hyperlink text:</h2></div><div data-component-type="text"><ol>
  <li>Click the text box in your editor.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/cdff0ec4-6b02-4f12-8539-cf6a845d4dac.png" />.</li>  <li>Select the link type and enter the details.</li>  <li>Choose whether your links opens in a new window, or the current window.</li>  <li>Click <strong>Done</strong>.</li>  <li>(Optional) Change the color of your hyperlinked text:
    <ol>
      <li>Click <strong>Edit Text</strong>.</li>      <li>Highlight the linked text.</li>      <li>Click the <strong>Color</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/04b8f277-0170-4a30-9029-a5497d9e7c83.png" />.</li>      <li>Select a color from the color picker.</li>    </ol>  </li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>To remove the hyperlink underline, highlight the linked text and click the Underline icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/81f52e5f-2235-4cee-9e6b-cd5e23a09c1d.png" />.</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/06/28/9a7ff69e-4acf-4643-94b5-fbe6888cbaf5/aeec54ed-b700-4d94-b00d-f3498b1fdad3.png" alt="The link panel has been opened for a text box in the Editor. A Web Address is the selected link type." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Click a question below to learn more. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I choose which color my hyperlink changes to, once visitors click it?</h4><div class="collapsible-content"><div>No. Currently, it is not possible to change the color of a hyperlink after visitors click it.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">When adding a link I receive an error saying &quot;To add a link, first remove the line break&quot;</h4><div class="collapsible-content"><div>When linking text, you cannot link text that spans over 2 paragraphs if you separated those paragraphs using the<strong> Enter</strong> key. If you attempt to do so, you'll receive an error message telling you to remove the line break.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/07611794-742f-4d53-8c5b-24ba712a6934/2025/01/16/015a2d9a-1c8e-4fa8-b7ef-da1248710c32/985826c9-d961-498b-be17-79f18e2145de.png" /></div><div><br /></div><div>You can resolve this, by adding a line break using <strong>Shift</strong> + <strong>Enter</strong> to create the line space instead of the Enter key.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How can I remove the hyperlink?</h4><div class="collapsible-content"><div>To remove a link, click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/cdff0ec4-6b02-4f12-8539-cf6a845d4dac.png" />, select <strong>None</strong> in the panel, then click <strong>Done</strong>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">If I remove the hyperlink underline, is the hyperlink also removed?</h4><div class="collapsible-content"><div>When the underline is removed, the text remains linked.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What should I do if a text link is broken or leading to a 404 error page?</h4><div class="collapsible-content"><div>Broken links can occur if a page or document has been moved, renamed, or deleted. To fix this, check the links in your text and ensure they are leading to the correct place. If the text is linked to a URL, check the URL carefully. Make sure to publish any changes you make to the links. </div><div><strong>Tip:</strong> Regularly test your site's links to ensure everything is functioning properly.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I add a link to a downloadable file, like a PDF or Word document?</h4><div class="collapsible-content"><div>Yes, you can link text to documents. Make sure you have <a data-composite="true" href="https://support.wix.com/en/article/wix-media-uploading-media-to-the-media-manager" target="">uploaded your file</a> to the Media Manager, then follow the steps above for hyperlinking text and select <strong>Document</strong>.</div><div><br /></div><div><strong>Tip:</strong> Use descriptive text, like &quot;Download Our Brochure,&quot; to make the link clear to your site visitors.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I link text to an external website?</h4><div class="collapsible-content"><div>Certainly. Highlight the text and click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/cdff0ec4-6b02-4f12-8539-cf6a845d4dac.png" />, then select <strong>Web address</strong>. Add the exact URL to the link. Make sure to save and publish your site.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I create a privacy policy or terms of service page and link it to the footer?</h4><div class="collapsible-content"><ol>
  <li>Add a new page in the Wix Editor and name it &quot;Privacy Policy&quot; or &quot;Terms of Service.&quot;</li>  <li>Write the content for the page or copy it from an existing document.</li>  <li>Add a text element to the footer of your site and link it to the newly created page using the steps above for hyperlinking text.</li></ol><div><strong>Tip:</strong> If you add several links to your footer, keep your footer organized by grouping related links together.</div></div></div></div>

Copy and paste text from a Word document or another external source to a text box. 
Transfer text from external sources to save time and maintain document consistency.Copying and pasting text Remove t...

Wix Editor: Copying Text from an External Source

Discover how to efficiently copy and paste text from external sources into a text box in the Wix Editor. Learn to remove text formatting for a seamless transfer and troubleshoot any formatting issues you may encounter. By following these steps, you can save time and maintain consistency in your documents. If you still face challenges, find out how to provide the necessary details for further assistance.

<div data-component-type="text"><div>Copy and paste text from a Word document or another external source to a text box. <br />
Transfer text from external sources to save time and maintain document consistency.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="copying-and-pasting-text" level="3">Copying and pasting text </h2></div><div data-component-type="text"><div>Remove text formatting using the steps below to paste your text efficiently. </div></div><div data-component-type="text"><ol>
  <li>Highlight the relevant text to be copied from the original source.</li>  <li>Press <strong>Ctrl </strong>+ <strong>C </strong>(<strong>Command </strong>+ <strong>C </strong>on Mac).</li>  <li>In the Editor, double-click the text box, click where you want the text to be pasted and press <strong>Ctrl </strong>+ <strong>Shift </strong>+ <strong>V </strong>(<strong>Command </strong>+ <strong>Shift </strong>+ <strong>V</strong> on Mac).</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/05/07/25c384cb-5f00-4cf0-b6ac-9ff4c1ff4c7e/bd3a7f1f-317c-4831-8757-d491a6dc6d9d.gif" alt="Gif of text being pasted into text box. Settings panel with various customization options then appears." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="troubleshooting-formatting-issues-while-copying-text" level="3">Troubleshooting formatting issues while copying text</h2></div><div data-component-type="text"><div>If you are experiencing issues with copying formatted text (bold, underline, italic etc.) from an external source, see our solutions below. </div></div><div data-component-type="text"><ul>
  <li>Disable any browser extensions and try again.</li>  <li>Try changing the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-text-themes#choosing-a-text-theme" target="">text theme</a> to a different one and then revert back to your desired theme. </li>  <li>Click <strong>Reset to Theme </strong>in the<strong> Text Settings </strong>panel.</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/05/07/64ccb4f7-54ba-48b9-85a0-4ebb49bd2a0b/00e4f39f-dda8-4652-933b-506abed2ba44.png" alt="Screenshot of text box selected with Edit Text selected, and text settings panel showing. Reset to theme button highlighted." /></div></div><div data-component-type="heading"><h2 id="" level="4">Still need help?</h2></div><div data-component-type="text"><ul><li>If the text is from an external source, please send us the exact string of text you are attempting to paste (in text) and its font, size and color</li><li>If the text is from your site, please send us the exact string of text you are attempting to paste (in text) and its location on your site</li><li>The location on your site where you are attempting to paste the text</li><li>A <a href="https://support.wix.com/en/article/taking-a-screenshot-using-windows">screenshot</a> or <a href="https://support.wix.com/en/article/adding-a-video-to-a-ticket">video</a> of the issue</li></ul></div><div data-component-type="text"><span style="color: rgb(32, 69, 94); font-family: helvetica-neue, helvetica-neue-latin, helvetica-neue-cyrillic, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Once we have the requested information we can assist you further.</span></div>

Choose from a range of fonts to help you build your Wix site. Personalize your look by using a font that matches the distinct personality of your pages and content. See the table below for a complete ...

Wix Editor: About Fonts Available in Wix

Discover how to choose and personalize fonts for your Wix site to reflect your unique style. This article provides a comprehensive list of available fonts and their sources, ensuring you can find the perfect match for your content. Additionally, learn about the importance of using legible fonts for accessibility, and how to change your font settings easily. Enhance your site's design while considering legal restrictions on font usage in your jurisdiction.

<div data-component-type="text"><div>Choose from a range of fonts to help you build your Wix site. Personalize your look by using a font that matches the distinct personality of your pages and content. See the table below for a complete list of fonts available on Wix, as well as the source for that font type. </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>Some jurisdictions have imposed restrictions of the use of different fonts. Therefore, you need to ensure that you only use the fonts that are allowed according to your jurisdiction's laws and regulations.</div></div></div></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Font </div></th><th><div>Source</div></th></tr></thead><tbody><tr><td><div><strong>Adobe Caslon</strong></div></td><td><div>Adobe</div></td></tr><tr><td><div><strong>Amatic SC</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>American typewriter</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Anton</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Arial</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Arial black</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Asimon</strong></div></td><td><div>AlefAlefAlef</div></td></tr><tr><td><div><strong>Avenida</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Avenir</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Avenir Light</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Barlow Extra Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Barlow Medium</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Basic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Belinda</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Bodoni Poster</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Braggadocio</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Brandon Grotesque</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Bree</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Caudex</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Chelsea Market</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Chips</strong></div></td><td><div>Masterfont</div></td></tr><tr><td><div><strong>Cinzel</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Clarendon LT</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Comic sans MS</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Cookie</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Coquette</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Corben</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Cormorant Garamond Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Cormorant Garamond Semi Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Courier New</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Damion</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Dancing Script Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>DIN Neuzeit Grotesk</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>DIN Next Light</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Droid Serif EB</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Enriqueta</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Forum</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Frank Rühl</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fredericka the Great</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Futura</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Futura Light</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>EB Garamond</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Georgia</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Geotica Four Open</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Helvetica</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Helvetica Bold</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Helvetica Light</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Impact</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>ITC ARECIBO</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Jockey One</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Josefin Slab</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Jura</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Kelly Slab</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Kepler</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Lato Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Libre Baskerville</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Linotype Didot</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Lobster</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Lucida Console</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Lucida Sans Unicode</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Lulo Clean</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Marck Script</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Marzo</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Monoton</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Monotype Baskerville</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Montserrat</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Mr De Haviland</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Museo</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Museo Slab</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Niconne</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Nimbus Sans</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Noticia Text</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Open Sans</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Open Sans Condensed</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Oswald Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Oswald Extra Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Oswald Medium</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Oswald Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Overlock</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Pacifica Condensed</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Palatino Linotype</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Patrick Hand</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Peaches &amp; Cream</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Playfair Display</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Playfair Display Black</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Playfair Display Black Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Play</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Playfair Display Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Playfair Display Bold Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Bold Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Extra Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Extra Light Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins regular Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Semi Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Poppins Semi-Bold Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Proxima Nova</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Questrial</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Raleway Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Raleway Bold Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Raleway Semi Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Raleway semi Bold Italic</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Reklame Script</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Roboto Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Roboto Thin</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Rosewood</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Rozha One</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Sacramento</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Sail</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Sarina</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Signika</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Snell Roundhand</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Soho Condensed</strong></div></td><td><div>Monotype</div></td></tr><tr><td><div><strong>Spinnaker</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Stencil</strong></div></td><td><div>Adobe</div></td></tr><tr><td><div><strong>Suez One</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Tahoma</strong></div></td><td><div>System</div></td></tr><tr><td><div><strong>Verdana</strong></div></td><td><div>Microsoft</div></td></tr><tr><td><div><strong>Work Sans Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Work Sans Extra Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Work Sans Light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Work Sans Semi Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>BM Hanna</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>Dotum</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>FB Blue Gothic</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>FB Cham Blue</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>FB Green</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>FB Neo Gothic</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>FB Plum</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>Gulim</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>Maglun Gothic</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>Nanum Gothic</strong></div></td><td><div>Google-Korean</div></td></tr><tr><td><div><strong>MS Pゴシック</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>MS P明朝</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>MS ゴシック</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>MS 明朝</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>UD明朝</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>UD角ゴ_ラージ</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>クックハンド</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>スキップ</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>スーラ</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>ニューセザンヌ</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>マティス</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>メイリオ</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>ロダン L</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>ロダン M</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>筑紫Aオールド明朝</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>筑紫A丸ゴシック</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>筑紫B丸ゴシック</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>筑紫ゴシック</strong></div></td><td><div>Google-Japanese</div></td></tr><tr><td><div><strong>Kanit</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Prompt</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Mitr</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Sarabun</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>K2D</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Pridi</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Trirong</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Maitree</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Sriracha</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Kodchasan</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Bai Jamjuree</strong></div></td><td><div>Google-Thai</div></td></tr><tr><td><div><strong>Fraunces 120 light</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces 120 Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces 120 Semi-bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces 120 Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces Extra Light (200)</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fahkwang Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fahkwang Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces Regular (400)</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Fraunces Bold (700)</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Syne Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Syne Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Space Grotesk Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Space Grotesk Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Quicksand Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Nobile Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Nobile Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Inknot Antiqua Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Inknot Antiqua Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Caveat Regular</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Caveat Bold</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Marmelad</strong></div></td><td><div>Google</div></td></tr><tr><td><div><strong>Heebo light (300)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Heebo Regular (400)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Heebo medium (500)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Heebo Bold (700)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Rubik light (300)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Rubik regular (400)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Rubik Medium (500)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Rubik Bold (700)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Assistant light (300)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Assistant regular (400)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Assistant Semi bold (600)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Assistant Bold (700)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Karantina light (300)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Karantina regular (400)</strong></div></td><td><div>Google-Hebrew</div></td></tr><tr><td><div><strong>Almoni - New version</strong></div></td><td><div>Alef-Alef-Alef</div></td></tr></tbody></table></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"><ul>
  <li>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-changing-your-text-font" target="">change your font</a> from the text settings panel, or set text themes to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-text-themes" target="">use throughout your site</a>.</li>  <li>The availability of some fonts depends on your site language. Learn more about <a data-composite="true" href="https://support.wix.com/en/article/changing-your-sites-language" target="">changing your site language</a>.</li>  <li>Make your site more accessible by choosing <a data-composite="true" href="https://support.wix.com/en/article/accessibility-fonts-and-readability" target="">clear, legible fonts</a>. This can help visitors who have visual or reading impairments.</li></ul></div></div></div>

Formatting helps you organize your text for clearer communication. There are thousands of possible combinations. You can align, bullet, or number your text to keep it neat. Add italics, underlining, h...

Wix Editor: Formatting Your Text

Discover how to format your text in the Wix Editor to enhance communication and visual appeal. You can align, bullet, and number your text, as well as apply styles like bold, italics, and color. Learn to upload custom fonts and adjust spacing for better readability. By following these formatting tips, you can create a more engaging and organized site that effectively conveys your message.

<div data-component-type="text"><div>Formatting helps you organize your text for clearer communication. There are thousands of possible combinations. You can align, bullet, or number your text to keep it neat. Add italics, underlining, highlighting or bold your text to make it stand out.</div></div><div data-component-type="text"><div>Upload your own fonts, and choose language fonts that are compatible with the language(s) of your site to get your message across exactly as you intended.</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/e29438b7-ce27-4379-bbd7-70c0071bd2e9/cf8024e9-b2ea-4f04-a0ef-3df1e666b4f9.png" alt="A screenshot of the edit text options in the editor." /></div></div><div data-component-type="heading"><h2 id="" level="3">To format your text:</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>Highlight the text you want to format.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>Format your text using the following tools:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Style</h4><div class="collapsible-content"><div>These themes have been created to match your site. You can edit a theme and save the changes so that you can use it again on your site.</div><div><br /></div><div>Click the <strong>Style</strong> drop-down and select a theme or click <strong>Edit Theme</strong> to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-working-with-text-themes" target="">create and save a text theme</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Fonts</h4><div class="collapsible-content"><div>Choose from hundreds of fonts. You can also <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-uploading-and-using-your-own-fonts" target="">upload your own fonts</a> and add <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-language-fonts" target="">language fonts</a>.</div><div>Click the <strong>Font</strong> drop-down and choose a font.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Font size</h4><div class="collapsible-content"><div>Drag the <strong>Font size (px)</strong> slider to increase or decrease your text size. You can also enter values between 6 to 999 px.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Bold, italicize, and underline text</h4><div class="collapsible-content"><div>To format the text, click the <strong>Bold</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/f83aaa1f-81c3-4967-8ace-fda31e48c2a3/562b1474-a7cf-49f6-8d6b-3fbf732b86a3.png" />, <strong>Italics</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/a895e196-72e9-4f55-9d67-02adf415ce01/cd1a2568-760d-4da4-8c51-35b0f851f6cf.png" />, and/or <strong>Underline</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/0a4e1fa5-80a8-4e7c-bda1-cf63a6471c6f/65e4a899-2111-4cdf-b527-a23a34a6bc56.png" />.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Color</h4><div class="collapsible-content"><div>Change the color of the text.</div><div>Click the <strong>Color </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/eaa87b7d-c82a-4fc1-89a1-aec9fc3850cd/b20d4882-8aa3-4858-9907-02f28f6baee9.png" /> and select a color.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Highlight</h4><div class="collapsible-content"><div>Add a color to the background of the text to highlight it.</div><div>Click the <strong>Highlight</strong> icon and select a color <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/07/51b589c9-0a91-40a5-a4f3-55cf39954b9d/7edcbf84-4779-4d97-8ad0-cfc20c60d466.png" />.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Link text</h4><div class="collapsible-content"><div>Hyperlink your text so that when visitors click it, they are taken to the linked destination.</div><div>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/263a91d7-9cb3-4ecd-b10a-c8bd17a2d0ae.jpg" /> to choose the link destination and enter the link details. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-text" target="">Learn more about adding a link to text</a>.</div> </div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Align</h4><div class="collapsible-content"><div>Align your text to the left, center or right, or justify it across the textbox.</div><div>Click the <strong>Alignment</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/b43293cf-a1e4-495a-889b-8555d966cf86.jpg" /> and select an alignment.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Bullets &amp; numbering</h4><div class="collapsible-content"><div>Create a bulleted or numbered list with your text.</div><div>Click the <strong>Bullets &amp; numbering </strong>icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/ca3a79f2-4a3d-4381-a602-92c25c0ec248.jpg" /> to choose the list type.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Indent</h4><div class="collapsible-content"><div>Indent your text.</div><div>Click the<strong> Decrease indent</strong> icon<strong> </strong><img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/d170772a-9516-4c7d-b211-5c5b100b0071.jpg" /> or the <strong>Increase indent</strong> icon<strong> </strong><img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/dfff0e1e-421d-42c9-831e-20dbcaf6fc3d.jpg" /> to change the size of the indent.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Text direction</h4><div class="collapsible-content"><div>Change the direction of your text to be left-to-right or right-to-left.</div><div>Click the <strong>Change text direction</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/10/22/284a568f-b585-481a-bf47-b1607d946203.jpg" />.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Effects</h4><div class="collapsible-content"><div>Add a glow, blur, shadow, outline effects and more.</div><div>Click <strong>Effects</strong> and select an effect for the text.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Character &amp; line spacing</h4><div class="collapsible-content"><div>Change the spacing between the characters and lines in your text box. Click <strong>Character &amp; line spacing</strong> and choose what to do:</div><ul>
  <li><strong>Character spacing</strong>: Set the amount of space between the characters.</li>  <li><strong>Line spacing: </strong>Select <strong>Automatic</strong> to automatically fill the text box or<strong> Custom </strong>to set a specific amount.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Vertical text</h4><div class="collapsible-content"><div>Make your text vertical instead of horizontal. This is mostly useful for languages such as Japanese.</div><div>Click <strong>Vertical text</strong> and click the <strong>Enable vertical text</strong> toggle to flip your text.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">SEO &amp; accessibility</h4><div class="collapsible-content"><div>Use HTML tags to structure your content to improve your site's SEO and assist with accessibility. </div><div>Click <strong>Choose HTML tag</strong> and select one from the<strong> </strong>drop-down.</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="text"><div>Click a question to learn more about formatting text.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I link text that spans over two paragraphs?</h4><div class="collapsible-content"><div>No, you cannot link text that spans over two paragraphs. This means that if you have two words or sentences that are separated by <strong>Enter</strong>, they act as two paragraphs and you cannot link them both at the same time. </div><div>You can link text that spans over two paragraphs if you use <strong>Shift</strong> + <strong>Enter</strong> to create the line space instead of <strong>Enter</strong>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How can I remove the underline from hyperlinked text?</h4><div class="collapsible-content"><div>You can remove the underline of hyperlinked text by selecting the linked text and clicking the <strong>Underline</strong> icon.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What are the usage restrictions for fonts in Wix?</h4><div class="collapsible-content"><ul>
  <li>View the <a data-composite="true" href="https://support.wix.com/en/article/about-fonts-available-in-wix" target="">complete list of fonts</a> available in the editor that are licensed for use within your Wix site. Note that these fonts are licensed for digital use only within your Wix site. For more information, see the <a data-composite="true" href="http://www.wix.com/about/terms-of-use" target="">Wix Terms of Use</a>.</li>  <li>You cannot download the fonts to use, but you may find the open-source versions and install them to your computer. </li>  <li>Be careful with fonts found in external URLs. These are not owned by Wix so you need to contact the author for permission to use them.</li></ul></div></div></div>

Collapsible text is a great option if you have a lot of information that you want to display. Parts of the text are hidden, and visitors can view the full text by clicking an expand button, or a link ...

Wix Editor: Adding and Setting Up Collapsible Text

Discover how to add and customize collapsible text on your site to effectively manage large amounts of information. This feature allows you to hide parts of your text, enabling visitors to expand and view the full content with a click. Customize the layout, button text, and link options to enhance user experience, making your site more engaging and organized.

<div data-component-type="text"><div>Collapsible text is a great option if you have a lot of information that you want to display. Parts of the text are hidden, and visitors can view the full text by clicking an expand button, or a link to the full body of text.</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/09/12/2160d703-9339-42a1-8c38-a75ac5c52bf1/9e47a262-29af-4556-a715-8b4917799f85.gif" alt="A GIF showing text being expanded and collapsed on a Wix live site." /></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 attach collapsible text to a strip, column, or container, and choose to expand it with a button, the entire container / column / strip expands with the text when visitors click it. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-collapsible-text" level="3">Step 1 | Add collapsible text</h2></div><div data-component-type="text"><div>The first step is to add a collapsible text box to your site. There are a range of styles available, with different fonts, number of lines, and other settings. </div></div><div data-component-type="heading"><h2 id="" level="4">To add collapsible text to your site:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>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>Text</strong>.</li>  <li>Click <strong>Collapsible Text</strong>.</li>  <li>Click and drag your chosen text box to add it to your site.</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/1fe526ec-cdb7-4c87-8364-0828e4837086/0feb9f89-dc42-488a-bb02-35bd70383a1d.png" alt="The Add Elements panel in the Editor. The cursor is hovering over a collapsible text preset." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-adjust-the-layout-of-the-collapsible-text" level="3">Step 2 | Adjust the layout of the collapsible text</h2></div><div data-component-type="text"><div>After adding the text box to your page, choose how your visitors can read the full body of text. Add a button that opens the full text on the current page, or a link that directs your visitors to the full piece.</div></div><div data-component-type="text"><div>You can also set the alignment, spacing, and number of lines that appear before a visitor needs to click it.</div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the text's layout:</h2></div><div data-component-type="text"><ol>
  <li>Click the <strong>Layout</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/_o63TCTCRJLLQGXjE3A037_Ewcw6NyoTwOCmtaYSCkiQ-u2XW00xPpyw3PUuq7gyYimF_Uw3SHZ5zdeCUAThh_PyIweKwILGTFEOkwv8aK-0mOQJNLRHa9B_LZJdEADO0BQvJb8y" /> on the text box.</li>  <li>Customize the layout using the options:
    <ul>
      <li><strong>Choose how the text appears: </strong>Choose how the entire text is displayed: 
        <ul>
          <li><strong>Collapsed:</strong> A text preview is displayed, and visitors need to click an expand button or a link to read the full body of text.</li>          <li><strong>Show all:</strong> The entire text piece is displayed on your site, and is not collapsed.</li>        </ul>      </li>      <li><strong>Number of lines displayed: </strong>Choose how many lines of text are displayed in the preview.</li>      <li><strong>Button alignment: </strong>Set the alignment of the expand or link button.</li>      <li><strong>Spacing between text and button:</strong> Increase or decrease the spacing.</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/11/29/3a67a7ac-6a39-492a-a360-47ad16d28a61/d09293a3-0507-4298-a199-4db711b42d0b.png" alt="The collapsible text layout panel. The cursor is hovering over the button alignment options." /></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 options displayed depend on whether you choose to collapse or display all of the text.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-type-and-set-up-your-text" level="3">Step 3 | Type and set up your text</h2></div><div data-component-type="text"><div>After customizing the way your collapsible text box looks and behaves, enter the full piece of text. </div><div>Edit the text on the expand and collapse buttons, or set up the link that takes your visitors to read more.  </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>Collapsible text boxes can hold up to 120,000 characters, so they're great for displaying long bodies of text.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To edit and set up your text:</h2></div><div data-component-type="text"><ol>
  <li>Click the collapsible text box.</li>  <li>Click <strong>Change Text</strong>.</li>  <li>Type or paste your chosen text into the box under <strong>Change Text</strong>.</li>  <li><strong>What does the button do?:</strong> Set up how visitors view the full text, and customize it with the options:
    <ul>
      <li><strong>Expand: </strong>Visitors can view the full piece of text by clicking an expand button:
        <ul>
          <li><strong>Expand button text:</strong> Enter the text shown on the expand button, e.g. &quot;Read More&quot;.</li>          <li><strong>Collapse button text:</strong> Enter the text shown on the collapse button, e.g. &quot;Read Less&quot;.</li>        </ul>      </li>      <li><strong>Link:</strong> Visitors can view the full piece of text by clicking a link:
        <ul>
          <li><strong>Link button text:</strong> Enter the text for the link, e.g. &quot;Click to read more&quot;. </li>          <li><strong>Links to: </strong>Enter the details for the link to the full piece of text.</li>        </ul>      </li>    </ul>  </li>  <li>(Optional) Add a description, and select your text's HTML tag from the dropdown menu under <strong>SEO &amp; accessibility</strong> to define its text type (a heading, paragraph, etc). <a data-composite="true" href="https://support.wix.com/en/article/accessibility-preparing-your-site-structure" target="">Learn more about defining your text</a></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/09/12/6a2bbce7-eb1d-4541-b0cc-8fa7d8e5eb97/39c0b139-3dc1-46e6-b24b-b263c700c17d.png" alt="The collapsible text settings panel. The cursor is hovering over the text field." /></div></div>

Once you've added and set up collapsible text, you can customize the design and settings to match your site. Adjust the font, formatting, and spacing to suit your site's look and alignment, and to mat...

Wix Editor: Designing Your Collapsible Text

Customize your collapsible text in the Wix Editor to align with your site's design and branding. Learn how to adjust font styles, sizes, formatting, and spacing for both the text and the expand/collapse buttons. This article guides you through personalizing the appearance of your text and buttons, ensuring they enhance your site's overall look and user experience.

<div data-component-type="text"><div>Once you've <a data-composite="true" href="https://support.wix.com/en/article/adding-and-setting-up-collapsible-text" target="">added and set up collapsible text</a>, you can customize the design and settings to match your site. Adjust the font, formatting, and spacing to suit your site's look and alignment, and to match your site and brand.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-design-of-your-text" level="3">Customizing the design of your text</h2></div><div data-component-type="text"><div>After setting up your collapsible text, you can customize the design including the formatting, alignment, and fonts.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize the design of your text:</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 text box.</li>  <li>Click <strong>Change Design</strong>.</li>  <li>Select <strong>Text</strong> from the dropdown menu, and customize it with the following options:
    <ul>
      <li><strong>Style:</strong> Select the text theme from the dropdown menu to quickly apply a font and size to your text.</li>      <li><strong>Fonts:</strong> Choose how your text looks from the dropdown menu.</li>      <li><strong>Font size:</strong> Make your text as small or as big as you want.</li>      <li><strong>Formatting:</strong> Further customize your text by applying settings such as bold and italic. You can also choose a text, highlight, and outline color.</li>      <li><strong>Alignment:</strong> Change how your text is aligned, and the direction it goes in. </li>      <li><strong>Character and line spacing:</strong> Make the spacing between your characters and lines smaller or more prominent.</li>      <li><strong>Shadows: </strong>Add a shadow to give your text a 3D effect. You can customize different aspects of the shadow to make it more or less dramatic.</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/11/04/2e45e4b8-0777-43c7-a26a-ecc1ce3266f3/37f4b4b0-ddd8-4023-abd9-7313b29224be.png" alt="The design panel of collapsible text. The cursor is hovering over the font dropdown menu" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-design-of-the-expand-link-button" level="3">Customizing the design of the expand / link button </h2></div><div data-component-type="text"><div>If you chose to collapse the text, you can design the expand and collapse buttons. If your text goes to a link, you can also change the link button to look exactly as you want. </div><div><br /></div><div>There are 2 states that you can customize:</div></div><div data-component-type="text"><ul>
  <li><strong>Regular:</strong> How the button looks before a visitor interacts it.</li>  <li><strong>Hover:</strong> How the button looks when a visitor hovers their cursor over it.</li></ul></div><div data-component-type="heading"><h2 id="" level="4">To customize your text box button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the text box.</li>  <li>Click <strong>Change Design</strong>.</li>  <li>Select<strong> Expand/collapse button </strong>from the dropdown menu.</li>  <li>Click either the <strong>Regular</strong> or<strong> Hover</strong> tab to customize the design for each state with the following settings:
    <ul>
      <li><strong>Themes:</strong> Select the text theme from the dropdown menu to quickly apply a font and size to your button.</li>      <li><strong>Fonts:</strong> Choose how the text looks from the dropdown menu.</li>      <li><strong>Font size:</strong> Make the button text as small or as big as you want.</li>      <li><strong>Formatting:</strong> Further customize your button by applying settings such as bold and italic to its text. You can also choose a text, highlight, and outline color.</li>      <li><strong>Alignment:</strong> Change how the text is aligned, and the direction it goes in.</li>      <li><strong>Character and line spacing:</strong> Make the spacing between your characters and lines smaller or more prominent.</li>      <li><strong>Shadows: </strong>Add a shadow to give your button a 3D effect. You can customize different aspects of the shadow to make it more or less dramatic.</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/11/04/dbdcf6dd-8940-4810-85be-d4d974a1c341/8193140b-9d82-4ead-b3d8-194009164249.png" alt="The design panel of collapsible text. The cursor is hovering over the font size slider" /></div></div>

Use AI (Artificial Intelligence) to generate text that is relevant to your brand or business needs. Enter important information and let the AI do the rest - so you can save time, without needing to co...

Wix Editor: Creating AI Generated Text

Discover how to leverage AI to generate tailored text for your brand or business needs, saving you time while maintaining quality content. Learn to add text elements in your editor, generate relevant content using AI tools, and refine it to match your brand voice. This article guides you through the process of creating engaging text that enhances your site, ensuring it aligns with your brand's tone and Wix's guidelines.

<div data-component-type="text"><div>Use AI (Artificial Intelligence) to generate text that is relevant to your brand or business needs. Enter important information and let the AI do the rest - so you can save time, without needing to compromise on content.</div></div><div data-component-type="text"><div>After you've generated and chosen your text, you can make additional edits to fit your brand voice and site look. </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 use the <a data-composite="true" href="https://www.wix.com/ai-website-builder" target="">AI Website Builder</a> to create a custom dashboard and site, minimize build time and maximize your online potential. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-text-to-your-page" level="3">Step 1 | Add text to your page</h2></div><div data-component-type="text"><div>To get started, add a text element to your page. You can generate text from themed, title, and paragraph text boxes, so choose the best one for your content and design needs.</div></div><div data-component-type="heading"><h2 id="" level="4">To add text:</h2></div><div data-component-type="text"><ol>
  <li>Open the relevant page in your editor.</li>  <li>Click <strong>Add Elements</strong> <img data-composite="true" src="https://lh6.googleusercontent.com/wxyz6iTTXelz2xXwuasGwpKeKXJ48QqQbsqnvNHXPPFhUoFwEpbyvVnUAUuu5P8Lb49aWypUXNJKNXLtraRABJlDtAArfyAtS2Q098MAGk2dUow8dG6qo4arZexOqrvH0MydkF_f3lmFOB_hYV8O_KKJqhaDEm8mj3NJ6n9VIGrR5rUn20dQN0moP1cm" />.</li>  <li>Select <strong>Text</strong>.</li>  <li>Click and drag your chosen text 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/06/19/a4aaeb78-32f7-44e9-90ae-ab8b077fa53c/7617c730-27ec-4491-81ed-51af0d095d1f.png" alt="The Add Elements panel in the Editor. The Text tab is highlighted, and the cursor is hovering over a paragraph." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-generate-your-ai-text" level="3">Step 2 | Generate your AI text</h2></div><div data-component-type="text"><div>After you've added text to your page, use the panel to generate its content. You can input details such as the business type, and enter important terms to make sure you get the most relevant options for your brand.</div></div><div data-component-type="heading"><h2 id="" level="4">To generate AI text:</h2></div><div data-component-type="text"><ol>
  <li>Click the text box in your editor.</li>  <li>Click the <strong>AI Tools</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/09/13/b0658bf7-5a1c-4f41-858e-edcc7d15ccfc/9ad1aa8a-cf89-47dd-a599-003b015e7dae.png" /> icon.</li>  <li>Choose from the following options:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Create new text with AI</h4><div class="collapsible-content"><div>Use AI to generate fresh content. Describe the text you need, specify the section, and let AI generate a paragraph, title, or tagline tailored to your request.<strong><br />
</strong></div><ol>
  <li>Click <strong>Generate new text</strong>.</li>  <li>Use the text box to describe the text you want AI to create. You can make your prompt more specific using the following options:
    <ul>
      <li><strong>Write a paragraph for:</strong> Select the relevant section from the dropdown.</li>      <li><strong>Title: </strong>Click this option if the AI-generated text should be a title. This adds the specific instruction to your prompt.  </li>      <li><strong>Tagline: </strong>Click this option if the AI-generated text should be a tagline (i.e. a brief sentence about your site / section). This adds the specific instruction to your prompt.</li>    </ul>  </li>  <li>Click the <strong>Submit </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/01/ff06a5df-4c35-4d3d-8ff1-df3cfcaf9523/9d6d7bd8-5ecf-4f27-9399-0222c4a71d2e.png" /> icon.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/01/5781abfd-a51e-48f4-b4a5-61e4ece00d06/b449653a-bb84-4b14-a720-831e2e332557.png" /></li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Improve existing text with AI</h4><div class="collapsible-content"><div>Refine your text with AI by selecting from the options below to rewrite, shorten, or adjust the tone. You can also rephrase, translate, or expand the AI-generated text, ensuring it's just right for your needs.<br />
</div><ol>
  <li>Choose from the following options: 
    <ul>
      <li><strong>Rewrite text</strong></li>      <li><strong>Make shorter</strong></li>      <li><strong>Change tone to enthusiastic</strong></li>      <li><strong>Fix grammar and spelling</strong></li>      <li><strong>Edit with Text Creator </strong></li>    </ul>  </li>  <li>(Optional) Adjust the AI-suggested text using the following options:
    <ul>
      <li><strong>Rephrase: </strong>Reword the text.</li>      <li><strong>Make shorter:</strong> Shorten the text.</li>      <li><strong>Change tone:</strong> Use the dropdown to choose from professional, enthusiastic, casual confident or funny tone. </li>      <li><strong>Translate to:</strong> Use the dropdown to choose one of 15 languages to translate the text to.<br />
<strong>Tip: </strong>Click<strong> See More</strong> to choose from additional options such as <strong>make longer</strong>, <strong>write as bullets </strong>and <strong>simplify language</strong>. You can also change the number of options AI generates by clicking the<strong> Generate options </strong>drop-down.</li>    </ul>  </li>  <li>Click <strong>Use text</strong>, or the <strong>Copy text</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/01/301b9d4b-6b0a-4fb1-a0b5-a63400d61f47/daf12ede-b569-4ecc-bb35-c74dded00968.png" /> to use it elsewhere.</li></ol><div><br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/01/648330d7-2756-49f0-b252-0313a311e078/90d1a06a-1ac0-4e57-9dac-ebdf43516e4e.png" /></div><div><br /></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>Click <strong>Default tone </strong>to edit site name, site type and tone of voice being used by AI. You have the option to continue the chat as long as needed, allowing the AI to generate additional text until you are satisfied.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-review-and-adjust-your-text" level="3">Step 3 | Review and adjust your text</h2></div><div data-component-type="text"><div>Review your AI generated text to ensure it has all of the details you want, and that it suits your brand's tone. Depending on your needs, you can manually edit the content to ensure that your visitors have the most engaging and relevant information.</div></div><div data-component-type="heading"><h2 id="" level="4">To edit generated text:</h2></div><div data-component-type="text"><ol>
  <li>Click the text box in your editor.</li>  <li>Click <strong>Edit Text</strong>.</li>  <li>Make the relevant changes to the text.</li>  <li>Click anywhere outside the text box to save the 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/21/1f14862a-87a2-40f3-96ae-c1d2345e430b/57cda935-3044-49fc-9e35-732ad58fda78.png" alt="The Edit Text panel in the Wix Editor has been opened. A section of the text has been highlighted by the cursor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important to know:</div><div class="info-content"><div>You need to check and edit the text where necessary before you publish the changes to ensure:</div><ul>
  <li>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>.</li>  <li>That you have all the necessary rights and licenses in order to use and publish this content.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="frequently-asked-questions-faqs" level="3">Frequently asked questions (FAQs)</h2></div><div data-component-type="text"><div>Select an option below to learn more about AI generated text.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Does the panel save my settings?</h4><div class="collapsible-content"><div>Absolutely. Once you've generated text, the business type and business name fields are automatically filled out if you choose to create more.  </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I customize generated text?</h4><div class="collapsible-content"><div>Yes. All of the customization options that you know from regular text boxes are available for AI generated text. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">Learn how to customize text</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What happened to the 'Get Text Ideas' button?</h4><div class="collapsible-content"><div>We've replaced the Text Ideas feature with this advanced tool to make it even easier for you to build your site's content.</div></div></div></div>

Currently, Wix does not support adding a scroll bar to text boxes due to their impact on site design and function. Tell me moreScroll bars in text boxes are not supported due to the following reasons:...

Wix Editor Request: Scroll Bar on Text Boxes

Discover why Wix does not support adding scroll bars to text boxes and the implications for your site's design and functionality. Learn about the challenges scroll bars pose on touch devices and the recommendation to maintain a single site scroll bar. Explore alternative solutions using CSS for HTML elements, while noting that Wix cannot support external HTML codes. Your feedback is valued as we continue to enhance our offerings.

<div data-component-type="text"><div>Currently, Wix does not support adding a scroll bar to text boxes due to their impact on site design and function. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Tell me more</h4><div class="collapsible-content"><div>Scroll bars in text boxes are not supported due to the following reasons:</div><ul>
  <li>It isn't advised in modern web design.</li>  <li>They do not work well on touch devices (such as iPads and iPhones).</li>  <li>It is advisable to have only one scroll bar on your site, and it should be the site scroll-bar.</li></ul></div></div></div><div data-component-type="text"><div>As an alternative, you can add CSS to a <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-embeds-and-codes-on-your-site" target="">HTML element</a> on your site. <a data-composite="true" href="https://www.w3schools.com/cssref/tryit.php?filename=trycss_overflow" target="">See tutorial available at w3schools</a>.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">You should know:</div><div class="info-content"><ul>
  <li>We are unable to provide support for external HTML codes that are added to Wix sites as the codes have not been tested by Wix.</li>  <li>If your site content is longer than your site visitor's viewport height, the browser automatically adds vertical scrollbars.</li></ul></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, superscript and subscript text are not supported in the Wix Editor.As an alternative, you can change the size of the text that you'd like to appear as subscript or superscript, or create se...

Wix Editor Request: Superscript or Subscript Text

Learn how to create the appearance of superscript and subscript text in the Wix Editor by adjusting text size and grouping separate text boxes. This workaround allows you to position your text effectively, making it look like superscript or subscript. Discover how to enhance your text presentation while we continue to improve our features based on your feedback.

<div data-component-type="text"><div>Currently, superscript and subscript text are not supported in the Wix Editor.</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-formatting-your-text" target="">change the size</a> of the text that you'd like to appear as subscript or superscript, or create separate text boxes and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-grouping-and-ungrouping-elements" target="">group them together</a>.</div></div><div data-component-type="heading"><h2 id="" level="4">To add and group separate text boxes:</h2></div><div data-component-type="text"><ol>
  <li>Open the relevant page in the Editor.</li>  <li>Add a separate text element for your superscript / subscript text, and enter the text you want.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">Adjust the size of the text</a>.</li>  <li>Position the text box so it appears as subscript or superscript.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-grouping-and-ungrouping-elements" target="">Group the text boxes together</a> so they act as a single element. </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/05/31/7c3a0990-8aff-4573-833b-d03391023bc2/e6ecca57-7ed1-49ae-b6e5-a4677312e43b.png" alt="Text boxes in the Wix Editor that are being grouped together. The boxes spell out H20." /></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 a drop-down feature to a text box which your visitors can click to select an option.In the meantime you can use the selection user input element to add a drop-down...

Wix Editor Request: A Drop-Down Feature in a Text Box

Discover how to use the selection user input element to create a drop-down menu on your site, as adding a drop-down feature directly to a text box is currently not possible. Your feedback is valuable to us as we continuously work to enhance our products.

<div data-component-type="text"><p>Currently, it is not possible to add a drop-down feature to a text box which your visitors can click to select an option.</p></div><div data-component-type="text"><div>In the meantime you can use the selection user input element to add a drop-down to your site. <a href="https://support.wix.com/en/article/cms-setting-up-a-custom-form-using-dropdown-input-elements">Learn More</a></div></div><div data-component-type="text"><p>We are always working to update and improve our products, and your feedback is hugely appreciated.</p></div>

Currently, it is not possible to add images or videos inside text boxes, and make the text wrap around the image / video.However, there are a number of alternative features available that you can use ...

Wix Editor Request: Adding Images Inside Text Boxes (Text Wrapping)

Discover alternative ways to display text alongside images or videos on your site, as adding them directly inside text boxes is not currently supported. Learn to use the repeater element for consistent layouts, utilize the Wix Pro Gallery for diverse displays, or split your text into multiple boxes for manual arrangement. These methods help maintain alignment and layout integrity across different browsers. Your feedback is valuable as we continue to enhance our features.

<div data-component-type="text"><div>Currently, it is not possible to add images or videos inside text boxes, and make the text wrap around the image / video.</div></div><div data-component-type="text"><div>However, there are a number of alternative features available that you can use to display text with images on your site.</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>We do not recommend adding images/videos on top of text boxes, as this can cause alignment / layout issues on your pages in different browsers.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To display images with text:</h2></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-managing-repeaters-lists-grids" target="">Use the repeater element</a> to create a layout with text and images that you want to use several times on your site.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-changing-the-layout-settings" target="">Add the Wix Pro Gallery</a> to combine text and images with a variety of displays. </li>  <li>Split your text into several text boxes, and manually arrange them around the image or video.</li></ul></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 a tooltip to a text box.We are always working to update and improve our products, and your feedback is hugely appreciated. 

Wix Editor Request: Adding Tooltips to a Text Box

Currently, you cannot add a tooltip to a text box in Wix. However, the team is continuously working on updates and improvements, and your feedback is valuable in shaping future enhancements.

<div data-component-type="text"><div>Currently, it is not possible to add a tooltip to a text box.</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>

Important:This feature is not yet available to all users.We are pleased to announce that you can now add collapsible text boxes to your site. Collapsible text allows you to display content on your pag...

Wix Editor Request: Expandable Text Boxes with a Read More Link

Discover how to enhance your site by adding collapsible text boxes, allowing you to display content neatly without disrupting your layout. This feature lets visitors preview text and expand it for more details, improving user experience. Get started with the setup process to make your content more engaging and organized.

<div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>This feature is not yet available to all users.</div></div></div></div><div data-component-type="text"><div>We are pleased to announce that you can now add collapsible text boxes to your site. </div></div><div data-component-type="text"><div>Collapsible text allows you to display content on your page without compromising your site’s layout and alignment. A preview of your text is displayed, and visitors can click a link or an expand label to view the whole body of text. <a data-composite="true" href="https://support.wix.com/en/article/adding-and-setting-up-collapsible-text" target="">Learn how to add and set up collapsible text on your site</a> </div></div>

Currently, it is not possible to manually customize the spacing between paragraphs in a single text field.As an alternative, you can add each paragraph separately, and adjust the spacing between them....

Wix Editor Request: Customizing the Spacing Between Paragraphs

Discover how to create separate paragraphs in your text field by adding individual text elements in the Wix Editor. Adjust the spacing between them to achieve your desired layout. While manual paragraph spacing isn't currently available, this method allows you to customize your text presentation effectively. Plus, learn about customizing line spacing using the Edit Text panel for a polished look.

<div data-component-type="text"><div>Currently, it is not possible to manually customize the spacing between paragraphs in a single text field.</div></div><div data-component-type="text"><div>As an alternative, you can add each paragraph separately, and adjust the spacing between them.</div></div><div data-component-type="heading"><h2 id="" level="4">To add separate paragraphs and adjust the spacing:</h2></div><div data-component-type="text"><ol>
  <li>Open the relevant page in the Editor.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-editing-text" target="">Add a text element</a> for each paragraph.</li>  <li>Enter your text into the fields.</li>  <li>Drag the text elements into place on the page, leaving as much space in between as you need.</li></ol></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 customize your text's line spacing using <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-formatting-your-text" target="">the Edit Text panel</a>. </div></div></div></div><div data-component-type="text"><p>We are always working to update and improve our products, and your feedback is hugely appreciated.</p></div>

Currently, it is not possible to change the background or border of a text box. However, you can place your text in a colored container box to achieve a similar effect.To place text in a colored conta...

Wix Editor Request: Changing the Background and Borders of a Text Box

Discover how to create a visually appealing text box effect by placing your text in a colored container box. Learn to add a container, customize its background and borders, and easily drag your text into it. This workaround allows you to enhance your site's design while we continue to improve our features based on your feedback.

<div data-component-type="text"><div>Currently, it is not possible to change the background or border of a text box. However, you can place your text in a colored container box to achieve a similar effect.</div></div><div data-component-type="heading"><h2 id="" level="3">To place text in a colored container box:</h2></div><div data-component-type="text"><ol>
  <li>Add a <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-box" target="">container box</a> to your site.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-box#customizing-your-box-design" target="">Customize</a> the background and borders of the container box.</li>  <li>Click and drag the text box into the container box.</li></ol></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, an opacity feature for text elements is not supported.
 We are always working to update and improve our products, and your feedback is hugely appreciated.

Wix Editor Request: Changing Text Opacity

Discover the current limitations regarding the opacity feature for text elements in Wix. While this feature is not yet supported, your feedback is valuable as it helps us enhance our products. Stay tuned for updates and improvements!

<div data-component-type="text"><p>Currently, an opacity feature for text elements is not supported.
 <br /></p></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 strikethrough formatting to text.Tip:You can add the HTML element, enter your text and apply the strikethrough tag to the relevant section of text. We are always w...

Wix Editor Request: Strikethrough Formatting for Text

Discover how to apply strikethrough formatting to your text using the HTML element. While direct formatting isn't currently available, you can enter your text and use the strikethrough tag for the desired effect. Your feedback is valuable as we continue to enhance our products.

<div data-component-type="text"><div>Currently, it is not possible to add strikethrough formatting to text.</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 <a href="https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget">add the HTML element</a>, enter your text and apply the strikethrough tag to the relevant section of text. </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, right-to-left text is supported in many areas of the Editor, including the text element. However, in some areas of the Editor such as in the Organize Images panel for galleries, right-to-le...

Wix Editor Request: Right-to-Left Text Support in all Editor Components

Discover how to work with right-to-left text in the Wix Editor. While many areas, including the text element, support this feature, some sections like the Organize Images panel may not display it correctly. Stay informed about ongoing updates and improvements, and know that your feedback is valuable in enhancing your experience.

<div data-component-type="text"><div>Currently, right-to-left text is supported in many areas of the Editor, including the text element. However, in some areas of the Editor such as in the Organize Images panel for galleries, right-to-left text is not supported and may not be displayed correctly on your site.</div></div><div data-component-type="text"><span style="color: rgb(32, 69, 94); font-family: helvetica-neue, helvetica-neue-latin, helvetica-neue-cyrillic, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">We are always working to update and improve our products, and your feedback is hugely appreciated.</span></div>

Buttons are elements your visitors use to interact with your site. You can link them to a variety of locations such as your site pages, external sites, or even documents. Depending on the button type ...

Wix Editor: About Buttons

Create engaging buttons on your site to enhance visitor interaction and guide them to important content. This article explores various button types available in the Wix Editor, including text & icon, icon, image, document, iTunes, payment, and PayPal buttons. Learn how to customize their design, link them to different locations, and utilize advanced features for a tailored user experience. By following these tips, you can effectively encourage visitors to explore your brand.

<div data-component-type="text"><div>Buttons are elements your visitors use to interact with your site. You can link them to a variety of locations such as your site pages, external sites, or even documents. Depending on the button type you choose, there are also a range of customization options available.</div></div><div data-component-type="text"><div>Start creating your buttons to make clear call to actions, and encourage your site visitors to explore what you or your brand has to offer.</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/01/c20917f2-cae3-4dcb-b33d-deb98c27fc90/1b038f70-8e25-4ce2-a8c4-903ad801e936.png" alt="A variety of buttons with different designs on a live site with a white background." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="find-a-button-for-your-needs" level="3">Find a button for your needs</h2></div><div data-component-type="text"><div>In the editor, there are a variety of button types available for all of your site and business needs, so you can create a smooth interactive experience for your visitors. </div></div><div data-component-type="text"><div>The buttons have a range of different uses and customization options to ensure that you can build a functional, sophisticated site without compromising on design. </div></div><div data-component-type="text"><div><strong>You can add the following buttons in the editor:</strong></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Text &amp; icon buttons</h4><div class="collapsible-content"><div>Text &amp; icon buttons can contain both text and a vector image icon, and you can choose whether to display the text, icon, or both. These buttons are useful for directing visitors to other pages, information, or sites. A popular use for text &amp; icon buttons is to lead visitors to your services or store pages. </div><div><br /></div><div>There are a range of styles and colors to add, so you don't need to choose between function and design. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-text-icon-button" target="">Learn how to add and set up your text &amp; icon button</a></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/06/01/144974f7-186a-4c4e-9cc8-4c99be3587e9/4baa4033-dd12-4fe4-9a71-b30c8f2ea1e2.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Icon buttons</h4><div class="collapsible-content"><div>Icon buttons are a fun, minimalist way to encourage visitors to interact with your site. There are hundreds of shapes and icons available in a variety of categories, so you have everything you need to create a clear call to action. </div><div><br /></div><div>Icon buttons are often used to direct visitors to your contact details and information.  </div><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-an-icon-button" target="">Learn how to add and set up an icon button on your site</a></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/06/01/44ca7c13-61d4-4211-aa43-f5f711c34bc0/437565dc-b065-4e13-b120-33e2bdce4080.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Image buttons</h4><div class="collapsible-content"><div>Image buttons are an eye-catching way to direct your visitors to the information they need. They display unique effects when your visitors hover over them, which makes interacting with your site a fun, intriguing experience. </div><div><br /></div><div>Like text &amp; icon buttons, they're useful for directing visitors to site pages and links. </div><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-an-image-button" target="">Learn how to add and set up an image button</a></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/06/01/51b71a8d-a13a-464f-baf9-f58efd03b8d6/47d5b162-11d2-4a30-b043-4516ec57076a.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Document buttons</h4><div class="collapsible-content"><div>Add and set up a document button to allow visitors to access and obtain files from your site. Document buttons make it easy for your visitors to download important information directly to their devices, which they can then send back to your or your business if needed. For example, you can link the button to an application form or contract. </div><div><br /></div><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-document-button" target="">Learn how to add and set up a document button on your site</a></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/06/01/b57547ab-405f-4f43-925d-88c2648d9ea4/37b5e351-4585-4136-bc57-fbf2e539874e.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">iTunes buttons</h4><div class="collapsible-content"><div>Use iTunes buttons to share your favorite music with your visitors. You set up the button by adding a iTunes link, so visitors are taken directly to the relevant playlist. These buttons are great for showcasing your own music, or even just the songs you love. </div><div><br /></div><div><a data-composite="true" href="https://support.wix.com/en/article/adding-music-from-itunes" target="">Learn how to add and set up an iTunes button</a></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/06/01/379cfcf5-a76e-48e7-b311-555476a2a629/2d973dd9-ab27-4a9a-a623-d964ce84dd8c.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Payment buttons</h4><div class="collapsible-content"><div>Payment buttons provide a smooth express checkout experience for your visitors. Connect the button to your site's payment methods to begin selling single items across your site, so your visitors can buy what they need in just a few clicks. </div><div><br /></div><div><a data-composite="true" href="https://support.wix.com/en/article/adding-and-setting-up-a-pay-button" target="">Learn how to add and set up your pay button</a></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/06/01/9c56c108-3bbe-4e58-b37f-f393b8099e20/716fa5e7-3b8b-429d-b195-d8549ba287e6.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">PayPal buttons</h4><div class="collapsible-content"><div>PayPal buttons are a quick and useful way to accept payments on your site. You can add a Buy Now button to sell an item to visitors, or a Donate button to collect donations to you or your brand's organization. </div><div><br /></div><div>Since you connect the button directly to your PayPal account, you need to set up the button in the editor to begin receiving payments. </div><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-paypal-buttons" target="">Learn more about PayPal buttons</a></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/06/01/e0208a7b-a0ff-4910-8980-43e9c89ef6a5/0159b019-b63a-4c6c-af64-2a80b2c4e419.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="link-your-buttons-to-wherever-you-want" level="3">Link your buttons to wherever you want </h2></div><div data-component-type="text"><div>Add a link to your button to direct your site visitors to the relevant location. You can link to a variety different places and options, depending on your button type and site needs. The types of links you can add to a button are:</div></div><div data-component-type="text"><ul>
  <li><strong>Page:</strong> Direct your visitors to a different page on your site.</li>  <li><strong>Web address:</strong> Link your button to an external URL to bring visitors to another site.</li>  <li><strong>Anchor:</strong> Link the button to an anchor on your site. When visitors click it, they are brought to the relevant page and anchor.</li>  <li><strong>Top / bottom of page:</strong> When a visitor clicks this, they are brought to the top or bottom of the page they are currently on. </li>  <li><strong>Document:</strong> Link the button to a file you've uploaded to your site.</li>  <li><strong>Email:</strong> Connect the button to your email address, so visitors can contact you directly from their browser or device.</li>  <li><strong>Phone number:</strong> Link a button to your phone number to allow mobile or tablet visitors to call you instantly. Desktop visitors are taken to a calling app, such as FaceTime.</li>  <li><strong>Popup:</strong> Link the button to your chosen popup on your site. </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>Depending on the button type, you may not see the option to add a link. For example, document buttons can only be connected to files on your site.</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/2025/10/31/ce499483-4990-4e31-b7d5-40d002fd60e5/9cbcc82d-dc40-4cd2-96b9-69db8463b347.png" alt="what do you want to link to panel in wix" /></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><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button" target="">Learn how to add a link to a button</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="design-your-buttons-to-match-your-site" level="3">Design your buttons to match your site </h2></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons" target="">Customize your button</a> in the editor by clicking the <strong>Design</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/hpS1LTFjz0P4StKIMQDCHK16YB8DycsugW-V5Sc5Uphxb6SzzmKDdvOSzq2pwFwxiiwyDYl90oRsqVSVu5SeahyDrzm5_yaew0A41JM2Gu3EIk3TvyRV7lOTa24-k_nJLlgZiC61uOEm1pJm3g" /> to change the button's appearance, and the <strong>Layout</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/A143n_bNN8rdRqfBDu_e3ogXwKeNtLr6CwE40AbDV6fp8v2uPb9IgOjO0DQZcIzAEdJ2-KCepNAAJaGFsgmS8G1VyqU14fGjUJXbaQsdg9N8FOsy6sMxmTUk5lWI00JO06IYGvUUQPOdrc9p0g" /> to change its alignment or structure.</div></div><div data-component-type="text"><div>Depending on the button type you choose, you may be able to change the color and opacity of the button, as well as setting the alignment and spacing. You can edit as many or as little aspects as you like, so you have comprehensive control over designing a button that fits your brand and theme. </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/01/ec0b80f4-9731-4354-9ab7-d0f333ee0116/45c8b146-f86a-4e26-b533-27b51b773e55.png" alt="A screenshot of a text and icon button in Wix editor next to the Button Design panel" /></div></div><div data-component-type="text"><div>If you want to further personalize your button, you can also <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-an-animation" target="">add an animation effect</a> to create a unique interaction for your visitors. </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 Design / Layout panels are only available on certain buttons in the editor.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="use-buttons-for-advanced-capabilities" level="3">Use buttons for advanced capabilities</h2></div><div data-component-type="text"><div>With features such as Velo Dev Mode and the CMS, you can use buttons for advanced functions across your site, and create an upgraded, custom experience for your visitors.</div></div><div data-component-type="text"><div>By <a data-composite="true" href="https://support.wix.com/en/article/cms-connecting-a-button-to-a-dataset" target="">connecting buttons to collections</a> in the CMS, you can define what happens when visitors click the button. One popular use of this is to set up buttons that collect input and information from visitors, such as files or text input. </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/01/f9d32fa2-d9be-4eb6-a2f2-540ec238d30a/7ccf83a2-1ddd-4337-9da6-583403c82815.png" alt="A button in the Editor that has been connected to a Submission Forms dataset." /></div></div><div data-component-type="text"><div>Enabling Velo Dev Mode on your site allows you to determine a button's behavior with code. For example, you can hide your button from the page until the visitor completes another action on your site, or set custom events. <a data-composite="true" href="https://support.wix.com/en/article/velo-working-with-the-properties-events-panel" target="">Learn more about working with events and properties</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/01/2da555dc-22f5-45e3-a00d-845c34679fcf/05157d4f-77e8-4633-9dad-29e053352c1b.png" alt="The properties and events button in Dev mode for a button element." /></div></div>

Personalize your text &amp; icon button so it looks exactly how you want. Update the button text as needed, design the button's appearance and adjust the layout (e.g. positioning, spacing and more).Ch...

Wix Editor: Customizing Text & Icon Buttons

Customize your button's text and design in the Wix Editor to match your site's style and encourage visitor interaction. Learn how to change the button text, adjust its appearance for different states (regular and hover), and modify the layout for optimal positioning and spacing. By personalizing your button, you enhance user engagement and create a cohesive look for your site.

<div data-component-type="text"><div>Personalize your text &amp; icon button so it looks exactly how you want. Update the button text as needed, design the button's appearance and adjust the layout (e.g. positioning, spacing and more).</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-button-text" level="3">Changing the button text</h2></div><div data-component-type="text"><div>Enter your button text to encourage visitors to interact with your site. Some examples of possible phrases are &quot;Contact Us&quot;, &quot;Read More&quot;, or &quot;Buy Now&quot;.</div></div><div data-component-type="heading"><h2 id="" level="4">To change the button text:</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 button on your page. </li>  <li>Click <strong>Settings</strong>.</li>  <li>(Optional) Click the <strong>Choose what displays </strong>drop-down and select an option: <strong>Text and icon</strong>, <strong>icon</strong>, <strong>text only</strong>, or <strong>nothing</strong>.</li>  <li>Edit the text that appears on the button under <strong>Text</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/29/4f4460cf-c393-4c70-9794-5d7608109215/afa04e7b-6d5f-4ec4-a505-2e48c7a6929c.png" alt="button settings panel in wix editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>You can also choose what displays on your button (i.e. text, icon or both) from the Layout panel.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-the-button" level="3">Designing the button</h2></div><div data-component-type="text"><div>Designing your button is a great way to customize it to your site's look and needs. Adjust the design for each button state:</div></div><div data-component-type="text"><ul>
  <li><strong>Regular:</strong> How the button is displayed before it's been interacted with.</li>  <li><strong>Hover:</strong> How the button is displayed when a cursor is hovering over it. </li></ul></div><div data-component-type="heading"><h2 id="" level="4">To design the button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the button on your page.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png" />.</li>  <li>Click <strong>Customize Design</strong>.</li>  <li>Choose a button state.</li>  <li>Adjust the design to your needs:
    <ul>
      <li><strong>Background Fills:</strong> Choose a background color and adjust its opacity.</li>      <li><strong>Text:</strong> Adjust the text's theme, color, font, size, and format.</li>      <li><strong>Borders:</strong> Adjust the border's color, opacity, and width.</li>      <li><strong>Corners:</strong> Use the boxes to adjust the pixel size of the button's corner.</li>      <li><strong>Shadows:</strong> Add and customize a shadow on your button.</li>      <li><strong>Layout:</strong> Edit the layout and alignment of your button.</li>      <li><strong>Icon:</strong> Display an icon with your text and adjust its settings.</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/11/29/83fe4a9d-aa54-4c07-a5fb-5cdc6748d52b/93bc6055-8228-4251-bd40-0eced103dc96.png" alt="button design 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-buttons-layout" level="3">Adjusting the button's layout</h2></div><div data-component-type="text"><div>Change the positioning, alignment and spacing between the text and / or icon on your button. You can also decide what happens when there isn't enough room on the button to show its full text. </div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the button's layout:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the button 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/8696077d-830a-4b1e-bd86-9df98f89994a/2022/07/26/8e428eb0-e870-446c-b3e5-11fb7f9bb64d/ea84a13e-3e51-44c6-9073-35745f95e190.png" />.</li>  <li>Adjust any of the following settings:
    <ul>
      <li><strong>Choose what displays: </strong>Decide what is displayed on your button: <strong>Text and icon</strong>, <strong>Text only</strong>, <strong>Icon only</strong>, or <strong>Nothing</strong>.</li>      <li><strong>Text and icon position: </strong>When choosing to show both text and an icon, decide how to position them: side by side, or one below the other. </li>      <li><strong>Spacing between text and icon: </strong>When choosing to show both text and an icon, drag the slider to set the spacing between them (in px).</li>      <li><strong>Alignment: </strong>Align the text and icon to the left, center or right side of the button. You can also align them to both margins of the button, by clicking <strong>Justify</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/07/26/7b2538db-a825-491f-a6e3-e0dbea7fa5bf/f525d252-55a2-41c1-a34b-f306c6037242.png" />.</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>You can also choose what displays on your button (i.e. text, icon or both) from the Settings panel.</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/11/29/3e9eec6c-6741-43d8-8972-bfa9fc2d29fe/abefb087-1c97-4194-b9c8-dc1b69c339ad.png" alt="button layout panel in wix editor." /></div></div>

Icon buttons are a fun, visual way to help visitors navigate around your site. To make sure they know what your icon button does, you can add an informative tooltip that appears on hover.Set up the li...

Wix Editor: Adding and Setting Up an Icon Button

Discover how to create and customize icon buttons on your site to enhance navigation for your visitors. Learn to set up informative tooltips, choose between displaying text, icons, or both, and add links to direct users to relevant locations. Customize the button's design, including background fills and hover effects, to match your site's aesthetic and improve user experience.

<div data-component-type="text"><div>Icon buttons are a fun, visual way to help visitors navigate around your site. To make sure they know what your icon button does, you can add an informative tooltip that appears on hover.</div></div><div data-component-type="text"><div>Set up the link on your icon button and customize the icon that is displayed for each of its states; regular, and hover. </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Learn more about button states</h4><div class="collapsible-content"><ul>
  <li><strong>Regular: </strong>How the button is displayed on your site before visitors interact with it.</li>  <li><strong>Hover:</strong> How the button looks when a cursor is hovering over it.</li></ul><div><br /></div><div><strong>Note:</strong> Hover (tap) effects on icon buttons are not currently supported on iOS. This means that visitors viewing your site on an iOS device will not see the hover state if they tap the button.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-your-icon-button" level="3">Step 1 | Add your icon button</h2></div><div data-component-type="text"><div>To get started, choose an icon button from the Add Elements panel and drag it to your page. There are plenty of designs to choose from, depending on the action and the desired look. </div></div><div data-component-type="heading"><h2 id="" level="4">To add an icon button to your site:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>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>Button</strong>.</li>  <li>Click <strong>Icon Buttons</strong>.</li>  <li>Click or drag the button 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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/e0f9582e-3f39-4bbd-9f9d-94f67ff08220/c6d1c885-3c88-4052-b5de-a37673c24392.png" alt="The Add panel in the Editor. The Button tab has been selected, and the cursor is hovering over Icon Buttons" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-set-up-your-icon-buttons-text-and-icon" level="3">Step 2 | Set up your icon button's text and icon </h2></div><div data-component-type="text"><div>Set up what you'd like to display on your button. You can display an icon, text, or both.</div></div><div data-component-type="text"><div>Text and icons shown on buttons should contain a clear call-to-action, and let visitors know what they'll be directed to. </div></div><div data-component-type="heading"><h2 id="" level="4">To set up the button's text and icon: </h2></div><div data-component-type="text"><ol>
  <li>Click your icon button.</li>  <li>Click <strong>Settings</strong>.</li>  <li>Click <strong>Choose what displays </strong>and select an option from the drop-down: 
    <ul>
      <li><strong>Text and icon:</strong> Display both text and an icon on the button. Set up the following options: 
        <ul>
          <li><strong>What does it say?:</strong> Enter the text you want to display on the button.</li>          <li><strong>Choose icon:</strong> Click the <strong>Replace</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/z6ZrkIIFObm5Ar04kRcNkKN5CggrigK8-034Ut8Cv96ddzvU3I4sjvE_6v8fWmyUp3hGkc4sa_ruJ-5Ct264wLNJWDmlc4ln0V09Y2p-cI8-K3jdgwVU2a4V6OU3sGY7JWDr4GO8" /> to select a new icon for your button. You can choose from free media available from Wix, or upload your own.</li>        </ul>      </li>      <li><strong>Icon only: </strong>Display only an icon on the button. Set up the following options: 
        <ul>
          <li><strong>Choose icon:</strong> Click the <strong>Replace</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/z6ZrkIIFObm5Ar04kRcNkKN5CggrigK8-034Ut8Cv96ddzvU3I4sjvE_6v8fWmyUp3hGkc4sa_ruJ-5Ct264wLNJWDmlc4ln0V09Y2p-cI8-K3jdgwVU2a4V6OU3sGY7JWDr4GO8" /> to select a new icon for your button. You can choose from free media available from Wix, or upload your own.</li>          <li><strong>What's the alt text?:</strong> Enter an alt text description of the icon.</li>        </ul>      </li>      <li><strong>Text only: </strong>Display only text on the button. Enter the text you want to display on the button under <strong>What does it say?</strong>. </li>      <li><strong>Nothing:</strong> Create a transparent button that doesn't display text or an icon. Enter an alt text description of the button under <strong>What's the alt text?</strong>. </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/16/9cd7400b-6d0c-43cb-addd-ca0e469cbdd0/2aab0046-f2c2-417b-a616-d49f9735e302.png" alt="The button settings panel. It has been set to show both a text and an icon." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-add-a-link-to-your-icon-button" level="3">Step 3 | Add a link to your icon button</h2></div><div data-component-type="text"><div>Add a link to your icon button to direct your site visitors to the relevant location. You can link to many different places including a page on your site, external web address, document or email.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a link to your button:</h2></div><div data-component-type="text"><ol>
  <li>Click your icon button.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/06/06/868c09f5-c67f-4530-8dfe-4ed4ee500153/a445bae1-12ff-4b91-9207-dfd4f64d2d88.png" />.</li>  <li>Select a link type on the left.</li>  <li>Depending on the link type you selected, add the relevant information.</li>  <li>Click <strong>Done</strong>. </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 your URL link contains an unsupported character, the following error message is displayed: <strong>Check the URL and try again</strong>. To bypass the validation, use a link shortening service such as <a href="http://bit.ly/" target="">bit.ly</a> or <a href="http://goo.gl/" target="">goo.gl</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/16/a3a16ad9-f361-4a97-aa5e-0110df869f12/4afb2c0e-5a14-4396-a563-fe818f2823ba.png" alt="The link panel in the Editor. An email has been selected as the link type, and the relevant information has entered" /></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 more about the <a href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button">types of links</a> you can add.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-4-customize-your-icon-button" level="3">Step 4 | Customize your icon button</h2></div><div data-component-type="text"><div>Once you've added a link to your icon button, customize it to your exact needs. You can choose the background fill, design the text, and much more.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize your icon button:</h2></div><div data-component-type="text"><ol>
  <li>Click your icon button.</li>  <li>Click the <strong>Design</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/15/c47d700f-ff3e-4fee-ab10-887b3c5b44e6/1028f268-16f6-4f0a-bf7c-72efa9482642.png" /> icon.</li>  <li>Select a different preset design, or click <strong>Customize Design</strong> to adjust the existing design.</li>  <li>Under <strong>Customize Design</strong>, choose the button state from the drop-down menu.
    <ul>
      <li><strong>Regular:</strong> How the button is displayed before visitors interact with it.</li>      <li><strong>Hover:</strong> How the button is displayed when visitors hover over it.</li>    </ul>  </li>  <li>Customize the design from the following tabs:
    <ul>
      <li><strong>Background Fills </strong><img data-composite="true" src="https://lh6.googleusercontent.com/RDbnan9fKN14DqbQ_KzBm7o3fOS6tGwAs19dtOx8Y41Yu9QM10M6_aB20G_5zWZ83nn07aBBs5MYgS10hzGXIll0qT6rAC3pH5iiOebrk9Nr84_YsZcZ5OeIjF2AAI4BplfBMMbO" /><strong>:</strong> Customize the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#button-design-options" target="">fill of your button</a>. </li>      <li><strong>Text </strong><img data-composite="true" src="https://lh6.googleusercontent.com/VNGBlpernG97DSRXx7wJ9CPenKvMHxPeosuBA4inPrwUxwNrf7NffU4RmiDKI-bFNZtBMGFjumYHR42glHkW0_Fit_QCSZTb-0x2MNfpqvLDuYPgcSEMdtGEr3MNbBKQhA3x0MEU" /><strong>:</strong> Adjust the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#text-formatting-options" target="">design of the button text</a>. </li>      <li><strong>Borders </strong><img data-composite="true" src="https://lh3.googleusercontent.com/-50eh0nd9xaB1hHtcVBQUwfF2TPTmMb3xgrRSbEvZ9eEzUZeP2lHefEzkfRI5splembutJY8zTYjbFbsGSsa410rpvSpSCdA0mWPybsV4KyVshQFK4DziK9EGkp7BV8AX-7w1C1T" /><strong>:</strong> Edit the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#button-design-options" target="">width and design of your borders</a>. </li>      <li><strong>Corners </strong><img data-composite="true" src="https://lh3.googleusercontent.com/PaFDRxybmmeHa15r-ciwlczdkrd_FFk6mNmRovHTe4KU1KM14Hlgv2CTYugIb3f5FT1MLZ1pkcEZXiXainTYOIR8itiA5sw3hrQANd_tjYU6W5Teua6X-aWmUnxFgXoyi2j3jhpI" /><strong>:</strong> Adjust the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#button-design-options" target="">radius of the button's corners</a>. </li>      <li><strong>Shadows </strong><img data-composite="true" src="https://lh3.googleusercontent.com/Bb-ZezUXGgdGQy2RjJqMADmLFQZJMPiRj5t3Rmd2w4hCsLxg-XPOgPAFzT15537LPzEuCljOotn7YcPHIDaSIpGRKzey8cj0Rfz0qAQDIgzaTcJkKtE7upgyPAKHi8usP4UT2Lo8" /><strong>:</strong> Add and customize a<a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#button-design-options" target=""> shadow effect on your button</a>. </li>      <li><strong>Layout </strong><img data-composite="true" src="https://lh6.googleusercontent.com/iqhr9SJ87iTu-5ca9_YdZ6VNFnjXQfRG1iW3qGDxIdkvcWEuR-YAAx0w-0OO-wg83UkxrskNw1wR0lr9VYN2u9-TV3oUe3R_Bn7lNs58X-DDyrksn6T2P4qIOPpnA2tzW-xLzIBm" /><strong>:</strong> Select what to display on your button, and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#button-design-options" target="">adjust the alignment</a>. </li>      <li><strong>Icon </strong><img data-composite="true" src="https://lh6.googleusercontent.com/Rti-8zEAM9AtNB0kwd3jnLbUk0oz5CZavnuUwUR1kOpQR9_QEngCwYYytV9tWkB2Yzz-UsceNw40MuT6zWMmm-DVZ0rwVzgPf5K5YGuNxkX0dQaF5Dr9bOYrH1uHNQcSyzRnNxno" /><strong>:</strong> Edit the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-buttons#icon-design-options" target="">appearance of the icon on your button</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/fa74b184-7cf9-4cdb-a4b3-f9bd7f9b8eb3/7a109055-8330-4189-bdb6-72107ee44333.png" alt="The design panel in the Editor. The Regular view has been selected, and the cursor is hovering on the Background Fills option" /></div></div>

Add a link to your icon or text button to direct site visitors to a specific location. You can link to many different places including a page on your site, external web address, document or email.Addi...

Wix Editor: Adding a Link to a Button

Learn how to add links to your buttons in the Wix Editor to direct visitors to specific locations, such as pages on your site, external URLs, documents, or email addresses. This article guides you through the process of linking, including various link types and their benefits, so you can enhance user navigation and engagement on your site.

<div data-component-type="text"><div>Add a link to your icon or text button to direct site visitors to a specific location. You can link to many different places including a page on your site, external web address, document or email.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-link-to-your-button" level="3">Adding a link to your button</h2></div><div data-component-type="text"><ol>
  <li>Click the button in your editor.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/73fd4f4e-a17e-4e8a-855e-ad100bcac136.png" /> .</li>  <li>Select a link type.<br />
<strong>Note:</strong> Learn more about the link types <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button#types-of-links" target="">below</a>.</li>  <li>Add the relevant link information.</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/2021/07/19/e8063c55-85b3-41d2-835f-47856f5c0cd5/e7bdce67-c1c6-47e9-b34c-b0463212680d.png" alt="screenshot of button selected in wix editor with mouse hovering  the link icon." /></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>Once you have added your link, test that it's working in Preview mode. If its not working, check the <a href="https://support.wix.com/en/article/wix-editor-troubleshooting-buttons">button troubleshooter</a>.</li><li>If your URL link contains an unsupported character, the following error message is displayed: <strong>Check the URL and try again</strong>. To bypass the validation, use a link shortening service such as <a href="http://bit.ly/" target="_blank">bit.ly</a> or <a href="http://goo.gl/" target="_blank">goo.gl</a>. </li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="types-of-links" level="3">Types of links</h2></div><div data-component-type="text"><div>There are several types of links you can add from the Link panel: </div></div><div data-component-type="heading"><h2 id="web-address" level="4">Web address</h2></div><div data-component-type="text"><div>Link to an external URL. When your visitors click the button, they are directed to your chosen web address. You can choose to open the web address in a new browser window, or within the current window.</div></div><div data-component-type="text"><div>You can use this to link to a specific product page in Wix Stores. To learn how, click <a href="https://support.wix.com/en/article/wix-stores-linking-a-button-to-a-specific-product-page">here</a>.</div></div><div data-component-type="heading"><h2 id="page" level="4">Page</h2></div><div data-component-type="text"><div>Link to a page on your website. When your visitors click the button, they are directed to the chosen page of your site. You can choose to open the page in a new browser window, or within the current window.</div></div><div data-component-type="text"><div>To learn how to link a button to a specific product page in Wix Stores, click <a data-composite="true" href="https://support.wix.com/en/article/wix-stores-linking-a-button-to-a-specific-product-page" target="_blank">here</a>.</div></div><div data-component-type="heading"><h2 id="anchor" level="4">Anchor</h2></div><div data-component-type="text"><div>Link to an <a href="https://support.wix.com/en/article/wix-editor-linking-to-anchors-on-your-site">anchor</a> on your website. When your visitors click the button, they are taken the page and anchor of your choice. </div></div><div data-component-type="heading"><h2 id="topbottom-of-page" level="4">Top/Bottom of page</h2></div><div data-component-type="text"><div>Link to the top or bottom of the page. When your visitors click the button, they are taken to the top or bottom of the page that they are on.</div></div><div data-component-type="heading"><h2 id="document" level="4">Document</h2></div><div data-component-type="text"><div>Link to a document. When your visitors click the button, a new browser tab opens with the document.</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>Any document over 50MB will automatically download instead of opening in a new page. This is expected behavior and cannot be changed.</div></div></div></div><div data-component-type="heading"><h2 id="email" level="4">Email</h2></div><div data-component-type="text"><div>Link to send an email to a specific email address. When your visitors click the button, their default email account opens so that they can send an email to the specified address.</div></div><div data-component-type="text"><div>If you link your email address, your visitor needs to have a <a data-composite="true" href="https://support.wix.com/en/article/troubleshooting-error-message-default-mail-client-is-not-properly-installed" target="">default mail client</a> set up on their browser.</div></div><div data-component-type="heading"><h2 id="phone-number" level="4">Phone number</h2></div><div data-component-type="text"><div>Link to a phone number. When your visitors click the button on their mobile or tablet, they can call you instantly. If they are using a desktop, a calling app opens such as FaceTime.</div></div><div data-component-type="heading"><h2 id="popup" level="4">Popup</h2></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/2025/10/31/36b5cdc1-414c-4146-a1d8-559d116f738f/db9d882d-0b56-4256-ad60-2370077732cb.png" alt="link to popup panel in wix editor" /></div></div><div data-component-type="text"><div>Link to a <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox" target="">popup</a> on your website. When your visitors click the button, the popup appears.</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>Use <a data-composite="true" href="https://support.wix.com/en/article/wix-analytics-about-your-behavior-reports" target="">Wix Analytics</a> to track button clicks and user interactions. Gain a deeper understanding of how visitors engage with your site. </div></div></div></div>

Create beautiful, eye-catching buttons that match your site and attract your visitors to interact. Click the Design icon  on your button to start customizing.Note:The options for button states differ ...

Wix Editor: Customizing the Design of Your Buttons

Discover how to create stunning, interactive buttons that enhance your site's appeal and encourage visitor engagement. Customize various aspects of your buttons, including background, text, and icon, to match your brand. Learn about different button states and how to apply vibrant colors and effects for each state, ensuring your buttons stand out. By following this guide, you can design buttons that not only look great but also improve user interaction on your site.

<div data-component-type="text"><div>Create beautiful, eye-catching buttons that match your site and attract your visitors to interact. </div></div><div data-component-type="text"><div>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png" /> on your button to start customizing.</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/19/ab67f4af-7417-4557-8e2f-37e71b54b19e/9c0638e1-5e25-4381-bc2f-a5bfd174bf5d.png" alt="Screenshot of a button after being selected. Design icon 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>The options for button states differ depending on the type of button selected.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-your-button" level="3">Designing your button</h2></div><div data-component-type="text"><div>There are a variety of customization options available. Depending on the button type, you can adjust the background, text, and icon. Choose the colors, fills, corners, shadows and more.</div></div><div data-component-type="text"><div>Customize each button state individually to create eye-catching effects as visitors navigate your site. Use vibrant, distinct colors for the default, hover, and active states of each button to enhance engagement and make each one stand out.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What's the difference between the button states? </h4><div class="collapsible-content"><ul>
  <li><strong>Regular:</strong> The button’s default appearance before visitors interact with it.</li>  <li><strong>Hover:</strong> The button's appearance when visitors hover over it with their cursor.</li>  <li><strong>Clicked / Focus:</strong> The button's appearance after visitors click it.</li>  <li><strong>Error:</strong> Indicates an issue with the button's function (e.g. file upload failure).</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2019/11/11/c519db0c-00b4-469f-bd3a-3516134613ec/be4320a1-2e29-473e-92fe-efce99076767.png" alt="screenshot of a number of different button types." /></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 customization options available depend on what you choose to display on your button (text, icon or both).</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To design your button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the button type you want to customize from the options below:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Customize a Text &amp; Icon button</h4><div class="collapsible-content"><ol>
  <li>Click the button you want to customize.</li>  <li>Click <strong>Design</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png" /> icon.</li>  <li>Choose what you want to do:
    <ul>
      <li>Select another button design from the available options.</li>      <li>Click <strong>Customize Design</strong> to adjust the following:
        <ul>
          <li><strong>Background Fills: </strong>Choose a color, gradient or image for your button's background. </li>          <li><strong>Text: </strong>Adjust the font, formatting and spacing of your button text. You can also click <strong>Shadows </strong>to add shadow to the text.</li>          <li><strong>Borders: </strong>Choose a color / gradient for your borders and set the thickness in px. You can apply the same design to all sides or click the <strong>Unlock</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/01/1feb9683-98df-40cd-b206-28f96941842e/56587d43-bb83-4c2f-b740-f1e330a1c541.png" /> to customize them separately.</li>          <li><strong>Corners: </strong>Make your corners more round or square by changing the radius in px. You can set the same radius for all corners or click the <strong>Unlock</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/01/1feb9683-98df-40cd-b206-28f96941842e/56587d43-bb83-4c2f-b740-f1e330a1c541.png" /> to customize them separately. </li>          <li><strong>Shadows: </strong>Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc. </li>          <li><strong>Layout: </strong>Choose what to show on your button (text, icon or both) and how these should be arranged and aligned. </li>          <li><strong>Icon:</strong> Adjust the color, size and angle of the icon appearing on your button.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/19/82638e67-3506-4c3c-ace4-92f26b82ae88/132e4b76-57ff-4b68-abd1-fe0cfd86b7c8.png" /></li>        </ul>      </li>    </ul>  </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Customize an Icon button</h4><div class="collapsible-content"><ol>
  <li>Click the button you want to customize.</li>  <li>Click <strong>Design</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png" /> icon.</li>  <li>Choose what you want to do:
    <ul>
      <li>Select another button design from the available options.</li>      <li>Click <strong>Customize Design</strong> to adjust the following:
        <ul>
          <li><strong>Background Fills: </strong>Choose a color, gradient or image for your button's background. </li>          <li><strong>Text: </strong>Adjust the font, formatting and spacing of your button text. You can also click <strong>Shadows </strong>to add shadow to the text.</li>          <li><strong>Borders: </strong>Choose a color / gradient for your borders and set the thickness in px. You can apply the same design to all sides or click the <strong>Unlock</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/01/1feb9683-98df-40cd-b206-28f96941842e/56587d43-bb83-4c2f-b740-f1e330a1c541.png" /> to customize them separately.</li>          <li><strong>Corners: </strong>Make your corners more round or square by changing the radius in px. You can set the same radius for all corners or click the <strong>Unlock</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/01/1feb9683-98df-40cd-b206-28f96941842e/56587d43-bb83-4c2f-b740-f1e330a1c541.png" /> to customize them separately. </li>          <li><strong>Shadows: </strong>Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc. </li>          <li><strong>Layout: </strong>Choose what to show on your button (text, icon or both) and how these should be arranged and aligned. </li>          <li><strong>Icon:</strong> Adjust the color, size and angle of the icon appearing on your button.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/05/ef569e01-de35-4e2b-afca-7cb236da8814/1f23ed6e-f37f-4ba2-86db-f5a812a1dcad.png" /></li>        </ul>      </li>    </ul>  </li></ol></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Learn more about customizing other types of buttons:</div><div class="info-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/cms-adding-and-setting-up-an-upload-button" target="">Upload buttons</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-document-button#changing-the-buttons-icon" target="">Document buttons</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/adding-and-setting-up-a-pay-button#optional-step-5-customize-the-design-of-your-button" target="">Pay buttons</a></li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="design-glossary" level="3">Design glossary</h2></div><div data-component-type="heading"><h2 id="button-design-options" level="4">Button design options</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th data-column-width="150.125"><div>Option</div></th><th data-column-width="277.4375"><div>Explanation</div></th><th data-column-width="276.4375"><div>How to use</div></th></tr></thead><tbody><tr><td><div><strong>Background Fills</strong></div></td><td><div>Add different fills such as colors, images, patterns and gradients to create stunning and colorful effects on your button. </div></td><td><ul>
  <li>Click the color box for each layer and choose the fill type, then drag the slider to change the opacity of the fill layer.</li>  <li>Reorder the fill layers by dragging them up and down the list. </li></ul></td></tr><tr><td><div><strong>Borders</strong></div></td><td><div>Customize the button's border to make it stand out. Customize all sides of the button together, or each side separately, by clicking the Lock and Unlock icons. </div></td><td><ul>
  <li>Click the <strong>Width </strong>field and enter the pixel width, or adjust the slider.</li>  <li>Click the <strong>Style</strong> drop-down and select the border style.</li>  <li>Click the <strong>Fill </strong>color box to select the border color, then use the slider to adjust opacity. </li></ul></td></tr><tr><td><div><strong>Corners</strong></div></td><td><div>Change the corners of your button to make them more rounded or square. Change the size of all the corners together, or customize each corner separately, by clicking the Lock and Unlock icons. </div></td><td><div>Click the pixel field on a corner and enter the number of pixels you want to apply to it.</div></td></tr><tr><td><div><strong>Shadows</strong></div></td><td><div>Add layers of shadows to your button, and customize the color, size and more.</div></td><td><ul>
  <li>Click the color box for each shadow layer and customize the color, type, angle, size, distance, and blur. Then, drag the slider to change the opacity of the shadow.</li>  <li>Reorder the shadow layers by dragging them up and down the list. </li></ul><div>If using an Upload button:</div><ul>
  <li>Click the toggle to enable shadows.</li>  <li>Use the sliders to edit the angle, distance, size, and blur. Then, use the slider and color box to edit the opacity and color.</li></ul></td></tr><tr><td><div><strong>Layout</strong></div><div><br /></div></td><td><div>Change the layout of your button.</div></td><td><ul>
  <li>Click the <strong>Choose what to show</strong> drop-down and choose if you want to display the text, icon or both.</li>  <li>Select the alignment, position and spacing of the text and/or icon (if relevant).</li>  <li>Set the padding around the text and/or icon.</li></ul></td></tr></tbody></table></div></div><div data-component-type="heading"><h2 id="text-formatting-options" level="4">Text formatting options</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Option</div></th><th><div>Explanation</div></th><th><div>How to use</div></th></tr></thead><tbody><tr><td><div><strong>Show Text</strong></div></td><td><div>Show or hide text on your button.</div></td><td><div>Click the toggle to show or hide text on your button.</div></td></tr><tr><td><div><strong>Theme</strong></div></td><td><div>Select the theme for your button text.</div></td><td><div>Select a text theme from the drop-down menu.</div></td></tr><tr><td><div><strong>Fonts</strong></div></td><td><div>Choose the font for your button text.</div></td><td><div>Click the drop-down menu and select a font.</div></td></tr><tr><td><div><strong>Font Size</strong></div></td><td><div>Change the size of the text on your button.</div></td><td><div>Drag the slider to increase or decrease the font size, or enter a value.</div></td></tr><tr><td><div><strong>Text Formatting</strong></div></td><td><div>Apply formatting to your text. </div></td><td><ul>
  <li>Format your text using the options: bold, italics, underline, strikethrough, colors, capitalization and text direction and alignment.</li></ul></td></tr><tr><td><div><strong>Character Spacing</strong></div></td><td><div>Change the spacing between the text characters.</div></td><td><div>Drag the slider to increase or decrease spacing, or enter a value.</div></td></tr><tr><td><div><strong>Shadows</strong></div></td><td><div>Create shadows for your text. You can have more than one shadow.</div></td><td><div>Click <strong>Add a shadow</strong> to add a new one. Click the <strong>Customize Shadow </strong>icon to design it.</div></td></tr></tbody></table></div></div><div data-component-type="heading"><h2 id="icon-design-options" level="4">Icon design options</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Option</div></th><th><div>Explanation</div></th><th><div>How to use</div></th></tr></thead><tbody><tr><td><div><strong>Show icon</strong></div></td><td><div>Show or hide an icon on your button.</div></td><td><div>Click the toggle to show or hide the icon on your button.</div></td></tr><tr><td><div><strong>Size</strong></div></td><td><div>Change the size of your icon.</div></td><td><div>Drag the slider to increase or decrease the size of your icon, or enter a value.</div></td></tr><tr><td><div><strong>Color</strong></div></td><td><div>Change the color of the icon.</div></td><td><div>Click the color box and select a color.</div></td></tr><tr><td><div><strong>Rotation</strong></div></td><td><div>Adjust the rotation of the icon.</div></td><td><div>Drag the handle to customize the rotation of the icon, or enter the degrees in the text box.</div></td></tr></tbody></table></div></div>

The easiest way to direct site visitors to your files is with a button. However, Wix also has a variety of other options to suit you and your site's needs.Creating a download buttonAdd a download butt...

Wix Editor: Adding a Download Button

Create a download button on your Wix site to easily direct visitors to your files. This article guides you through adding a button that allows users to download documents with just a click. Explore additional options for file downloads, including linking documents, using Wix Forms, and integrating with Wix Music and Video. Enhance your site's functionality and provide a seamless experience for your visitors.

<div data-component-type="text"><div>The easiest way to direct site visitors to your files is with a button. However, Wix also has a variety of other options to suit you and your site's needs.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-a-download-button" level="3">Creating a download button</h2></div><div data-component-type="text"><div>Add a download button to your site so that when your visitors click the button, the file opens and your visitors are able to easily download it.</div></div><div data-component-type="heading"><h2 id="" level="4">To create a download button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <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>Button</strong>.</li>  <li>Click<strong> Text &amp; Icon Button </strong>or<strong> Icon Button</strong>.</li>  <li>Drag a button on to your page.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/e81e2c4c-a111-4aea-ab65-0c5e2db6619e.png" />.</li>  <li>Select <strong>Document</strong> to let your visitors download a file, and click <strong>Choose File</strong> to add or upload a file.</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/2021/07/19/1b56dcac-84d1-4524-ae7d-a3ffcaf66f04/663b0262-41b3-44c5-bd3c-4468306cbc14.png" alt="screenshot of wix editor with button link icon selected, with document selected under what do you want to link to" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="additional-download-options" level="3">Additional download options</h2></div><div data-component-type="text"><div>Wix offers a number of different features for visitors to download files from your site. Click a file type below to see the available options.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Documents (PDF, DOC, DOCX, PPT, PPTX. XLS, ODP or ODT)</h4><div class="collapsible-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-document-button" target="_blank">Document button</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-an-element" target="">Link the document from your site</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-forms-an-overview" target="_blank">Wix Forms</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-apps-about-the-file-share-app" target="_blank">File Share app</a></li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Image</h4><div class="collapsible-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-an-overview" target="_blank">Wix Pro Gallery</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-apps-about-the-file-share-app" target="_blank">File Share app</a></li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Music</h4><div class="collapsible-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/about-wix-music" target="_blank">Wix Music</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-apps-about-the-file-share-app" target="_blank">File Share app</a></li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Video</h4><div class="collapsible-content"><ul>
  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-video-about-wix-video" target="_blank">Wix Video</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-an-overview" target="_blank">Wix Pro Gallery</a></li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-apps-about-the-file-share-app" target="_blank">File Share app</a></li></ul></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 want visitors to download an externally hosted file, <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-an-element" target="_blank">link to it from your site</a>.</div></div></div></div>

If you have a PayPal Business or Premier account, you can set up a PayPal button on your site. PayPal buttons make it easy to collect donations or accept payment on your site, without needing to have ...

Wix Editor: About PayPal Buttons

Discover how to set up PayPal buttons on your site using the Wix Editor, allowing you to easily collect donations or accept payments without needing an online store. Learn to add both Donate and Buy Now buttons, customize them with relevant details, and direct visitors to PayPal for secure transactions. This article guides you through the setup process, ensuring you can start receiving funds quickly and efficiently.

<div data-component-type="text"><div>If you have a PayPal Business or Premier account, you can set up a PayPal button on your site. </div></div><div data-component-type="text"><div>PayPal buttons make it easy to collect donations or accept payment on your site, without needing to have an online store. There are 2 types of PayPal button available in the Editor: a Buy Now, and a Donate button.</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>This article is about PayPal buttons in the Wix Editor, which is separate to <a data-composite="true" href="https://support.wix.com/en/article/connecting-paypal-as-a-payment-provider" target="">adding PayPal as a payment method for use with Wix Stores, Wix Bookings, and other business solutions</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="paypal-donate-buttons" level="3">Paypal Donate buttons</h2></div><div data-component-type="text"><div>PayPal Donate buttons make it easy for your visitors to contribute to the causes you care about most.</div><div><br /></div><div>Once you've added the button, you can add the relevant information such as the organization's name and ID number. You can also set a predetermined amount, or allow your visitors to choose how much they want to donate. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-paypal-donate-button" target="">Learn how to add and set up your PayPal Donate Button</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/05/05/120a581e-3641-4730-b839-140d728d155a/e4d0ea5c-5927-486a-85bb-690f41bec308.png" alt="A PayPal donate button on a live site. The text above says 'Provide relief for families living in poverty'." /></div></div><div data-component-type="text"><div>When visitors click the button on your live site, they're directed to PayPal so that they can complete the donation. Funds usually arrive in the linked account instantly, which means you don't need to worry about wait times. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Have more causes you want to support?</div><div class="info-content"><div>Donate buttons can only be linked to one PayPal account. If you have more than one organization, you can add multiple Donate buttons to your site, and link them to the relevant accounts.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="paypal-buy-now-buttons" level="3">Paypal Buy Now buttons</h2></div><div data-component-type="text"><div>Visitors can buy products and items and pay directly to your PayPal account with a Buy Now button, so you don't need to set up an online store. Simply enter the details, such as the product name and ID number, to start selling.</div></div><div data-component-type="text"><div>When your visitors click the button to purchase on your site, they're brought to the PayPal checkout page where they can enter their information and complete the purchase. </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/05/05/53041c8f-7e4e-4eb7-9f13-09e2a6e4e852/8adc2127-0d44-4592-a929-647a78593cab.png" alt="A PayPal buy now button on a live site. The text above says 'Purchase my brand new novel online'." /></div></div><div data-component-type="text"><div>Buy Now buttons allow you to sell one product per button. If you want to sell multiple products, you can add multiple buttons to your site and link them to the relevant products.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Ready to begin selling?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-paypal-buy-now-button" target="">Learn how to add and set up your PayPal Buy Now button</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="additional-information-about-paypal-buttons" level="3">Additional information about PayPal buttons</h2></div><div data-component-type="text"><div>When adding PayPal buttons to your site, you should keep the following information in mind:</div></div><div data-component-type="text"><ul>
  <li>In order to set up and use a PayPal Donate or Buy Now button on your site, you must have a PayPal Business or Premier account. The features offered to you by PayPal <a data-composite="true" href="https://www.paypal.com/pn/webapps/mpp/country-worldwide" target="_blank">depend on your country and region</a>. </li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-updates-to-paypal-buttons" target="">Certain fields are required in order to successfully complete the set up</a> of your chosen button. If you do not fill out these settings, your visitors are unable to complete the transaction / donation.</li>  <li>You do not get notifications on your Wix account for purchases or donations made through PayPal buttons. This is because the payments are made to the PayPal account, and not your Wix account.</li></ul></div>

PayPal Buy Now buttons allow you to sell products on your site, without needing to add an online store. The button links to your PayPal account and product, so it's quick and easy for visitors to make...

Wix Editor: Adding and Setting Up a PayPal Buy Now Button

Discover how to add and set up PayPal Buy Now buttons in the Wix Editor to sell products directly on your site without needing a full online store. Link the button to your PayPal account, customize its layout, currency, and language, and streamline the purchasing process for your visitors. This feature allows you to efficiently manage sales while directing customers to PayPal for secure transactions.

<div data-component-type="text"><div>PayPal Buy Now buttons allow you to sell products on your site, without needing to add an online store. The button links to your PayPal account and product, so it's quick and easy for visitors to make purchases.</div></div><div data-component-type="text"><div>Add the button to your page, and set it up by linking it to your PayPal account. You can also choose its layout, currency, and language. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><ul>
  <li>This article is about PayPal buttons in the Wix Editor, which is separate to <a data-composite="true" href="https://support.wix.com/en/article/connecting-paypal-as-a-payment-provider" target="">adding PayPal as a payment method for use with Wix Stores, Wix Bookings, and other business solutions</a>.</li>  <li>To use the PayPal button, you must have a PayPal Business or Premier account.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-a-buy-now-button" level="3">Step 1 | Add a Buy Now button</h2></div><div data-component-type="text"><div>Add a Buy Now button to sell a product through your PayPal account. You can link one item per button, and add as many buttons as you need to sell different products across your site.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a Buy Now button to your site:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Add Elements </strong><img data-composite="true" src="https://lh4.googleusercontent.com/RXtvBVeNsPkYLfP5LwOQR3bSpZaDdyNQdCx2BvWdMSPzKNPHo3-vCjRGXOBN1Yy9rvI-pjTKnSr_eWVYfs_vM_iRvQy4sm-Qfj1yuUckVToFDoSeDVqFaZfvq41-sn3wW5Kao-B5WAjj_HGZFpN-RQ" /><strong> </strong>in your editor.</li>  <li>Click <strong>Button</strong>.</li>  <li>Click <strong>PayPal Buttons</strong>.</li>  <li>Click and drag the Buy Now button to add it to your site.</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/01/31/e31f6aba-7301-47d2-b73c-c695fa33c598/461e5608-5161-421b-be7a-1e8fe0777a42.png" alt="The Add Elements panel. The Buttons tab has been selected, and the cursor is hovering over the PayPal Buy now button." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-set-up-your-button" level="3">Step 2 | Set up your button</h2></div><div data-component-type="text"><div>After adding the Buy Now button, link it to your Paypal account and set the product details (e.g. item name, price, etc.). When visitors click the button, they're directed to PayPal to complete the purchase.</div></div><div data-component-type="heading"><h2 id="" level="4">To set up your PayPal Buy Now button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the PayPal button in the editor.</li>  <li>Click <strong>Add PayPal Info</strong>.</li>  <li>Select <strong>Selling</strong> under <strong>What's this button for?</strong>.</li>  <li>Set up the buttons with the below options:
    <ol>
      <li><strong>What's your PayPal email?:</strong> Enter the email address you want to link into the field.</li>      <li><strong>What's the product's name?: </strong>Enter the name of the product or item into the field.</li>      <li><strong>What's the price?:</strong> Enter the price of the product into the field.</li>      <li><strong>What's the currency?:</strong> Click the drop-down menu to select the currency for the button.</li>      <li><strong>Want to add an ID number?: </strong>Add the ID number of the product into the field (optional).</li>      <li><strong>How does PayPal open?:</strong> Click the drop-down menu to select whether Paypal opens in the same window, or a new window. </li>      <li><strong>What language is the button in?:</strong> Click the drop-down menu to select the button's language.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/06/563e2759-7027-4c0c-b69b-cd2444bb72e5/cf86d644-703d-45ed-ba96-09f28ad61939.png" alt="The PayPal button settings panel in the editor. The cursor is hovering over the option to add an ID number." /></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>Due to changes in the PayPal API, you must fill the <strong>PayPal email </strong>field in order to complete your button's set up.<strong> </strong>We also recommend entering the product's name, and confirming its price. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-updates-to-paypal-buttons" target="">Learn more about changes to PayPal buttons</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-choose-your-buttons-layout" level="3">Step 3 | Choose your button's layout</h2></div><div data-component-type="text"><div>Set how you want the button to look on your site. You can choose between a button that shows accepted cards, or a button without them.</div></div><div data-component-type="heading"><h2 id="" level="4">To choose the layout of your PayPal button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the button in your editor.</li>  <li>Click the <strong>Layout</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/vlZibPvSfkqM3AsFNmpIzYkN0HGd-1Rq-AoZ2ySBV2B9mJVAut-PeybyKwVrT_u6xh_fLDGXVR65jHlarmjf-yuWOWejwq5W5oXe27Gy_Jai9XP1X8UaDex2N1w11Ktt8EFFfZtAQrBNydCSGw" />.</li>  <li>Select a layout preset 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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/06/2d4a9b97-be8c-4e8b-afb0-5460cfea063e/da1fbf23-397e-423c-a8fc-b807b61af62c.png" alt="The PayPal button layout panel is open in the Editor. The cursor is hovering over the last preset." /></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>You do not get notifications on your Wix account for purchases made through PayPal buttons. This is because the payments are made to the PayPal account, and not your Wix account.</div></div></div></div>

Add a PayPal Donate button to encourage site visitors to donate to your organization, or one you care about. Donate buttons bring your visitors directly to the relevant PayPal account when clicked, so...

Wix Editor: Adding and Setting Up A PayPal Donate Button

Discover how to add a PayPal Donate button to your site using the Wix Editor, allowing visitors to easily contribute to your organization. You can customize the button's layout, set donation amounts, and choose the currency and language. This feature is a straightforward way to encourage donations, but remember that you'll need a PayPal Business or Premier account to use it effectively.

<div data-component-type="text"><div>Add a PayPal Donate button to encourage site visitors to donate to your organization, or one you care about. Donate buttons bring your visitors directly to the relevant PayPal account when clicked, so it's a quick and easy way to get contributions.</div></div><div data-component-type="text"><div>After you add the button to your site and link your PayPal account details, you can choose its layout, and set the language and currency.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><ul>
  <li>This article is about PayPal buttons in the Wix Editor, which is different to <a data-composite="true" href="https://support.wix.com/en/article/connecting-paypal-as-a-payment-provider" target="">adding PayPal as a payment method for use with Wix Stores, Wix Bookings, and other business solutions</a>.</li>  <li>To use the PayPal button, you must have a PayPal Business or Premier account.</li>  <li>You don't get notifications in your Wix account for donations made through PayPal buttons. This is because the payments are made to the PayPal account, and not your Wix account.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-a-paypal-donate-button" level="3">Step 1 | Add a PayPal Donate button</h2></div><div data-component-type="text"><div>Get started by adding a Donate button to your site from the Add panel. You can add multiple buttons to your site in order to encourage visitors to donate, or to link to different organizations.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a Donate button to your site:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Add Elements </strong><img data-composite="true" src="https://lh4.googleusercontent.com/RXtvBVeNsPkYLfP5LwOQR3bSpZaDdyNQdCx2BvWdMSPzKNPHo3-vCjRGXOBN1Yy9rvI-pjTKnSr_eWVYfs_vM_iRvQy4sm-Qfj1yuUckVToFDoSeDVqFaZfvq41-sn3wW5Kao-B5WAjj_HGZFpN-RQ" /><strong> </strong>on the left side of the editor.</li>  <li>Click <strong>Button</strong>.</li>  <li>Click <strong>PayPal Buttons</strong>.</li>  <li>Drag the Donate button on to your site.</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/01/31/e71beb44-47ce-48ad-b310-5d40f3ebd050/c8b62321-5cbf-4130-a4e5-406e0357ef07.png" alt="The Add panel. The Buttons tab has been selected, and the cursor is hovering over the PayPal Donate button." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-set-up-your-button" level="3">Step 2 | Set up your button</h2></div><div data-component-type="text"><div>After you've added the button to your site, set it up with all the relevant information. You can enter the organization details, and decide whether to set a fixed donation amount or not.</div></div><div data-component-type="heading"><h2 id="" level="4">To set up your PayPal Donate button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the PayPal button in your editor.</li>  <li>Click <strong>Add PayPal Info</strong>.</li>  <li>Select <strong>Donating </strong>under<strong> What's this button for?</strong>.</li>  <li>Set up your button using the options:
    <ul>
      <li><strong>What's your PayPal email?:</strong> Enter the email address you want to link into the field.</li>      <li><strong>What's the donation for?: </strong>Enter the name of the organization / cause into the field.</li>      <li><strong>Let visitors set own amount: </strong>Click the<strong> </strong>toggle to enable or disable this option: 
        <ul>
          <li><strong>Enabled:</strong> Allow your visitors to set their own donation amount. </li>          <li><strong>Disabled:</strong> Visitors can only donate a fixed amount. 
            <ul>
              <li><strong>What's the donation amount?:</strong> Enter the set donation amount into field.</li>            </ul>          </li>        </ul>      </li>      <li><strong>What's the currency?:</strong> Click the drop-down menu to select the currency for the button.</li>      <li><strong>Want to add an ID number?: </strong>Add the ID number of the organization into the field (optional).</li>      <li><strong>How does PayPal open?:</strong> Select whether PayPal opens in the same window, or a new window. </li>      <li><strong>What language is the button in?:</strong> Click the drop-down menu to select the button's language.</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/dcafdcaf-894f-4e1d-bef4-9e8034c9acba/ffcc37a3-c4cc-4ee8-82ec-7084eeea3c7e.png" alt="The PayPal button settings panel in the editor. The cursor is hovering over the option to set the donation amount." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">You should know:</div><div class="info-content"><div>Due to changes in the PayPal API, you must fill the <strong>PayPal email </strong>field in order to complete your button's set up.<strong> </strong>We also recommend entering the organization's name, and confirming your donation amount settings. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-updates-to-paypal-buttons" target="">Learn more about changes to PayPal buttons</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-choose-a-layout-for-your-button" level="3">Step 3 | Choose a layout for your button</h2></div><div data-component-type="text"><div>Set how you want the button to look on your site. You can choose between a button that shows accepted cards, or a button without them. </div></div><div data-component-type="heading"><h2 id="" level="4">To choose the layout of your button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the button in your editor.</li>  <li>Click the <strong>Layout</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/vlZibPvSfkqM3AsFNmpIzYkN0HGd-1Rq-AoZ2ySBV2B9mJVAut-PeybyKwVrT_u6xh_fLDGXVR65jHlarmjf-yuWOWejwq5W5oXe27Gy_Jai9XP1X8UaDex2N1w11Ktt8EFFfZtAQrBNydCSGw" />.</li>  <li>Select a layout preset 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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/05/104f15b1-1027-4d7d-bb38-493cc1538fe0/d329c68a-6172-432c-881a-c00164543475.png" alt="The PayPal button layout panel is open in the Editor. The cursor is hovering over the last preset." /></div></div>

Let your visitors easily scroll to the top of your site with a smart Back to Top button. The Back to Top button remains in a fixed position on your site, and is therefore visible even once your visito...

Wix Editor: Creating a Back to Top Button for Your Site

Discover how to enhance user experience on your site by adding a Back to Top button. This feature allows visitors to easily scroll back to the top of your page, improving navigation. Learn to customize the button's design, link it to the top of the page, and pin it for constant visibility. Plus, find out how to ensure it appears on all pages for seamless access.

<div data-component-type="text"><div>Let your visitors easily scroll to the top of your site with a smart Back to Top button. The Back to Top button remains in a fixed position on your site, and is therefore visible even once your visitor scrolls down.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-your-button" level="3">Step 1 | Add your button</h2></div><div data-component-type="text"><div>Back to Top buttons are usually arrows that indicate to your visitors that the button takes them up to the top of the page. We have tons of arrow designs for you to choose from.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a button:</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Add Elements </strong><img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/06/7ed12e24-bf08-4ab0-ba6d-62ef39ef5674.png" /> on the left side of the editor.</li>  <li>Click <strong>Decorative</strong>.</li>  <li>Click <strong>Arrows</strong>.</li>  <li>Drag an arrow onto your site.</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/12/21/9b27a34e-a7ab-4dae-9f96-ea6fa3b06c04/f0426984-83c1-413e-b2c6-80c25d12bc31.png" alt="The Add Elements panel in Wix Editor, highlighting the arrow options" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want a different button?</div><div class="info-content"><div>You can also use other elements such as vector art or icon buttons for your Back to Top button.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-link-your-button-to-the-top-of-the-page" level="3">Step 2 | Link your button to the top of the page</h2></div><div data-component-type="text"><div>Link your button to the top of the page, so that when your visitors click the button, they are taken up to the top.</div></div><div data-component-type="heading"><h2 id="" level="4">To link the button:</h2></div><div data-component-type="text"><ol>
  <li>Click the button in your editor.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/cdff0ec4-6b02-4f12-8539-cf6a845d4dac.png" />.</li>  <li>Click <strong>Top/Bottom of Page</strong>.</li>  <li>Click <strong>Top</strong>.</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/2021/07/19/453b82e4-0cd1-4c3b-93e3-e2c3686df8da/201fca03-47ea-4e77-ad58-d992d757e57c.png" alt="A Back to Top button and its toolbar, highlighting the link icon" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-pin-your-button-to-the-screen" level="3">Step 3 | Pin your button to the screen</h2></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-pinning-elements-to-the-screen" target="">Pin your button</a> to the side of your screen so that it is visible to your site visitors at all times, even when they scroll down your site.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Back to Top buttons usually appear on the bottom right side of the screen.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To pin the button to the screen:</h2></div><div data-component-type="text"><ol>
  <li>Right-click your button.</li>  <li>Click <strong>Pin to Screen</strong>.</li>  <li>Select a position on the grid under <strong>Set position</strong>.</li>  <li>(Optional) Move the element horizontally or vertically by setting an offset: 
    <ul>
      <li>Drag the <strong>Horizontal offset</strong> slider to move the element horizontally, or type a number in the field next to the slider.</li>      <li>Drag the <strong>Vertical offset </strong>slider to move the element vertically, or type a number in the field next to the slider.</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/07/19/83f3f740-ffa1-4bab-bc86-0f17fda5b978/495e49c4-2781-4f2f-ab66-c5dfa5292147.png" alt="A Back to Top button alongside the Pin to Screen panel" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-4-show-your-button-on-all-pages" level="3">Step 4 | Show your button on all pages</h2></div><div data-component-type="text"><div>Make your button accessible from every page and location on your site.</div></div><div data-component-type="heading"><h2 id="" level="4">To show a button on all pages:</h2></div><div data-component-type="text"><ol>
  <li>Right-click your button.</li>  <li>Enable the <strong>Show on All Pages</strong> toggle.</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/83c2bc37-2195-40fa-9e35-3c141adedd9e/fa993b22-ea0f-42be-b345-65e3063d9b8d.png" alt="A Back to Top button alongside the right-click menu, enabling the toggle to show it on all pages" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Back to Top Button on your mobile site:</div><div class="info-content"><div>The Back to Top button will not be displayed on your mobile site. However, you can add <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-a-back-to-top-button-on-your-mobile-site" target="">the mobile Back to Top button</a>, specifically designed for your mobile site.</div></div></div></div>

Congratulations, you're getting married! Add buttons to your wedding website that direct guests to your gift registries so that they can buy you the perfect presents for your big day.Before you start:...

Wix Editor: Adding Gift Registries to Your Wedding Website

Create a beautiful wedding website by adding buttons that link to your gift registries, making it easy for guests to find the perfect presents. This article guides you through the simple steps to customize buttons in your editor, allowing you to choose how they display and link to your registry URLs. Enhance your site further by adding store logos for a personalized touch.

<div data-component-type="text"><div>Congratulations, you're getting married! Add buttons to your wedding website that direct guests to your gift registries so that they can buy you the perfect presents for your big day.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Before you start:</div><div class="info-content"><ul>
  <li>We have <a data-composite="true" href="https://www.wix.com/website/templates/html/events/weddings" target="_blank">tons of wedding templates</a> that you can customize as you wish. Most templates already have a Registry section where you can add your registry links by following the steps below.</li>  <li>Learn more about <a data-composite="true" href="https://www.wix.com/wedding/websites" target="_blank">creating your perfect wedding website</a>.</li></ul></div></div></div><div data-component-type="heading"><h2 id="" level="3">To add links to your wedding registries:</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>Button</strong>.</li>  <li>Click <strong>Text &amp; Icon Buttons.</strong></li>  <li>Drag a button on to your page.</li>  <li>Click <strong>Settings</strong>.</li>  <li>Select an option under <strong>Choose what displays</strong>:
    <ul>
      <li><strong>Text and icon: </strong>Both text and an icon are shown on the button.</li>      <li><strong>Icon only:</strong> The button only displays an icon.</li>      <li><strong>Text only:</strong> The button only displays text.</li>      <li><strong>Nothing: </strong>The button is blank.</li>    </ul>  </li>  <li>Click <strong>Choose a</strong> <strong>Link </strong>under <strong>Links To</strong>.</li>  <li>Click <strong>Web Address</strong>.</li>  <li>Enter your registry URL.</li>  <li>Choose if you want the registry link to open in a new browser window, or the current one.</li>  <li>Click <strong>Done</strong>.</li>  <li>Repeat steps 2-12 for each wedding registry.</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/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2019/06/26/a0e8d7f2-4678-4f8a-98f9-ceed753dde36/4870feb6-8bdd-49d3-8c50-9e84a5e5980f.png" alt="scrrenshot of a site page showing a wedding registry options directory" /></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>Another option is <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-an-image" target="">add the store logo</a> (e.g. Amazon, Target) to your site and link the image to your registry.</div></div></div></div>

Text and icon buttons are a great way to encourage site interaction from your visitors. With a range of options available, you can choose a catchy call-to-action, a striking icon, or even a button tha...

Wix Editor: Adding and Setting Up a Text & Icon Button

Discover how to create engaging text and icon buttons in the Wix Editor to boost visitor interaction on your site. Learn to add buttons, customize their appearance, and set up links to direct users to specific pages or external sites. By following these steps, you can enhance your site's functionality and encourage more clicks from your audience.

<div data-component-type="text"><div>Text and icon buttons are a great way to encourage site interaction from your visitors. With a range of options available, you can choose a catchy call-to-action, a striking icon, or even a button that displays both.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-your-button" level="3">Step 1 | Add your button</h2></div><div data-component-type="text"><div>You can add a button from the <strong>Add</strong> <strong>Elements</strong> panel on the left side of the editor. There are several different options available, with a range of layouts.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a button:</h2></div><div data-component-type="text"><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>Button</strong>.</li>  <li>Click <strong>Text &amp; Icon Buttons</strong>.</li>  <li>Click or drag your chosen button to add it to the 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/01/24/2c0db824-9e9c-4a4f-b2a2-081c730eae23/dc15ba8f-f4d6-4d18-9410-39a6e98227cc.png" alt="A screenshot of the Add Elements panel in Wix Editor, showing the available button designs" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-set-up-your-button" level="3">Step 2 | Set up your button</h2></div><div data-component-type="text"><div>There are many different ways that you can customize your button. Choose what you want to display, and adjust the settings as needed.</div></div><div data-component-type="text"><div>To finish setting up, add a link to your button to direct your visitors to the relevant location. You can link to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button#types-of-links" target="">many different places</a>, such as site pages, external web addresses, or documents.</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 what you choose to display on the button (text, icon, etc.).</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To set up your button:</h2></div><div data-component-type="text"><ol>
  <li>Click the button in your editor.</li>  <li>Click <strong>Settings</strong>.</li>  <li>Select an option under <strong>Choose what displays:</strong>
    <ul>
      <li><strong>Text and icon: </strong>Both text and an icon appear on the button.</li>      <li><strong>Icon only:</strong> The button only shows an icon.</li>      <li><strong>Text only:</strong> The button only shows text.</li>      <li><strong>Nothing: </strong>The button is blank.</li>    </ul>  </li>  <li>Change the button settings using the available options:
    <ul>
      <li><strong>What does it say?: </strong>Enter your chosen button text into the field.</li>      <li><strong>Choose icon:</strong> Choose what kind of icon you want to use:
        <ul>
          <li>Click <strong>Media from Wix</strong> to choose from a variety of free icons offered by Wix.</li>          <li>Click<strong> + Upload Media</strong> to upload and use your own <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-vector-art" target="">vector art </a>files. </li>        </ul>      </li>    </ul>  </li>  <li>Set up the button link:
    <ol>
      <li>Click the <strong>Link</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/8zZfdpxqwt9lhV0e31WR3fVTZaAeF6how0CkEyDwW0xX4262TslqWaHFmxu4rZFjhipV1BNWlD1WnF23EBMNIe_amzYk8jsYqmkkCQV0CTmc2H4ab2qmodtGDFu8RGyKL4P475Ni" /> icon under <strong>Links to</strong>.</li>      <li>Select a link type on the left.</li>      <li>Enter the link details and click <strong>Done</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/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/10/39a3c139-54c8-4804-a221-b0459766f893/72bba2f3-30a5-4573-9e88-7de8be2bf6ad.png" alt="A screenshot of a text and icon button in Wix Editor, next to the Button Settings panel" /></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"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-text-icon-buttons" target="">Customize your text and icon button</a> to make it look how you want.</div></div></div></div>

Image buttons are a unique way to encourage visitors to interact with and navigate around your site. They use images to give your site something extra, and display a unique effect when visitors hover ...

Wix Editor: Adding and Setting Up an Image Button

Discover how to create and customize image buttons on your site to enhance visitor interaction and navigation. Learn to add eye-catching designs, link buttons to specific actions, and customize their appearance for different states (regular, hover, clicked). By following these steps, you can improve usability with tooltips and animations, making your site more engaging and accessible for all users.

<div data-component-type="text"><div>Image buttons are a unique way to encourage visitors to interact with and navigate around your site. They use images to give your site something extra, and display a unique effect when visitors hover over them. You can also customize the design of the buttons for each of their states; regular, hover and clicked view.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Learn more about the button states</h4><div class="collapsible-content"><ul>
  <li><strong>Regular: </strong>How the button is displayed on your site before visitors interact with it.</li>  <li><strong>Hover:</strong> How the button looks when a cursor is hovering over it.</li>  <li><strong>Clicked:</strong> How the button is displayed once it's been clicked.</li></ul><div><br /></div><div><strong>Note:</strong> Hover (tap) effects on image buttons are not currently supported on iOS. Viewers on iOS devices do not see the hover state if they tap the button. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-your-image-button" level="3">Step 1 | Add your image button</h2></div><div data-component-type="text"><div>Choose an eye-catching design from the Add Elements panel to get started on setting up your image button. There are a variety of options to choose from, all with their own striking effects.</div></div><div data-component-type="heading"><h2 id="" level="4">To add an image button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <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>Button</strong>.</li>  <li>Click <strong>Image Buttons</strong>.</li>  <li>Click or drag the relevant button 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/2021/07/12/d9cca7fc-b590-4ac8-9b2c-318d0a7b16ed/0b98dde5-cf1a-4e65-93ae-5a2db31acad7.png" alt="screenshot of add elements panel in wix editor. buttons selected, displaying icon buttons." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-add-a-link-to-your-image-button" level="3">Step 2 | Add a link to your image button</h2></div><div data-component-type="text"><div>Link your image buttons to direct visitors to parts of your site, or to encourage them to perform an action. Options you can link your button to include pages, anchors, and external sites.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a link to your image button:</h2></div><div data-component-type="text"><ol>
  <li>Select your new button.</li>  <li>Click the <strong>Link</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/06/06/868c09f5-c67f-4530-8dfe-4ed4ee500153/a445bae1-12ff-4b91-9207-dfd4f64d2d88.png" />.</li>  <li>Select a link type on the left.</li>  <li>Depending on the link type you selected, add the relevant information.</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/2021/07/12/6c609743-7cf4-40d7-a1c4-27670c792599/ba307ed3-f8e4-4a63-b40c-49cec0b87572.png" alt="icon button selected, link icon highlighted with where do you want to link to showing." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-customize-your-image-button" level="3">Step 3 | Customize your image button</h2></div><div data-component-type="text"><div>Customize your image button to suit your site's look and feel. You can apply animation and transition effects, and add a tooltip to advise visitors on where the button will lead them to.</div></div><div data-component-type="text"><div>Click an option below to learn how to adjust and customize your image button.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Change the button's image</h4><div class="collapsible-content"><ol>
  <li>Select the button in your editor.</li>  <li>Click <strong>Change Image</strong>.</li>  <li>Click the relevant tab at the top of the panel to select the button state you want to edit: <strong>Regular</strong>, <strong>Hover</strong>, or <strong>Clicked</strong>. </li>  <li>Click <strong>Change Image</strong>.</li>  <li>Choose what kind of image you want to use:
    <ul>
      <li>Click <strong>Media from Wix</strong> to choose from a variety of free images offered by Wix.</li>      <li>Click<strong> + Upload Media</strong> to upload and use your own image.</li>    </ul>  </li>  <li>Click <strong>Apply</strong>. </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Apply a transition effect to your button</h4><div class="collapsible-content"><ol>
  <li>Select the button in your editor.</li>  <li>Click <strong>Change Image</strong>.</li>  <li>Choose <strong>Dissolve</strong> under <strong>Apply transition effects?</strong>.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add a tooltip to your button</h4><div class="collapsible-content"><div>Add a tooltip to provides visitors with helpful context or guidance when they hover over the button, enhancing usability.</div><div><br /></div><ol>
  <li>Select the button in your editor.</li>  <li>Click <strong>Change Image</strong>.</li>  <li>Enter the text of your tooltip under <strong>Tooltip text</strong>.</li></ol><div><br /></div><div><strong>Note:</strong> Adding a tooltip is a crucial step towards <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checklist-for-improving-your-sites-accessibility" target="">making your site accessible</a>. </div>  </div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add an accessible name to your button</h4><div class="collapsible-content"><div>Add an accessible name to improve screen reader support and make the site more inclusive and user-friendly for visually impaired visitors.</div><div><br /></div><ol>
  <li>Select the button in your editor.</li>  <li>Click <strong>Change Image</strong>.</li>  <li>Enter the description of your image button under <strong>Accessible name</strong>.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add an animation effect to your button</h4><div class="collapsible-content"><ol>
  <li>Select the button in your editor.</li>  <li>Click the <strong>Animation</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/qZdxYz1tRldM35Sf7qrJ9eYIjvlmcVfG_69hTHINgzRdIDTtTTUfYsBVVH9gGzoULCYZulUru2GCBtl4t7mA7I9VuxIfyPOfEcoKZSLQyoB3v5Uym8WZf0ranxNDGldDNZUYJe-Y" />.</li>  <li>Select an animation to apply to the button.</li>  <li>(Optional) Click <strong>Customize</strong> to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-customizing-an-animation#customizing-an-animation" target="">adjust the animation</a>.</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/9333d9a4-f20e-4fad-b60a-a3db3bb4a88d/afee343a-ca57-4b5f-945d-bd67b1965f56.png" alt="Icon button selected in the Wix editor. Change image button 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>If you want to change the color of an image from Wix, you must edit it in an external program, then <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-uploading-your-own-images" target="">upload the file to your Media Manager</a>.  </div></div></div></div>

PayPal have announced that they are moving to a new version PayPal buttons in February 2023. This means that there are important changes to the way you set up and use PayPal Buy Now and Donate buttons...

Wix Editor: Updates to PayPal Buttons

Discover how to set up and update your PayPal Buy Now and Donate buttons on your Wix site following the recent changes announced by PayPal. This article outlines the required and recommended fields to ensure smooth transactions, such as connecting your PayPal email and entering product or donation details. Learn how to enhance the user experience with updated pop-up features and ensure your settings are published for live use.

<div data-component-type="text"><div>PayPal have announced that they are moving to a new version PayPal buttons in February 2023. This means that there are important changes to the way you set up and use PayPal Buy Now and Donate buttons on your Wix site. </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>This article refers to the use of <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-about-paypal-buttons" target="">PayPal buttons only</a>, and is separate from <a data-composite="true" href="https://support.wix.com/en/article/connecting-paypal-as-a-payment-provider" target="">connecting PayPal as a payment provider</a>. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="updates-to-paypal-buy-now-buttons" level="3">Updates to PayPal Buy Now buttons</h2></div><div data-component-type="text"><div>Due to changes in the API of PayPal buttons, there are certain steps in the process of setting up your Buy Now button that are required, or that we recommend completing.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me required fields</h4><div class="collapsible-content"><div>The following field is <strong>required</strong>, and must be completed in order to continue receiving payments:</div><ul>
  <li><strong>What's your PayPal email?: </strong>Connect the relevant PayPal email account in order to receive payments.</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/2023/02/09/053fdc52-c1ca-42bc-ae3d-1dc6533ba2e1/674af2af-c69e-4ddd-8e30-ed88c9512279.png" alt="undefined" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me recommended fields</h4><div class="collapsible-content"><div>We recommend filling out the following fields in order to display the product name and price:</div><ul>
  <li><strong>What's the product's name?:</strong> Enter the name of your product in the field.</li>  <li><strong>What's the price?:</strong> Enter the product price to determine how much visitors pay during the transaction.</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/2023/02/09/167120cb-5270-46b3-b5bc-d87ef378d637/a1075d31-4be4-4220-8e09-300bab40d19b.png" alt="undefined" /></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/2023/01/31/6ccb6b32-06b5-4a93-b7e1-269bda18dc78/fc9a04f4-c1df-4f88-9832-910f32059061.png" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Want to know how to update your settings?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-paypal-buy-now-button" target="">Learn how to set up your Buy Now button</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="updates-to-paypal-donate-buttons" level="3">Updates to PayPal Donate buttons</h2></div><div data-component-type="text"><div>As the API of PayPal buttons has changed, some fields in the process of setting up your Donate button must be filled in order for it to function as expected. There are also additional fields that we recommend completing to ensure a clear, smooth experience for your visitors.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me required fields</h4><div class="collapsible-content"><div>The following field is <strong>required</strong>, and must be completed in order to continue receiving donations:</div><ul>
  <li><strong>What's your PayPal email?: </strong>Connect the relevant PayPal email account in order to receive payments.</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/2023/02/09/5f5c8efd-1edb-471f-bef5-8b90203c7fd8/abf692a7-873b-42de-830b-6eefab6a4e1d.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Show me recommended fields</h4><div class="collapsible-content"><div>We recommend filling out the following fields in order to display the organization name and donation amount:</div><ul>
  <li><strong>What's the donation for?:</strong> Enter the name of the organization or cause.</li>  <li><strong>What's the donation amount?:</strong> Set the contribution amount to determine how much visitors donate to the cause. </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/2023/02/21/0e776012-d765-4e55-83f4-c998c762b55a/377717dc-7cf6-4298-97c7-c1b63439e716.png" /></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>If you enable the <strong>Let visitors set own amount</strong> toggle, the <strong>donation amount</strong> field doesn't need to be filled. However, if you disable this option, we recommend setting an amount.</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/2023/02/21/537298f1-8944-4917-92a4-d202ec25e4f0/9639d430-0825-453c-b492-14a688955836.png" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Ready to change the settings?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-paypal-donate-button" target="">Learn how to set up your Donate button</a>.</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="text"><div>Click a question below to learn more about updates to your PayPal buttons.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Are there any other changes?</h4><div class="collapsible-content"><div>The process for your visitors has also been updated. If visitors click the button on your live site, a pop-up appears that allows them to either cancel the payment, or to complete the transaction / donation.</div><div><br /></div><ul>
  <li>If you've entered a product description on a Buy Now button, this is displayed in the pop-up.</li>  <li>If you have enabled the option to let visitors set the donation amount on a Donate button, they can also use this pop-up to enter that chosen amount.</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/2023/02/16/bf4ee238-e0c0-44cc-90d4-44247bec1780/b1e8d161-32dc-4e60-95d7-ff60ee1dc9fa.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Is there anything I need to do after I've filled out the fields?</h4><div class="collapsible-content"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#publishing-your-site" target="">Publish your changes</a> after setting up a PayPal button to ensure that the updates are reflected on your live site.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What happens if I don't enter my business / organization email address?</h4><div class="collapsible-content"><div>If you do not enter your business or organization email address, visitors who click the button see an error message, and are unable to complete the payment. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What happens if I don't enter the product / organization name?</h4><div class="collapsible-content"><ul>
  <li>If you don't enter the name of the product, the field remains empty on your live site and visitors can enter a product name in the pop-up. </li>  <li>If you don't enter the name of the organization or cause, visitors who click the button on your live site see a default placeholder name.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What happens if I don't set a product price / donation amount?</h4><div class="collapsible-content"><div>If you don't enter a price for your product or a donation amount, visitors who click the button on your live site are prompted to enter their own amount </div><div><strong>Note:</strong> This occurs on donation buttons even if you've disabled the <strong>Let visitors set own amount</strong> toggle.</div></div></div></div>

Share buttons are an excellent tool for increasing your sites visibility. These buttons let visitors to share the site's homepage or the specific page they're viewing. With seamless integration into p...

Wix Editor: Adding and Customizing Share Buttons

Discover how to enhance your site's visibility by adding and customizing share buttons that allow visitors to easily share your content on platforms like Facebook and WhatsApp. Learn to select the design, link options, and preferred social platforms, as well as adjust the layout and style to match your site's branding. By following this guide, you can create an engaging sharing experience that encourages more visitors to promote your site.

<div data-component-type="text"><div>Share buttons are an excellent tool for increasing your sites visibility. These buttons let visitors to share the site's homepage or the specific page they're viewing. With seamless integration into platforms such as Facebook and WhatsApp, sharing has never been simpler.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-and-setting-up-share-buttons" level="3">Adding and setting up share buttons</h2></div><div data-component-type="text"><div>Add the design you like, then choose whether the button links to the current page or the site's homepage. </div></div><div data-component-type="heading"><h2 id="" level="4">To add and set up the share buttons:</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>Social</strong>.</li>  <li>Select <strong>Share Buttons</strong>. </li>  <li>Drag the design you like onto the page. </li>  <li>Choose the page the buttons link to:
    <ol>
      <li>Click <strong>Settings</strong>.</li>      <li>Select the relevant option under <strong>What page is shared?</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/05/20/659f0f2e-7496-461c-9b4e-f1e2dac6d453/d4d1d6d7-4aa2-4e81-b2af-d13b5ec5a260.png" alt="screenshot of social share bar selected, with settings panel option displaying 2 share options." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="choosing-which-buttons-to-show" level="3">Choosing which buttons to show</h2></div><div data-component-type="text"><div>Choose the social platforms where you'd like visitors to share your site. You can remove irrelevant buttons and rearrange them to fit your preferences.</div></div><div data-component-type="heading"><h2 id="" level="4">To choose which buttons to show:</h2></div><div data-component-type="text"><ol>
  <li>Select the Share Buttons element.</li>  <li>Click <strong>Manage Share Buttons</strong>.</li>  <li>Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2020/02/05/2f36aa18-46ad-4cf5-a0c2-dffa06797184/a9ccc776-1c7d-42fe-92e8-498847a5649f.jpg" />.<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/20/6ff012f9-6a0d-4097-911a-a47878b1806c/3a44fa67-9cec-4ff7-a889-3ee995359f17.png" /></li>  <li>Choose what to do next:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Replace icon</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Replace icon</strong>.</li>  <li>Select a new social icon from the Media Manager.</li>  <li>Click <strong>Choose File</strong>.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Edit text</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Edit text</strong>. </li>  <li>Enter your preferred text. </li>  <li>Click <strong>Done</strong>. </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Hide </h4><div class="collapsible-content"><ol>
  <li>Hover over the relevant button in the panel.</li>  <li>Click the <strong>More Actions</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/T89lBevxWj-jv6hJArWPUBxwqOaz6E8b3yRS5W8EIFwMZziVYFSMf57cCcgHREOl4c2hfLSTBhFoEKKAipLjByQ76KcpjiqvKI_29IOLqO9F0bO7yQJXJaoi4TUIws0xKmtnqrZvR4X5fLyWdhzT7aaaiZLwriZ87eFHrxx3nPcqxvmaFyYWYZQ1sr_Y" />.</li>  <li>Select <strong>Hide</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/-NqzPWLTPXTjQ0SM245fuCvoG-CXsCv3_SOlO7t1bewJUiIONS4G3Kt3I2lHYvn46QRm5nvDX96PKd2zwDu9Df24bqbafIDDMLpFCAQWWk7pj-AXRKQieogRTm5tXtuhvV4b-WkN_mLgx0zv8KPFJPfrXBk-utX7VKMqIvFP41jcwZCN5fv9WQHwufvpNg" />.</li></ol>  </div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-the-share-buttons-layout" level="3">Adjusting the share buttons' layout</h2></div><div data-component-type="text"><div>Modify the button layout to match your site’s design. Decide whether to display the social network icons, text alone, or both side-by-side. Additionally, adjust options such as alignment and spacing to provide a clear display for visitors.</div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the buttons' layout:</h2></div><div data-component-type="text"><ol>
  <li>Select the Share Buttons 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/7d0bb4af-c8ec-4965-ba04-bc8a51c16565.png" />.</li>  <li>Choose what to adjust:
    <ul>
      <li><strong>Choose a layout: </strong>Decide if the buttons are displayed horizontally or vertically. </li>      <li><strong>Choose what displays: </strong>Choose if you want to only show the icons, only show text, or both. </li>      <li><strong>Icon position: </strong>When you set both text and icons to appear, you can choose where the icon appears in relation to the text (e.g. above the text). </li>      <li><strong>Button alignment: </strong>Align the buttons to the left, right or center or the element.</li>      <li><strong>Spacing:</strong> Drag the sliders to increase or decrease the space between the buttons, rows and icon and text (when applicable). </li>      <li><strong>Button direction: </strong>This controls the order of the buttons, based on the way you arranged them in the Manage Share Buttons panel.<br />
<strong>Note:</strong> This option is only available if you choose the Horizontal layout.</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/05/20/11c0e912-f404-43f8-95d8-e51e7e4cb7c4/3ea6a717-e008-4cae-9d9d-d16dea40ea0d.png" alt="screenshot of social share bar selected, with the layout icon selected and share button layout settings displayed." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-the-share-buttons" level="3">Designing the share buttons</h2></div><div data-component-type="text"><div>There are many ways to customize the share buttons. Add an engaging background, resize the icons, style the text, and more. You can design the buttons for two different states: Regular and Hover.</div></div><div data-component-type="heading"><h2 id="" level="4">To design the buttons:</h2></div><div data-component-type="text"><ol>
  <li>Select the Share Buttons element.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/20/1041bedb-e913-4b70-b36d-8978ff06467a/9aa4ecae-5ccd-4d19-bbf8-98068613e802.png" />.</li>  <li>Click <strong>Customize Design</strong>. </li>  <li>Select a state from the drop-down: <strong>Regular</strong> or <strong>Hover</strong>.</li>  <li>Choose how to design the buttons:
    <ul>
      <li><strong>Background fills: </strong>Pick a color, gradient or image fill for the buttons. You can add multiple layers and adjust their opacity for a more interesting effect.</li>      <li><strong>Borders: </strong>Add borders in the color and style you want to make the buttons stand out.</li>      <li><strong>Corners: </strong>Make the corners of the buttons square or round. </li>      <li><strong>Shadows: </strong>Add shadow behind the element for a cool 3D effect.</li>      <li><strong>Text: </strong>Style and format the text appearing on the element. </li>      <li><strong>Layout: </strong>Add padding around the icons to make the buttons bigger. </li>      <li><strong>Icon: </strong>Adjust the icon size and angle. </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/05/20/3a29cea0-b30f-4fa0-8aac-9ccc506c9ffa/fb2686ca-4110-42f2-8680-08168875027b.png" alt="share bar selected with design icon selected showing share button design panel options, including regular and hover." /></div></div>

Currently, it is not possible to download a printer-friendly version or add a &quot;print&quot; button to your site for your visitors to print pages. However, visitors can print your site pages using ...

Wix Editor Request: Making Your Pages Printer-Friendly

Discover the current limitations regarding printing options on your site. While you can't add a "print" button or download a printer-friendly version, visitors can still print pages using Ctrl+P, although some formatting may be lost. Alternatively, they can take screenshots and print those. Your feedback is valuable as we continue to enhance our features.

<div data-component-type="text"><div>Currently, it is not possible to download a printer-friendly version or add a &quot;print&quot; button to your site for your visitors to print pages. </div></div><div data-component-type="text"><div>However, visitors can print your site pages using <strong>Ctrl</strong>+<strong>P</strong>, though they may lose some of the formatting and styles appearing on the site page. Visitors can also take screenshots of your site pages and print them from their desktop. </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, you cannot have button text on more than one line. The button text is displayed on one line, and ellipsis (...) are shown if the text doesn't fit. We are always working to update and improv...

Wix Editor Request: Multiple Lines of Text on a Button

Discover the current limitation of button text in Wix, which only displays on one line with ellipsis for overflow. While multi-line text isn't supported yet, your feedback is valuable as we continuously strive to enhance our products. Stay informed about updates and improvements!

<div data-component-type="text"><div>Currently, you cannot have button text on more than one line. The button text is displayed on one line, and ellipsis (...) are shown if the text doesn't fit. </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>

Adding a box to your page can help create a stunning, original look on your Wix site. Choose from a range of different styles, shapes and colors, attach elements to a box and use them to group element...

Wix Editor: Adding and Setting Up a Box

Discover how to enhance your Wix site by adding and customizing boxes to create a stunning, professional look. Learn to choose from various styles, shapes, and colors, and group elements together for a cohesive design. With easy customization options for colors, borders, and shadows, you can make your boxes truly unique and aligned with your brand. Start experimenting to elevate your page design!

<div data-component-type="text"><div>Adding a box to your page can help create a stunning, original look on your Wix site. Choose from a range of different styles, shapes and colors, attach elements to a box and use them to group elements together.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-box" level="3">Adding a box</h2></div><div data-component-type="text"><div>Boxes make it easy to design beautiful looking pages that are structured and look professional. They come in lots of shapes and styles so pick your favorite and start experimenting!</div></div><div data-component-type="heading"><h2 id="" level="4">To add a box:</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>Box</strong>.</li>  <li>Click <strong>Container Boxes.</strong></li>  <li>Drag a box element on 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/2021/07/19/3d5866f8-5cef-4f35-8bcd-e77803deaa1b/c9ce2dcb-29f2-4e8e-91f2-6957824682db.png" alt="screenshot from add elements panel in wix editor, container boxes selected and display of box options showing." /></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 attach almost anything to container boxes and move them around your pages in one block of content. Use them to create text boxes, banners, headers, logos and more.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-box-design" level="3">Customizing your box design</h2></div><div data-component-type="text"><div>Choose a box from the wide range of shapes available, then customize it to match your site – you can change the background to an interesting gradient, add borders, round the corners and more.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize a box design:</h2></div><div data-component-type="text"><ol>
  <li>Click the relevant box in the editor.</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" />.</li>  <li>Select a preset design or click <strong>Customize Design</strong>.</li>  <li>Customize your box using the following options:
    <ul>
      <li><strong>Fill Color &amp; Opacity: </strong>Select the box's colors and opacity.
        <ul>
          <li>Drag the slider to change the opacity.</li>          <li>Click the color box to change the color or gradient.</li>        </ul>      </li>      <li><strong>Borders: </strong>Design your box's borders.
        <ul>
          <li>Drag the slider to change the opacity.</li>          <li>Click the color box to change the color.</li>          <li>Drag the slider to change the width</li>        </ul>      </li>      <li><strong>Corners: </strong>Round your box's corners.</li>      <li><strong>Shadow: </strong>Design a shadow for your box.</li>      <li><strong>Spacing: </strong>Customize the box border spacing.</li>    </ul>  </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>The customization options available depend on the preset you choose at the top of the panel.</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/19/32a7e7b4-467d-43b3-a5ec-df8062648b85/73b28560-7d47-4524-9af5-61f6a7ea38e8.png" alt="screenshot of box design panel in wix editor. different designs, background and opacity options displayed." /></div></div>

Add a popup to grab your visitors' attention and showcase important announcements and information. You can add elements to the popup message, decide when it's triggered, and even choose how visitors c...

Wix Editor: Adding and Setting up a Popup

Create an engaging popup on your site to capture your visitors' attention and share important announcements. This article guides you through adding a popup, customizing its design, and adjusting its settings for optimal visibility. You’ll learn how to choose when and where the popup appears, as well as how visitors can close it. Enhance your site's interactivity and communication with effective popups!

<div data-component-type="text"><div>Add a popup to grab your visitors' attention and showcase important announcements and information. You can add elements to the popup message, decide when it's triggered, and even choose how visitors close it.</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/17/dd7218c2-742b-451c-a6b4-dd943cfc9ac4/b2661a45-ec9a-4dd6-a99b-0a6264e77514.gif" alt="A GIF showing a lightbox popping up on a Wix live site." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-a-popup" level="3">Step 1 | Add a popup</h2></div><div data-component-type="text"><div>Add a popup to begin creating something interactive and informative for your site visitors. There are a range of templates and types to choose from, such as &quot;Welcome&quot; and &quot;Contact&quot;.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a popup:</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Add Elements  </strong><img data-composite="true" src="https://lh5.googleusercontent.com/2_Q3UWFeRrr5eTMMy5BcmnSAohKtI_dMraA_5NEO86PZzJ1C6RLZFszKuF-1mKgkvV4ee4eSdDzyvTbeogg8P5XGH8QMTpNCPtZMEWh1kJV1_Jk7RjMl4g4JvgeWtKfTBU5Wfg_V" /> on the left side of the editor.</li>  <li>Click <strong>Interactive</strong>.</li>  <li>Select a category under <strong>Popups</strong>.</li>  <li>Click or drag your chosen popup to add it to your site.</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/2025/10/31/df458e89-bebf-4f57-9cdc-f940aa8ed8a3/b3667f95-2080-4c41-80a5-9e44a1e37e96.png" alt="Add elements panel showing popups." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-customize-your-popup" level="3">Step 2 | Customize your popup</h2></div><div data-component-type="text"><div>Next, start building the popup and designing the way it looks. You can customize existing elements and add elements like text, buttons, forms, images and much more. Make sure that the elements you add are smaller than the popup so that they fit inside of it.</div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to a popup:</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2021/11/02/0b84b086-cf99-4826-93e0-9ffff492898a/c4974969-a151-4474-b053-c2dcfe3e00e6.png" /> on the left side of the editor.</li>  <li>Click <strong>Popups</strong>.</li>  <li>Select the relevant popup to view it.</li>  <li>Click the popup on the canvas.</li>  <li>Start <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-lightbox" target="">customizing your popup</a>:
    <ul>
      <li>Add more elements.<br />
<strong>Tip: </strong>When dragging the element from the Add Elements panel, drop it when you see the &quot;Attach to Popup&quot; message.</li>      <li>Click existing elements to edit them. </li>      <li>Change the popup background and the overlay around it. </li>    </ul>  </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>When you add a popup, you enter Popup Mode. This allows you to set up and edit your popup. To go back to the regular editor, click<strong> Exit Mode</strong> on the top bar.</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/2025/10/31/dfebeea3-df6e-4feb-bebd-f3e46d5e01c8/4802ac1e-9f9b-43e6-a270-d2053a3e815a.png" alt="Screenshot of Popup mode in editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-adjust-the-popup-settings" level="3">Step 3 | Adjust the popup settings</h2></div><div data-component-type="text"><div>After designing your popup message, decide when, where and how it appears to visitors. You can set the popup to show automatically once the page loads, or link it to an element that visitors need to click.  </div></div><div data-component-type="text"><div>You can also schedule your popup to appear at a certain time (e.g. a specific holiday season), and decide how visitors exit the popup. </div></div><div data-component-type="heading"><h2 id="" level="4">To adjust the popup settings:</h2></div><div data-component-type="text"><ol>
  <li>Click <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2021/11/02/0b84b086-cf99-4826-93e0-9ffff492898a/c4974969-a151-4474-b053-c2dcfe3e00e6.png" /> on the left side of the editor.</li>  <li>Click<strong> Popups</strong>.</li>  <li>Select the relevant popup to view it.</li>  <li>Click the popup on the canvas.</li>  <li>Click <strong>Set Triggers</strong>.</li>  <li>Adjust the popup settings:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Choose where and when the popup appears</h4><div class="collapsible-content"><div>Select an option under <strong>Automatically display popup on pages</strong>:</div><ul>
  <li><strong>Yes:</strong> Your popup is displayed when a page loads. 
    <ol>
      <li>Click the <strong>Which pages is it on?</strong> field. </li>      <li>Select the pages you want the popup to appear on, or select the <strong>First page visitor sees </strong>checkbox.</li>      <li>(Optional) Drag the <strong>Delay</strong> slider to increase or decrease the time between the page loading and the popup appearing.<br />
<strong>Note:</strong> This slider does not appear on all popups.</li>    </ol>  </li>  <li><strong>No: </strong>The popup does not appear when a site visitor enters a page. Instead, you can link to it from elements on your site.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Schedule the popup for certain dates and times</h4><div class="collapsible-content"><div>Under <strong>Popup Scheduling</strong>, you can set a specific schedule for your popup. This is helpful for displaying offers or services that are available for a limited time:</div><ul>
  <li><strong>Dates:</strong> Use the options to select the start date and end date for your popup.</li>  <li><strong>Times:</strong> Select the start and end time for the popup schedule.</li>  <li><strong>Time zone:</strong> Choose your time zone from the options in the drop-down.</li>  <li><strong>Clear scheduling:</strong> Remove scheduling you previously added to the popup.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Decide how visitors close the popup</h4><div class="collapsible-content"><div>Choose how visitors close the popup after reading its message. You can select multiple ways to close the box, or just one. For example, you can let visitors click the overlay behind the popup to close it, while adding an 'Close' button that's more explicit.</div><div><br /></div><div><strong>To enable / disable the X and 'Close' buttons:</strong> </div><div>Select an option under <strong>How does popup close?</strong>:</div><ul>
  <li><strong>'X' icon:</strong> Visitors can close the popup by clicking an X icon.</li>  <li><strong>'Close' button:</strong> Visitors can close the popup by clicking a button that says 'Close'.</li></ul><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/4fc0ceaa-52dd-47b7-a548-fa0c24005ecd/819f581b-b1e3-402b-8695-057a60553670.png" /></div><div><br /></div><div><strong>To add / remove the option to click the overlay to close the popup:</strong></div><ol>
  <li>Click the overlay (the space around your popup) in the editor.</li>  <li>Click <strong>Set Up Overlay</strong>.</li>  <li>Enable or disable the <strong>Clicking closes popup </strong>toggle.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/7860d93e-16ba-47ba-96ee-37fd30995dad/e45d1125-5390-4642-90d7-b960fdb85a0c.png" /></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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/f4188b06-415e-4657-ab9f-ff4a1903f1e9/cd4f554d-82da-454a-813d-0b87dc3c2156.png" alt="Popup settings panel scteenshot." /></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"><div>Customize your popup's design and position to further personalize your site's announcements. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-your-lightbox" target="">Learn how to customize a popup</a></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="text"><div>Click below to read answers to our most frequently asked questions about popups:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I set multiple popups to show on a page?</h4><div class="collapsible-content"><div>It is only possible to display one popup that opens automatically per page. However, you can display multiple popups on one page if you link them from other elements. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I preview my popup before making the changes live?</h4><div class="collapsible-content"><div>Popups that you link to elements are shown on your site preview (when you click the elements). However, popups that you set to open automatically are only displayed on your live site.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I share a link to the popup?</h4><div class="collapsible-content"><div>Popups do not have a unique URL, and therefore you cannot share them on social media or other platforms. Therefore, we do not recommend using popups for the main content of your site. </div></div></div></div>

Boxes are a great way to display information on your site, and attaching elements to them is a useful way to keep your pages neat and organized. You can attach elements such as images, text, buttons, ...

Wix Editor: Attaching Elements to a Box

Discover how to effectively use boxes on your site to display information and keep your pages organized. Learn to attach elements like images, text, and buttons to boxes using a simple drag-and-drop method. This article also addresses common issues, such as elements being hidden behind boxes, and explains how to detach elements when needed, ensuring your site remains neat and visually appealing.

<div data-component-type="text"><div>Boxes are a great way to display information on your site, and attaching elements to them is a useful way to keep your pages neat and organized. You can attach elements such as images, text, buttons, and more.</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/03/29/c5ceb956-73be-4e07-a104-2c5bceeb04cb/6bf173b4-50d2-4d3a-8efd-3288e37b9523.png" alt="Example of a box in Wix Editor with text, button and 2 vector art images attached" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="attaching-elements-to-a-box" level="3">Attaching elements to a box</h2></div><div data-component-type="text"><div>Use drag and drop to start attaching the relevant elements to your box. When the <strong>Attach to Box</strong> message is displayed, it means you can drop the element. </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>An element must be smaller than the box in order to be attached to it.</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/19/17c031d0-13c0-48b1-95ba-8166a71714ba/1ddb8fba-4428-4901-ae84-3b94b549d9b1.gif" alt="GIF demonstrating how to drag and drop a button onto a box to attach it" /></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">I attached the box but can't see my elements now. What happened?</h4><div class="collapsible-content"><div>When attaching elements to a box, the layers of the editor may cause them to be hidden behind the box. 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="">box backward and your elements forward</a> for them to appear on the box.</div><div><br /></div><div>Learn how to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-viewing-and-selecting-overlapping-elements" target="">view and select overlapping elements</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I detach an element that is currently attached to the box?</h4><div class="collapsible-content"><div>Yes, simply drag and drop it outside of the box.</div></div></div></div>

Customize your popup to make it look how you want. You can choose an overlay to cover the page around the popup, set the popup's position, and change the background to create a design that's unique to...

Wix Editor: Customizing Your Popup

Customize your popup in the Wix Editor to reflect your brand's unique style. Learn how to adjust the layout, set up overlays, and choose backgrounds, including colors, images, or videos. You can also personalize the close button and X icon to enhance user experience. By following these steps, you’ll create an engaging and visually appealing popup that captures your visitors' attention.

<div data-component-type="text"><div>Customize your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox" target="">popup</a> to make it look how you want. You can choose an overlay to cover the page around the popup, set the popup's position, and change the background to create a design that's unique to your brand. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/19/81a5d706-6d0d-4c7e-81c1-8ad49db6be45/a1b49488-523a-443a-a88b-f2ea1a8ee9b0.png" alt="A screenshot of a customized lightbox on a live Wix site." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-the-layout-of-a-popup" level="3">Adjusting the layout of a popup</h2></div><div data-component-type="text"><div>Set where the popup appears on your page. You can choose a corner of the page where it should appear, and adjust the distance of the popup from the edges of the screen (offset).</div></div><div data-component-type="heading"><h2 id="" level="4">To choose your popup's layout:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Pages &amp; Menu</strong> <strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/08/b70d5f62-ff17-48eb-b33b-f6f44795b00f/f3dd9d23-7fe3-4942-87a6-bec78441affe.png" />  on the left side of the editor.</li>  <li>Click<strong> Popups</strong>.</li>  <li>Click the relevant popup to open it.</li>  <li>Select the popup 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/04/05/144c5a3e-f545-43b9-be37-2bed51ee0d27.png" />.</li>  <li>Choose how you want to adjust the layout:
    <ul>
      <li><strong>Set position:</strong> Click a rectangle on the grid to set the position of your popup on the page.</li>      <li><strong>Horizontal offset: </strong>Move the box to the left or right of the screen.</li>      <li><strong>Vertical offset:</strong> Move the box up or down on the screen.</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/2025/10/31/6e37801b-f48d-48c1-b588-a60c461eba4e/41f1e8e1-2c5d-475e-b364-3fa503aa11da.png" alt="popup mode showing layout panel wix editor" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="setting-up-the-popup-overlay" level="3">Setting up the popup overlay</h2></div><div data-component-type="text"><div>Your overlay is the space around the popup that blocks out the rest of your site. This helps visitors focus on the message of your popup. Choose if your site visitors can click the overlay to close to the popup.</div></div><div data-component-type="heading"><h2 id="" level="4">To set up the overlay:</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>Pages &amp; Menu</strong> <strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/08/b70d5f62-ff17-48eb-b33b-f6f44795b00f/f3dd9d23-7fe3-4942-87a6-bec78441affe.png" />  on the left side of the editor.</li>  <li>Click <strong>Popups</strong>.</li>  <li>Click the relevant popup to open it.</li>  <li>Click anywhere outside of the popup to select this area.</li>  <li>Choose what to do next:
    <ul>
      <li><strong>Decide if visitors click the overlay to close the popup:</strong> 
        <ol>
          <li>Click<strong> Set Up Overlay</strong>.</li>          <li>Enable or disable the <strong>Clicking Closes Popup</strong> toggle.<br />
<strong>Note:</strong> If you disable this option, make sure that you have either an 'X' icon or 'Close' button on your popup. </li>        </ol>      </li>      <li><strong>Design the overlay:</strong> 
        <ol>
          <li>Click <strong>Change Overlay Background</strong>.</li>          <li>Choose between a color, image or video background.</li>          <li>(Optional) Click<strong> Settings</strong> to adjust the overlay.<br />
<strong>Tip: </strong>You can adjust the opacity of color and image backgrounds. We recommend making the overlay slightly transparent so that your visitors can still see the page behind the popup but understand that it is blocked.</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/2025/10/31/83601046-7e21-43ce-b681-a5c83e37f119/fbe979e0-dd31-45ab-b761-4401c9103f16.png" alt="popup mode wix editor" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Overlays on your mobile-friendly site:</div><div class="info-content"><ul>
  <li>It is not possible to edit your popup overlay on the mobile version of your site.</li>  <li>If you add a color or image overlay on desktop, this is automatically applied to your mobile site. However, if you add a video overlay, this will convert to a still image from the video on the mobile version of your site.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="setting-the-popup-background" level="3">Setting the popup background</h2></div><div data-component-type="text"><div>Choose to have either a color, image or video background on your popup. Depending on the type you choose, you can also adjust settings such as the visibility and scaling.</div></div><div data-component-type="heading"><h2 id="" level="4">To choose a background for your popup:</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>Pages &amp; Menu</strong> <strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/08/b70d5f62-ff17-48eb-b33b-f6f44795b00f/f3dd9d23-7fe3-4942-87a6-bec78441affe.png" />  on the left side of the editor.</li>  <li>Click<strong> Popups</strong>.</li>  <li>Click the relevant popup to open it.</li>  <li>Select the popup in the editor.</li>  <li>Click the <strong>Design </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/04/05/c786e95e-3b91-413c-856c-98a6bccb9fb4.png" />.</li>  <li>Click the type of background you want for your popup:
    <ul>
      <li><strong>Color: </strong>Select a color from the Color Picker, or add and adjust a stunning gradient. </li>      <li><strong>Image:</strong> Select your own image, one from Wix, or Shutterstock.</li>      <li><strong>Video: </strong>Select a free Wix video or upload your own.</li>    </ul>  </li>  <li>(Optional) Click <strong>Settings</strong> to adjust the background to your liking.</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/2025/10/31/ffe2aef6-fa59-4cdf-8306-5f227b50ca0f/7132fd77-9251-4b0e-8e46-5719c076ef12.png" alt="pop up mode showing popup background settings wix editor" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-popup-close-button" level="3">Customizing the popup Close button</h2></div><div data-component-type="text"><div>Adjust the look and layout of the button visitors click to close your popup. You can choose the text, set the alignment of the button text, and customize its design for Regular and Hover view to make it stand out.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize the Close button:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Pages &amp; Menu</strong> <strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/08/b70d5f62-ff17-48eb-b33b-f6f44795b00f/f3dd9d23-7fe3-4942-87a6-bec78441affe.png" />  on the left side of the editor.</li>  <li>Click <strong>Popups</strong>.</li>  <li>Click the relevant popup to open it.</li>  <li>Select the popup in the editor.</li>  <li>Click the <strong>Close</strong> button.</li>  <li>Choose how to customize the button:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Change the text that appears on the button</h4><div class="collapsible-content"><ol>
  <li>Click <strong>Change Text</strong>.</li>  <li>Enter the text into the field.</li>  <li>Press <strong>Enter</strong> on your keyboard.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/17/43510465-91f1-48f3-9761-9f0ca52e2685/da2d7c98-b4cf-4408-a07d-ffa3760eabad.png" /></li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Adjust the text alignment on the button</h4><div class="collapsible-content"><ol>
  <li>Click the <strong>Layout</strong> icon <img data-composite="true" src="https://lh4.googleusercontent.com/bZwy-i4CYwj8tP2czTWVVf2v-l0czV4RI5ItKnYveV5CTx-prk7J2IC2WOYgfFbgAxouVYRvoc_rAZmsXZ8uktADPHpji3bNanOAwi_k568iRODd2vBFYH8SPyzaHXLz_hIQ60g7Nz2THrhYqLySOQ" />.</li>  <li>Choose how the text is aligned; to the left, center, or right of the button.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/17/3a9fa37f-7bc2-4c73-8a1c-79ddf4c52ef2/76d437db-a2f8-4721-b30f-e2464b5777d2.png" /></li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Design the button</h4><div class="collapsible-content"><ol>
  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/fqdfj7l80pkuziVwS4mYmnWZYCsstIhKustYnkMz2Bo_92oQPmaf4lUCP5xbe9eVungvl1KIVaUgx9ipRK8vEqqxClIbHZcUnoXF6NV9KpynO6YZObPFZwdae3KaUDsMJqIlf5RSXHRq9SDmV58img" />. </li>  <li>Choose a design and click <strong>Customize Design</strong> to make further design changes.</li>  <li>Click a preset at the top.</li>  <li>Select which state you want to adjust the design for:
    <ul>
      <li><strong>Regular: </strong>How the button looks before a visitor interacts with it.</li>      <li><strong>Hover:</strong> How the button looks when a visitor hovers their cursor over it.</li>    </ul>  </li>  <li>Choose what you want to customize:
    <ul>
      <li><strong>Fill color &amp; opacity </strong><img data-composite="true" src="https://lh3.googleusercontent.com/w5O83_ER667y9izqAL-HZ-DA-DC7_4QHfw_Nae4FifeO6hBKkK_pfDjFcg9gXlne--mDuhkeslssTHu8y8vwdzdJIW5QOIdHI5o6AxbcdJVf1LfSqPTSNAFpzhb1DgMYgjJ76zWj3P_MN_mY9geUxqc" />: Choose a background color for the button, and adjust its visibility.</li>      <li><strong>Border </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/08/8e133ec2-19fd-49d8-9321-f2f8f7d137da/2084bde9-8ada-407b-ae30-d6f1022b6eac.png" /><strong>:</strong> Add borders to the button to create a contrast against your popup. Choose a color, and set the width to make it as big or as small as you need.</li>      <li><strong>Corners </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/08/04578d48-a935-4301-b0c1-a41f64761ca2/2312bafa-6ada-4f8d-967b-7d882cc3d0db.png" /><strong>: </strong>Choose how you want to corners of your button to look. You can adjust each corner differently, and make them rounder or more square.</li>      <li><strong>Shadow </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/08/61e8bd49-75a5-4856-b777-968b176bfcfe/5b009328-9502-4bc2-b6ba-72f5a20264b0.png" />: Add shadows to your button for a cool 3D effect. You can set the size, visibility, angle, and more to give it more impact.</li>      <li><strong>Text </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/08/29b85503-2fc4-4da6-bbc5-52562e0447c6/220acd55-73c4-4cee-8af1-0e0057bbeacc.png" />: Customize your button's text with settings such as font, size, and spacing. You can also add formatting like bold and italics, and choose the color.<br />
<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/17/8591f256-fe86-41d9-b35d-fa346e71d0ef/55c707c6-7708-4b6c-9e9c-84d1bf9fb890.png" /></li>    </ul>  </li></ol><div><br /></div><div><strong>Note:</strong></div><div>The available customization options depend on:</div><ul>
  <li>The design preset you choose.</li>  <li>The state you choose to design for (regular or hover).</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/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/19/d3fb9cad-9e9b-48de-952b-916ec0583739/b4996dda-f782-4ab2-ae88-d588911eceb9.png" alt="The close icon design panel. The cursor is hovering over the Text tab, which is open." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-x-icon" level="3">Customizing the X icon</h2></div><div data-component-type="text"><div>If you've enabled an X (close popup) icon in the Popup Settings panel, you can adjust its look to suit your aesthetic. Choose from a range of designs, and customize the color, visibility, and border.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize the X icon:</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>Pages &amp; Menu</strong> <strong> </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/08/b70d5f62-ff17-48eb-b33b-f6f44795b00f/f3dd9d23-7fe3-4942-87a6-bec78441affe.png" />  on the left side of the editor.</li>  <li><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-your-lightboxes#opening-your-lightboxes" target="_blank">Open the relevant popup</a>.</li>  <li>Click the popup in the editor.</li>  <li>Click the <strong>Close Popup</strong> (X) icon.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://lh5.googleusercontent.com/fqdfj7l80pkuziVwS4mYmnWZYCsstIhKustYnkMz2Bo_92oQPmaf4lUCP5xbe9eVungvl1KIVaUgx9ipRK8vEqqxClIbHZcUnoXF6NV9KpynO6YZObPFZwdae3KaUDsMJqIlf5RSXHRq9SDmV58img" />.</li>  <li>Choose how you want to customize your X icon:
    <ul>
      <li><strong>Select a new design:</strong> Click a preset from the panel to set a new design for the icon.</li>      <li><strong>Customize the icon:</strong> Click <strong>Customize Design</strong>, and edit the icon how you want:
        <ul>
          <li><strong>Fill color &amp; opacity: </strong>Select the icon's color from the color picker, and use the slider to make it more or less visible.</li>          <li><strong>Border:</strong> Choose a color for the icon border, and set its width (in pixels).</li>        </ul>      </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/2025/10/31/dd31c581-88bf-459b-9971-eb9a7ec7bd69/c6336bdc-7d5d-4b3f-a799-b4e248954979.png" alt="close icon design settings wix editor" /></div></div>

Popups are a great way to display important information in a  window, like announcements, sales, and news. After creating a popup, you can rename it, duplicate it to quickly create another or link it ...

Wix Editor: Managing Your Popups

Discover how to effectively use popups on your Wix site to share important announcements, sales, and news. This article guides you through creating, renaming, duplicating, linking elements to, and deleting popups. You’ll learn how to manage your popups easily from the Menus & Pages panel, ensuring your site remains engaging and up-to-date. Enhance your site's communication with these simple steps!

<div data-component-type="text"><div>Popups are a great way to display important information in a  window, like announcements, sales, and news. After <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox" target="">creating a popup</a>, you can rename it, duplicate it to quickly create another or link it to an element that visitors click to open the popup.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="opening-your-popups" level="3">Opening your popups</h2></div><div data-component-type="text"><div>Access your popup from the <strong>Menus &amp; Pages</strong> panel to edit its design and content, or manage it as needed.</div></div><div data-component-type="heading"><h2 id="" level="4">To open a popup:</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>Pages &amp; Menu </strong><img data-composite="true" src="https://lh4.googleusercontent.com/iyxB-dJK94UnWtccHCit9Pichsh3NHab4iZMxuUU1yZ0iRd_q3YCu0Y7R8I6s4aSiaYU3dkSFcaqki_m25qtKqcTd3sr0xsdThz_2tA6-aljPtm89J_yDS_tvlm9Jq_oQJzhIWekE4DdjM7qur6kJA" /><strong> </strong>on the left side of the editor.</li>  <li>Click <strong>Popups</strong>.</li>  <li>Click the relevant popup to open it.</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/24/9624cdd0-8020-4c54-994f-8dfa8f9c22ef/ba4bf552-5dce-4b53-9828-e402f0a25e1f.png" alt="A screenshot of a Wix site showing a lightbox being accessed from the menus and pages panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="renaming-a-popup" level="3">Renaming a popup</h2></div><div data-component-type="text"><div>Change the name of a popup so it's easy to find in your editor. Popup titles aren't displayed on your live site, so you can choose whatever name you like. We recommend selecting a name that best suits its content, such as &quot;Sign Up Form&quot;, or &quot;Sale Announcement&quot;.</div></div><div data-component-type="heading"><h2 id="" level="4">To rename a popup:</h2></div><div data-component-type="text"><ol>
  <li>Click the relevant popup in the <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://lh4.googleusercontent.com/iyxB-dJK94UnWtccHCit9Pichsh3NHab4iZMxuUU1yZ0iRd_q3YCu0Y7R8I6s4aSiaYU3dkSFcaqki_m25qtKqcTd3sr0xsdThz_2tA6-aljPtm89J_yDS_tvlm9Jq_oQJzhIWekE4DdjM7qur6kJA" /> panel.</li>  <li>Click the<strong> More Actions</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/sM1xuXhGAEjX6heOglUTUcGNGAi5ALcSvkPZJ0NbHSZ2rqIQaqR5ilfOk0nzQVWcFfd3Z-w0D8RhtggFNQy9sICz-oy6mKeAMR2Yl31UB69Thg5WQPU76IrhYU6sXd96hGRNudri-eHgaqbqxjwZcA" />.</li>  <li>Click <strong>Rename</strong>.</li>  <li>Enter the new name into the field.</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/61393a49-adaa-42d8-ab72-f83b06455fc5/295f48f1-b89c-4f04-affc-54704fc92d95.png" alt="site pages and menu pop up panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="linking-elements-to-a-popup" level="3">Linking elements to a popup</h2></div><div data-component-type="text"><div>Link an element on your site to a popup for visitors to see when they click the element. You can link text, buttons, and even Vector art to your popup.</div></div><div data-component-type="heading"><h2 id="" level="4">To link an element to a popup:</h2></div><div data-component-type="text"><ol>
  <li>Select the element you want to link from in your editor.</li>  <li>Click the <strong>Link </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/04/11/d91f1160-cfbf-4769-bd60-d7eeeee2ed4d.png" />.</li>  <li>Select <strong>Popup</strong>.</li>  <li>Click the <strong>Which Popup?</strong> drop-down menu and select the relevant popup.</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/cfb5ecd0-ed3f-4249-bdba-66aae2480839/d50bddc9-2886-4748-adc3-ce95f6983f36.png" alt="link popup panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="duplicating-a-popup" level="3">Duplicating a popup</h2></div><div data-component-type="text"><div>Duplicate your popup to have a consistent design acorss your pages. You can change the content as needed, while maintaining your favorite text and colors. </div></div><div data-component-type="heading"><h2 id="" level="4">To duplicate a popup:</h2></div><div data-component-type="text"><ol>
  <li>Click the relevant popup in the <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://lh4.googleusercontent.com/iyxB-dJK94UnWtccHCit9Pichsh3NHab4iZMxuUU1yZ0iRd_q3YCu0Y7R8I6s4aSiaYU3dkSFcaqki_m25qtKqcTd3sr0xsdThz_2tA6-aljPtm89J_yDS_tvlm9Jq_oQJzhIWekE4DdjM7qur6kJA" /> panel.</li>  <li>Click the<strong> More Actions</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/sM1xuXhGAEjX6heOglUTUcGNGAi5ALcSvkPZJ0NbHSZ2rqIQaqR5ilfOk0nzQVWcFfd3Z-w0D8RhtggFNQy9sICz-oy6mKeAMR2Yl31UB69Thg5WQPU76IrhYU6sXd96hGRNudri-eHgaqbqxjwZcA" />.</li>  <li>Click <strong>Duplicate</strong>.</li>  <li>Enter the name for the new popup.</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/d4516a37-879e-4412-a73d-94fd99c74b80/f5acf20a-72b9-4fd6-a576-20db9dbe1aed.png" alt="site and menu pages pop up panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="deleting-a-popup" level="3">Deleting a popup</h2></div><div data-component-type="text"><div>Delete any popups you no longer need to keep your site's announcements fresh and up to date.</div></div><div data-component-type="heading"><h2 id="" level="4">To delete a popup:</h2></div><div data-component-type="text"><ol>
  <li>Click the relevant popup in the <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://lh4.googleusercontent.com/iyxB-dJK94UnWtccHCit9Pichsh3NHab4iZMxuUU1yZ0iRd_q3YCu0Y7R8I6s4aSiaYU3dkSFcaqki_m25qtKqcTd3sr0xsdThz_2tA6-aljPtm89J_yDS_tvlm9Jq_oQJzhIWekE4DdjM7qur6kJA" /> panel.</li>  <li>Click the<strong> More Actions</strong> icon <img data-composite="true" src="https://lh3.googleusercontent.com/sM1xuXhGAEjX6heOglUTUcGNGAi5ALcSvkPZJ0NbHSZ2rqIQaqR5ilfOk0nzQVWcFfd3Z-w0D8RhtggFNQy9sICz-oy6mKeAMR2Yl31UB69Thg5WQPU76IrhYU6sXd96hGRNudri-eHgaqbqxjwZcA" />.</li>  <li>Click <strong>Delete</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2025/10/31/09f47ce8-baf0-4090-8c56-6490eae34e62/46a346c4-b246-4ee3-8cd5-bec971bac099.png" alt="pages and menu pop up panel," /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-link-to-a-popup-close-button" level="3">Adding a link to a popup Close button</h2></div><div data-component-type="text"><div>Link your popup Close button to pages, external sites, and more. When visitors click the button, they're brought to the location you've linked.</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 <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox#step-4-choose-how-the-lightbox-is-closed" target="">enabled a Close button</a> on your popup. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To add a link to your Close button:</h2></div><div data-component-type="text"><ol>
  <li>Open the relevant popup in your editor.</li>  <li>Click the <strong>Close button</strong> on your popup.</li>  <li>Click the <strong>Link </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/09/26/9ed0491f-fad1-423b-a9c7-b181d7c39b09.png" />.</li>  <li>Select a link type.</li>  <li>Add the relevant information.</li>  <li>Click <strong>Done</strong>.</li></ol></div>

Add a hover box to your site to create a cool, interactive effect for your site visitors.Hover boxes change when visitors hover over them to reveal different elements and content. You can also add ani...

Wix Editor: Adding and Setting Up a Hover Box

Create an engaging experience for your visitors by adding a hover box to your site. Discover how to implement this interactive feature that reveals different content when hovered over, and learn to customize its design and effects to match your site's theme. By following the steps outlined, you can enhance user engagement and encourage exploration on your site.

<div data-component-type="text"><div>Add a hover box to your site to create a cool, interactive effect for your site visitors.</div></div><div data-component-type="text"><div>Hover boxes change when visitors hover over them to reveal different elements and content. You can also add animation to the elements to further wow visitors, and encourage them to continue exploring your site.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-a-hover-box-to-your-site" level="3">Step 1 | Add a hover box to your site</h2></div><div data-component-type="text"><div>Add a hover box to begin building eye-catching pages. There are lots of fun, colorful templates available, so you can choose one to match your site's look and theme.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a hover box:</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>Interactive</strong>.</li>  <li>Click <strong>Hover Boxes</strong>.</li>  <li>Click or drag your chosen box to add it to the 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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/24/872dc61e-cb86-4705-b15f-2d5a285beb82/94f50cb6-73ed-4192-b6cf-78338dd1e04e.png" alt="screenshot of add elements panel in the wix editor. box selected with options being displayed" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-add-elements-to-your-hover-box" level="3">Step 2 | Add elements to your hover box</h2></div><div data-component-type="text"><div>Add elements to your box to display relevant information and content for your visitors. You can add different elements for regular and hover mode, or both.</div></div><div data-component-type="text"><div>To add an element to both views, simply add it on Regular mode. To only display an element on Regular mode, add it, then hide it on Hover mode. </div></div><div data-component-type="text"><div>To display an element only in Hover, just add it on Hover mode.</div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to your hover box:</h2></div><div data-component-type="text"><ol>
  <li>Click the hover box.</li>  <li>Click either the Regular, or Hover tab, depending on which mode you'd like to add the element to:
    <ul>
      <li><strong>Regular: </strong>
        <ul>
          <li>Click <strong>Add</strong> on the left side of the editor.</li>          <li>Click or drag your chosen element to add it to your box.</li>        </ul>      </li>      <li><strong>Hover:</strong>
        <ul>
          <li>Click <strong>Add to Hover</strong> on the left side of the editor.</li>          <li>Click or drag your chosen element to add it to the box.</li>        </ul>      </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/16/899f0b95-0355-4b4a-bac4-6f5dd1e67274/04f81be8-2185-4c1d-bd5c-62fb98a07418.png" alt="screenshot of hover box in wix editor with regular or hover options 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>If you add a button in regular view, you can't edit the design in hover mode. As a workaround, you can hide the button in hover view, then re-add it and design it to your needs.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-customize-the-box-design" level="3">Step 3 | Customize the box design</h2></div><div data-component-type="text"><div>You can customize the hover box to look exactly the way you want. Depending on the box design you select, you can adjust settings such as the fill, border, and corners to suit your site's needs. </div></div><div data-component-type="heading"><h2 id="" level="4">To customize the box design:</h2></div><div data-component-type="text"><ol>
  <li>Click the <strong>Design</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/4O8XC2DBehwJKcPpek4YdvPZFUcQfbQiK6vOyYtovzErBWB_HjLgWHG1aekjaqsK1EUhkZ_Wpu_Iff8fipzak6hfFJ_bI7uK5qFEE_GbfxSgIiFMgoPlJbrlWz5aoLxrPxaoftXQ" /> icon.</li>  <li>Click <strong>Customize Design</strong>.</li>  <li>(Optional) Select a different preset design at the top.</li>  <li>Choose from the following tabs to adjust each setting:
    <ul>
      <li><strong>Fill Color and Opacity:</strong> Choose a background color and  drag the slider to adjust its opacity.</li>      <li><strong>Border:</strong> Adjust the border's color, opacity, and width.</li>      <li><strong>Corners:</strong> Use the boxes to adjust the pixel size of the box's corners.</li>      <li><strong>Shadow:</strong> Enable or disable a shadow, and adjust the angle, distance, size blur, color, and opacity.</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/08/24/d5a6054f-ea76-4297-a5a4-ba4833e6056f/c4e594c1-fe69-4f18-b030-f62f97421277.png" alt="screenshot of hover box design panel. color and opacity slider showing." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-4-add-an-effect-to-your-hover-box" level="3">Step 4 | Add an effect to your hover box</h2></div><div data-component-type="text"><div>Effects bring your Hover Boxes to life. With a range of choices available, you can create an effect that is both eye-catching and fun.</div></div><div data-component-type="text"><div>You can also customize the effect to perfectly suit your site and hover box.</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/24/33233dec-204f-4726-8a42-ef0649bbb624/f3e4e57a-e7ae-4b04-9c30-31f49ceccdb9.png" alt="hover box effects setting panel in wix editor." /></div></div><div data-component-type="heading"><h2 id="" level="4">To add and customize an effect:</h2></div><div data-component-type="text"><ol>
  <li>Click the hover box.</li>  <li>Click the <strong>Hover</strong> tab.</li>  <li>Click <strong>Choose Effect</strong>.</li>  <li>Click <strong>Customize</strong> the adjust the effect's settings.</li></ol></div><div data-component-type="text"><div>Click an option below to learn more about how you can customize each effect.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Grow</h4><div class="collapsible-content"><ul>
  <li>Drag the slider to decide how much your element should grow on hover.</li>  <li>Choose a starting point from which your element should start growing. By default, it starts growing from the center of the element but you can select a different point (e.g., top left).</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Shrink</h4><div class="collapsible-content"><ul>
  <li>Use the slider to adjust how much your element should shrink on hover.</li>  <li>Choose a point towards which your element should shrink. By default, it shrinks towards the center of the element but you can select a different point (e.g., top right). </li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Skew</h4><div class="collapsible-content"><ul>
  <li>Choose a skew direction: horizontal or vertical.</li>  <li>Drag the slider to determine the angle in which your element should skew when visitors hover over it. </li>  <li>Choose a point from which your element should start skewing. By default, it starts skewing from the center of the element but you can select a different point.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Rotate</h4><div class="collapsible-content"><ul>
  <li>Choose a direction for your element's rotation: clockwise or counterclockwise.</li>  <li>Drag the slider to determine the angle by which your element should rotate when visitors hover over it.</li>  <li>Choose a point around which your element should rotate. By default, the element rotates around the center but you can select a different point (e.g., top right).</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Combo</h4><div class="collapsible-content"><ul>
  <li><strong>Grow / Shrink:</strong>
    <ul>
      <li>Use the toggle to enable or disable whether the box keeps its proportions.</li>      <li>Use the sliders to adjust scale's width and height.</li>    </ul>  </li>  <li><strong>Rotate and Skew:</strong>
    <ul>
      <li>Use the slider to adjust the angle of the rotation.</li>      <li>Use the sliders to adjust the degrees of the horizontal and vertical skew.</li>      <li>Select a starting point for the skew effect.</li>    </ul>  </li></ul></div></div></div>

Popups are messages that appear on your visitor's screen when they visit your site. You can use them in a number of creative, practical ways to grow your sales and business, and provide an interactive...

Wix Editor: Popup Ideas and Inspiration

Discover how to effectively use popups on your site to enhance visitor engagement and boost sales. Learn to create a mailing list subscription popup to grow your audience, add age disclaimers for compliance, build interactive wizards for unique experiences, and incorporate video popups for more engaging content. Each option offers customizable designs to maintain your brand's look while providing practical benefits.

<div data-component-type="text"><div>Popups are messages that appear on your visitor's screen when they visit your site. You can use them in a number of creative, practical ways to grow your sales and business, and provide an interactive experience.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="create-a-mailing-list-subscription-popup" level="3">Create a mailing list subscription popup</h2></div><div data-component-type="text"><div>Add a mailing list popup to build your subscribers and reach a wider audience. There are a variety of popup designs available that contain pre-added forms, and you can customize and adjust them 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/26/851f97f3-cf4c-470d-993b-e7df36edb89a/64978bb6-3032-4de5-be83-200134ba3f5a.gif" alt="A GIF of a mailing list lightbox gliding into frame on a live Wix site." /></div></div><div data-component-type="text"><div>When visitors sign up with the form, they're automatically added to your Subscribers in Contacts, so they can stay up to date with your business news and offers.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="add-an-age-disclaimer-to-your-site" level="3">Add an age disclaimer to your site</h2></div><div data-component-type="text"><div>Utilize your popups by creating an age disclaimer for your site. You can set them to only contain an age confirmation button, so visitors must click it in order to enter and browse 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/2022/08/26/79e1feda-ea9b-432c-b8bd-501d49e5f3c6/a31f1e8f-2f9c-4bf1-ba49-23fa91d474ad.png" alt="A screenshot showing an age disclaimer pop-up on a live site site." /></div></div><div data-component-type="text"><div>As well as the preset options, there are also hundred of possible design combinations for popups, so you don't need to compromise your site's branding or look.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="build-a-popup-wizard" level="3">Build a popup wizard</h2></div><div data-component-type="text"><div>Use a popup to create a wizard that visitors can click through with a series of screens or steps. Popup wizards are a fun, unique way to encourage visitors to interact and make your site stand out.</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/26/3610928a-b9ff-4b43-9895-6d52ba49edd1/4a3d802a-b8c6-4a68-934a-b45b0b46da97.gif" alt="An online scavenger hunt on a live Wix site. It's been made using lightboxes." /></div></div><div data-component-type="text"><div>Popular uses for wizards include scavenger hunts and presentations. You can also design the popup to look and behave exactly how you want, to keep your brand consistent.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="create-a-video-popup" level="3">Create a video popup</h2></div><div data-component-type="text"><div>Add videos to a popup to grab the attention of your visitors. You can embed videos from hosting sites such as Youtube or Vimeo, or upload a file from your device. </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/26/4ef0e6d8-6ae7-4802-8793-994ec94c06e1/379bac22-36ab-44bd-a9bc-3d90d027cd94.gif" alt="A GIF of a lightbox appearing on a live Wix site. The video in the box automatically begins to play." /></div></div><div data-component-type="text"><div>Video popups are a great way to display information to your visitors, as they're more visually engaging than regular text popups. Use them to promote announcements, trailers, and more. </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><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox" target="">Learn how to add and set up a popup</a></div></div></div></div>

Tabs are containers that you divide into separate displays. You can add different content to each tab item, and visitors can click through them to find what they need.Use the Tabs element to showcase ...

Wix Editor: About Tabs

Discover how to use the Tabs element to organize and showcase various content on your site, making it easier for visitors to find information. Learn to customize the design and layout of your tabs to align with your brand and enhance user experience. Additionally, find out how to adjust tabs for mobile devices, ensuring a seamless interaction for all users. This article guides you through setting up and personalizing tabs effectively.

<div data-component-type="text"><div>Tabs are containers that you divide into separate displays. You can add different content to each tab item, and visitors can click through them to find what they need.</div></div><div data-component-type="text"><div>Use the Tabs element to showcase a variety of information and make it even easier for visitors to access your brand's news and content.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="organize-your-content-with-tabs" level="3">Organize your content with tabs</h2></div><div data-component-type="text"><div>Since tabs are interactive containers, you can display different elements on each item. Choose the content type or information you want to showcase, and add elements accordingly to set them up. </div></div><div data-component-type="text"><div>Tabs are a helpful way to display content that is relevant to its page / section, or your business. For example, a &quot;Contact Us&quot; section can include different tabs for your business phone number, email, address etc. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-tabs" target="">Learn more about adding and setting up tabs on your 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/08/08/feaaaf4f-376b-497a-a753-0ab26a952428/f6affaaa-429d-477a-8eaf-54726d5c31c0.gif" alt="Gif of mouse hovering over 4 different tabs." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="align-tabs-to-complement-your-page-layout" level="3">Align tabs to complement your page layout</h2></div><div data-component-type="text"><div>After you add and set up tabs, change their layout to create a coherent structure on your page. You can adjust the spacing between the menu and container, choose how to display items that don't fit in the menu, and much more. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-and-customizing-your-tabs#changing-your-tabs-layout" target="">Learn how to change the layout of tabs</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/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/01/ec401035-06e2-496a-a6e1-ee11f15605ea/3ac34425-c3f1-45dd-92ed-79ded9e77dc8.png" alt="Screenshot of tab layout panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="personalize-the-design-of-tabs" level="3">Personalize the design of tabs</h2></div><div data-component-type="text"><div>Customize every part of the tabs element to your liking. Change the background of the container, choose a font for the menu items, and add shadows to give your tabs a cool 3D effect.</div></div><div data-component-type="text"><div>You can use the options to design tabs that harmonize with your site theme, or create a bold, eye-catching container that stands out on your page. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-and-customizing-your-tabs#customizing-the-design-of-tabs" target="">Learn more about customizing the design of tabs</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/08/08/4ed87fcd-b1fa-4679-ab28-58788a9a305e/4f60488d-f113-412d-92f8-2181ea24d64f.png" alt="Screenshot of tabs with tab design panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjust-tabs-for-your-mobile-site" level="3">Adjust tabs for your mobile site</h2></div><div data-component-type="text"><div>Tabs you add in the desktop editor automatically appear on your mobile site. You can choose whether to hide the entire tab container from your mobile site, or customize their layout, spacing, and design to suit smaller screens.</div></div><div data-component-type="text"><div>Changes you make on mobile don't affect your desktop site, so you can edit your tabs as much as you want to create an easy, interactive experience for mobile users. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adjusting-and-customizing-tabs-for-your-mobile-site" target="">Learn more about adjusting tabs for mobile</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/08/08/6fa67856-4809-4506-a586-eef930d763c6/11a4bf16-c451-4b37-9caf-06d694d0d465.png" alt="Screenshot of tabs with tab design panel." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="frequently-asked-questions-faqs" level="3">Frequently asked questions (FAQs)</h2></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I navigate between tab items?</h4><div class="collapsible-content"><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 tabs.</li>  <li>Click the dropdown menu.</li>  <li>Select the relevant tab item to open it.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I change the size of tab items separately?</h4><div class="collapsible-content"><div>You can change the size of each tab item separately to fit the content as needed. Click and drag the Drag handles to make the item box as big or as small as you want.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What's a default tab?</h4><div class="collapsible-content"><div>The default tab is the tab that is automatically displayed when visitors open the page that it's on. You can set your default tab from the <strong>Manage Tabs</strong> panel. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-and-customizing-your-tabs" target="">Learn more about managing tabs</a></div></div></div></div>

Add tabs to organize your content and display it the way you want. By splitting content into tabs, you can streamline important information for your visitors and make it easy for them to find everythi...

Wix Editor: Adding and Setting Up Tabs

Discover how to add and customize tabs on your site to organize content effectively. By implementing tabs, you streamline important information, making it easier for your visitors to find what they need. Learn to name each tab for clarity and add specific elements to enhance the content within each tab, ensuring a user-friendly experience.

<div data-component-type="text"><div>Add tabs to organize your content and display it the way you want. By splitting content into tabs, you can streamline important information for your visitors and make it easy for them to find everything they need.</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/11/f56f2581-62d7-44e8-a365-44c0825e7fa5/5e99e2cc-d297-4d72-a732-888dff95eab7.gif" alt="Gif of menu navigating to different tabs on a website." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-tabs-to-your-site" level="3">Step 1 | Add tabs to your site</h2></div><div data-component-type="text"><div>Get started by adding the tabs element to your page. There are a variety of pre-designed options available, so you have everything you need to begin.</div></div><div data-component-type="heading"><h2 id="" level="4">To add tabs:</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>Interactive</strong>.</li>  <li>Click <strong>Tabs</strong> under <strong>Boxes</strong>.</li>  <li>Click and drag your chosen tab design 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/08/11/f42d9770-331d-49c7-a87f-54345fae111b/5ee97d79-84ea-40d7-a7fb-f79a611df7b3.png" alt="Screenshot of add elements panel in Wix editor. Tabs highlighted under Interactive option." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-give-a-name-to-each-tab" level="3">Step 2 | Give a name to each tab</h2></div><div data-component-type="text"><div>After adding the tabs element, rename the tabs to match your planned content. Since tab names appear in the menu, they make it easier for visitors to find information that's relevant to them.</div></div><div data-component-type="heading"><h2 id="" level="4">To name your tabs:</h2></div><div data-component-type="text"><ol>
  <li>Click the tabs in your editor.</li>  <li>Click <strong>Manage Tabs</strong>.</li>  <li>Hover over the relevant item in the panel.</li>  <li>Click the <strong>More Actions </strong>icon <img data-composite="true" src="https://lh4.googleusercontent.com/jrVg52_f-P1fCfv0T2Y4nHn3Pgo1mjDjZWNn_DZuPKEsY2Jy9lK9-26GODrtQJBEPjsHEd79bfj1-WKhu-RExWamHEtZcctRwoZcMDJibLn9cV6ZaeDZi-Bt3IUuKqhIPbRGJSrgaw42tGRLiWV6hg" />.</li>  <li>Click <strong>Rename</strong>.</li>  <li>Enter the new name into the field.</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/2022/08/11/ae54a9e9-19a9-49df-b0f5-616707132b30/0a81d699-1b55-495b-813d-b318f0921018.png" alt="Manage tabs panel, with mouse hovering over Rename." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-add-elements-to-your-tab-items" level="3">Step 3 | Add elements to your tab items</h2></div><div data-component-type="text"><div>After naming each tab, start building its content by adding the elements you need. The elements are only displayed in that particular tab, so you can add as much or as little content as you need.</div></div><div data-component-type="heading"><h2 id="" level="4">To add elements to a tab item:</h2></div><div data-component-type="text"><ol>
  <li>Click the tabs in your editor. </li>  <li>Open the relevant tab item from the drop-down menu.</li>  <li>Click <strong>Add Elements</strong> on the left side of the editor.</li>  <li>Click and drag your chosen element over the tab.</li>  <li>Drop the element when you see the <strong>Attach to Tab</strong> message. </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/11/aabe0f69-b6aa-4b89-8ed7-c119408c826a/b3d7d44b-762d-4b3f-8df1-e3d3ad06ab8c.gif" alt="Gif of Icon button being added to a tab from the add element panel." /></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"><div><a data-composite="true" href="https://support.wix.com/en/article/wix-editor-managing-and-customizing-your-tabs" target="">Manage and customize your tab items</a> to change their design, layout, and more. </div></div></div></div>

After adding tabs to your page, manage each individual tab and organize its content. Change the tab order as you wish, and customize the layout and design so it fits your site's theme. Managing your t...

Wix Editor: Managing and Customizing Your Tabs

Discover how to manage and customize tabs on your site to enhance content organization and user experience. Learn to add, rename, duplicate, and delete tabs, as well as rearrange their order to fit your needs. You can also adjust the layout and design of your tabs, including spacing, colors, and borders, to ensure they align with your site's theme. This article empowers you to create a visually appealing and well-structured navigation system for your visitors.

Currently, it is not possible to trigger a popup when a visitor attempts to leave your site.We are always working to update and improve our products, and your feedback is hugely appreciated.

Wix Editor Request: Triggering a Popup when a Visitor Attempts to Leave Your Site

Currently, you cannot trigger a popup when a visitor tries to leave your site. However, Wix is continuously working to enhance its features, and your feedback is valuable in this process. Stay tuned for future updates!

<div data-component-type="text"><div>Currently, it is not possible to trigger a popup when a visitor attempts to leave your site.</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>

新增與自訂元件

文字

按鈕

容器與方塊

投影片

形狀與線條