Divi Code AI Quick Tool 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 Quick Tool 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 Quick Tool to write complex CSS Code
Open the element for which you want to apply custom CSS code by clicking on the Gear icon or by clicking on the Image module itself.
Go to the 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: apply a pulsating effect to this image
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 or by clicking on the Image module itself.
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 → Content Tab → Text → Code.
In the Page Settings → Advanced Tab → Custom CSS area.
Customize Any Module Using AI-Generated CSS Quick Tool
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 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 the 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.