Using the Wix Harmony Editor

Adding and customizing elements

Wix Harmony Editor: Adding and Customizing Popups

Popups are a powerful way to grab your visitors' attention and showcase important announcements, promotions, or simply welcome them to your site. You can fully customize these pop-up windows, decide when they appear, and choose how visitors interact with them.

Adding a popup

Get started by adding a popup to your site. There are various templates and categories to choose from, such as "Welcome" and "Contact" popups.

To add a popup:

Go to your editor.
Click + Add at the top left of the editor.
Select Elements.
Hover over the More Options icon
, then scroll down and click Popup
.
Drag a design you like onto your page.

Customizing a popup

Match your popup to your brand by customizing its content, design, and behavior. Personalize how it looks, where it shows up on your site, and the way visitors close it.

To customize a popup:

Go to your editor.
Click the Page dropdown at the top left of the page.
(In the Site pages panel) Select the relevant popup.
Click the popup element in the editor.
Decide how to customize the popup:

Choose which pages the popup appears on

Click the Settings icon
on the action bar.
Click the field under Popup displayed on.
Select the checkbox next to the relevant page(s).
Tip: You can select 1 or multiple pages.

Add elements

Go to your editor.
Click + Add at the top left of the editor.
Drag the relevant element onto the popup and drop it when you see the Attach to Container message.

Design the popup

Click the All design options icon
on the action bar.
Select the relevant part of the popup under Choose a Popup part.
Design the element:
- Fill colors
  : Change the color(s) of your element, choosing one of your brand colors or a custom color.
- Spacing
  : Add breathing room to your content by adding padding around the element (or the selected area).
- Borders
  : Define the borders of your element so it stands out, choosing a color, width and style.
- Corners
  : Make the corners of your element more square or round by dragging the slider under Radius. Click the Edit individual corners icon
  to design each corner separately.
- Shadow
  : Apply inner and outer shadow to give the element an interesting 3D effect, setting the position, blurriness, color and more.
- Layout: Customize the X button's position, size and adjust the site direction of your popup.
  Note: Adjusting the site direction does not affect elements you have attached to the popup.

Note: The available options vary based on the part of the popup you choose to design.

Choose how visitors close the popup

You can display an 'X' button, as well as a verbal 'Close' button, so users can easily exit the popup. If you don't display an 'X' button, visitors can close the popup by clicking anywhere outside of it.

Click the Display Elements icon
on the action bar.
Select the checkbox next to the button(s) you want to display: X button and / or Close button.
(Optional) Customize the buttons:
- Design: Click the All design options icon
  on the action bar to adjust the color, border, layout, etc. Make sure to select the button under Choose a Popup part.
- Text (Close button only): Click Edit Text on the action bar to enter new text for the 'Close' button (e.g. 'Exit', 'Back to site', etc.)

Set a delay

Set a delay of up to 1 minute before the popup appears on the page. This gives your visitors time to focus and engage with your content before the popup "interrupts" them.

Click the Settings icon
on the action bar.
Drag the slider under Delay.

A screenshot showing the Settings panel.

Linking elements to popups

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:

Go to your editor.
Click the relevant element in your editor.
Click the Link icon
on the action bar.
Click Choose a link.
Click the More Options icon
and click Popup.
Click the Popup dropdown and select the relevant popup.
Click Done.

Managing your popups

Keep your popups organized and up-to-date with these management options.

To manage your popups:

Go to your editor.
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Hover over the popup and click the More Actions icon
.
Choose what you want to do: