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
○ FREE Complete Website Creation Guide: https://www.yestotech.com/complete-website-creation-guide
○ Try Wix For FREE: http://bit.ly/wixforfree
○ Wix Affiliate Program Review: https://youtu.be/MRH3uBDv3nU
○ How To Use Wix For Blogging: https://youtu.be/15mm7S7jrbg
○ How To Create A Website In Wix: https://youtu.be/e05AZDbzqQs
○ Wix vs WordPress: https://youtu.be/QrjKXUXwczs
○ Wix vs Squarespace: https://youtu.be/l_ANdlnFE3Y
TOOLS & SERVICES I USE:
○ Graphic design tool (Canva Pro): https://canva.pxf.io/jA4Q5
○ DIY website builder (Wix): http://bit.ly/wixforfree
○ Landing page builder (Leadpages): https://leadpages.pxf.io/7mx9V
○ Email provider (ConvertKit): https://convertkit.com/?lmref=7SUoRg
○ Quiz, poll & giveaway maker (Interact): https://www.tryinteract.com/#oid=59709_4020
○ Web hosting (Hostinger): https://www.hostinger.com/yestotech
○ Paid products platform (Teachable): http://sendmeto.teachable.com/qr9lh
○ Pinterest pin scheduler (Tailwind): https://www.tailwindapp.com/i/yestotech
○ Visual content creator (Visme): https://partner.visme.co/?ref=MarinaLotaif
○ Social media management (Viraltag): https://viraltag.grsm.io/MarinaLotaif914
SHOP MY COURSES:
○ Canva Crash Course: https://bit.ly/yttcanvacrashcourse
○ Fill In The Blanks Website: https://bit.ly/fillintheblankswebsite
○ Jumpstart Your Sales: https://bit.ly/yttjumpstartyoursales
○ Brilliant Branding: https://bit.ly/brilliantbrandingcourse
○ Wonder Website: https://bit.ly/wonderwebsitecourse
○ Traffic Takeoff: https://bit.ly/traffictakeoffcourse
○ Webinar Sales Funnel Template: https://bit.ly/webinarsalesfunneltemplate
○ ConvertKit Tech Training Tutorials: https://bit.ly/convertkittechtraining
○ Power Productivity: https://bit.ly/powerproductivitycourse
SUBSCRIBE FOR MORE VIDEOS: http://bit.ly/youtubeyestotech
MY FAVORITE RESOURCES: https://www.yestotech.com/resources
COME SAY HI!
○ Email: firstname.lastname@example.org
○ Website: https://www.yestotech.com
○ Facebook: https://www.facebook.com/yestotech
○ Pinterest: https://www.pinterest.com/yestotech
○ Instagram: https://www.instagram.com/yestotech
○ Twitter: https://twitter.com/MarinaLotaif
I'm Marina, the brain behind Yes To Tech. Think of me as your fairy godmother of tech, so that you can grow your online business fast without stress or overwhelm. It's my mission to empower you to stand out online - even if you're not tech savvy! New videos go live every Tuesday and Thursday :)
DISCLAIMER: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. I only recommend products that I use and love. Thank you for your support!
WHAT YOU’LL LEARN IN THIS VIDEO:
Wix hover box, how to add a hover box in wix, wix hover boxes, wix hover effect, wix hover menu, wix hover animation, wix hover box link, wix hover box animation, wix hover box mobile, wix hover text, wix hover interactions, wix hover button, wix hover gallery, wix hover tutorial, wix hover box repeater, wix tutorial, wix, hover box, hover boxes, hover, wix hover, wix hoverbox, how to add link to hover box wix, how to add a hover box, wix rollover hoverbox tips, wix rollover