Play Video

How to add a pop up lightbox in Wix

How to add a pop up lightbox in Wix. Having trouble creating a website on your own? Let me take the stress out of having a custom website created. I do the hard work, you just tell me the style and color that you like and I will create something amazing for you. www.cliftondesigns.com

Clifton Designs is a design company specializing in the needs of small to large businesses, start-ups and entrepreneurial demands. I am doing some pretty amazing creative designs that you can see on my website. www.cliftondesigns.com Get in contact with me and let’s see what we can do to create a custom and creative design for you. Don’t be happy with a cookie cutter design. You want something unique and is your brand.

I am not only a website designer but an artist. I understand the need for a cohesive and creative design. I also do marketing design materials, seo services and website upkeep. Check out www.cliftondesigns.com to request a quote today.

Oh so today I’m going to show you how to add light boxes and the different types of light boxes you have so what you want to do is go into your editor log into you know login to your Wix account go into your editor and then on the left here on this add button click on that and then on the bottom left it’s going to say lightbox click on that and then this comes up so and there’s all sorts of different types of options you can do so you can have
a full screen so the entire screen is this lightbox a welcome Jazzy a welcome logo which is basically logo and some information a video another video with some information you can do subscription light boxes or they can join your mailing list you can have it placed on that upper area the right the bottom and in the middle you can do promotions on the bottom on the corner in the center another center on the bottom in another Center you can do
contact light boxes and the center on the right in the middle another middle one in the middle with a mat so let’s go through some of these so when you go up to this one let’s click on this one see the entire background is now this grayish color and then it says here make it pop use light boxes to grab people’s attention and get them to take action drag and drop anything anything to your light box to make it yours set it to pop up automatically
or from any link on your site okay so let’s close that out so in here you can change this text to any color and format it to anything like you do normally inside the editor so if you double click on it you can change here to your one of your themes that you have already set that you’re using already in the website to any of these headings or paragraphs or anything like that you can also change the font choice if you just want to change that you
can change the size you can change the color and then you can change it to bold italic and underline you can add a link to it you can change the alignment and then all these things and they can even add an effect the fact is um happens behind the text so you can tell what I’m clicking these edit changes and you can change the spacing so the spacing is character spacing is the in between the letters here and character spacing and line spacing line
spacing is these this up and down area see okay so let’s get out of there you can change this text here as well this is paragraph text to anything you like just like I did just showed you and you can have a button here now you can also do more things than just what they have here you can click on this outside area and it works it’s setup overlay change overlay background and the settings so if you click on setup overlay you can change this
clicking closes lightbox so I have it set to yes we to close once they click on anywhere outside of this light box area which is this square here in the center so anything outside of the square here this this line here it’ll close automatically when they click on it so you can change the overlay background as well and this is this overlay which is in the very very back so right now it’s set to this color but you can also select a preset layout to
change it to anything you like you can also add an image set it to an image so if you click on image I’m going to click on free from Wix and you can pick any image there’s all these categories on the left hand side you can pick any one that you like once you change the image you can also click on the Settings button and change the opacity the color behind the image here you can change this color by clicking on it you can change the color behind
opacity so is how much it shows you can click here for scale to fit original size or tile and the position of how you want the image to display okay now let’s see here let’s go back to this gear icon for settings that’s the same thing okay and then let’s see if you click on this area here where it’s going to highlight this box here where the light box is you can set the trigger so if you click on set to trigger you can name your rely box as well
you can have it I think as many light boxes as you like so you can name them so they won’t get confusing and then you can have it automatically display on the page or not so if you want to have a button on the site that and when they click on it then this appears you can certainly do that otherwise when it’s set to yes it’ll display automatically at a certain time level so you can change the delay in seconds to when you want this to pop up on
your site you can also assign it which page it goes to so if you click here on this these are all the pages you have and you can click which pages it displays on and then you can also have it to where how does this lightbox close you can have a close button or an X button and then of course when they click on the outside so if you go up here to the settings that’s what we were just on okay so if you go to here layouts Lance is where the
positioning of this lightbox is going to show so writing offset to the center but you can also move it to the bottom corner the upper corner anywhere you want really you can also change the horizontal and off and the vertical offsets so if I wanted to move it to the left or move to the right you can certainly do that I’m going to change it back to zero okay now um you can change the design of the lightbox background in here as well and let’s see
you can animate it so let’s say I want to balance so all these animations you can do um to your lightbox so just make a little bit more visual okay so like if you do the bounce you can customize it and you can change the bounce too soft and then the direction it’s coming from and the duration it’s coming so if you press this button here it’ll show you a preview of how that will display now on here and you can click manage light boxes and if you
click that it’ll display your light boxes we only have one made right now so this is where it shows if you want to create another one you click add lightbox at the very bottom and then it will take you back to that same menu so here you can add a different one if you like and if you want to do like the 50% off one it has some dummy text here you can certainly change that and then do all the settings that I just showed you how to do now let’s
preview these so if you go to preview here after two seconds it should see it pops up welcome to my site they can either click click on this X here or they can click anywhere else on the screen and it’ll take them off and then me um so that’s pretty much it so that’s how to install a lightbox if you have any questions write them in the comments or if you would like to see additional videos let me know if you would like a website created please
contact me at Clifton designs com I am a professional web designer for the last seven years and I’m one of the top designers in the platform that I use I work with all budgets and I also accept monthly payments up to six months with no interest so this is my website Clifton designs com if you want me to help you create your website please give me a call my number is on my um website as well thanks and have a great day