Marina Lotaif
- Jan 21, 2021
- 5 min read

Wix Hover Box: How To Add A Hover Box In Wix

Wondering how to add a hover box in Wix? In this Wix hover box tutorial, I'll be sharing how you can animate your Wix website with a box that changes appearance when you hover over it with your mouse.

By the end of this video, you'll know exactly how to set up Wix hover boxes in your Wix Editor to make your website more engaging and eye-catching. If you're excited about this video, make sure you like this video, hit the subscribe button and the bell to be notified every time I post a new video, and with that said let's jump right in.

First off, if you don't have a Wix account yet, click on the link in the description box below to create one for free. To add a hover box in Wix, in your Wix Editor, click on 'add' from the left-hand side panel, and then on 'hover boxes'.

Wix has a number of hover boxes that you can choose from, so choose one of your liking to edit by dragging and dropping it onto your page. There are a number of things that you can do to customize your Wix hover box.

Under 'change design' or the pen icon, you can switch your Wix hover box design to one of your existing box designs, to a themed box design, or you can discover more hover box options. If you click on the blue 'customize design' button down below, you can edit the fill color and opacity, border, corners, and shadow of your Wix hover box.

Under 'animation', you can choose an animation to your Wix hover box, including bounce-in, glide-in, fade-in, float-in, expand-in, spin-in, fly-in, turn-in, arc-in, puff-in, fold-in, flip-in, reveal, and slide-in. Once you've selected an animation to add to your Wix hover box, you can click on the blue 'customize' button down below to change the animation's power, direction, duration, delay, and select whether you wish to add the Wix hover box animation just to the first time someone lands on your page, or to have the animation run every single time.

Under 'hover interaction added', you can click on the blue 'edit' button next to where it says 'on hover' to access your box's hover mode. Every change you make here applies on hover only, which is when someone places their mouse on top of your Wix hover box.

You can click on any element on your hover box design to add an effect to it, including grow, shrink, skew, rotate and combo. Once you've selected an effect to add to your Wix hover box element, you can click on the blue 'customize' button down below to precisely customize what happens on hover.

You can click on 'design' to edit a particular element's appearance, and you can click on 'timing' to edit that particular element's duration, delay and easing on hover.

If you wish to hide a particular element of your Wix hover box on hover, you can click on 'hide element' from its individual toolbar. If you made a mistake and wish to show that element, click on 'hidden on hover' from the left-hand side panel, and then on the plus sign next to that element.

To add a new element that just appears on hover, click on 'add to hover' from the left-side panel, and select an element to add to your Wix hover box, including text, image, button, box, decorative, gallery, video and music, menu, contact and forms, interactive, lists and grids, social and embed.

To view what your Wix hover box will look like in action, click on 'preview' on the top, right-hand side. When you place your mouse over the hover box, you'll be able to visualize the effect that occurs. Once you're happy with how your Wix hover box looks like, make sure to click on 'publish' on the top, right-hand side to make your changes active.

If you're serious about adding a hover box in Wix, make sure you check out our FREE Complete Website Creation Guide below this video to learn more about how to create your own website step-by-step without stress or overwhelm.

Make sure you comment below and let me know what kind of animation you'll be adding to your Wix hover box. If you liked this video, make sure you give it a thumbs up and subscribe to my channel down below for new videos every Tuesday and Thursday at 9:45am EST, and stay tuned for our next video which is about how to create an online course. As you wait for my next video to go live, check out these two videos I have right here, and I'll see you in my next video.

WIX HOVER BOX: How To Add A Hover Box In Wix. In this Wix hover box tutorial, I'll share how you can animate your Wix website with hover boxes // Click to get your FREE guide: https://www.yestotech.com/complete-website-creation-guide

CLICK TO TWEET: https://ctt.ac/Y05t4

SUBSCRIBE FOR NEW VIDEOS EVERY TUESDAY & THURSDAY: http://bit.ly/youtubeyestotech

RESOURCES MENTIONED:

○ FREE Complete Website Creation Guide: https://www.yestotech.com/complete-website-creation-guide

○ Try Wix For FREE: http://bit.ly/wixforfree

Yes To Tech

Wix Hover Box: How To Add A Hover Box In Wix

Recent Posts