Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

what's up guys this is Spencer from pixel & bracket in this video we're gonna be looking at how to add hover boxes on your Wix website so right now I'm previewing the site and we actually have a hover box on here right now in fact it's the sale that you see in front of the little header there if I hover over it it changes and has a little animation and now we have a link that we can click on and then when I'm off of it or hover off of it it goes back to that initial animation now this can be all sorts of interactivity here you don't have to have animation you can't have animation you could even have video there's all sorts of elements I'm going to show you how to add and tweak and customize some of the elements and add a hover box to your website so we'll head on back over to the editor and we're actually going to add this hover box here so let's I'm just going to delete that out and we're gonna re add it by going over to the plus icon that's the add tool and in here we're gonna find a list of items under interactive and it starts with full width slideshows but if we scroll down we're gonna start to see hover boxes here towards the bottom and the one that I added is this sale hover box right here so if we click and drag this onto our page we can sort of find the center of our page right here and attach that now we can scale this to the side just by clicking on one of these corners and dragging it out and our items are going to scale with it or background to image same thing with this side I'm going to click and drag it out so now we're centered up we have two different views of our hover box number one is the regular view and that's the view that shows without you hovering on it the second view here is the hover view and so once you hover over it with your mouse this is what you're going to see now once we rescaled our box our 50% off and by now change positions so to edit the elements inside of here all you have to do is click on them and you can edit them like any other element on your page so I can click and just simply move this back over so that it's centered up same thing with the by now click and move him back over until he's in the center so let's go back to the regular view first thing we're going to talk about is some of the elements and options of your hover box so if we just click on the hover box not an element inside of it we can change the background edit the design apply to hover which will explain that here in a little bit and then also you have the help section if we click on change background that gives us an option to change the hover box background now first off we have settings in here whether it's image open image app asset II and then the color behind the image if you can see through it we can also just make the background a color an image or even a video piece and then Wix has some default sort of themed images and backgrounds for you to choose from here but you can always upload your own image or video by clicking through these buttons I'm going to leave the background as is I kind of like this eye catching sort of animation that's going on now the next up we have design and if we click on that we can actually adjust the border of our hover box we can adjust the corners and we can also adjust the shadow by enabling or disabling and once you enable it you're going to have some other options here to choose from to edit that shadow now the apply to hover means any changes I make to the regular view don't necessarily affect the hover view but if I want to apply all these changes like the background and the text that in the elements that I have in this view and I want to duplicate them over to the hover view all I would have to do is click the apply to hover button the same thing applies for individual elements so let's say we add one to add something to this hover box and we go over to the Add button and maybe we find something like a piece of vector art now we're gonna find a shape here and we're just gonna add like a star element so I'm gonna click and drag this into my hover box area and notice the little blue attach to hover box right here so we know it's going into the hover box and we're gonna let go now we have a star in here there is no star on the hover version but there is a star on the regular version so that's where the apply to hover comes into play if I click on this shape here and I hit applied to hover I can apply this element to my hover view as well notice how it now says applied and if I go over to the hover view I have that star over here if I were to happen to change the design of this star and maybe I changed the color to something different like this peach color I changed it in the hover view but it hasn't changed in the regular view so if you want to bring that color change or whatever change you've made over to that other view that's when you click apply to regular and now you can see applied over here in the in the regular view and now we have that peach star on both so that's how we can add elements and then apply them to each respective view whether it's regular or hover if you want element to be in both I'm gonna delete this out in the hover view which we deleted from the regular so obviously it didn't delete from the hover so we'll delete it from there as well in the hover view we obviously have some different elements than the regular view we have a 50% off and a by now these are just text elements put in here we actually have ways to animate this text so when you hover over this hover box you're going to be able to view that animation so if we click on this 50% off we can actually choose the animation that happens when we hover over everything so I'm gonna choose potentially expand in or I like puffin instead once I click on that I can actually customize that animation if I click the customize button we can play it and see what it is we can adjust the duration and sort of preview that again and that obviously takes away too long to come in so I think maybe something around a half second or so would work and you can also add a delay to that if you wanted to so we're going to back out of that that's how you can customize the animation if I don't want maybe I just want a solid color background on the hover but I want this sort of eye catching moving background on regular I could go back over to this hover and change that background to maybe a color like a solid color like this blue instead of having that animation and now I have the animation on the regular version and no animation on the hover version so you really see that you're hovering over that element the other thing we can do here is inside of edit text we can adjust where it's linked so if you want this to actually be a button you can adjust the link here and go in and select which page it takes you to so if you had an actual sale on an item for instance you could take them to that specific page or you can have it do a bunch of other options here whether it's send an email send them to a spot on your page with an anchor or maybe even a different web address it's all up to you you can sort of customize that to be to your liking now let's go ahead and preview what our changes are so I'm going to hit the preview button up here and we see we have the sale and as we hover over the top of this we've got that 50% off this sort of zooms in there and it goes to a solid background color if we uncover or take our cursor off our animation goes back to that regular state so we have the regular state here and the hover state here that is everything you need to know about hover boxes if you have any questions or comments or a creative use for them let me know in the comments down below I hope you guys enjoyed this tutorial and learned a thing or two about adding hover boxes to your website thanks for watching subscribe for more tips and tutorials and I'll see you next time .

Video Discription

In this Wix tutorial, learn how to add hover boxes to your website!

Free Illustrator Course:
Free Photoshop Course:

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Channel Sponsors:

RFclipart:
Use the promo-code PIXELBRACKET to get a 10% discount. Discount is valid until December 31, 2019.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Intro Music:
"5 Min Call" by LAKEY INSPIRED

Outro Music:
"ballet" by Ryan Little

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Subscribe:

Follow Pixel & Bracket:

E-Mail:
pixelandbracket@gmail.com

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Related Channels & Videos

Dansky:

Made by Mighty:

The Futur:

Tutvid:

Mobox:

Yes I'm a Designer:

TipTut:

Draw with Jazza:

Will Paterson:

Zimri Mayfield:

The Drawfee Channel:

Flowtuts:

Blue Lightning TV Photoshop:

Phlearn:

Photoshop Tutorials:

 

Leave a Reply