Using the Liner(called “Animated icon” in the Selection pack) Elementor widget you can add the animated logo, product presentation, a call to action block, contact us button, or other eye-catching site elements. The Liner plugin can be useful for any type of WordPress site and will help make it more attractive and catchy. Flexible settings for both the entire animation and individual parts of the SVG allow you to get a unique result and display in accordance with the styles of your theme.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
On the Content tab of the Liner widget, you can manage the basic animation settings such as duration, delay, type of interaction with animations, URL link, etc.
Properties settings
Select SVG
Select your SVG image to customize and animate it. You can download it from the available resources or create your own SVG.
Type animation
- Delayed – every path element is drawn at the same time with a small delay at the start..
- Sync – each line is drawn synchronously. They all start and finish at the same time..
- One By One – each path element is drawn one after the other.
Start animation
Specify the condition under which the animation should start.
- In viewport – animate SVG image when it is in the viewport.
- Auto start – start an animation automatically after page load.
- Hover – animate SVG image when hovering on SVG.
- Click – animate SVG image when clicking on SVG.
Animation Timing
Timing animation function for the complete SVG.
- Ease
- Ease in
- Ease out
- Ease out bounce
Path Timing
Timing animation function for each path element of the SVG.
- Ease
- Ease in
- Ease out
- Ease out bounce
Animation delay (ms)
Specify the time between the drawing of first and last path, in frames (only for delayed animations).
Animation duration
Specify the animation duration, in frames using the slider.
Dash Gap
Whitespace extra margin between dashes. Increase it in case of glitches at the initial state of the animation.
Loop
A toggle to enable/disable the animation loop.
Include link
The toggle to enable/disable the link for SVG image.
Style tab
On the Liner widget styles tab, you can manage the general animation style and separate path styles like color, width, offset, etc.
Animation style
- Size – specify the SVG image size in % or px using the slider. Can be specified for different devices.
- Color – specify the color and opacity for all paths of the SVG image using the color picker.
- Line Width – specify the line width for all paths of the SVG image using the slider. Can be specified for different devices.
- Rotate – specify the degree of rotation of the SVG image.
- Offset X – specify the image offset along the X-axis for different devices.
- Offset Y – specify the image offset along the Y-axis for different devices.
- Linecap – defines a shape to be used at the end of open paths
- Box Shadow – creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.
Path styles
- Path number – specify the path number for which the below style settings will be applied.
- Color – specify the color and opacity for all paths of the SVG image using the color picker.
- Line Width – specify the line width for all paths of the SVG image using the slider. Can be specified for different devices.
- Offset X – specify the image offset along the X-axis for different devices.
- Offset Y – specify the image offset along the Y-axis for different devices.
- Rotate – specify the degree of rotation of the SVG image.
Advanced Tab
The settings in the advanced tab of the Liner widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.