Divi Code AI: su asistente de codificación personal en Divi

Buenas noticias para los diseñadores y desarrolladores web: ha llegado una incorporación innovadora al conjunto de herramientas Divi AI . En octubre de 2023, Divi anunció una nueva incorporación a su conjunto de herramientas de inteligencia artificial: Divi Code AI, una herramienta que simplifica el desarrollo web dentro del ecosistema Divi. Divi Code AI posee la capacidad única de escribir código, generar CSS y brindar asistencia invaluable para personalizar los sitios web Divi a través de Visual Builder. Los usuarios ahora pueden beneficiarse de la experiencia de un desarrollador web front-end experimentado, bien versado en las complejidades de cada módulo Divi. Este blog explora cómo Divi Code AI transforma la experiencia de diseño web Divi , prometiendo una mayor eficiencia y un mayor nivel de disfrute.

Personalice el sitio web con codificación AI

Los usuarios pueden detectar fácilmente un nuevo icono de IA situado debajo de los campos de código de Divi. Con solo hacer clic en este ícono, las personas pueden transmitir sus requisitos específicos a Divi AI. Dependiendo del elemento que se personaliza y la naturaleza del campo que se edita, Divi AI adapta rápidamente sus respuestas para adaptarse a la tarea en cuestión.

A modo de ilustración, cuando un usuario desea incorporar texto degradado en un encabezado, una característica de diseño que no está disponible de forma nativa en Divi, simplemente puede solicitar a Divi AI que genere el CSS necesario. En unos momentos, el título se adorna con un impresionante efecto de degradado.

Los usuarios pueden entablar un diálogo continuo con Divi AI para ajustar el resultado. En una demostración en video, el usuario sintió que el gradiente inicial era algo tenue y, en consecuencia, le pidió a Divi AI que lo intensificara. El resultado ahora es el gradiente ideal, logrando la vitalidad deseada.

Crear elementos personalizados

El módulo Código se destaca como la estrella brillante de Divi Code AI, y cuenta con la capacidad de manejar HTML, CSS y JavaScript con facilidad. Los usuarios pueden simplemente solicitar a Divi AI que cree una ventana emergente con un retraso de 30 segundos, invitando a los visitantes a suscribirse a su boletín informativo, con la libertad de describir la apariencia de la ventana emergente. En unos momentos, Divi AI genera el código sin esfuerzo, lo que da como resultado una ventana emergente llamativa y eficaz que capta la atención de los visitantes del sitio web.

Divi AI cuenta con una amplia gama de capacidades cuando se trata de módulos de código. Puede incorporar sin esfuerzo funciones como un efecto de escritura para el título de tu héroe o transformar una sección Divi en una barra lateral flotante conveniente y descartable. Una vez que los usuarios se familiarizan con la interacción con Divi AI, se abre ante ellos un reino de posibilidades interesantes.

Opción CSS de formulario gratuito para todos los módulos

Han implementado una mejora notable en todos los módulos Divi: una función CSS de forma libre que permite a los usuarios diseñar el módulo enfocado y cualquier elemento subyacente utilizando la pseudoclase "selector". Por ejemplo, al editar un módulo de Blurb, puedes aplicar fácilmente una sombra de cuadro y modificar la apariencia de sus elementos IMG y H3 creando reglas CSS como la siguiente:

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

Esta adición resulta invaluable para Divi AI, ya que le otorga la flexibilidad necesaria para satisfacer sus solicitudes y personalizar módulos completos sin esfuerzo.

Personalización de CSS generada por IA

Utilizar Divi Code AI en el nuevo campo CSS de forma libre demuestra ser una experiencia extraordinaria. En el vídeo de demostración a continuación, los usuarios pueden presenciar a Divi AI ejecutando sin esfuerzo una secuencia de personalizaciones. Las instrucciones son claras: transformar la imagen en una forma circular, agregar una sombra de cuadro sutil, superponer la imagen con un degradado semitransparente y aplicar una animación de acercamiento activada por el cursor.

Gracias al profundo conocimiento de Divi AI de las estructuras de los módulos Divi y su dominio de CSS, estas tareas complejas generalmente se abordan con éxito en el intento inicial o se acercan notablemente al resultado deseado.

Código base Divi

Lo que distingue a Divi Code AI es su ajuste fino en el código base del módulo Divi, lo que ofrece una clara ventaja en comparación con otros modelos de lenguaje grandes. Gracias a su familiaridad con las clases de módulos Divi y las salidas HTML, sobresale en comprender solicitudes ambiguas y reconocer términos específicos de Divi dentro de las indicaciones del usuario.

Por ejemplo, en el vídeo que se muestra a continuación, un usuario le indica a Divi Code AI que cree CSS para personalizar la apariencia de los módulos Blurb y Button. Sorprendentemente, Divi Code AI discierne instintivamente la naturaleza de los elementos de Blurb y Button, identificando con precisión las clases relevantes. Esta precisión le permite ofrecer personalizaciones perfectas desde el primer intento.

Codificación conveniente

Divi Code AI ofrece acciones rápidas fáciles de usar para ajustar su código. Con solo un clic, puede optimizar, formatear y mejorar automáticamente la compatibilidad con navegadores más antiguos. Además, tiene la flexibilidad de modificar el código mediante indicaciones, lo que desbloquea infinitas posibilidades creativas.

Biblioteca de fragmentos de código basada en la nube

Si bien Divi AI puede no ser perfecto, permite a los usuarios persistir en su conversación y colaborar con la IA para perfeccionar el resultado deseado. Los usuarios también pueden solicitar un "reintento". Con cada intento, Divi AI genera resultados ligeramente variados y frecuentemente descubre la solución deseada después de algunos intentos.

Incluso para aquellos con conocimientos fundamentales de desarrollo web, Divi AI puede acelerar la personalización del sitio web y lograr resultados específicos que antes solo se podían lograr mediante la participación de un experto.

Terminando

Divi Code AI es más que un simple avance tecnológico; es un punto de inflexión en el mundo del diseño web. Ofrece a los usuarios la posibilidad de aprovechar las capacidades de un desarrollador web front-end capacitado directamente desde Divi Visual Builder .

Ya sea que sea un diseñador web experimentado o un novato en el campo, Divi Code AI abre la puerta a una mayor eficiencia y personalización. Sumérgete y experimenta el futuro del diseño web con Divi Code AI.