Wix Design Tutorials: Creating a Fullscreen Lightbox with Hover Effects

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 144

  • @jfosterdesigns
    @jfosterdesigns 6 лет назад +112

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

    • @JustinFosterJustinchi
      @JustinFosterJustinchi 6 лет назад

      High On Design of for sure!!!

    • @MillionFrames
      @MillionFrames 5 лет назад +6

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

    • @himrocks100
      @himrocks100 4 года назад +1

      yes, agreed.

  • @alcinnovations
    @alcinnovations 4 года назад +5

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

  • @jlee0380
    @jlee0380 4 года назад +8

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

  • @Daemon1995_
    @Daemon1995_ 3 года назад +14

    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

  • @abbichoa145
    @abbichoa145 5 лет назад +18

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

    • @gabohoyos7389
      @gabohoyos7389 3 года назад

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

  • @jerrybustamente1046
    @jerrybustamente1046 5 лет назад +4

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

  • @sachinsawant7114
    @sachinsawant7114 5 лет назад +2

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

  • @mccaller2009
    @mccaller2009 6 лет назад

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

  • @barneyjmusic
    @barneyjmusic Год назад +1

    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.

  • @dm.b7560
    @dm.b7560 5 лет назад +3

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

  • @uygar9955
    @uygar9955 3 года назад

    Best wix tips so far.

  • @danielsnipes9175
    @danielsnipes9175 4 года назад +1

    This is BLOWING my mind. Thank you SO MUCH!

  • @nick4985
    @nick4985 5 лет назад +4

    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.

  • @liamgreen9787
    @liamgreen9787 4 года назад +1

    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

  • @NightBlade58
    @NightBlade58 6 лет назад +5

    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?

  • @seananthonyjr.1595
    @seananthonyjr.1595 4 года назад +20

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

    • @davidkonevky7372
      @davidkonevky7372 4 года назад +3

      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
      @dhineshvm2184 4 года назад +5

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

    • @alxdeac
      @alxdeac 4 года назад +1

      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
      @mariosanchez93 3 года назад +1

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

    • @ohnana95
      @ohnana95 3 года назад +1

      @@mariosanchez93 omg. good thing I looked at the comments because I never knew anything about Editor X. thank you!

  • @mikekoy4259
    @mikekoy4259 4 года назад +1

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

  • @iDhanasekar
    @iDhanasekar 5 лет назад +1

    Best design and tutorial. thanks for the video

  • @justamama5167
    @justamama5167 4 года назад

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

  • @augustwang88
    @augustwang88 4 года назад

    another world... thanks for sharing.

  • @jpo009
    @jpo009 6 лет назад +4

    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?

  • @sarahhusna4215
    @sarahhusna4215 4 года назад +3

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

  • @sanjeetsingh1753
    @sanjeetsingh1753 4 года назад

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

  • @ohnana95
    @ohnana95 3 года назад +2

    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!

  • @james555c
    @james555c 4 года назад

    Very creative my dude

  • @rightpadding
    @rightpadding 6 лет назад +2

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

  • @kalibiznes
    @kalibiznes 4 года назад

    wow 😯👏 you are artist 👍😃

  • @ribalrayess5078
    @ribalrayess5078 4 года назад

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

  • @ohwhatworld5851
    @ohwhatworld5851 6 лет назад +62

    RIP mobile load times.

    • @kwisatzhaderach1458
      @kwisatzhaderach1458 4 года назад +5

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

  • @Stafik33
    @Stafik33 6 лет назад +3

    inspiring tutorial!

  • @andrej94mne
    @andrej94mne 6 лет назад +1

    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?

  • @mdhamimprodhan4993
    @mdhamimprodhan4993 2 года назад

    very first bro, very difficult for us (bangladesh)

  • @simonmc2348
    @simonmc2348 5 лет назад

    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

  • @jamesswift6746
    @jamesswift6746 3 года назад

    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.

  • @mdhamimprodhan4993
    @mdhamimprodhan4993 2 года назад

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

  • @noelbatt9559
    @noelbatt9559 3 года назад

    I want what your'e on! Great tutorial

  • @norakamsari1952
    @norakamsari1952 5 лет назад

    awesome video! Thanks for sharing dude!

  • @GRZlllBadman
    @GRZlllBadman 3 года назад +1

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

    • @shawnieleaf2277
      @shawnieleaf2277 2 года назад

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

  • @balmoralwatersportscentere909
    @balmoralwatersportscentere909 4 года назад

    THANK YOU

  • @danniebricknell9236
    @danniebricknell9236 4 года назад

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

  • @leeatzmon
    @leeatzmon 4 года назад +1

    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
      @m4rknewt0n 4 года назад

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

    • @m4rknewt0n
      @m4rknewt0n 4 года назад

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

  • @Tomas-gk7qn
    @Tomas-gk7qn 6 лет назад +2

    What is the name of that device? Its gorgeous

  • @juliecrossman2456
    @juliecrossman2456 5 лет назад +1

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

  • @leowang3638
    @leowang3638 6 лет назад +1

    How about moblie? what does it look like?

  • @rxmshd
    @rxmshd 4 года назад

    BRO! THATS AWESOME! thank you +1

  • @oscarhurtado8611
    @oscarhurtado8611 6 лет назад

    Thank you for sharing this!!!

  • @Dgarays
    @Dgarays 4 года назад +1

    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
      @Dgarays 4 года назад

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

  • @chltmdwp
    @chltmdwp 3 года назад

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

  • @damncat2793
    @damncat2793 5 лет назад

    It looks fun to make and get money too

  • @burekmesooo
    @burekmesooo 2 года назад

    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:)

  • @lapizza7206
    @lapizza7206 5 лет назад

    So cool dude

  • @Willo-Lajbecc
    @Willo-Lajbecc Год назад

    How does it look on mobile?

  • @sauravdevburman
    @sauravdevburman 6 лет назад

    Super Duper... Just incredible 🙏👍👌

  • @Aluniamaira20
    @Aluniamaira20 Год назад

    nice

  • @ilufa1687
    @ilufa1687 5 лет назад

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

  • @AuraSolutionCompanyLimited
    @AuraSolutionCompanyLimited 3 года назад

    how does this work on mobile mode ?

  • @mbk-Por911
    @mbk-Por911 3 года назад

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

  • @travellife4769
    @travellife4769 4 года назад

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

  • @gurmanjeetsahota7044
    @gurmanjeetsahota7044 3 года назад

    Does this site work properly on Mobile ??

  • @franklin374
    @franklin374 5 лет назад

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

  • @DTrejo33
    @DTrejo33 4 года назад

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

    • @mrbodycatcer
      @mrbodycatcer 4 года назад

      yeah, the pause button

    • @DTrejo33
      @DTrejo33 4 года назад

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

  • @kennymiller2303
    @kennymiller2303 5 лет назад

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

  • @idk2708
    @idk2708 4 года назад

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

  • @skeetarus
    @skeetarus 5 лет назад

    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.

  • @rocksantos-r1g
    @rocksantos-r1g 4 месяца назад

    Bro how's the mobile view!

  • @JunayBF
    @JunayBF 4 года назад

    how about mobile version?

  • @krishkarayil6512
    @krishkarayil6512 5 лет назад +2

    damn cool. bro.. Thanks a lot.

  • @christinekim504
    @christinekim504 6 лет назад

    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
      @shawnieleaf2277 2 года назад

      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)

  • @containableliving7642
    @containableliving7642 5 лет назад +1

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

  • @kelvinxhonda
    @kelvinxhonda 3 года назад

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

  • @anuragmadan
    @anuragmadan 6 месяцев назад

    Wix is your canva

  • @skydyleyw0037
    @skydyleyw0037 5 лет назад

    why isnt it letting me adjust the scrolling box horizontally?

    • @skydyleyw0037
      @skydyleyw0037 5 лет назад

      nvm figured it out, great tutorial btw!

  • @ioku_josh4459
    @ioku_josh4459 4 года назад

    What is this sorcery?

  • @TheAmericanIndie
    @TheAmericanIndie 5 лет назад

    how do u do stuff?

    • @TheAmericanIndie
      @TheAmericanIndie 5 лет назад

      @@wixplayground7678 o so thats how u does stuff?

  • @sabochris
    @sabochris 6 лет назад

    wait.. was that in realtime..?

  • @bobol4917
    @bobol4917 5 лет назад

    Bravo!

  • @hosameddineboudarraja8476
    @hosameddineboudarraja8476 4 года назад

    greeeeeat

  • @domivax
    @domivax 6 лет назад

    OMG, I made 1000 pauses on this video

  • @Octorilla
    @Octorilla 4 года назад +2

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

    • @ninoviper
      @ninoviper 4 года назад

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

    • @Octorilla
      @Octorilla 4 года назад

      @@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

  • @2002Rohit
    @2002Rohit 2 года назад

    👌🥳

  • @giorgosangelidis8836
    @giorgosangelidis8836 6 лет назад

    Hello! How can I contact you?

  • @fktandy
    @fktandy 5 лет назад

    save me this video

  • @nunopena3871
    @nunopena3871 5 лет назад

    0.25 youtube - thanks.

  • @nightlyfrost
    @nightlyfrost 4 года назад

    Look great on desktop but on phone it looks trashy

  • @TheHeavyend81
    @TheHeavyend81 4 года назад +1

    .......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 !

  • @londonlady8118
    @londonlady8118 4 года назад

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

  • @miipa
    @miipa 2 года назад

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

  • @produktionzn22
    @produktionzn22 6 лет назад +1

    Damnnnn!!!!

  • @jenmontzingo
    @jenmontzingo 6 лет назад +1

    Awesome but wayyyyyy too fast.

  • @khaiminh9709
    @khaiminh9709 6 лет назад

    QC mới nổi

  • @JaredLow
    @JaredLow 5 лет назад

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

  • @romanandfizah
    @romanandfizah 4 года назад

    Nice tuto, but you go too fast...

  • @marcush3075
    @marcush3075 4 года назад

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

  • @roshni5581
    @roshni5581 6 лет назад

    wow

  • @dimoshopoulos
    @dimoshopoulos 5 лет назад +1

    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
      @dimoshopoulos 5 лет назад

      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 :-)

  • @emmanuelchikwadoclinthon5528
    @emmanuelchikwadoclinthon5528 4 года назад

    THIS SITE IS CREATED BY CLINTHSTYLE.COM

  • @sawsanalhashmi1396
    @sawsanalhashmi1396 4 года назад +1

    you are doing it too fast, slow down

  • @LiquiDirt
    @LiquiDirt 6 лет назад

    it was way to fast and does not show all the details it would take a stop rewind a thousand times to see how and where you go for all this information.. it is great to see it does these things but it does not teach anything. again way to fast.

  • @oswaldvz
    @oswaldvz 5 лет назад

    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/

  • @terietrenchard1356
    @terietrenchard1356 6 лет назад

    TOO FAST can't follow

    • @razcann3597
      @razcann3597 6 лет назад

      youtube has a speed setting you can adjust