How to Create a Sliding Door Effect With Mouse Track in Elementor

Check Out More At: Elementor

Software: Elementor | Affiliate Program

How to Create a Sliding Door Effect With Mouse Track in Elementor

How to Create a Sliding Door Effect With Mouse Track in Elementor

Creating a sliding door effect with Mouse Track in Elementor is an easy way to add an interactive element to your website.

With this feature, you can create the illusion of a door opening or closing when the user mouses over the element.

To do this, start by creating a new section and adding two column structures within it – one for the ‘closed’ door, and one for the ‘open’ door. Next, you’ll need to add a Mouse Track element within each column structure.

For the closed door, you will want to set the Bootstrap Breakpoint parameter to ‘xs’ and enter a size of 0% for both the x-axis and y-axis.

For the open door, you will want to set the Bootstrap Breakpoint parameter to ‘xs’ and enter a size of 100% for both the x-axis and y-axis.

Then, head over to the Advanced tab and add an On Hover action under Mouse Track Actions. Choose Enter Transition as your Animation Type and select a duration for the door to open.

For example, you can set it to 0.5s so that it only takes half a second to open the door.

Finally, click on ‘Save Changes’ and preview your work. You should now have an interactive element that opens and closes when the user mouses over it. Enjoy your new interactive object! 🙂

If you have any further questions or need help setting up the door animation, please feel free to contact us at thenomadbrad.com and we’ll be happy to assist you.

Elementor is a powerful WordPress page builder that allows you to create custom designs for your website without having to write any code. One of the great things about Elementor is that you can create a variety of unique effects for your pages, including a sliding door effect.

The sliding door effect is a great way to add some interactivity to your pages and make them more engaging for your visitors. In this tutorial, we’ll show you how to create a sliding door effect with mouse track in Elementor.

To create a sliding door effect with mouse track in Elementor, you’ll need to use the Mouse Track plugin. This plugin is available for free from the WordPress plugin repository.

Once you’ve installed and activated the plugin, you’ll need to create a new page in Elementor. For this tutorial, we’ll be creating a simple landing page with two sections.

In the first section, we’ll add a heading and some text. In the second section, we’ll add an image.

Once you’ve added your content, you’ll need to add the Mouse Track widget to the page. To do this, click on the AddWidget button and search for Mouse Track.

Once you’ve found the widget, click on it to add it to your page.

Now that the widget has been added to your page, you’ll need to configure it. In thewidget settings, you’ll need to select theTrigger option. This will cause the door to open when the visitor’s mouse enters the widget area.

Next, you’ll need to select the Open Direction. You can choose to open the door to the left, right, top, or bottom.

Finally, you’ll need to select the Content Position. This will determine where the content will be located when the door is open. You can choose to have the content above, below, to the left, or to the right of the door.

Once you’ve configured the widget, you’ll need to add your content. In the Content area, you can add any text or HTML that you want.

Once you’re finished, click on the Save button to save your changes.

Now that you’ve created your sliding door effect, you can preview it by clicking on thePreview button.

And that’s how you can create a sliding door effect with mouse track in Elementor.