How to add a hoverbox | Wix tutorial
Tutorial Hosting
What’s Up Guys!
This is Spencer from Pixel & Bracket, and in this video, we’re going to be looking at how to add hover boxes on your Wix website. I’m currently previewing the site, and we actually have a hover box on here right now. In fact, it’s the sale that 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. Then, when I’m off of it or hover off of it, it goes back to that initial animation.
Adding a Hover Box
Now, this can be all sorts of interactivity. 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, let’s head on back over to the editor and we’re actually going to add this hover box here. So, I’m just going to delete that out and we’re going to re-add it by going over to the plus icon, which is the add tool, and in here, we’re going to find a list of items under interactive. It starts with full-width slideshows, but if we scroll down, we’re going to start to see hover boxes here towards the bottom. The one that I added is this sale hover box right here.
Customizing the Hover Box
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. 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 once you hover over it with your mouse, this is what you’re going to see.
Editing Elements
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.
Background and Design Options
Let’s go back to the regular view. The 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, it gives us an option to change the hover box background.
Adding Elements
Now, first off, we have settings in here, whether it’s an 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.
Design Options
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 it. 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’s 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.
Animating Elements
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 going to find a shape here and we’re just going to add like a star element. So, I’m going to 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 going to 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.
Applying Changes
If I click on this shape here and I hit apply to hover, I can apply this element to my hover view as well. Notice how it now says applied. 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. Now, you can see applied over here in the regular view, and now we have that peach star on both.
Customizing Animations
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.
Conclusion
I hope you guys enjoyed this tutorial and learned a thing or two about adding hover boxes to your website. Thanks for watching, and subscribe for more tips and tutorials. I’ll see you next time!
