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?
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
Introduction to Divi IA: Powerful AI Tools for WordPress Creators
Introduction to Divi Code IA, your personal coding assistant Divi
Divi Layouts IA: The Complete Guide
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
How to Use Divi AI Layouts
Learn how to harness the power of Divi Layouts IA to create professional and visually appealing designs in minutes. <br> This article provides a step-by-step guide on how to use Divi Layouts IA to streamline and improve ...The Divi Code Module
Cómo agregar, configurar y personalizar el módulo de código de Divi. El Módulo de Código de Divi te permite insertar fácilmente código (como HTML, CSS y JavaScript) en cualquier parte de tu sitio web. También puedes usarlo para shortcodes (como ...Getting Started with Divi AI
Divi AI es una función innovadora integrada en el tema Divi que utiliza inteligencia artificial para mejorar tu sitio web. Divi AI es perfecto para propietarios de sitios web, diseñadores y desarrolladores. Esta guía te brindará una comprensión ...How to Use the Divi AI Image Editor
Learn how to use Divi IA Image Editor to easily create and edit stunning images directly within the Divi Builder. <br&gt How to use Divi IA Image Editor This article will guide you step by step to using Divi IA Image Editor ...How to Generate Text with Divi AI
Learn how to use Divi IA text generator, enter your content requirements, and customize the text generated to suit your needs. This article will guide you in using Divi IA to create text for your website. Follow our step-by-step instructions to ...