Some of the links below are affiliate links, which means that at no additional cost to you, I may receive a small commission if you click a link and make a purchase.
Wix websites are a great way to create a professional online presence for your business. They are easy to use and you can design them yourself using the new Wix editor. In this article, we will show you how to add a lightbox pop-up to your Wix site. This will allow you to capture the email addresses of your visitors and keep them updated on your latest news, products or services.
Contents
What is a Lightbox and what would you use it for?
A lightbox is a pop-up window that appears on top of the page when a visitor clicks on a button or link. You can use lightboxes to display information, collect leads, or promote special offers. Lightboxes can be both useful and annoying, so it's important to make sure you use them correctly, so your visitors don't get annoyed and leave.
A lightbox should have a purpose
The content of the lightbox should be relevant to your visitor. For example, if you have a website about cooking, a lightbox about your latest cookbook would be relevant. However, if you have a website about car parts, a lightbox about your latest cookbook would not be relevant and would most probably annoy your visitors.
Use lightboxes to collect leads
One of the most common uses for lightboxes is to collect leads. You can use a lightbox to offer something valuable, such as a discount code, in exchange for an email address. This is a great way to grow your email list and keep your visitors updated on your latest news, products or services.
How to add a lightbox pop-up to your Wix site
Adding a lightbox to your Wix site is easy. Just follow these steps:
1. Log in to your Wix account and go to the Wix editor.
2. Click on the "Add" button and then select "Interactive".
3. Under the Lightbox heading you will see a list of categories: Welcome, Subscribe, Promotion & Contact.
4. Each category contains some pre-made lightbox templates. Choose the one that has the features you want for your lightbox. Don't worry about the design at this stage, we can change everything to be exactly the way we want it.
Where is the lightbox kept on the Wix editor?
After you have added your lightbox, as we did in the last step, it will open up on the main editor page for you to edit. But, if you navigate away from that page, or need to come back to it later, it can be a bit tricky to find if you don't know where to look.
You can find the newly added lightbox in the 'Menu & pages' tab on the left-hand side editor navigation menu.
Can you use more than one lightbox on your Wix site?
Yes, you can use more than one lightbox on your Wix site. Each lightbox can be set to appear on a different page, so you can use them for different purposes or to target different audiences. Although, you should bear in mind that you can't have more than one lightbox appearing on each page.
While there is no limit to the number of lightboxes you can create, for some Wix premium plans, there is a limit on the number of forms you can add to your site. So, if you are using the lightbox to collect leads and sign-ups, then one well-designed lightbox that is appropriate for all pages is probably going to be the best approach.
Designing the lightbox in the Wix editor
Now that we know where the lightbox is kept in the Wix editor, let's have a look at how we can design it to match our website.
The first thing you need to do is decide what content you want to include in the lightbox. Wix offers a few different content types: text, image, video, audio, button and form. You can also change the background colour or even make it an image, add a border and change the opacity.
If you want to design and create some really eye-catching graphic designs to add to your lightbox, head over to Canva and use their really easy-to-use graphic design tools to make a design that people can't ignore. Read this article to learn how to get started using Canva to create professional designs.
Choose the Location of your lightbox
You might want to have it front and centre so people can't miss it, or slide in from the side of the screen for some cool visual graphics. Wherever you want it to appear, you can make this happen using the layout tab.
Simply click on the lightbox, choose the layout icon and then choose from one of the 9 location options.
If that doesn't get your lightbox in quite the right spot for your needs then you can use the horizontal and vertical offset sliders to move it around.
Adding a catchy headline to your Lightbox
The last thing you want is for people to just ignore all your hard work. So, make sure you give your lightbox a headline that stands out and is relevant to what people will see when they click on it.
You can add text to your lightbox in the same way that you do when you add text to your site, try to keep it short and to the point. If you need some help with writing headlines and persuasive text you can get some great suggestions from an AI writing tool, like this one by Jasper.
Configuring the settings of a lightbox pop-up
When you have your lightbox designed the way you want it, it's time to configure the settings. Now it's time to make sure it appears on the pages you want it to.
Click on the lightbox and choose the 'Set Triggers' tab. This will open up a small window where you can choose how you would like the lightbox to behave.
Do you want the lightbox to automatically appear? If you do, make sure to select 'Yes'. Click the option to choose which pages you would like your lightbox to pop up, and then choose how long the delay should be after the visitor arrives on the page.
If you don't want the lightbox to pop up automatically, another option is to have it appear only when someone clicks a link or a button. Go ahead and add a button to your page and when you set up the link for that button, select 'Link to Lightbox' and then select the lightbox that you just created.
Make sure your lightbox works on mobile
The next thing you need to do is check that your lightbox works on all devices, not just desktop computers.
To do this, while the lightbox is open in desktop editor mode, simply switch over to the mobile editor and you will see the lightbox the way it will appear on mobile. You will most likely need to do some rearranging of the elements to make it all fit and be mobile-friendly.
After you have got your mobile lightbox looking perfect, click on it and select 'Set Triggers'. Make sure you select yes to have it automatically displayed on mobile too.
Testing your lightbox on your Wix website
Now it's time to see if your lightbox works the way you want it to. The best way to do this is to publish the site, open your Wix site in a new window and go through the pages where you have set the lightbox to appear.
If you have configured it to automatically appear, then simply visit the page and see if it pops up after the delay you set. If it doesn't, then go back and check your settings.
If you have configured it to appear when someone clicks a link or button, then click the link or button and see if the lightbox appears. If it doesn't, again, go back and check your settings.
Finally, check that the lightbox looks good and is mobile-friendly by opening your Wix site on a mobile device.
If you have included a sign-up form in your lightbox, you should test this out too, to make sure that it is behaving exactly the way you want it to.
And that's it! You have now successfully added a lightbox pop-up to your Wix site. If you have any questions or need any help, please feel free to reach out in the comments below. If you liked this article, then please feel free to share it!
Happy Wixing!
NX Digital is a Wix Partner in Peterborough, Cambridgeshire, UK with advanced skills in Wix website design and SEO. We can help you to create a Wix website that looks great, ranks well on Google and converts visitors into customers. For more information please visit our services page. Do you need a bit of help with your Wix design or SEO, but don't want to hire someone to do it? You can contact us for Wix design or SEO Coaching sessions with one of our experts!
Comments