Play Video

Wix Design Tutorials: Creating a Fullscreen Lightbox with Hover Effects

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: https://www.wix.com/website-template/view/html/2151

Wix.com

The Web Is Your Playground

Start Creating: wix.com/designers/playground

hi i’m kevin from the wicks design studio in this tutorial I’ll show you how a design expert uses the Wix editor to create a site based on full screen light boxes and hover effects I’ll also include a subscribe form and a pre-order form this technique is great for any website but especially a product showcase 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 to create the home page I’ll change the background to an uploaded image on my product and add my logo with pin to screen I can set the position to the top left and adjust the horizontal and vertical offsets to accompany the logo I’ll add a text button for the tagline of this product and position it under the logo to create the header text I’ll add a box and a large heading I’ll make it transparent by going to change design
customise design fill color and opacity and reduce to zero I’ll type in my text and attach it to the box now that the text is attached to the box I can pin it to the bottom left side of the screen since my text is pinned to the screen if I ever want to add folds the header text will keep its position as a top overlapping layer for this site I want to create three pages each based on a full screen lightbox I’ll start with a how it works lightbox
which I’ll need to create first so I’ll go to add page link and choose lightbox I’ll pick this one change the background color and delete all the pre-made content then I’ll pin it to the left side of the screen I’ll change the overlay background to an image and set the scaling and position to original size to create the how it works text I’ll customize text and shapes to create the look I want I’ll also add a few animations that we’ll play when
the page opens to add those I’ll click on each item choose animate and pick the style direction duration and delay these are just the elements I’m choosing but you can customize your lightbox any way you want in preview mode you can see how the text floats into view when I duplicate this text it already has built-in animation so all I need to do is customize the text finally I’ll add a large heading customize it and pin it to the screen I can
also customize the X that appears on the top right of the light box so now that’s our first light box I’ll rename it how it works and move on to the next one I’ll add another fullscreen light box but for this one I want to create a product infographic that appears on hover to do this I’ll go to interactive and attach a hover box on top on hover mode I’ll delete all the pre-made content except for one text element that I’ll customize and duplicate
later to make the background transparent I’ll change the background image to white and reduce the opacity to zero for the infographic I’ll customize the text and had an arrow that points to each part of the product by customizing shapes I can show the different colors this product comes in I’ll select all the shapes to make sure they’re aligned in preview mode you can see the infographic appears on hover it looks great already the last
full-screen lightbox will be in about the designer page made in the exact same way as the first lightbox I’ll remove all the pre-made content change the background and pinned a screen on the center right I’ll customize the exit button and had an image overlay behind it just like before I’ll add my text and customize it to match the look of the site I’ll also add a few animations on preview mode you can see the text flowed into view just like the
first lightbox now that I’ve made all three full-screen light boxes I’ll need to connect each one to the menu so they open when triggered so I’ll create three pages and link each one to their accompanying lightbox that way when I had my menu I’ll already have my site pages ready to go as you can see on preview mode when each one is clicked it will lead to its inner lightbox page this technique really does create such an elegant and advanced
looking site for the last part of this tutorial i’ll use a lightbox to create a subscribe form and pre order form that pop-up at a certain time there are a few different lightbox options so for the subscribe form I’ll choose a subscribe lightbox that comes with a default semi-transparent black background and reduce the opacity I’ll go ahead and change the background image of the lightbox and resize it I’ll customize the exit button and pin the
lightbox to the bottom right of the screen I’ll add a bit of text and customize it then I’ll attach a subscribe form when I click on it I can customize the design and layout I’ll reduce the image opacity just a bit and name this lightbox so I can find it later in preview mode you can see it automatically appears when the page loads I’ll want to customize the animation to reveal from the right but I actually don’t want this lightbox to appear as
soon as the page loads I want it to be triggered by a button so I’ll create a text button and link it to the lightbox then I’ll pin it to the right side of the screen and adjust the offsets to match the look of the site I’ll add a plus button on top that will also trigger the SUBSCRIBE form next I’ll create the pre-order form lightbox for this design I’ll make it similar to the about page so to do that I’ll attach an image to the left side of the
lightbox since it’s attached I can crop the image and adjust the size and focus the rest of the box we’ll have some text and a contact form I’ll go ahead and customize the design and layout to animate this light box I want it to reveal from the left side to finish off this light box I’ll need to link it to a pre-order button so I’ll add a box with some pre-order text add a button and Link it to the pre-order light box and I’ll pin it to the
bottom right side of the screen and that completes the layout of this site we’re almost done there are a few more things I want to add the first is an auto counter that shows six amazing features this product has so I’ll add a slide show remove the content and keep one slide I’ll change the background color reduce the opacity to zero and remove the show navigation arrows and slide buttons I’ll attach text to the slide for each feature of the
product since I want to show six features I’ll duplicate this slide five times and customize the text lastly I’ll pin it to the top right-hand side of the screen in preview mode you can see the auto counter working I’ll add a few animated details that show more features of the product first I’ll add a small slideshow that switches between showing a social bar and a follow option I’ll attach a social bar and customize its setting then add follow
text and customize the slide animation settings I’ll pin this to the bottom right side of the screen in preview mode you can see how the slideshow automatically switches between the social bar and follow option creating another dynamic element to the site lastly I’ll add a hover box that displays a benefit of the product on hover I’ll create a transparent background to regular mode and apply this to hover after deleting the pre-made text I’ll
attach an image to both the regular and hover mode by making the image on hover just a little bit larger it will look reactive on hover mode I’ll attach text then pin to screen on the right hand side and that’s it here’s my final website based on light boxes and hover boxes the entire site really feels alive and interactive using light boxes is a great and intuitive way to create a dynamic site I encourage you to check out the editor and play
around with these techniques on your own site thanks for watching I hope you had fun and we’ll see you in the next one