Bonne nouvelle pour les concepteurs et développeurs Web, un ajout révolutionnaire à l’ ensemble d’outils Divi AI est arrivé. En octobre 2023, Divi a annoncé un nouvel ajout à sa boîte à outils d'IA : Divi Code AI, un outil qui simplifie le développement Web au sein de l'écosystème Divi. Divi Code AI possède la capacité unique d'écrire du code, de générer du CSS et de fournir une aide précieuse dans la personnalisation des sites Web Divi via Visual Builder. Les utilisateurs peuvent désormais bénéficier de l’expertise d’un développeur web front-end chevronné, connaissant bien les subtilités de chaque module Divi. Ce blog explore comment Divi Code AI transforme l'expérience de conception Web Divi , promettant une plus grande efficacité et un niveau de plaisir amélioré.
Personnalisez le site Web avec le codage AI
Les utilisateurs peuvent facilement repérer une nouvelle icône d'IA située sous les champs de code de Divi. En cliquant simplement sur cette icône, les particuliers peuvent faire part de leurs besoins spécifiques à Divi AI. En fonction de l'élément à personnaliser et de la nature du champ à modifier, Divi AI adapte rapidement ses réponses à la tâche à accomplir.
A titre d’illustration, lorsqu’un utilisateur souhaite intégrer du texte dégradé dans un titre, une fonctionnalité de design non disponible nativement dans Divi, il peut simplement demander à Divi AI de générer le CSS nécessaire. En quelques instants, le titre se pare d’un superbe effet de dégradé.
Les utilisateurs peuvent engager un dialogue continu avec Divi AI pour affiner le résultat. Dans une démonstration vidéo, l’utilisateur a estimé que le dégradé initial était quelque peu atténué et, en conséquence, il a demandé à Divi AI de l’intensifier. Le résultat constitue désormais le dégradé idéal, atteignant le dynamisme souhaité.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer MaintenantCréer des éléments personnalisés
Le module Code se distingue comme l’étoile brillante de Divi Code AI, offrant la capacité de gérer facilement HTML, CSS et JavaScript. Les utilisateurs peuvent simplement demander à Divi AI de créer une popup avec un délai de 30 secondes, invitant les visiteurs à s'abonner à leur newsletter, avec la liberté de décrire l'apparence de la popup. En quelques instants, Divi AI génère le code sans effort, ce qui génère une fenêtre contextuelle accrocheuse et efficace qui attire l'attention des visiteurs du site Web.
Divi AI dispose d'un large éventail de capacités en matière de modules de code. Il peut facilement intégrer des fonctionnalités telles qu'un effet de frappe pour le titre de votre héros ou transformer une section Divi en une barre latérale flottante pratique et pouvant être ignorée. Une fois que les utilisateurs se familiarisent avec l’interaction avec Divi AI, un royaume de possibilités passionnantes s’offre à eux.
Option CSS de forme libre pour tous les modules
Ils ont implémenté une amélioration notable dans tous les modules Divi : une fonctionnalité CSS de forme libre qui permet aux utilisateurs de styliser le module en focus et tous les éléments sous-jacents à l'aide de la pseudo-classe « sélecteur ». Par exemple, lors de la modification d'un module Blurb, vous pouvez facilement appliquer une ombre de boîte et modifier l'apparence de ses éléments IMG et H3 en élaborant des règles CSS comme celle ci-dessous:
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; }Cet ajout s’avère inestimable pour Divi AI, lui accordant la flexibilité nécessaire pour répondre à vos demandes et personnaliser des modules entiers sans effort.
Personnalisation CSS générée par l'IA
Utiliser Divi Code AI dans le nouveau champ CSS de forme libre s'avère être une expérience remarquable. Dans la démonstration vidéo ci-dessous, les utilisateurs peuvent voir Divi AI exécuter sans effort une séquence de personnalisations. Les instructions sont claires: transformer l'image en une forme circulaire, ajouter une ombre de boîte subtile, superposer l'image avec un dégradé semi-transparent et appliquer une animation de zoom déclenchée par le survol.
Grâce à la compréhension approfondie de Divi AI des structures des modules Divi et à sa maîtrise du CSS, ces tâches complexes sont généralement abordées avec succès dès la première tentative, ou elles sont remarquablement proches du résultat souhaité.
Base de code Divi
Ce qui distingue Divi Code AI, c'est son réglage fin sur la base de code du module Divi, offrant un avantage distinct par rapport aux autres grands modèles de langage. Grâce à sa familiarité avec les classes du module Divi et les sorties HTML, il excelle dans la compréhension des requêtes ambiguës et dans la reconnaissance des termes spécifiques à Divi dans les invites utilisateur.
Par exemple, dans la vidéo présentée ci-dessous, un utilisateur demande à Divi Code AI de créer du CSS pour personnaliser l'apparence des modules Blurb et Button. Impressionnant, Divi Code AI discerne instinctivement la nature des éléments Blurb et Button, identifiant avec précision les classes pertinentes. Cette précision lui permet de fournir des personnalisations parfaites dès la première tentative.
Codage pratique
Divi Code AI propose des actions rapides conviviales pour affiner votre code. En un seul clic, il peut automatiquement optimiser, formater et améliorer la compatibilité avec les anciens navigateurs. De plus, vous avez la possibilité de modifier le code à l’aide d’invites, ouvrant ainsi des possibilités créatives infinies.
Bibliothèque d'extraits de code basée sur le cloud
Bien que Divi AI ne soit peut-être pas parfait, elle permet aux utilisateurs de persister dans leur conversation et de collaborer avec l'IA pour affiner le résultat souhaité. Les utilisateurs peuvent également demander une « nouvelle tentative ». A chaque tentative, Divi AI génère des résultats légèrement variés, découvrant fréquemment la solution souhaitée après quelques essais.
Même pour ceux qui ont une compréhension fondamentale du développement Web, Divi AI peut accélérer la personnalisation du site Web et atteindre des résultats spécifiques qui n’étaient auparavant possibles que grâce à l’engagement d’un expert.
Emballer
Divi Code AI est plus qu’une simple avancée technologique ; cela change la donne dans le monde de la conception Web. Il offre aux utilisateurs le pouvoir d'exploiter les capacités d'un développeur Web front-end qualifié directement depuis Divi Visual Builder .
Que vous soyez un concepteur Web expérimenté ou un novice dans le domaine, Divi Code AI ouvre la porte à une efficacité et une personnalisation améliorées. Plongez et découvrez l’avenir de la conception Web avec Divi Code AI.
