Divi Code AI is an innovative feature that leverages artificial intelligence to help you write, edit, and optimize code within the Divi Builder. This powerful tool simplifies the coding process, making it accessible even for those with limited coding experience while enhancing productivity for seasoned developers.
One of the things that makes Divi Code AI special is that it has been fine-tuned on the Divi module codebase, giving it an advantage over other large language models. Since it knows Divi module classes and HTML output, it can better interpret vague requests and recognize Divi terminology within your prompts.
This article will guide you through effective use of Divi Code AI to enhance your website development process.
Use the Divi Code AI to write complex CSS Code
Open the element for which you want to apply a custom CSS code by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Click on the AI icon
Write the prompt for the AI
Click on the Generate Code button
Prompt example: Make the image wave like a waving hand
Use the Divi Code AI to write complex HTML Code
Note: HTML code should be added to the Code Module.
Open the Code module's settings by clicking on the Gear icon
Go to the Content Tab → Content
Click on the AI icon
Write the prompt for the AI
Click on the Generate Code button
Prompt example: Create a large popup that fades in after 30 seconds and invites visitors to join my newsletter. Add two buttons: one purple button that links to my newsletter page and one dull gray button that says "No Thanks" and closes the popup.
Where can you use Divi Code AI?
Divi Code AI can be used in various code fields within the Divi Builder.
In any Divi Element's Advanced Tab → Custom CSS → Free Form CSS
In any Divi Element's Advanced Tab → Custom CSS → Module Elements
In any Code Module's → Content Tab → Text → Code
In the Page Settings → Advanced Tab → Custom CSS area
Customize Any Module Using AI-Generated CSS
Leveraging Divi Code AI within the new free-form CSS field (Advanced Tab → Custom CSS → Free Form CSS) allows you to easily customize any Divi element by adding customized CSS using the Divi Code AI.
Prompt example: Turn the image wrapper into a circle with a box shadow. Add a semi-transparent vibrant pink and blue gradient overlay inside the image wrapper above the element. Make the image zoom in within the wrapper using a smooth transition on hover.
Divi AI Coding Quick Actions
Divi Code AI comes with convenient Quick Actions that you can use to refine code. It allows you to:
Automatically optimize
Format
Convert Color values
Improve compatibility
Open any module that contains HTML, JavaScript, or CSS code
Click on the AI icon
Choose any of the available options under the Quick Action list
Wait for the chosen action to complete and click on Use This Code button
Important Note: The syntax checker might flag some of the CSS rules that Divi AI Code generates as warnings (yellow warning messages), especially on vendor prefixes that are being generated. Those warnings can be safely ignored.
