Wix Design Tutorials: Creating a Fullscreen Lightbox with Hover Effects

[@jfosterdesigns]

WOAH! Dude, you just upgraded our web design skill like 50 levels in a single tutorial! Thank you so much!!!!!!!

[@JustinFosterJustinchi]

High On Design of for sure!!!

[@MillionFrames]

@@wixplayground7678 In just 10 minutes, I'm like now I have to redo my website design again with some cool new look :) Thanks.

[@himrocks100]

yes, agreed.

[@alcinnovations]

This is probably the most useful video a web designer can find on KZbin. This changes the way I think about web design.

[@abbichoa145]

Because of this i am going to rebuild my wix again from scratch

[@gabohoyos7389]

Don’t do it , it’s useless believe me

[@jlee0380]

This is so far the best tutorial for wix web design. Really appreciate your effort!

[@jerrybustamente1046]

I feel like I am watching real good magic. Thanks for sharing. God you guys are great designers!

[@sachinsawant7114]

Sir I see u r extremely talented to play with wix features and you proved the wix is like a playground to u,

[@dm.b7560]

Much better than WIX tutorials...... sadly.

[@mccaller2009]

Currently building an eCommerce website, didn't realize how much one can do with Wix until watching this video! This tutorial is fantastic :)

[@nick4985]

Brilliant tutorial - Had to use the pause and replay a lot but that was my choice as opposed to many painfully slow tutorials. Some great ideas - just careful not too many for your site or it might induce a fit !! As previous review have said this is so much better than WIX tutorials - they need your enthusiasm and creativity and should pay you for this - I will now revisit my site and sprinkle more magic dust based on your help.

[@ohnana95]

If anyone is seeing this, you should try Editor X by Wix. It's so much better and geared towards designers and agencies. It's better for designing tablet and mobile versions. You can switch your Wix premium plan to Editor X!

[@technicalgibberish]

How?

[@barneyjmusic]

Wow, this was fantastic. It certainly was a bit a fast for me to get all in one go, but I will take the time to test out the things that you mentioned. This is a special tutorial as you are really helping people to create something that actually looks good, instead of just functional.

[@NightBlade58]

Dude! This is amazing. I am pretty new to wix, but I’ve been coding for about a year professionally. I’m running into a problem and wondering if you can help. I get that you’re “supposed to design inside the grid for tablets and smaller screens” but I see you don’t. When I designed a site I am currently working on, and I went outside of the grids, on my wife’s computer you can’t see the material. How do you get around this?

[@mikekoy4259]

day 1 wix user tryna keep up with this speedy video like my life depends on it hahaha

[@liamgreen9787]

A client asked me a couple days ago how do they get text to turn bold when the hover over it. I just sent them this video, this is a good video

[@seananthonyjr.1595]

Great work. I wonder how this site would look on mobile.

[@ozziesheppard17]

Like crap- Wix is great, but the mobile system needs to be totally redesigned.

[@davidkonevky7372]

The mobile version of the editor not only sucks ass, it ends up looking bad on the website itself too. I think that there's not parallax either.

[@dhineshvm2184]

Lol 😆 Dont worry they have introduced Editor X for super responsive designs !

[@alxdeac]

Yeah. Wiix doenst play well with background images, they turn very static on mobile as the image size is vertical not horizontal. Wix doesn’t resize by default. Very hard to work with for 3D and interactive.

[@mariosanchez93]

@@davidkonevky7372 Thats whats Editor X made for :D try it out!

[@danielsnipes9175]

This is BLOWING my mind. Thank you SO MUCH!

[@jpo009]

Thanks for sharing!! ...Could you please follow up on this with how you would set up the layout for the "mobile" version of the site?

[@NeSquare]

+1

[@sarahhusna4215]

wowww... now i feel like my wix site is trash... need to redo & redesign from the beginning

[@andrej94mne]

Is this website responsive? My question actually is, if I scale this window, will your infographic about your product still match everything, will arrows connect to the exact part of the product?

[@Daemon1995_]

This just shows how amazing wix is compared to squarespace, they should sponsor more ppl using it, only thing they still lack is being responsive and the mobile editor

[@uygar9955]

Best wix tips so far.

[@juliecrossman2456]

how about mobile view? i find with wix: its design for desktop first, and mobile second. (should be the opposite)

[@GRZlllBadman]

whats the resolutions of the images you uploaded, that fits the wix background image ?

[@shawnieleaf2277]

You should make the resolution always 72 dpi, but with macs make the picture 2x as big

[@mdhamimprodhan4993]

I don't understan you countdown slideshow lightbox .. what I do now sir ?

[@Dgarays]

By any chance does anyone know here what is the best size/ resolution to use on a Wix background?? I’ve been trying to practice this with my own images and I have saved them high resolution and still they look weird when I upload them into wix as backgrounds ... they are pixelated 🤷🏻‍♀️ help!!!

[@Dgarays]

High On Design thanks to you! Have a happy new year!!

[@rightpadding]

This is sick! Thank you for this. You gain a subscriber for this. :)

[@iDhanasekar]

Best design and tutorial. thanks for the video

[@augustwang88]

another world... thanks for sharing.

[@justamama5167]

You guys are amazing!!! so much fun to watch and learn! Thank you!

[@leeatzmon]

How does the scroll effect works? I mean, the image changing its color behind the main header with no movment - like it was some color overlay

[@m4rknewt0n]

also lost on what the point of that is, it looks nice but does nothing ran out of time? /shrug

[@m4rknewt0n]

scrap- that it's for mobile. except he didn't finish it

[@Stafik33]

inspiring tutorial!

[@jamesswift6746]

Thanks for the video, very informative, had to rewind a couple of times due to the speed aha. For some reason, my lightbox won't stretch across the whole screen.. (I'm trying to create a dropdown menu) Any ideas? Thanks.

[@simonmc2348]

Stunning Site looks fantastic even on mobile the only problem is when you go on to an Ipad it fucks with the whole site WIX really need to get their act together and start making them all responsive.. but anyway great site def got a sub for this

[@sanjeetsingh1753]

Just awesome..no words.....m saving it and subscribing

[@idk2708]

This looks very good but with this you have no "page" and no keywords for SEO for each page

[@ribalrayess5078]

Hello, great tutorial. Only porblem is that light boxes are not responsive! Any Wix tutorial on how to make this site responsive?

[@danniebricknell9236]

I tried something similar to this but it did not scale on the mobile. How do i make this compatible for mobile?

[@leowang3638]

How about moblie？ what does it look like?

[@containableliving7642]

What good is the tutorial if you go at lighting speed. Not everyone goes that quick. BUMMER

[@mdhamimprodhan4993]

very first bro, very difficult for us (bangladesh)

[@AuraSolutionCompanyLimited]

how does this work on mobile mode ?

[@Willo-Lajbecc]

How does it look on mobile?

[@kalibiznes]

wow 😯👏 you are artist 👍😃

[@skeetarus]

I’m confused about keeping things within the boundaries. You haven’t put your logo within the inner boundaries, or the word “Play-ground”, so doesn’t that mean those will be cut off on an iPad, i.e. they aren’t responsive? I’ve kept everything on my site with the boundaries, even the logo and menu but it doesn’t look very slick and I hate it. But I didn’t want to put them outside the boundaries in case it gets cut off on iPads and tablets.

[@james555c]

Very creative my dude

[@Octorilla]

looks great until you load it on a smaller screen and all of that pinned text interferes with everything else.

[@ninoviper]

May be true. Wix is not so responsive though. This is my problem right now.

[@Octorilla]

@@ninoviper yep, editor X sounds like it will fix those issues, but I think it's got a steep learning curve from the standard editor

[@burekmesooo]

Hello, do you have any tips on how to make the full screen slide show appears the same on different screens? For ex. the slide show I set on my computer looks different on the screen of my client...it shrinks or extends and some blank area appears at the bottom. Please help if you have some tips:)

[@lombokngaji1355]

nice

[@norakamsari1952]

awesome video! Thanks for sharing dude!

[@gurmanjeetsahota7044]

Does this site work properly on Mobile ??

[@rxmshd]

BRO! THATS AWESOME! thank you +1

[@oscarhurtado8611]

Thank you for sharing this!!!

[@chltmdwp]

How big does your product image has to be in order to fill up the whole screen like yours?

[@sauravdevburman]

Super Duper... Just incredible 🙏👍👌

[@JunayBF]

how about mobile version?

[@Tomas-gk7qn]

What is the name of that device? Its gorgeous

[@mlvprasadofficial]

wix dsigner'

[@franklin374]

but hover doesn't show on the mobile device, right?

[@krishkarayil6512]

damn cool. bro.. Thanks a lot.

[@user-hp2ch1dd3o]

Bro how's the mobile view!

[@balmoralwatersportscentere909]

THANK YOU

[@skydyleyw0037]

why isnt it letting me adjust the scrolling box horizontally?

[@skydyleyw0037]

nvm figured it out, great tutorial btw!

[@kelvinxhonda]

Very good teaching. But since this is a tutorial, I don't know what 7 you rushing?

[@christinekim504]

I love this but how heavy is the load? I noticed wix pages have so many downloads that a simple page with gallery and strips can go up to 10MB. Also, how big should the background logo image be to display a full webpage without losing resolution?

[@shawnieleaf2277]

So I’m not sure about this particular format with light boxes, but for your logo- make it an SVG file (small size but since it’s vectored, you can make it as big as you need)

[@lapizza7206]

So cool dude

[@noelbatt9559]

I want what your'e on! Great tutorial

[@DTrejo33]

Is there like a version of this that slows down what you are doing?

[@mrbodycatcer]

yeah, the pause button

[@DTrejo33]

Honey Comb haha, I hope you’re having/have a great day.

[@travellife4769]

wah' on of great video I saw♥️♥️

[@ilufa1687]

THANKS.....i need this tutorial...

[@kennymiller2303]

when I try open this lightbox it pops on a new page. I dont know why ... anybody knows whats going on ?

[@ohwhatworld5851]

RIP mobile load times.

[@kwisatzhaderach1458]

Seriously. 90% of site traffic these days come from mobile. It's so limiting it drives me crazy.

[@damncat2793]

It looks fun to make and get money too

[@mbk-Por911]

This is amazing content but slow down. Post the realtime video so we can actually use your amazing ideas. Thanks...

[@bobol4917]

Bravo!

[@miipa]

Okay but open the mobile view. Then try to recreate everything to work.

[@ioku_josh4459]

What is this sorcery?

[@sabochris]

wait.. was that in realtime..?

[@anuragmadan]

Wix is your canva

[@hosameddineboudarraja8476]

greeeeeat

[@JaredLow]

What about mobile view. I think the animation works on mobile view. Any work around?

[@2002Rohit]

👌🥳

[@TheAmericanIndie]

how do u do stuff?

[@TheAmericanIndie]

@@wixplayground7678 o so thats how u does stuff?

[@fktandy]

save me this video

[@TheHeavyend81]

.......In this tutorial I will play a video at X10 speed and add a voice over (or even huvver) and forget to tell you at the end it's no good for mobile phones because only about 90% of people use them to surf online and thats not yet enough !

[@nightlyfrost]

Look great on desktop but on phone it looks trashy

[@giorgosangelidis8836]

Hello! How can I contact you?

[@londonlady8118]

Any chance slow down what you’re clicking on please?

[@produktionzn22]

Damnnnn!!!!

[@roshni5581]

wow

[@domivax]

OMG, I made 1000 pauses on this video

[@nunopena3871]

0.25 youtube - thanks.

[@khaiminh9709]

QC mới nổi

[@jenmontzingo]

Awesome but wayyyyyy too fast.

[@dimoshopoulos]

Too fast presentation and I can hardly keep up with it. I appreciate the ideas and techniques presented though. Maybe by saving the video and watching it 20 more times I can follow the steps. Keep the pace of the presentations slower, sir! It is supposed to be a tutorial, that is for beginners and non experts! They need time to keep up with the info presented. I'd comment the same on your other videos too, but it would be tiring enough for both of us.

[@dimoshopoulos]

I already know about changing the speed of a video... But imagine doing it! Then your voice would be like I would be hearing Satan talking - LOL! This wouldn't improve anything in my opinion. As a teacher, I would kindly advise you to keep a slower pace. Again, it is a tutorial and it mainly addresses people with poor knowledge on the subject (like me for example) and not pros (how don't really need a tutorial in fact). My comment is done in good will, so please don't get me wrong. In any case, you are the boss here :-)

[@sawsanalhashmi1396]

you are doing it too fast, slow down

[@emmanuelchikwadoclinthon5528]

THIS SITE IS CREATED BY CLINTHSTYLE.COM

[@marcush3075]

Great, great stuff, just too fast for the rookies.

[@terietrenchard1356]

TOO FAST can't follow

[@razcann3597]

youtube has a speed setting you can adjust

[@shawnieleaf2277]

Those hover boxes won’t be good for mobile

[@romanandfizah]

Nice tuto, but you go too fast...

[@oswaldvz]

Hello There, Is it possible if you could make a video on how to change the background image by assigning buttons by using Hover effects? For example like this website www.wynnresortsmacau.com/en/