How to Use Divi AI Code

Learn how to use Divi AI Code capabilities to generate clean and efficient snippets of code for various web elements.

Divi AI Codeis 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 to those with little programming experience, while improving the productivity of experienced developers.

One of the aspects that makes Divi AI Code special is that it has been specifically adjusted with the code base of the Divi modules, which gives it an advantage over other large language models. As you know the classes of the Divi modules and the result in HTML, you can better interpret vague requests and recognize Divi terminology within your indications.

This article will guide you in the effective use of Divi AI Code to improve your web development process.

Divi IA - Use Divi AI Code to write complex CSS code

Open the item to which you want to apply a custom CSS code by clicking the gear icon
Go to the Advanced tab → Custom CSS → Free Form CSS
Click the AI icon
Write the indication for AI
Click the Generate Code button

Example of indication: Make the image move like a hand greeting

Divi IA - Use Divi AI Code to write complex HTML code

Note: The HTML code must be added in the Code Module.

Open the Code module settings by clicking the gear icon
Go to the Content tab → Content
Click the AI icon
Write the indication for AI
Click the Generate Code button

Example of indication: Create a large popup that appears with a fading effect after 30 seconds and invite visitors to join my newsletter. Add two buttons: one purple linking to my newsletter page and a gray off that says "No, thank you" and closes the popup.

Where can you use Divi AI Code?

Divi AI code can be used in various code fields within the Divi Builder.

In any Advanced tab of a Divi element → Custom CSS → Free CSS
In any Advanced tab of a Divi Element → Custom CSS → Module Elements
In any module Code → tab Content tab → Text → Code
In page settings → Advanced tab → Custom CSS area

Customize any module using AI-generated CSS

Leveraging Divi AI Code within the new CSS field freely (Advanced Tab → Custom CSS → Free Form CSS) allows you to easily customize any Divi element by adding custom IASS.

Example of indication: Turn the image container into a box shadow circle. Adds a vibrant semi-transparent overlapping in pink and blue tones within the image container, above the element. Zoom in the container using a smooth transition when you hover your cursor.

Rapid coding actions with Divi IA

Divi Code includes Convenient Quick Actions that you can use to refine the code. Allows:

Automatically optimize
Format
Convert color values
Improve compatibility

Steps:

Open any module containing HTML, JavaScript or CSS code
Click the AI icon
Choose any of the options available from the Quick Actions list
Wait for the selected action to be completed and click the Use this code button

Important note: The syntax verifier can mark some CSS rules generated by Divi AI Code as warnings (yellow messages), especially in supplier prefixes that are generated. These warnings can be safely ignored.

Additional resources