Skip to main content

Get Started with Elementor AI

What is Elementor AI?​

Elementor AI is an artificial intelligence tool integrated directly into the Elementor page builder. It helps you create content and code more efficiently by generating text, HTML, CSS, and JavaScript based on your prompts. Instead of writing everything from scratch, you can describe what you need, and Elementor AI will generate it for you.

Key features:

  • Text generation: Create product descriptions, blog content, headlines, and more
  • Content editing: Improve grammar, rewrite in different tones, or translate text
  • Code generation: Generate HTML, CSS, and JavaScript code for custom functionality
  • Direct integration: Works directly within Elementor's visual editor

Elementor AI is designed to save you time while maintaining quality, making it easier to build professional websites without extensive coding knowledge.

Getting started with Elementor AI​

Step 1: Ensure you have Elementor installed​

Before using Elementor AI, make sure that Elementor is installed and activated on your WordPress site. If you haven't installed it yet:

  1. Navigate to Plugins → Add New in your WordPress dashboard.

  2. Search for Elementor.

  3. Click Install Now and then Activate.

Install and activate Elementor Core

Step 2: Enable Elementor AI​

Elementor AI is available within the Elementor editor. To enable it:

  1. Open any page or post using Elementor.

  2. Click on any Text Editor widget.

  3. In the text editing panel, locate the Write with AI button.

  4. If prompted, activate Elementor AI by following the on-screen instructions.

Write text using Elementor AI in text editor

Generate text in Gutenberg using Elementor AI

Step 3: Generate AI-powered content​

Once Elementor AI is enabled, you can start using it to create content effortlessly:

Generating Text Content

  1. Click Write with AI in the text editor.

  2. Enter a prompt, such as "Generate a product description for a fitness tracker."

  3. Elementor AI will provide a text output based on your input.

  4. Click Insert to add the content to your page.

Write text using Elementor AI in text editor

Editing and Refining Content

Elementor AI allows you to refine generated content by providing suggestions. You can:

  • Improve grammar and readability.

  • Rewrite content in a different tone.

  • Translate text into multiple languages.

Step 4: Using AI for code generation​

Elementor AI can also generate HTML, CSS, and JavaScript code. To use this feature:

  1. Open the Custom HTML or CSS editor in an Elementor widget.

  2. Click Code with AI.

  3. Describe the code you need (e.g., "Create a CSS animation for a button hover effect.")

  4. Insert and tweak the generated code as needed.

Add custom CSS using Elementor AI

Step 5: Save and publish your work​

Once you’re satisfied with the content:

  1. Click Update to save changes.

  2. Click Preview to see how it looks on your site.

  3. If everything looks good, click Publish.