Combine Image Editing With Custom CSS AI Using Elementor

With Elementor’s AI feature, you can effortlessly remove image backgrounds and generate custom CSS animations. This tutorial will walk you through the process of combining image editing with custom CSS AI using Elementor.

Prerequisites

Before we begin, make sure you have the following:

• Elementor (Free or Pro)
• Elementor AI subscription

Step 1: Drag an Image Widget

1. Open your Elementor editor.
2. Drag an Image Widget onto your canvas.

Step 2: Use AI to Remove Image Background

1. Click on the image widget to open its settings.
2. Navigate to the AI Image Editor.
3. Use the editor to remove the image background.

Step 3: Add Custom CSS for Animation

1. Go to the Advanced Tab.
2. Expand Custom CSS.
3. Click the AI icon to activate the AI Editor.
4. Type the animation you’d like to see, for example, “float continuously.”
5. Insert the code provided by the AI Editor.

Step 4: Fine-Tune the Animation

1. Increase the distance of the animation.
2. Decrease the duration to make the movement more noticeable.

Step 5: Add a Dynamic Shadow

1. Drag a Spacer Widget below the image.
2. Set its height to 0 pixels.
3. Go to Advanced Tab and set its width to custom (e.g., 5%).
4. Expand Border and set a 100% border radius.
5. Activate Box Shadow, select the color, maximize the blur, and increase the spread.

Step 6: Animate the Shadow

1. Use the Transform Skew Controls to give the shadow perspective.
2. Go to Custom CSS and activate the AI Editor.
3. Write a new prompt for shadow animation.
4. Match the animation duration with the object.

Elementor CSS AI – Conclusion

Combining Elementor’s AI capabilities with its existing features opens up a world of possibilities for web design. By following these steps, you can create dynamic, AI-powered elements that bring your designs to life.