header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Adding a popup
  • Customizing a popup
  • Setting triggers for a popup
  • Setting a schedule for a popup
  • Linking elements to a popup
  • Managing a popup
  1. Home
  2. Studio, Partners & Enterprise
  3. Wix Studio
  4. Using the Wix Studio Editor
  5. Adding elements in the Studio Editor
  6. Studio Editor: Using Popups

Studio Editor: Using Popups

7 min
In this article
  • Adding a popup
  • Customizing a popup
  • Setting triggers for a popup
  • Setting a schedule for a popup
  • Linking elements to a popup
  • Managing a popup
Popups are windows that appear on the live site that you can customize to your needs. Design the window and add the elements you want, then choose when it appears to site visitors.
You can also link elements, like text, buttons or images, so clicking them opens the popup. This is a great way to increase the exposure for time sensitive information, sales or promotions.
An example of a lightbox used to gain more subscribers for the client's newsletter

Adding a popup

Add a popup to your client's site to start setting up announcements for their visitors and customers.

To add a popup:

  1. Go to your editor.
  2. Click Add Elements on the left side of the editor.
  3. Click Layout Tools.
  4. Click Popups.
  5. Select the popup you want to add. 
The popups tab has been opened in the add elements panel. The cursor is selecting a popup.

Customizing a popup

Customize the popup to match the rest of the site. Add any elements you need, then change the background color and decide on its opacity.

To customize a popup:

  1. Go to your editor.
  2. Click Pages  on the left side of the editor.
  3. Select the relevant popup under Popups.
  4. Click the popup on the canvas.
  5. Choose how to customize the popup:
5.  When ready, click Done at the bottom to exit Editing mode. 
The inspector panel is open for a popup. The cursor is clicking the background color box.
What's next?
Preview the site to see the popup in action.

Setting triggers for a popup

Choose how and when the popup appears. You can set it to appear automatically on specific site pages or link it to an element (e.g. text, image). You can also decide how visitors close the popup after viewing it.
Note:
The popup is displayed once per visitor, on the first relevant page they see (in case it's set to appear on multiple pages).

To set up triggers:

  1. Go to your editor.
  2. Click Pages  on the left side of the editor.
  3. Select the relevant popup under Popups.
  4. Click the popup on the canvas.
  5. Click Set Triggers.
  6. Select the relevant option under Automatically display popup on Pages:
    • Yes: The popup automatically appears when visitors enter the relevant pages.
      1. Click under Which pages is it on? to select the relevant page(s).
      2. Drag the Delay slider to set how long (in seconds) it takes the popup to appear once the page loads.   
    • No: The popup does not appear when visitors enter a page. Instead, it's triggered by a button or a link you choose. 
  7. Enable the relevant toggle(s) under How does the popup close?.
    Note: If you disable both the 'X' icon and 'Close' button, visitors can click outside of the popup to close it.
  8. When ready, click Done to exit Editing mode.  
The popup settings panel is open. The cursor is disabling the automatic display option.
Note:
Currently, it is not possible to show more than 1 popup per page. If you try selecting a page that already has a popup, the option will be disabled. Vote for multiple popups per page.

Setting a schedule for a popup

Choose when site visitors see the popup. If you're promoting a limited-time offer, for example, this ensures the popup only appears in the relevant time frame.
Important:
This option is only available if you set the popup to automatically display on pages.

To set the popup schedule:

  1. Go to your editor.
  2. Click Pages  on the left side of the editor.
  3. Select the relevant popup under Popups.
  4. Click the popup on the canvas.
  5. Click Set Triggers.
  6. Scroll down to Popup scheduling and click + Set schedule.
  7. Set the start date and time and the end date and time.
    Tip: Make sure the correct time zone is set. If not, you can change it. 
The popup settings panel is open. The cursor is clicking the timezone drop-down.

Linking elements to a popup

Link elements on the site to open a popup, so visitors never miss an announcement. You can link elements like text, images, videos and buttons. 

To link an element to a popup:

  1. Click the relevant element in your editor.
  2. Click the Link icon .
  3. Select Popup on the left.
  4. Click the Which Popup? drop-down and select the relevant popup.
  5. Click Done.
The link panel is open for a button. The sales notifications popup has been selected as the link destination.

Managing a popup

Manage the site's popups to keep them organized in the editor. You can rename them so they are easy to find, duplicate them to save time and delete any outdated popups.

To manage a popup:

  1. Click Pages  on the left side of the editor.
  2. Click the More Actions icon next to the relevant popup.
  3. Choose what to do next:
The cursor has clicked a popup in the site pages panel, displaying the options to manage it.

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now

Helpmate

Hello

Need a bit more guidance?
Summary of this article
Unlock personalized helpLog in to get the most out of Helpmate.