Wix Design Tutorials: Creating a One-Page Website with Hover Effects

Sdílet
Vložit
  • čas přidán 8. 08. 2018
  • In this tutorial, I’ll show you how to create a one-page website with interactive hover effects. I’ll also add the Wix Music player. This technique is great for any website, but especially when designing a musician portfolio or album release.
    Play with this website: www.wix.com/website-template/...
    Wix.com
    The Web Is Your Playground
    Start Creating: www.wix.com/designers/playground

Komentáře • 116

  • @mitchellobatake8273
    @mitchellobatake8273 Před 5 lety +4

    Great job. Love the way you think about pushing the limits of web design. The result looks like it was done with really sophisticated motion graphics tools. Impressive.

  • @AlonaTiara
    @AlonaTiara Před 3 lety +7

    this tutorial was outstanding and the website is beautiful!

  • @kjohal9583
    @kjohal9583 Před 4 lety +4

    Very Well Explained. Little bit fast, but this is not an issue. You have created a 1 page website within 10 mins. Well done. We need to be able to do all these things without trying to learn at the same time. But overall very good. Keep up the good work. Thanks

  • @shadostorm8375
    @shadostorm8375 Před 4 lety +5

    So amazing. This is really a Playground!

  • @matsher
    @matsher Před 3 lety +1

    FANTASTIC Tut. I am going to use the video slideshow and the revealing text - am excited to try... Thanks a lot.

  • @CMaddox
    @CMaddox Před 5 lety

    This video is AMAZING. Thank you for creating this!!!! Thank you! Thank you!!

  • @julie91295
    @julie91295 Před 3 lety +3

    this channel really change the perspective that Wix is too limited for designers. Wish there were more content. There aren't any new content in like A YEAR

  • @maftunaberkimbaeva7428
    @maftunaberkimbaeva7428 Před 4 lety +3

    Super cool video tutorial. Thank you very much. I am doing my first steps in website design. Hope to become an expert like you guys.)

  • @thesimplesarah
    @thesimplesarah Před 4 lety +2

    SUBSCRIBED. Thank you so much, this is beautiful.

  • @mrsnack3118
    @mrsnack3118 Před 3 lety +7

    This was sooo slick!

  • @mntk
    @mntk Před 4 lety

    Stunning!

  • @raulenriquereyesmalqui6937

    you guys are awesome!! I had to say it.

  • @klaudiakusnirova
    @klaudiakusnirova Před rokem

    wow, great tutorial! thanks

  • @legifter7331
    @legifter7331 Před 3 lety

    I saw you sped things up, but wonderful explanation 👏👌

  • @myracle7492
    @myracle7492 Před 3 lety +7

    dang you smooth lol It takes me forever

  • @Carolina-rd3gh
    @Carolina-rd3gh Před 4 lety

    So cool! ✨

  • @jasonSage94
    @jasonSage94 Před 2 lety

    It's awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Thx so much

  • @djvilla44
    @djvilla44 Před 5 lety +5

    Beautiful design and awesome tutorial to follow. Keep them coming!

    • @terrencelukas1035
      @terrencelukas1035 Před 3 lety

      I guess Im randomly asking but does any of you know of a way to get back into an Instagram account?
      I somehow forgot my password. I would appreciate any tips you can offer me!

    • @matteotrace2299
      @matteotrace2299 Před 3 lety

      @Terrence Lukas Instablaster :)

    • @terrencelukas1035
      @terrencelukas1035 Před 3 lety

      @Matteo Trace I really appreciate your reply. I got to the site thru google and I'm trying it out atm.
      Looks like it's gonna take quite some time so I will get back to you later with my results.

    • @terrencelukas1035
      @terrencelukas1035 Před 3 lety

      @Matteo Trace it worked and I actually got access to my account again. I am so happy:D
      Thanks so much, you really help me out :D

    • @matteotrace2299
      @matteotrace2299 Před 3 lety

      @Terrence Lukas glad I could help :)

  • @amilcrrr
    @amilcrrr Před 4 lety +1

    This shiiit is fire. Loved it keep it up

  • @blueblue-tm9uk
    @blueblue-tm9uk Před 9 měsíci

    thanks!!

  • @balmoralwatersportscentere909

    Thank You

  • @RafaelUeda
    @RafaelUeda Před 5 lety

    Amazing, thx

    • @RafaelUeda
      @RafaelUeda Před 5 lety

      @@wixplayground7678 are you will continue?

    • @RafaelUeda
      @RafaelUeda Před 5 lety

      @@wixplayground7678 both lol. But more tutorials for Wix :)

  • @digitalpoint1107
    @digitalpoint1107 Před 4 lety +1

    This worked awesome on a fully stretched version of the website, but when resizing the letters start getting on top of each other. Any solutions?

  • @tripeatin
    @tripeatin Před 2 lety +2

    Hey man, great tutorial! Thanks! On the example website, you made a menu bar (Top, My Music, Info, Video, Follow me)... and when one clicks it scrolls down to the section on the page. It would be awesome if you could share how you did that! Good vibez! :)

  • @ariearie5054
    @ariearie5054 Před 2 lety

    Buttersmooth voice

  • @JunayBF
    @JunayBF Před 3 lety +5

    Great work - question do you get the same when you switch to mobile preview ? I get everything over the place

  • @patrickagana5440
    @patrickagana5440 Před 4 lety +1

    Why does the text in the hover boxes apply on both normal and hover on its own?

  • @Mvrge
    @Mvrge Před 4 měsíci

    after hours of googling, this wow

  • @kennygo5053
    @kennygo5053 Před 5 měsíci

    so cool. can it be used in wix as well?

  • @Iconisms
    @Iconisms Před 3 lety +1

    Hi, is it still possible on hover edit mode to select multiple objects at the same time and then align and distribute them as you show here?. I can't use the align tool (it's grayed) or make multiple objects selection in the box while in hover mode ( Chrome and Firefox - February 2021). For example, on Regular mode I have different texts/words spread on the box, when on hover mode I want them to animate as you did with the album name in this video. Seem like the UI and the way wix hover mode works changed. I can't understand why wix changed it. Looks like it used to be possible when you did this video.

  • @zztops3739
    @zztops3739 Před 4 lety +4

    Okay I have been trying to get to hover things to work and it is just not doing it for me. I’m following the instructions step by step 😭 can you reexplain that section in another vid but a little bit slower

  • @picklepirate
    @picklepirate Před 4 lety +1

    I agree with @willmeisha these videos made me realize wix is actually really usable

  • @shimronnetia
    @shimronnetia Před 4 lety

    thanks

  • @bruceweng8013
    @bruceweng8013 Před 5 lety +5

    Wonderful design and this expanded my knowledge of wix. I was wondering if this design style has a good solution to design a mobile version via using wix?

    • @bruceweng4014
      @bruceweng4014 Před 5 lety +2

      ​@@wixplayground7678 Thanks, I agree that this style might mainly suit the desktop end. Thank you for your tutorials, among all Wix tutorials on youtube, your tutorials have the best sense of design. Looking forward to watching more videos from your channel.

  • @rasheedomoleye5392
    @rasheedomoleye5392 Před 4 lety +3

    This is a great video I ever came across...I have been using wix for my clients but I just discovered all the uses of the hovers and light box in another beautiful way...I will give this a trial...but does these designs look good on smaller desktop screens and mobile?

    • @anaangel622
      @anaangel622 Před 4 lety

      Carrd is a new site that is MUCH more affordable than Wix and the other sites. They have a free plan, and their premium plans start at LESS than $1/month!!! that's unheard of! use Coupon code: COUPONSAVE to save 30% on premium plans (just $5/ year!!!) try.carrd.co/couponsave

    • @Daemon1995_
      @Daemon1995_ Před 3 lety +2

      @@anaangel622 very bad alternative for anyone reading this

  • @VincentFoster-pb8fx
    @VincentFoster-pb8fx Před 4 měsíci

    Another vid that races through.

  • @solangefagundes2470
    @solangefagundes2470 Před 5 lety +2

    Great vídeo!! It looks great!! But as most of the people access websites from their phone, the video background isn't available for mobile version :(

  • @frankiegarces8799
    @frankiegarces8799 Před 3 lety +10

    great design work! question- since you used elements outside of the Wix Grid Guidelines, does that mean not every device will be compatible with your design? You may run into some issues when sending the site out to clients who don't have a monitor that can stretch the length of the design you've made. Unless you know of a fix to this problem, I wouldn't recommend making a site using this creative text. if you know of a solution to this obstacle, we'd love to hear it!

    • @Daemon1995_
      @Daemon1995_ Před 3 lety +3

      There isnt, while this video is outdated, wix still havent added responsiveness to the editor. Editor x would be the alternative.

    • @nocknocktheproducer
      @nocknocktheproducer Před 2 lety +5

      adding the strips and columns allows you to work in the space that he did. Thats why he added the strips and columns when wanting to add things on the sides, so they would still be optimized for all viewers.

    • @HenryKeepsItReal
      @HenryKeepsItReal Před 2 lety +1

      @@nocknocktheproducer That’s what I was thinking too.

  • @eshwarya9872
    @eshwarya9872 Před 4 lety

    is this website responsive to the device's screen size?

  • @savnicole
    @savnicole Před 4 lety +2

    If it's too fast for you, slow down the playback speed!

    • @Akmay-
      @Akmay- Před rokem

      Exactly. This is a nice change from having to speed things UP for people who've been designing in Wix for years but still like to get inspired here👍

  • @briangarnett1095
    @briangarnett1095 Před 3 lety

    Mannn awesome how much do you charge?

  • @BabySleepLullabyMusic
    @BabySleepLullabyMusic Před 2 lety

    where can I get the video animation playing

  • @lapazprojects4101
    @lapazprojects4101 Před 4 lety +2

    Amazing and simple to learn. Just one thing, I can’t resize the background video for mobile view. It plays but it’s so stretched out it’s impossible to see what’s going on.
    I uploaded the background video from my computer straight to wix gallery since I don’t have CZcams. Is there a fix to this?

  • @mdhamimprodhan4993
    @mdhamimprodhan4993 Před 2 lety

    can you plz tell me where I found your videos ?🙏🙏🙏🙏

  • @johncarden12
    @johncarden12 Před 2 lety

    How does it look on mobile?

  • @rico3567
    @rico3567 Před 3 lety

    but is it great in mobile?

  • @laurafandino9783
    @laurafandino9783 Před 3 lety

    how does all of this translate into mobile view?

  • @NehemieMomo
    @NehemieMomo Před 2 lety

    How do you make templates?

  • @davidkonevky7372
    @davidkonevky7372 Před 4 lety +3

    All of the websites in this channel called me untalented in 1000 different languages

  • @oishaelegido
    @oishaelegido Před rokem

    Damn!

  • @wittymarket
    @wittymarket Před 5 lety +3

    how will these effects display on mobile? I love your design and have issues when they transition to the mobile devices

    • @steady640
      @steady640 Před 5 lety

      With wix you can customize your mobile site, almost independently of the full site.
      I wonder what the performance of the site would be with all those overlapping elements and JavaScript.
      Wix is the best.

    • @solangefagundes2470
      @solangefagundes2470 Před 5 lety

      You can't.. No video background available on mobile

  • @moodmeditation4458
    @moodmeditation4458 Před 4 lety

    Can't we add our own videos and images?

  • @briangarnett1095
    @briangarnett1095 Před 3 lety

    Can o hire you to do my website

  • @happybev
    @happybev Před 3 lety

    it took you 10mins what took me 1 week and counting lol

  • @abdelbailabaila
    @abdelbailabaila Před 4 lety +21

    good video but way to fast, please next time can you explain just a little slowly so that way the tutorial is easier to understand... but thanks

  • @dylanopowell5884
    @dylanopowell5884 Před 4 lety +4

    with those skills, you may be making 6 figures income

  • @auomauom
    @auomauom Před 6 lety

    Boss website design

  • @Gerrardsoccer
    @Gerrardsoccer Před 5 lety +2

    too perfect to be true, can i have the designer's name?

    • @picklepirate
      @picklepirate Před 4 lety

      lol that was a butt-y way of saying that

  • @AntoninaRivituso
    @AntoninaRivituso Před 4 lety +11

    The video is going too fast to learn properly slow it down

  • @jacquelineschumann3861

    Fantastic info but going way too fast. For future videos please slow down. Thanks!

  • @Ovisual
    @Ovisual Před 3 měsíci

    just to fast but great work

  • @davidthompson8153
    @davidthompson8153 Před 4 lety +7

    Great video and design techniques but way too fast.

    • @dylanopowell5884
      @dylanopowell5884 Před 4 lety +1

      or prob u r 2 slow, do you want a one-hour vid instead of?

  • @sastephens
    @sastephens Před 6 lety

    You know more wix tricks than I do on my website - www.sewellstephens.com

    • @sastephens
      @sastephens Před 6 lety

      Your welcome

    • @sastephens
      @sastephens Před 6 lety

      I forgot to tell you, since you did such a good job with this video, I will even pay you if you help with the AdWords promotion tool. Here is the url: www.sewellstephens.com/account/promotion

  • @jacquelinestuart7385
    @jacquelinestuart7385 Před 2 lety

    Super inspiring. Your video offered insightful ways to create a webpage that is striking and interactive. T h a n k y o u . . .

  • @layman-toned7767
    @layman-toned7767 Před 4 lety

    💤

  • @Johnkels100
    @Johnkels100 Před 3 lety

    To fast if he can work as quick as that wow it makes it unreal why are so many CZcams creators trying to be so fast with speech and vids. I presume they have something good to get home to.!!!

  • @SuzanFiskin
    @SuzanFiskin Před 5 lety +17

    Great info and way too fast. You're doing this faster than real time and trying to teach people who want to learn this. S-l-o-w down, please!

    • @AshleyObasi
      @AshleyObasi Před 4 lety +10

      you can change the speed of the video yourself in settings to follow along

    • @idk2708
      @idk2708 Před 4 lety +3

      I didn't find this too fast

    • @davidkonevky7372
      @davidkonevky7372 Před 4 lety +2

      Honestly it's alright to me, at least way better than having to put a tutorial on x2 because they talk too slow

  • @ribierahmadalkeni8453
    @ribierahmadalkeni8453 Před 4 lety +1

    1- Everything is beautiful in Wix:
    but the sites are very slow to load pages, especially in phones and tablets This is uncomfortable for the customer Please pay attention to this.
    2- And I hope there will be more applications and more programs work with Wix.
    3- A mobile application is beautiful
    but it is work very slow to upload pages and to control it working slowly
    4- The big problem is when you build your website on the Wix platform You don't have full control of the mobile or tablet field to customize your side.
    5- When I add the new task on the Wix mobile or in Wix platform
    I don't receive notice of this task when it's time.
    Sometimes I received by email only.
    Please pay attention to all this feedback thank you
    -------------------------

    • @ribierahmadalkeni8453
      @ribierahmadalkeni8453 Před 4 lety +1

      High On Design Thanks for your quick reply and I hope there’s solution for this issue thanks 🤗

  • @emilyadamson3398
    @emilyadamson3398 Před 4 lety +1

    way too fast.....

  • @kristinakarreno5722
    @kristinakarreno5722 Před 4 lety

    Way too fast.

    • @picklepirate
      @picklepirate Před 4 lety +1

      on youtube.. there's pause. I like it fast so I can quickly see and remember the steps.

  • @faithoffor7759
    @faithoffor7759 Před 4 lety

    you are just too fast

  • @DrLauraRPalmer
    @DrLauraRPalmer Před 3 lety

    NOT to mention, half these features won’t work on every device I’m finding with wix. Very janky platform tgat seem to only work best on Androids. Which means it was designed by foreign designers. Which means they don’t understand how vital it is to run smoothly on Apple products. Other countries use android as the standard. But Androids gives inferior editing and video playback performance compared to Apple devices. But wix looks and acts kinda shitty on Apple devices.

  • @smeacraptor6641
    @smeacraptor6641 Před 2 lety

    Way too fast

  • @alexdobi1
    @alexdobi1 Před 3 lety

    Absolutely zero responsiveness... forget tablet or mobile view

  • @DrLauraRPalmer
    @DrLauraRPalmer Před 3 lety

    YOU have the right idea, but you’re a good teacher I’m sure, maybe youre just a terrible editor. You leave way too much detail out. You assume the viewer knows ANYTHING about the things you do but never mention it’s location. These things are often deeply hidden. This Wix editor has been a huge waste of time so far, as is, and your speedy vague explanations didnt make it that much better either I guess. But looks really great visually.

  • @DS-tg7cj
    @DS-tg7cj Před 2 lety

    Terrible videos by you'll for people here to learn. You need to understand UX before throwing content out.