Hey everyone, I'm Marina from Yes to Tech, and welcome back to my channel.
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 your mouse over it.
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,
‘box’, 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.