sigma Hosting Logo
Sigma Hosting
Play Video

Expert WIX Design Tutorial for Pop up Window

This video shows you how to design a pop up window in WIX using a workaround.

hey guys this is Kyle I just wanted to make a short video here just to kind of address one of the questions that was asked in the the group earlier this week and it was regarding a workaround to where you can from a Wix website click a button and get a pop-up like this with a gradient background so I’m going to I’m going to do a quick tutorial and show you guys how you can do that and how you can be more efficient with it and how you can
really give off the appearance that you know there’s a pop-up window essentially the popped up one if they click that so I’m going to go over here to the web editor and this is this right here is essentially the page this is our services page this is for a florist who wants to branch out into wedding planning and things like that you know I just want to do something a little different so I built them a standard long scroll long scroll parallax
page here really flat probably only a few hours and the design here but it’s coming along pretty good so alright so this is the page here that we want to essentially have a button that clicks – you know services or images or whatever you want it to be you just really don’t want to create another page with a bunch of information because it really kind of convoluted a simple process and unfortunately Wix doesn’t have a button currently that
generates a pop-up window and creates a gradient background so this is the work around here and and I’m going to show you some ways to do it you know pretty efficiently so what we’re going to do is we’re going to go up here to our services and we are going to duplicate the page and then we are going to go to the duplicate page here and the first thing we’re going to do is we’re going to get rid of everything below the fold content so basically
the fold content is anything up here that’s visible within the viewport okay and that’s really all that matters for this button right here so we can essentially delete all this stuff below the fold content because it’s really going to increase load times whenever they’re going to that secondary page and it’s going to kind of mess with the transition a little bit if it’s loading slow so so we got rid of that and we’re going to scroll back up here
and now what we’re going to do is we’re going to add one big strip and we can actually get rid of these anchors to here I’ll do that in a minute so we want to put the strip right here now we’re going to stretch it down to the bottom send it us to the back and now we’re going to change the opacity of I apologize it’s running a little slow here so we’re going to go with something around 90% and if you’re doing images you really want it to be a lot
darker because the dark of the background the more it’s going to highlight your image it’s going to contrast very well so all right now that we’ve done this now we want to go ahead and add in photo gallery I’ve already copied my photo gallery here so I’m just going to quickly align it with the picture all righty and then I’m going to delete those anchors like I said all right now I’m going to go back to our services and I’m going to add a link to
the new page actually I’m gonna be the road there we go sorry I’ve got two copies here so I want to make sure I’m doing it accurately I’m going to go ahead and hide this window here and go alright so the next thing I’m going to do is I’m going to add a button I’ve already got one made here for this so let me go ahead and add that and I believe I used a up a proxy Minova font for this it worked really well with a capital X and it kind of gave it
that that look that I was going for so there we go and I’m going to line it up right here exactly with the corner just kind of me being anal retentive here then I’m going to link this back to the our services page like done click Save okay now we’re going to go to in fact let’s just go ahead and publish that look okay I’ll go over here not update this to load and now we’re going to click on View designs here and there you have it loads pretty
quick my internet speeds right now they’re not too great as I’m transitioning to fiber-optic but just comes with the territory where I’m at right now but you get the point it loads pretty quick and it’s a real nice design so that’s the video hope you guys enjoyed it hope you guys get something from it message me if you have any questions and I look forward to talking to guys next