October 25, 2023

How to Use the Elementor CSS AI Code Generator

Play Video

Elementor CSS AI Code Generator is a feature available in Elementor Pro that allows you to integrate AI capabilities into your web development process. This tool enables you to add custom CSS to various elements on your website, ensuring it looks just the way you want it to. In this tutorial, we’ll explore how to use this feature effectively.


Please make sure you have the following installed and activated:

Understanding CSS Selectors

Think of CSS selectors as name tags you put on different parts of your webpage. These name tags help you tell the computer exactly which part you want to change or style. For example, if you have a title on your page and you want to make the text bigger, you would use a CSS selector to say, “Hey computer, find the title with this name tag and make the text bigger.”

Here are some common types of selectors:

  • Element Selector: Targets a basic HTML element like a paragraph (<p>) or a heading (<h1>).
    • Example: If you use p, it will target all paragraphs on the page.
  • Class Selector: Targets elements that have a specific class attribute. Classes start with a dot (.) in CSS.
    • Example: .my-text would target any element that has class="my-text" in its HTML code.
  • ID Selector: Targets a unique element that has a specific ID attribute. IDs start with a hash (#) in CSS.
    • Example: #my-title would target the element with id="my-title" in its HTML code.

By using these selectors, you can pinpoint exactly what you want to style on your webpage.

Accessing the Custom CSS Box

  1. Navigate to the Elementor editor and click on any section or element.
  2. Go to the Advanced Tab.
  3. Here, you’ll find a Custom CSS box where you can type your CSS rules.

Accessing the Custom CSS Box

Tip: If you type in the word “selector,” the CSS will only be applied to the current element you’re working on.

Using Elementor’s AI for CSS

  1. Click on Edit with AI within the Custom CSS box.
  2. Type your requirements, like “change the color to green.”
    Change the color to green
  3. Click on Generate Code and insert it into the Custom CSS field.
    Insert it into the Custom CSS field

The AI will generate the CSS code for you, but it’s advisable to review it as the code may sometimes be inaccurate.

Note: If the AI-generated CSS doesn’t take effect, it might be because another rule is overriding it. In such cases, you may need to use the !important tag cautiously.

Real-Life Example: Adding a 3D Shadow

  1. Navigate to the Custom CSS box.
  2. Click on Edit with AI.
  3. Type “add a 3D shadow to the text.”
  4. Click on Generate Code and then Insert.
    Add a 3D shadow to the text

This will add a 3D shadow to your text, which you can style to your liking.

Elementor CSS AI Code Generator – Conclusion

The Elementor CSS AI Code Generator is a handy tool for those who want to add a layer of customization to their website. While it’s not a replacement for understanding CSS, it can certainly speed up the development process. However, it’s crucial to use this feature wisely to maintain a clean and organized codebase.

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.
How to Use the Elementor CSS AI Code Generator
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.