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

hi I’m Sam from the Wix design studio in this tutorial I’ll show you how a design expert uses the Wix editor to create a one-page website with interactive hover effects this technique is great for any website but especially when designing a musician’s website or album release so let’s dive in first I’ll open the Wix editor and start with a blank page I always start by saving and naming my site so it will autosave in the future in the editor
I’ll change page background to black and change page design to no color so it matches my background then I’ll add a video background to create the animated headline I’ll first add a strip and drag it into place to make it transparent I’ll change strip background and go to color setting to reduce the opacity and color to 0% under layouts allowed a column then manage column to divide my strip into five columns I’ll resize and place it in the center
of the full next I’ll add text and attach it to column one then I’ll choose glide in animation I’ll customize the distance and direction of the letter in preview mode you can see how the letter appears from the top left I’ll duplicate this letter and attach it to the same column customize it and adjust the direction of the letter I’ll do the same for all the other columns giving each letter its own distance and direction in preview mode you can
see the seamless way each letter appears into view back in the editor I’ll add text to the header and customize next I’ll create an animated title on hover to do this I’ll add another strip change strip background and scaling then I’ll add a hover box on top adjust the size and reduce the opacity in color to 0% and apply to hover I’ll delete the pre-made content and add an image to regular mode now I’ll create the same effect I used in the header
by adding each letter and positioning it accordingly under filters I can change the color of my image now I’ll select each letter and apply to hover to make sure none of my letters are hidden behind the image I’ll select the image right-click select arrange and send it back to make it look like my letters aligned on hover I’ll go to hover mode select each letter group elements and in the right toolbar choose align to bottom and reposition to the
center of the image now in preview mode you can see the letters align and the image color changes on hover back in the editor on hover mode I’ll select each letter and choose animate in preview mode you can see the letters move smoothly on their own now I want to add a couple buttons around the album first I’ll add a strip change strip background and reduce opacity and color to 0 under layouts I’ll add a column and attach a button to the right
column and customize to make it sit on a 90 degree angle I’ll rotate it right to number each album I’ll duplicate the text scale it and align it to the right next I’ll add a button to the left column and customize the color to transparent with a gray border and change the text to by now just like the right column I’ll rotate it 90 degrees reposition and align text to the left on the bottom I’ll add a listen button that interacts on hover so I’ll
add a line on regular mode applied to hover and adjust the position and shorten the line in hover mode in preview mode you can see the line changes position and size alongside the rest of the letters to create two more albums on this website I’ll duplicate this hover box column and buttons drag it down and customize the numbers image and text on preview mode you can see it works exactly the same as the previous album I’ll do the same for the
third and last album to create a paragraph that gradually reveals on scroll I’ll add a unique line of text for each sentence and apply fade-in animation to each line with an increased delay for the last fold in this website I want to create a cool video slideshow to do this I’ll add a box slideshow and remove all the pre-made content I’ll change the slide background to a video and reposition to change the design of the slideshow arrows I’ll
remove the current navigation arrows and buttons then I’ll customize the design choose a new our design and go back to layouts to show navigation arrows then I’ll change the color to white to number each slide I’ll add another text button and rotate the position to 90 degrees I’ll delete the two other slides in the slideshow and duplicate slide one twice now I’ll adjust each slide number and video accordingly in preview mode you can see the
video slideshow auto plays and slides on its own to finish off the design of this video slideshow I’ll add a text button on the side that says video to do this a lot of strip reduce the opacity and color to zero and add a column attached to the right column I’ll add a text button that says video and rotate it on a 90 degree angle to make sure only the text sits in front of the video slideshow I’ll click on the strip select arrange and send to
back now I can reposition this strip and left align the text for the footer of this website I want to create a social news ticker to do this I’ll click on the footer and change footer design to a solid color next I’ll add a slideshow remove all the pre-made content and change the background color to white under layouts I’ll hide the navigation arrows and slideshow buttons I’ll rescale the strip and reduce the opacity and color to zero and
attach it to the footer on top I’ll add text for each social Channel I want to add I’ll delete the other two slides and duplicate the slide I just created to create a smooth transition I’ll set the time between slides to two seconds I’ll also turn off stop autoplay on hover so that it continually plays on preview mode you can see the ticker smoothly moves across the page now we need to link the social ticker to each social Channel back in the
editor I’ll click on the text select link choose web address and add my unique URL for each channel on both slides lastly I’ll create a light box with wicks music so fans can listen to the album when they click on the listen button I’ll first add a light box and delete all the pre-made content I’ll change the background color and customize the exit icon on top I’ll add the wicks music player and scale to size under settings I can change the
layout and hide the album cover I’ll reduce the background color to zero and change the border color to white to match I’ll customize the colors of my text buttons and control bar under change overlay background which is what covers the rest of the page I’ll reduce the opacity and color to 80% under setup overlay I’ll turn on clicking closes light box now I’ll set triggers I’ll name the light box and choose to not automatically display the light
box on page in preview mode you can see the light box works and I can click play to hear the album back in the editor I’ll link the listen button to the light box next I’ll go to my menu and pages select manage pages choose lightbox and under settings duplicate my lightbox two more times I’ll customize the next light box then click listen to link the lightbox in preview mode you can see the light box appears when I click on listen back in the
editor I’ll customize the final lightbox and link it to the last listen button and that’s it I just created a beautiful one-page website with interactive hover effects thanks for watching I hope you had fun and we’ll see you in the next one