Editor X Hover Interactions (2022) | Wix Fix

Hey there, design enthusiasts! Welcome back to another exciting blog post from the Live Learning Editor X community. If you haven't heard of us already, we're a fun and collaborative group of no-code designers who participate in monthly design challenges, learn from one another, and get mentored on growing our design businesses and careers. So, if that sounds like your cup of tea, feel free to join our growing community!

Today, we're diving into the fascinating world of hover interactions in Editor X! Recently, Editor X has released some updates on hover interactions, and we thought it would be the perfect opportunity to explore the possibilities and provide you with some inspiration for your projects.

In this blog post, we'll show you how to create an engaging hover effect for a menu design and then explore a couple more ideas to spark your creativity. Let's get started!

Creating a Cool Hover Interaction for a Menu

For our first example, we'll create a custom hover interaction for a menu on our website. To do this, we'll need to design a vertical menu in Editor X's Lightbox environment.

1. Open your website's menu lightbox, and if there's an existing vertical menu, go ahead and delete it.

2. Next, drag out a 'Container' element onto the canvas. Containers are essential for creating hover interactions, as you can't add a hover effect to a lone button. The container will give us the structure we need to build out our interaction.

3. Set the container's background to be transparent.

4. Inside the container, add a 'Button' element, and set its width to 100% of the container.

Now that our simple menu structure is set up, let's create a hover effect!

5. Select the container and navigate to the Interactions panel. Click on the plus (+) icon, select 'Hover,' and then click 'Add Interaction.'

6. Now we can customize our hover interaction by choosing different animations for the 'Appear' and 'Disappear' actions.

7. For our example, let's make the button text change color when it's hovered. To do this, set the 'Appear' action to 'Color Change,' choose a new color for the button text, and set a duration for the animation to take place.

8. Repeat the same process for the 'Disappear' action but revert the button text color back to its original state.

And there you have it! A custom hover interaction that changes the button's text color on hover. Now go ahead and replicate this process for the rest of your menu items!

More Hover Interaction Ideas

There are endless ways to create hover effects in Editor X, so we thought we'd provide a couple more examples to inspire your designs.

Idea #1: Image Zoom on Hover

Instead of simply changing an image's opacity or scale, why not combine both effects for a more engaging hover effect? Here's how to do it:

1. Add a container and put an image element inside.

2. Set up hover interactions as previously explained, but this time, choose 'Scale' for the 'Appear' action and set the scale to 1.1x (or your preferred magnification).

3. Add a second 'Appear' action, and choose 'Opacity' with a reduced opacity value.

4. For the 'Disappear' actions, set the scale back to its original size and restore the opacity to its default value.

Voila! You've created an image zoom effect that also plays with opacity on hover!

Idea #2: Shape Morphing on Hover

For this idea, we'll create a shape that morphs into another form when the user hovers over it.

1. Add a container and put a shape element inside (e.g., a rectangle).

2. Set up a hover interaction, but this time, choose 'Morph' for the 'Appear' action, and select the new shape you want to morph into (e.g., a circle).

3. Choose a duration for the morphing effect and click 'Done.'

4. For the 'Disappear' action, choose 'Morph' again and set it back to the original shape.

Now you have a unique morphing shape effect on hover!

Wrapping Up

With these ideas and examples, you now have the knowledge and inspiration to create your custom hover interactions in Editor X! The possibilities are endless, so don't be afraid to experiment and discover new exciting ways to create hover effects.

Remember, if you're looking for a supportive community of designers, join us at the Editor X TV Community Discord where you can participate in monthly no-code design challenges, learn from peers, and get mentored on building your design businesses and careers.

Until next time, happy designing!