Make Elementor pages move! Essential Addons animations explained!

utilization Elementor When building a website, if you feel that the pageToo static,Lack of a sense of interaction, then this article is just right for you. By Essential Addons PluginYou can easily add the following to your page elementsInteractive animation(math.) genusEnhanced visual appealIt makes the whole site "live" - and without writing any code!

This article will take you step-by-step through how to use Essential Addons PluginAdd dynamic animation effects to Elementor websites, including ways to apply multiple elements such as text, images, and containers.

What is Essential Addons plugin?

Essential Addons plug-in (software component)leave it (to sb) WPDeveloper Developed by the company, the plugin is a specialized Elementor Page BuilderAn enhanced extension plugin developed to help users create richer, more professional WordPress websites by providing a number of custom elements and advanced features.

Key feature highlights:

Extensive Widget Library
Includes content presentation, marketing, dynamic data, social media integration, form enhancements and many more such as advanced buttons, rotators, infoboxes, price lists, progress bars, dynamic filter grids and more.
Powerful content presentation
It supports displaying blog posts, WooCommerce products, team members, customer testimonials, etc. With animation and filter effects, the page is more vivid.
Third-party integration support
seamless integration Mailchimp,WPFormsThe most popular plug-ins such as Contact Form 7, Ninja Forms, etc. make it easy to create forms and marketing tools quickly.

Essential Addons pluginprocedure

Required plug-in preparation

Before you begin, make sure the following plugins are installed and enabled on your site:

Elementor
Essential Addons for Elementor

Once installed and activated, go to the WordPress backend and head to the Essential Addons > ExtensionsFind Interactive Animations, turn on the function and save the settings.

Adding Animation to Page Elements

Open the page to be edited and click Using Elementor Editors, the following are added for different elementsInteractive animationThe specific methodology of the

1. Image element: adding a floating effect

Select the image element and click on the left panel's high level Tags.
Scroll down to enable Interactive Animations Function.

option Transform EffectsEnable Translate Y(Y-axis movement), modified to "-20".

In the animation settings, select linear easing animated curves, and enable the Yo-Yo (round trip) effectThe

Adjusting the animationspan(duration) vs.procrastinate(delay), and when you're done, click on the bottom left corner of the page to update Button.

Preview the animation effect, the image element will float up and down according to the settings.

2. Image rotation animation

Select another image element and repeat the above steps to enable the animation feature.

exist Transform Effects choose from Rotate(Rotation) is modified to 360.

Set the animation to Linear and Enableyo-yo To and fromThe

adaptspanfor"5"andReduce loop countfor"-1".

Click Update and preview to see the image rotation animation.

3. Text element: left and right sliding effects

Select the text element and again go to high level > Interactive AnimationsThe
start using Transform EffectsAdjustments Translate X(X-axis movement) value is "35".

set upanimation parameterIncludes easing typefor "Linear", Enableyo-yo effectThe

enabling Scroll or Trigger Trigger OptionsIf you want the animation to be triggered, set the animation to be triggered when you scroll to the start element.

Effects

4. Container animation settings

Essential Addons also supports the use of Elementor's Container Blocks Add animation effects:

Select the container element to enable the Interactive AnimationsThe
exist Transform Effects set up in Rotate The rotation animation value is "-5'.

configure Transform Origin(rotating the origin) to achieve the desired change in visual center of gravity by placing the "Transform Origin X "The value of the option "Right", will"Transform Origin YThe value of the " option has been changed to "Bottom".

Turn on Scroll or Trigger and set the scroll start and end positions. Set the "Start Element "The value of the option should be changed to "TOP", replace "Start Controller"The value of the option should be changed to "Center"

After previewing, you can see the container gradually animating as it scrolls, and it even displays start and end point markers for easy adjustment.

summarize

Essential Addons' interactive animation features make Elementor websites more dynamic and interactive, and best of all, there's no need to write any code. Whether it's an image, text, or a container module, you can set it up with a simpleImplementing animation effectsThe visual experience of the web page is greatly enhanced. If you want to know more WordPess related tutorials and information, please pay attention to thePhoton fluctuation networkIt contains the most complete WordPress tutorials with the best ambiance!WordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off