Wix Tutorial: How To Design & Use Lightboxes On Your Wix Website

hey guys i’m carly from raw coding and today i’ll be showing you how to add light boxes to your website hey guys I’m currently in the Wix editor and today we’ll be talking about adding light boxes to your web page light boxes are pop-up boxes that show up after a set amount of time this pop-up is content that asks the user to either do something or just provides the user with some additional information but what all light boxes have in common
is that they show up in front of your pages content to add a lightbox click the Add button on the left go down to lightbox and then you’ll be faced with a few preset designs that have been created by Wix what we’ll do is basically create our lightbox from scratch and I’ll show you how easy it is to add the individual elements to your lightbox so let’s just drag the first one in just pop it into the Wix editor and then you’ll see on the top left
it will take you to lightbox mode you can go into lightbox mode and out of lightbox mode really easily as well by pressing the little cross over here and then to go back into lightbox mode press the icon titled menus and pages and then you will see the lightbox tab over here click on the one we’ve just dragged into our Wix editor and it will take you back to lightbox mode we’re just deleting all the content of the lightbox and adding our own
content to it to add content to your lightbox press the design button what we’ll do first of all is change the background color of our lightbox I’m just going to choose this one over here and now that we have the background color we can add some information to make our information more clear I’m going to add a semi-transparent box just in front of the background over here this will make the text that we add more clear to the user to add a box
press add go on box and we’ll just drag in a themed box to the lightbox make sure you attach it to the lightbox as well by dragging it over it double click on the box press customize design and then we will drag the slider to reduce the transparency of the box next we will add a title press add go on text and then drag in the heading I’m going to rename this to subscribe I’m also going to change the color of the text to like and then I’ll use the
Wix form option to prompt the user to type in the email address in a box over here I’m going to press add contact drag this in make sure you drag it in and attach it to the lightbox if you would like more information regarding contact forms and how to navigate around them adjust the settings and everything like that please check out my channel as I have a video dedicated to adding forms to your Wix page I’m just going to change the background of
this form to transparent design customise design full color and opacity click on container box and then reduce the background to zero regardless so now when we preview it the user will type in the email address and then we will have acquired the users email address which will be added to our contact database so now that we’ve designed our lightbox we can adjust the settings to adjust the settings press the Settings button set triggers and the
settings button are exactly the same for your reference you can rename your lightbox so if you scroll down to the setting which pages is it on you can choose which page you want your lightbox to show up on bear in mind that it’s important not to prompt the lightbox to be displayed on every page on your website as this may annoy users as the lightbox will keep on showing up every single time the navigate around your website so the lightbox is set
to automatically come up after a duration of 2 seconds so 2 seconds after the user visits the homepage the lightbox will show up you can adjust this delay by dragging the slider up and down and at the bottom you can define how the user will exit from your lightbox so you can either have a closed button which will come up at the bottom here or you can have an X icon which will show up on the top right so now if we get out of this and publish our
page and visit our live website by pressing this button we will wait 2 seconds so 1 2 3 and our lightbox will show up so the user can easily exit the lightbox by pressing the exit button at the top or they can enter the email address when they press the button at the top it will take them back to your web page so now I’m going to go on my about page that I created earlier and on our about page I’ve added a button titled subscribe to our
newsletter what we can do with this is we can actually link our button to the lightbox that we created so when the user clicks on this button it will actually bring up the lightbox this is just a different method then having the lightbox automatically appear what is good about this is that if your user clicks on a specific area on your webpage you can create lightbox pop-ups that will capture their attention with information that will be specific
to the area that they are looking at so to link a lightbox to this button just click on it press link and at the bottom you will see the lightbox option click on it and then we can link this to the SUBSCRIBE lightbox that we created earlier press done if we go on preview and click on the button the light box will pop up so this concludes creating light boxes on wicks light boxes are fantastic if you want to capture users attention with targeted
information if you are interested in joining whisks please do click on the link in the video description below it basically tells Wix that you join through me and helps me out a lot if you would like to see more videos on Wix tutorials check out my youtube channel as I have quite a few on there thank you so much for watching have a great day bye