October 17, 2023

All Places You Can Use the Elementor AI Generator Features

Play Video

The Elementor AI generator is not just a feature, it’s a suite of capabilities designed to streamline your web design process. From text generation to custom code, this AI-powered tool is here to make your life easier. In this tutorial, we’ll explore all the places where you can utilize Elementor’s AI functionalities.


Please make sure you have the following installed and activated:

Text Generation with Elementor AI

Elementor AI allows you to generate text within the Elementor editor. This feature is available for both free and pro users.

Example: Creating an AI-Generated Heading

  1. Navigate to the Elementor editor and drag a ‘Heading’ widget into your layout.
  2. Click on the “Write with AI” icon in the widget settings.
  3. Type the prompt “Introduce a blog post about pet care” and click “Generate.”

Tip: To get the best results, provide a detailed prompt to the AI.

Custom CSS with Elementor AI

Elementor AI can assist you in writing custom CSS. This feature is only available for Elementor Pro users.

Example: Changing Text Color with AI-Generated CSS

  1. Navigate to any text widget in your layout and go to the “Advanced” tab.
  2. Scroll down to “Custom CSS” and click on the AI icon.
  3. Type “Make the text red” and click “Generate Code.”
  4. Apply the generated CSS.

Note: Elementor does not provide support for custom CSS. Make sure you know what you’re doing before applying the changes.

Image Generation with Elementor AI

Elementor AI can also help you generate images. This feature is particularly useful for creating custom visuals for your website.

Example: Creating a Custom Background Image

  1. Navigate to the Elementor editor and select an ‘Image’ widget.
  2. Click on the “Create with AI” button.
  3. Type “Generate a sunset background” and click “Generate.”

Tip: Elementor AI offers features like image variations, generative fill, and background tools to enhance your visuals.

Custom Code Outside the Editor

Elementor AI extends its functionality to custom code and templates outside the editor.

Example: Adding a Google Analytics Tracking Code

  1. Go to your WordPress dashboard and navigate to Elementor > Custom Code.
  2. Click “Add New Custom Code” and name it “Google Analytics.”
  3. Click on the “Write Code” button and type “Insert Google Analytics tracking code.”
  4. Generate the code and apply it to your website.

Note: Make sure to specify where you want the custom code to appear on your website.

Elementor AI Generator Locations – Conclusion

Elementor AI is a versatile suite of features designed to simplify and accelerate your web design process. From text and images to custom code, Elementor AI has got you covered. So, why wait? Start leveraging the power of AI in your Elementor projects today!

Required Resources

Elementor Logo
Free Options
Credit to WPLearningLab
WPLearningLab is a YouTube channel dedicated to providing comprehensive WordPress tutorials and resources for users of all skill levels. With a focus on simplifying complex concepts, the channel offers valuable insights on themes, plugins, and site optimization, as well as troubleshooting tips and best practices for creating and maintaining a successful WordPress website.
All Places You Can Use the Elementor AI Generator Features
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.