Divi Code AI - Your Personal Coding Assistant In Divi

Good news for web designer and developers, a groundbreaking addition to the Divi AI toolset has arrived. On October, 2023, Divi announced a new addition to their AI toolkit - Divi Code AI, a tool that simplifies web development within the Divi ecosystem. Divi Code AI possesses the unique ability to write code, generate CSS, and provide invaluable assistance in customizing Divi websites through the Visual Builder. Users can now benefit from the expertise of a seasoned front-end web developer, well-versed in the intricacies of every Divi module. This blog explores how Divi Code AI transforms the Divi web design experience, promising greater efficiency and an enhanced level of enjoyment.

Customize Website With AI Coding

Users can easily spot a fresh AI icon situated beneath Divi's code fields. By simply clicking on this icon, individuals can convey their specific requirements to Divi AI. Depending on the element being customized and the nature of the field being edited, Divi AI promptly tailors its responses to suit the task at hand.

As an illustration, when a user wishes to incorporate gradient text into a heading, a design feature not natively available in Divi, they can simply request Divi AI to generate the necessary CSS. Within moments, the heading is adorned with a stunning gradient effect.

Users can engage in an ongoing dialogue with Divi AI to fine-tune the outcome. In a video demonstration, the user felt that the initial gradient was somewhat subdued, and, accordingly, they asked Divi AI to intensify it. The result now stands as the ideal gradient, achieving the desired vibrancy.

Create Custom Elements

The Code module stands out as Divi Code AI's shining star, boasting the ability to handle HTML, CSS, and JavaScript with ease. Users can simply request Divi AI to craft a 30-second delay popup, inviting visitors to subscribe to their newsletter, with the freedom to describe the popup's appearance. Within moments, Divi AI effortlessly generates the code, resulting in an eye-catching and effective popup that grabs the attention of website visitors.

Divi AI boasts a wide range of capabilities when it comes to code modules. It can effortlessly incorporate features like a typing effect for your hero's heading or transforming a Divi section into a convenient, dismissable floating sidebar. Once users become familiar with interacting with Divi AI, a realm of exciting possibilities unfolds before them.

Free Form CSS Option For All Modules

They have implemented a noteworthy enhancement across all Divi modules—a free-form CSS feature that empowers users to style the module in focus and any underlying elements using the "selector" pseudo-class. For instance, when editing a Blurb module, you can easily apply a box shadow and tweak the appearance of its IMG and H3 elements by crafting CSS rules like the one below:

selector { <span class="webkit-css-property" aria-label="CSS property name: box-shadow">box-shadow</span><span class="styles-name-value-separator">: </span><span class="value" aria-label="CSS property value: 0 10px 20px 0 #000">0 10px 20px 0 #000</span><span class="styles-semicolon">; }</span>
 
selector img { border-radius: 100px; border: 5px solid #000; }
 
selector h3 { margin-top: 20px; }

This addition proves to be invaluable for Divi AI, granting it the flexibility required to meet your requests and customize entire modules effortlessly.

AI-Generated CSS Customization

Utilizing Divi Code AI in the new free-form CSS field proves to be a remarkable experience. In the video demonstration below, users can witness Divi AI effortlessly executing a sequence of customizations. The instructions are clear: transforming the image into a circular shape, adding a subtle box shadow, overlaying the image with a semi-transparent gradient, and applying a hover-triggered zoom-in animation.

Thanks to Divi AI's deep understanding of Divi module structures and its CSS proficiency, these complex tasks are typically tackled successfully on the initial attempt, or they are brought remarkably close to the desired outcome.

Divi Codebase

What sets Divi Code AI apart is its fine-tuning on the Divi module codebase, offering a distinct advantage compared to other large language models. Thanks to its familiarity with Divi module classes and HTML outputs, it excels in comprehending ambiguous requests and recognizing Divi-specific terms within user prompts.

For instance, in the video featured below, a user instructs Divi Code AI to craft CSS for customizing the appearance of Blurb and Button modules. Impressively, Divi Code AI instinctively discerns the nature of Blurb and Button elements, accurately pinpointing the relevant classes. This precision allows it to deliver spot-on customizations with the very first attempt.

Convenient Coding

Divi Code AI offers user-friendly Quick Actions for fine-tuning your code. With just one click, it can automatically optimize, format, and enhance compatibility with older browsers. Additionally, you have the flexibility to modify code using prompts, unlocking endless creative possibilities.

Cloud Based Code Snippet Library

While Divi AI may not be flawless, it allows users to persist in their conversation and collaborate with the AI for refining the desired outcome. Users can also request a "retry." With each attempt, Divi AI generates slightly varied results, frequently discovering the desired solution after a few tries.

Even for those with a fundamental grasp of web development, Divi AI can expedite website customization and attain specific outcomes previously attainable only through the engagement of an expert.

Wrapping Up

Divi Code AI is more than just a technological advancement; it's a game-changer in the world of web design. It offers users the power to harness the capabilities of a skilled front-end web developer right from the Divi Visual Builder.

Whether you're an experienced web designer or a novice in the field, Divi Code AI opens the door to enhanced efficiency and customization. Dive in and experience the future of web design with Divi Code AI.