Divi Lottie Animation

Divi Lottie Animation module for Divi Builder allows you to easily embed and display Lottie animations on your website. Lottie animations are lightweight, scalable, and can add dynamic visual elements to your site without significantly impacting load times. This module gives you control over how the animations play and appear, making it an excellent choice for adding interactive and engaging content to your pages.

JSON in WordPress

To upload JSON files in WordPress, you’ll need to allow the application/json MIME type since it’s not supported by default. Here are two methods to enable JSON uploads: using a plugin or by adding code to your theme’s functions.php file.

Using a Plugin

1. Recommended JSON plugins WP Add Mime Types.
2. This plugin allows you to add additional MIME types.
3. Go to your WordPress dashboard.
4. Navigate to Plugins > Add New.
5. Search for “WP Add Mime Types”.
6. Install and activate the plugin.
7. Go to Settings > Mime Type Settings.
8. Add the following to the “Add Values” field: json=application/json.
9. Save the changes.

Security and Safety

1. Restrict File Upload Permissions – Only allow users with specific roles (e.g., administrators) to upload JSON files.
2. Validate File Content – Ensure that the uploaded JSON file is properly formatted and does not contain any malicious code or unexpected data.
3. Use a File Type Restriction Plugin – Employ plugins like “File Upload Types” to restrict uploads to specific file types, such as JSON.
4. Scan Uploaded Files – Implement security plugins like Wordfence or Sucuri to scan uploaded files for malware or vulnerabilities.
5. Limit File Size – Set a maximum file size for JSON uploads to prevent large, potentially harmful files from being uploaded.
6. Sanitize Input – Use WordPress functions like wp_check_filetype_and_ext() to verify the file type and ensure it matches the expected MIME type.
7. Secure Upload Directory – Store uploaded JSON files in a secure directory with appropriate file permissions to prevent unauthorized access.
8. Monitor File Upload Activity – Regularly review logs and monitor activities related to file uploads to detect any suspicious behavior.
9. Regular Backups – Maintain regular backups of your WordPress site to ensure quick recovery in case of any issues related to file uploads.
10. Keep WordPress Updated – Ensure that WordPress core, themes, and plugins are always up to date to minimize vulnerabilities that could be exploited via file uploads.

Content

This is the Content tab of the Lottie Module.

Lottie

1. Source – The Source option allows you to specify where the Lottie animation file is coming from. This could be an uploaded JSON file or a URL link to an external animation source.
2. Upload JSON File – This setting enables you to upload a Lottie JSON file directly to the module. The JSON file contains the data for the animation, and uploading it allows you to display the animation on your site.
3. Caption – The Caption option lets you add a text description or label to accompany the Lottie animation. This text can provide context or additional information about the animation, enhancing user understanding and engagement.

Settings

1. Trigger – The Trigger setting determines when the animation starts playing. Options might include autoplay, play on hover, or play when the animation comes into view, allowing you to control how and when the animation is activated.
2. Loop – The Loop setting controls whether the animation repeats continuously or plays only once. Enabling loop ensures the animation keeps running in a continuous loop, while disabling it will make the animation play just a single time.
3. Play Speed (X) – This option allows you to adjust the speed at which the animation plays. You can speed up or slow down the animation by changing the play speed factor, providing control over the animation’s tempo and flow.
4. Renderer – The Renderer option lets you choose between different rendering methods for the animation, such as SVG or Canvas. Each renderer affects how the animation is displayed and can impact performance and visual quality.

Design

Lottie

The Lottie toggle in the Design tab allows you to style the Lottie animation itself. You can adjust the size, positioning, and alignment of the animation to ensure it integrates seamlessly with your page layout and design. This ensures that the animation appears in the desired location and fits well within the overall aesthetic of the site.

Caption

The Caption toggle lets you style the text that appears alongside or below the Lottie animation. You can customize the font, size, color, and alignment of the caption text, ensuring it complements the animation and provides clear, engaging information to the users.

Text

The Text toggle provides options to style any additional text related to the Lottie animation, such as labels or descriptions. You can adjust the typography, spacing, and color to ensure the text is readable and visually consistent with the rest of the design elements on your page.