Divi Code AI - 您在 Divi 的个人编码助手

Rifat Divi Tutorials Dec 14, 2023

对于网页设计师和开发人员来说,好消息是Divi AI 工具集的突破性补充已经到来。 2023 年 10 月, Divi宣布推出 AI 工具包新成员 - Divi Code AI,该工具可简化 Divi 生态系统内的 Web 开发。 Divi Code AI 拥有编写代码、生成 CSS 的独特能力,并通过 Visual Builder 为定制 Divi 网站提供宝贵的帮助。用户现在可以受益于经验丰富的前端 Web 开发人员的专业知识,他们精通每个 Divi 模块的复杂性。本博客探讨了 Divi Code AI 如何改变Divi 网页设计体验,承诺更高的效率和更高的享受水平。

使用人工智能编码定制网站

用户可以轻松地在 Divi 的代码字段下方发现一个新的 AI 图标。只需点击这个图标,个人就可以向 Divi AI 传达他们的具体要求。根据正在定制的元素和正在编辑的领域的性质,Divi AI 会迅速调整其响应以适合手头的任务。

举例来说,当用户希望将渐变文本合并到标题中(Divi 本身不提供这种设计功能)时,他们可以简单地请求 Divi AI 生成必要的 CSS。片刻之内,标题就装饰上了令人惊叹的渐变效果。

用户可以与 Divi AI 进行持续对话,以微调结果。在视频演示中,用户感觉初始梯度有些减弱,因此他们要求 Divi AI 加强梯度。现在的结果是理想的渐变,实现了所需的活力。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

创建自定义元素

Code 模块作为 Divi Code AI 的闪亮明星脱颖而出,拥有轻松处理 HTML、CSS 和 JavaScript 的能力。用户只需请求 Divi AI 制作一个 30 秒延迟的弹出窗口,邀请访问者订阅他们的时事通讯,并可以自由描述弹出窗口的外观。片刻之内,Divi AI 即可轻松生成代码,从而产生引人注目且有效的弹出窗口,吸引网站访问者的注意力。

Divi AI 在代码模块方面拥有广泛的功能。它可以轻松地融入一些功能,例如英雄标题的打字效果或将 Divi 部分转换为方便的、可关闭的浮动侧边栏。一旦用户熟悉了与 Divi AI 的交互,一个令人兴奋的可能性领域就会展现在他们面前。

适用于所有模块的自由格式 CSS 选项

他们在所有 Divi 模块中实现了一个值得注意的增强功能——一种自由格式的 CSS 功能,使用户能够使用“选择器”伪类来设置焦点模块和任何底层元素的样式。例如,在编辑 Blurb 模块时,您可以轻松应用框阴影并通过制定如下所示的 CSS 规则来调整其 IMG 和 H3 元素的外观:

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; }

事实证明,这一新增功能对于 Divi AI 来说是无价的,它赋予了它满足您的要求并轻松定制整个模块所需的灵活性。

AI 生成的 CSS 定制

在新的自由格式 CSS 领域使用 Divi Code AI 被证明是一次非凡的体验。在下面的视频演示中,用户可以见证 Divi AI 轻松执行一系列自定义操作。说明很明确:将图像转换为圆形,添加微妙的框阴影,用半透明渐变覆盖图像,并应用悬停触发的放大动画。

由于 Divi AI 对 Divi 模块结构的深刻理解及其对 CSS 的熟练程度,这些复杂的任务通常在初次尝试时就能成功解决,或者非常接近期望的结果。

Divi 代码库

Divi Code AI 的独特之处在于它对 Divi 模块代码库进行了微调,与其他大型语言模型相比具有明显的优势。由于它熟悉 Divi 模块类和 HTML 输出,因此它擅长理解不明确的请求并识别用户提示中特定于 Divi 的术语。

例如,在下面的视频中,用户指示 Divi Code AI 制作 CSS 以自定义 Blurb 和 Button 模块的外观。令人印象深刻的是,Divi Code AI 能够本能地识别 Blurb 和 Button 元素的性质,准确地找到相关的类。这种精度使其能够在第一次尝试时提供准确的定制。

便捷的编码

Divi Code AI提供用户友好的快速操作来微调您的代码。只需一键点击,即可自动优化、格式化、增强与旧版浏览器的兼容性。此外,您还可以使用提示灵活地修改代码,释放无限的创意可能性。

基于云的代码片段库

虽然 Divi AI 可能并非完美无缺,但它允许用户坚持对话并与 AI 协作以完善所需的结果。用户还可以请求“重试”。每次尝试,Divi AI 都会生成略有不同的结果,经常在几次尝试后发现所需的解决方案。

即使对于那些对网络开发有基本了解的人来说,Divi AI 也可以加快网站定制速度,并实现以前只有通过专家参与才能实现的特定成果。

包起来

Divi Code AI不仅仅是一项技术进步;它是网页设计领域的游戏规则改变者。它使用户能够直接从Divi Visual Builder中利用熟练的前端 Web 开发人员的能力。

无论您是经验丰富的网页设计师还是该领域的新手,Divi Code AI 都为提高效率和定制化打开了大门。使用 Divi Code AI 深入了解并体验网页设计的未来。

Divi WordPress Theme