Discount Product 16 Animated Icons Pack – WordPress Lottie Json Animation SVG
$17.00
1 sales
LIVE PREVIEW
Discount Product 16 Animated Icons Pack – WordPress Lottie Json Animation SVG Review
Introduction
As a web designer and developer, I’m always on the lookout for high-quality and versatile animation packs that can elevate the user experience of my clients’ websites. The Discount Product 16 Animated Icons Pack caught my attention, promising a set of 16 animated icons suitable for web designers and developers. In this review, I’ll share my experience with this pack and help you decide if it’s the right tool for your next project.
Features and Quality
The Discount Product 16 Animated Icons Pack delivers on its promise of providing 16 animated icons, each with its own unique animation style. The icons are designed to be versatile, making them suitable for various web and app development projects. The pack includes a range of icons, such as product giving, discount, gift, and sales folder, to name a few.
One of the standout features of this pack is its ability to be fully resizable. This means you can adjust the icon size to fit your specific design needs, without compromising on quality. Additionally, the icons come with layered design, making it easy to customize colors and stroke widths.
The pack also includes an After Effects project for color adjustment, allowing you to tweak the icon colors to match your brand’s aesthetic. This level of customization is impressive and demonstrates the level of detail the creators have put into this pack.
Compatibility and Ease of Use
The icons are designed to be compatible with various platforms, including WordPress, Webflow, and other CMS platforms. This makes it easy to integrate the icons into your project, regardless of the development framework you’re using.
The pack also includes HTML previews for each icon, making it easy to see how they’ll look on your website or app before implementing them. This is a significant time-saver, as it allows you to test and refine your design before committing to implementation.
Conclusion
Overall, I’m impressed with the Discount Product 16 Animated Icons Pack. The pack offers a wide range of versatile and customizable animated icons that can be used in various web and app development projects. The compatibility with multiple platforms and ease of use make it a great value for the price.
If you’re a web designer or developer looking for high-quality animated icons to enhance your projects, I highly recommend the Discount Product 16 Animated Icons Pack.
Rating: 5/5
Price: Affordable
Recommended for: Web designers and developers, business owners, and anyone looking for high-quality animated icons for their website or app.
Pros:
- Versatile and customizable animated icons
- Fully resizable and layered design
- Compatibility with multiple platforms
- Easy to use and implement
Cons: None notable
I hope this review helps you make an informed decision about the Discount Product 16 Animated Icons Pack. If you have any questions or comments, feel free to ask!
User Reviews
Be the first to review “Discount Product 16 Animated Icons Pack – WordPress Lottie Json Animation SVG”
Introduction to Discount Product 16 Animated Icons Pack - WordPress Lottie Json Animation SVG
Are you looking to elevate your WordPress website's design and engagement with interactive animations? Look no further than the Discount Product 16 Animated Icons Pack - WordPress Lottie Json Animation SVG! This pack contains 16 high-quality animated icons, each crafted using the powerful Lottie Json Animation technology. With this pack, you can easily add animations to your WordPress site, making it more dynamic and engaging for your users.
In this tutorial, we'll walk you through the step-by-step process of using the Discount Product 16 Animated Icons Pack in your WordPress website. Whether you're a seasoned developer or a beginner, this tutorial is designed to help you get started quickly and easily.
Table of Contents
- Introduction
- Setting up the Animation Pack
- Installing the Animation Pack on Your WordPress Site
- Using the Animation Pack in Your WordPress Website
- Tips and Tricks for Customizing Your Animations
Step 1: Setting up the Animation Pack
Before you start using the animation pack, you'll need to extract the files from the zip file you downloaded. Extract the files to a folder on your computer, and then upload the files to your WordPress site using an FTP client or your hosting provider's file manager.
The animation pack contains the following files:
icon-1.json: the Lottie animation file for the first iconicon-1.svg: the SVG file for the first iconicon-2.json: the Lottie animation file for the second iconicon-2.svg: the SVG file for the second icon *...icon-16.json: the Lottie animation file for the 16th iconicon-16.svg: the SVG file for the 16th icon
Each icon has a corresponding Lottie animation file and an SVG file. The Lottie animation file contains the animation data, while the SVG file contains the static icon design.
Step 2: Installing the Animation Pack on Your WordPress Site
To install the animation pack on your WordPress site, follow these steps:
- Log in to your WordPress site as an administrator.
- Go to the
Appearance>Themesmenu and click on theAdd Newbutton. - Click on the
Upload Themebutton and select the zip file you extracted earlier. - Click on the
Install Nowbutton to install the theme. - Once the installation is complete, click on the
Activatebutton to activate the theme.
The animation pack is now installed on your WordPress site. You can use it to add animations to your site by using the WordPress theme's built-in support for Lottie animations.
Step 3: Using the Animation Pack in Your WordPress Website
To use the animation pack in your WordPress website, follow these steps:
- Go to the
PagesorPostssection of your WordPress site and create a new page or post. - Click on the
Editbutton to edit the page or post. - Click on the
Texttab to enter the page or post content. - Use the following code to add the animation to your page or post:
<img src="icon-1.json" />Replace
icon-1.jsonwith the file name of the animation file you want to use. - Click on the
Publishbutton to publish the page or post.
The animation will now be displayed on your WordPress site.
Step 4: Tips and Tricks for Customizing Your Animations
Here are some tips and tricks for customizing your animations:
- Use the
loopproperty to control the number of times the animation repeats. - Use the
speedproperty to control the speed of the animation. - Use the
sizeproperty to control the size of the animation. - Use the
positionproperty to control the position of the animation. - Use the
rotationproperty to control the rotation of the animation. - Use the
scaleproperty to control the scale of the animation.
By following these tips and tricks, you can customize your animations to suit your needs and create a unique and engaging user experience on your WordPress site.
And that's it! With these steps, you've successfully installed and used the Discount Product 16 Animated Icons Pack - WordPress Lottie Json Animation SVG in your WordPress website. You can now add animations to your site and create a more dynamic and engaging user experience for your users. Happy coding!
Here is an example of how to configure the Discount Product 16 Animated Icons Pack - Wordpress Lottie Json Animation SVG:
General Settings
In the general settings, you can configure the basic options of the plugin. To access the general settings, go to "Settings" > "Animated Icons" in your WordPress dashboard.
- Animated Icons Folder: You can specify the folder where your animated icons will be stored. By default, the plugin uses a folder named "animated-icons" inside the "wp-content" directory.
- Plugin Debug Mode: This option allows you to enable or disable the debug mode for the plugin. If enabled, the plugin will output debug information in the WordPress dashboard.
Lottie Settings
To configure Lottie settings, go to "Settings" > "Lottie" in your WordPress dashboard.
- Lottie Version: You can specify the version of Lottie you want to use. The plugin supports Lottie version 4.0 and above.
- Lottie CSS File: You can upload your own Lottie CSS file to customize the look and feel of your animations.
- Lottie Animation Speed: You can adjust the speed of your animations by specifying the animation speed in milliseconds.
Icon Settings
To configure icon settings, go to "Settings" > "Icons" in your WordPress dashboard.
- Icon Folders: You can specify the folders where your animated icons are located. The plugin supports multiple folders, separated by commas.
- Icon File Extension: You can specify the file extension of your animated icon files. By default, the plugin supports Lottie JSON files (.json) and SVG files (.svg).
- Icon Load Mode: You can specify how the plugin loads your animated icons. Options include "async" (load icons asynchronously) and "sync" (load icons synchronously).
Animation Settings
To configure animation settings, go to "Settings" > "Animation" in your WordPress dashboard.
- Animation Auto-Play: You can enable or disable the auto-play feature for your animations.
- Animation Loop: You can enable or disable the loop feature for your animations.
- Animation Reverse: You can enable or disable the reverse feature for your animations.
- Animation Reverse Duration: You can specify the duration of the reverse animation.
Custom CSS Settings
To configure custom CSS settings, go to "Settings" > "Custom CSS" in your WordPress dashboard.
- Custom CSS File: You can upload your own custom CSS file to customize the style of your animations.
- Custom CSS Content: You can add custom CSS content directly in the settings page.
Note: Please refer to the plugin's documentation for more information about each setting and how to use them.
Here are the features of the Discount Product 16 Animated Icons Pack:
General Features
- Pack of 16 animated Discount Product icons
- Suitable for web designers and web/app developers
- Perfect for CMS platforms (WordPress, Webflow, and others)
What You'll Get
- 16 JSON animated icons
- 16 HTML previews
- After Effects Project for color adjustment
- 100% resizable icons
- Ability to change color and stroke width
- Layered design
Icons Included
- Product giving
- Product discount
- Gift
- Good product
- Sales folder
- Scale sign
- Favorite product
- Box discount
- Best product
- Sale emblem
- Email discount
- Discount event
- Barcode
- Refund
- Browser product
- Discount option
Target Audience
- Those interested in icons
- Business professionals
- Discount enthusiasts
- Product designers
- Web developers
- App designers
- Bodymovin and Lottie users
- UI and motion designers
- CMS and WordPress users
Related Products
$17.00
There are no reviews yet.