Today, we are excited to release Divi Code AI, a new arm of the Divi AI toolset that can write code, generate CSS, and help customize your Divi websites inside the Visual Builder. It’s like always having an expert front-end web developer at your side who knows the ins and outs of every Divi module!
Get Divi AI Today
Customize Your Website With AI-Generated Code
You will notice a new AI icon below Divi’s code fields. Click the icon, tell Divi AI what you want it to do, and depending on the element you are customizing and the type of field you are editing, it will respond appropriately.
For example, if I want to add gradient text to a heading, which Divi doesn’t have a design option for, I can ask Divi AI to write the CSS for me. Within a few seconds, my heading has a beautiful gradient applied.
I can even continue the conversation with Divi AI and refine the result. In the video example below, I thought the original gradient was too subtle, so I asked Divi AI to make it more vibrant. Now it looks perfect!
Create Completely Custom Elements
The Code module is where Divi Code AI shines because it can do anything you want with HTML, CSS, and JavaScript. I can ask Divi AI to create a popup that shows up after 30 seconds and invites users to join my newsletter. I can even describe how the popup should look. Divi AI generates the code within a few seconds, and I have a great-looking popup on my website that will catch my visitor’s attention.
Divi AI can do all kinds of things with a code module. How about adding a typing effect to the heading in my hero or turning a Divi section into a dismissable floating sidebar? Once you get the hang of talking to Divi AI, it opens up a new realm of possibilities.
Introducing The Free Form CSS Option For All Modules
We introduced a free-form CSS option to all Divi modules, allowing you to style the current module and any sub-element using the “selector” pseudo-class. For example, if you want to add a box shadow to the Blurb module you are currently editing, as well as style the IMG and H3 elements within the Blurb, you can write something like this:
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 new option is excellent for Divi AI because it gives it the freedom it needs to fulfill your requests and customize an entire module at once.
Customize Any Module Using AI-Generated CSS
Leveraging Divi Code AI within the new free-form CSS field is fantastic! In the video example below, I ask Divi AI to perform a series of customizations. I ask it to change the image’s shape to a circle, add a box shadow, create a semi-transparent gradient overlay on top of the image, and apply a zoom-in animation on hover.
Since Divi AI knows the structure and classes of every Divi module, and since it’s a CSS expert, it can often accomplish these challenging tasks on the first try or at least get within shooting distance of the right solution.
Divi Code AI Is Fine Tuned On The Divi Codebase
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.
For example, in the video below, I ask Divi Code AI to write some CSS to customize the look of my Blurb and Button modules. It intuitively understands what a Blurb and a Button are and accurately targets the correct classes, nailing my customization request on the first try.
Convenient Coding Quick Actions
Divi Code AI comes with convenient Quick Actions that you can use to refine code. Automatically optimize, format, and improve compatibility with old browsers with a single click.
You can also use Divi AI to alter code using a prompt, opening up unlimited possibilities.
Build Your Code Snippet Library In The Cloud
Divi’s code fields work with Divi Cloud, which means you can save AI-generated code snippets to the cloud to use on any website. It’s a great way to build out a super-useful library of code snippets.
Pair Program With The Help Of AI
Divi AI isn’t perfect, but even when it gets things wrong, you can continue the conversation and pair program with the AI to hone in on your desired result. You can also ask Divi AI to “retry.” Each time it tries again, it will produce a slightly different result, often stumbling upon your desired solution after a few attempts.
Even if you only have a basic understanding of web development, you can leverage Divi AI to customize your website more quickly or achieve specific results that wouldn’t have been possible before without hiring an expert.
More AI Features Are On The Way
We are just getting started with Divi’s AI features. Divi AI can now generate images, write content, and customize your website using custom code. Next, we will combine all these tools to facilitate full layout generation! Be sure to follow and subscribe so you don’t miss my future updates. I always give a detailed look into each new feature, so if you run your websites on Divi, you don’t want to miss these posts!
Get 40% Off Divi AI For One Week Only!
To celebrate the launch of Divi Code AI, we are offering 40% off Divi AI for the next week. Anyone who purchases Divi AI before the sale ends will save $115 per year and lock in those savings for life! Plus, all your team members can use Divi AI at no additional cost. Get the discount here 👇
Keep reading the article at Elegant Themes Blog. The article was originally written by Nick Roach on 2023-10-19 14:46:54.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.