Wix Design Tutorials: Creating a Fullscreen Lightbox with Hover Effects
HTML-код
- Опубликовано: 9 апр 2018
- In this tutorial, we’ll show you how a design expert uses the Wix Editor to create a site based on fullscreen lightboxes and hover effects. We’ll also include a Subscribe form and a Preorder form. This technique is great for any website, but especially a Product Showcase.
View the template from this tutorial: www.wix.com/website-template/...
Wix.com
The Web Is Your Playground
Start Creating: wix.com/designers/playground
WOAH! Dude, you just upgraded our web design skill like 50 levels in a single tutorial! Thank you so much!!!!!!!
High On Design of for sure!!!
@@wixplayground7678 In just 10 minutes, I'm like now I have to redo my website design again with some cool new look :) Thanks.
yes, agreed.
This is probably the most useful video a web designer can find on RUclips. This changes the way I think about web design.
This is so far the best tutorial for wix web design. Really appreciate your effort!
Currently building an eCommerce website, didn't realize how much one can do with Wix until watching this video! This tutorial is fantastic :)
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.
Sir I see u r extremely talented to play with wix features and you proved the wix is like a playground to u,
I feel like I am watching real good magic. Thanks for sharing. God you guys are great designers!
You guys are amazing!!! so much fun to watch and learn! Thank you!
This is BLOWING my mind. Thank you SO MUCH!
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.
This is sick! Thank you for this. You gain a subscriber for this. :)
Just awesome..no words.....m saving it and subscribing
Best design and tutorial. thanks for the video
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
Because of this i am going to rebuild my wix again from scratch
Don’t do it , it’s useless believe me
Best wix tips so far.
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?
awesome video! Thanks for sharing dude!
Thank you for sharing this!!!
BRO! THATS AWESOME! thank you +1
Much better than WIX tutorials...... sadly.
inspiring tutorial!
Super Duper... Just incredible 🙏👍👌
another world... thanks for sharing.
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.
day 1 wix user tryna keep up with this speedy video like my life depends on it hahaha
Hello, great tutorial. Only porblem is that light boxes are not responsive! Any Wix tutorial on how to make this site responsive?
Very creative my dude
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?
+1
THANKS.....i need this tutorial...
wow 😯👏 you are artist 👍😃
damn cool. bro.. Thanks a lot.
wah' on of great video I saw♥️♥️
How big does your product image has to be in order to fill up the whole screen like yours?
THANK YOU
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:)
So cool dude
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?
how about mobile view? i find with wix: its design for desktop first, and mobile second. (should be the opposite)
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?
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)
It looks fun to make and get money too
Loading times are terrible for lightboxes.
Anyway to speed this up?
Bravo!
How about moblie？ what does it look like?
wowww... now i feel like my wix site is trash... need to redo & redesign from the beginning
when I try open this lightbox it pops on a new page. I dont know why ... anybody knows whats going on ?
I tried something similar to this but it did not scale on the mobile. How do i make this compatible for mobile?
but hover doesn't show on the mobile device, right?
I want what your'e on! Great tutorial
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
Great work. I wonder how this site would look on mobile.
Like crap- Wix is great, but the mobile system needs to be totally redesigned.
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.
Lol 😆 Dont worry they have introduced Editor X for super responsive designs !
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.
@@davidkonevky7372 Thats whats Editor X made for :D try it out!
nice
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
also lost on what the point of that is, it looks nice but does nothing
ran out of time? /shrug
scrap- that it's for mobile. except he didn't finish it
What is the name of that device? Its gorgeous
wix dsigner'
whats the resolutions of the images you uploaded, that fits the wix background image ?
You should make the resolution always 72 dpi, but with macs make the picture 2x as big
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!!!
High On Design thanks to you! Have a happy new year!!
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
how does this work on mobile mode ?
How does it look on mobile?
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!
How?
save me this video
I don't understan you countdown slideshow lightbox .. what I do now sir ?
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.
wait.. was that in realtime..?
Does this site work properly on Mobile ??
Hello! How can I contact you?
Damnnnn!!!!
why isnt it letting me adjust the scrolling box horizontally?
nvm figured it out, great tutorial btw!
how about mobile version?
👌🥳
Is there like a version of this that slows down what you are doing?
yeah, the pause button
Honey Comb haha, I hope you’re having/have a great day.
RIP mobile load times.
Seriously. 90% of site traffic these days come from mobile. It's so limiting it drives me crazy.
greeeeeat
What is this sorcery?
This looks very good but with this you have no "page" and no keywords for SEO for each page
Bro how's the mobile view!
how do u do stuff?
@@wixplayground7678 o so thats how u does stuff?
very first bro, very difficult for us (bangladesh)
wow
QC mới nổi
looks great until you load it on a smaller screen and all of that pinned text interferes with everything else.
May be true. Wix is not so responsive though. This is my problem right now.
@@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
Very good teaching.
But since this is a tutorial, I don't know what 7 you rushing?
0.25 youtube - thanks.
This is amazing content but slow down. Post the realtime video so we can actually use your amazing ideas. Thanks...
OMG, I made 1000 pauses on this video
Wix is your canva
What about mobile view. I think the animation works on mobile view. Any work around?
Look great on desktop but on phone it looks trashy
What good is the tutorial if you go at lighting speed. Not everyone goes that quick. BUMMER
Any chance slow down what you’re clicking on please?
.......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 !
Okay but open the mobile view. Then try to recreate everything to work.
Awesome but wayyyyyy too fast.
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/
Great, great stuff, just too fast for the rookies.
THIS SITE IS CREATED BY CLINTHSTYLE.COM
TOO FAST can't follow
youtube has a speed setting you can adjust
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.
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 :-)
Nice tuto, but you go too fast...
you are doing it too fast, slow down