Le design web change à toute vitesse, et Divi 5 évolue avec lui. En 2026, Elegant Themes fait entrer son constructeur dans une nouvelle ère : l’agent de Divi 5 a été conçu pour travailler directement dans le builder comme un véritable collaborateur, capable de comprendre une demande, de planifier les étapes nécessaires et d’exécuter le travail de façon autonome.
L’idée n’est pas simplement de générer une image ou quelques lignes de texte. Il s’agit d’orchestrer un workflow complet de conception web assistée, tout en conservant le contrôle fin du constructeur visuel de Divi et l’intégration native à WordPress. Pour qui utilise Divi au quotidien, c’est sans doute la nouveauté la plus importante depuis le passage à Divi 5.
Un agent qui travaille dans le builder
L’assistant de Divi réunit déjà une grande variété de capacités : génération de mise en page, édition de designs existants, création de variables, génération de presets, gestion de règles, recherche d’images, compréhension visuelle d’images jointes, historique de discussion persistant et mise en file d’attente des demandes.
Au lieu de devoir parcourir chaque réglage du builder, il devient possible d’exprimer une intention en langage naturel. L’agent détermine ensuite les actions nécessaires, appelle les bons outils et effectue le travail dans Divi. Cette logique conversationnelle rappelle le fonctionnement d’un loop builder : l’assistant enchaîne les opérations jusqu’à ce que le résultat corresponde à la demande.
Cette approche ne remplace pas l’interface visuelle, elle la complète. Le builder reste l’espace de contrôle précis, tandis que le chat devient l’interface principale pour accélérer les tâches répétitives, complexes ou créatives.
Image du back office de divi 5, avec zoom sur agent IA
Créer une section hero à partir d’une image de référence
L’un des changements les plus puissants est la prise en charge des pièces jointes et de la vision. On peut déposer une image de référence dans la conversation et demander à l’agent de créer une section qui reprend son langage visuel.
Dans l’exemple présenté, une image de hero pour un café sert de direction créative. L’assistant identifie les composants nécessaires, dont plusieurs images, récupère des photos de stock adaptées, puis délègue la construction de la mise en page à son agent spécialisé dans les modules. Il reprend la structure, les couleurs, la typographie et le rythme visuel de la référence.
Le résultat reproduit fidèlement la composition générale : grand titre éditorial, fond crème, bouton sombre et mosaïque d’images autour du café. Les visuels utilisés peuvent différer, mais l’intention de design est préservée. Cette méthode est utile lorsqu’on dispose déjà :
- d’une maquette ou d’un concept visuel à adapter ;
- d’une capture d’inspiration ;
- d’un moodboard ou d’une direction artistique ;
- d’images à importer dans la médiathèque et à intégrer à la page.
Une image n’est toutefois pas obligatoire. L’agent accepte aussi des instructions textuelles détaillées, incluant la structure attendue, les consignes de marque, les textes, les couleurs et les contraintes de mise en page. Son contexte étendu permet de donner des directives nuancées plutôt qu’un simple prompt vague.
Transformer un design ponctuel en système de design
Produire une belle section ne suffit pas. Pour construire un site web cohérent, il faut pouvoir réutiliser ses choix visuels. C’est là que les variables globales, les presets et les règles deviennent essentiels.
Créer des variables de couleur globales
Après avoir généré la section du café, l’agent propose de convertir les couleurs utilisées en variables de couleur globales. Cette étape donne au design une base plus robuste : si une couleur de marque doit évoluer, elle se modifie à un seul endroit plutôt que dans chaque module.
Générer des presets pour les éléments récurrents
L’étape suivante consiste à transformer les styles existants en presets. L’assistant peut créer, par exemple, un preset de bouton brun foncé, un preset de texte et un preset de titre à partir des styles déjà présents dans la section.
Au lieu d’entrer dans les réglages de chaque module, de nommer un preset, de l’enregistrer et de répéter l’opération, il suffit de le demander. L’agent choisit un nom adapté selon les attributs du style et rend ce dernier réutilisable.
Utiliser des règles pour imposer la cohérence
Les règles donnent à l’agent des consignes persistantes. Elles définissent la façon dont il doit travailler dans certains contextes, lui transmettent des informations sur une entreprise ou lui demandent de respecter des directives précises. Ici, une règle indique que chaque nouveau module de texte ou de bouton doit utiliser les presets créés précédemment. Les prochaines sections reprendront donc automatiquement les styles établis. Les règles peuvent encadrer de nombreux choix :
- utiliser les couleurs de la marque ;
- appliquer une famille de presets spécifique ;
- respecter un ton éditorial ou des règles de contenu ;
- ajouter du contexte sur l’activité, les services ou les offres ;
- faire respecter les standards de design d’un site entier.
Enchaîner le travail avec les commandes en file d’attente
Un bon workflow ne devrait pas s’interrompre parce qu’une tâche est encore en cours. Les commandes en file d’attente permettent de préparer la prochaine demande pendant que l’agent travaille sur la précédente. Après la création des presets, une nouvelle instruction peut déjà être ajoutée pour créer la règle qui les appliquera : elle attend son tour et s’exécute automatiquement.
Cette logique est particulièrement efficace sur les séquences de production. On peut demander de générer une section, d’en créer une variation, de transformer ses styles en presets, puis de sauvegarder le tout dans la bibliothèque, sans relancer manuellement chaque étape.
Créer instantanément des variations claires et sombres
Les variations de design deviennent aussi beaucoup plus rapides. Pour obtenir une version sombre de la section du café, l’agent reçoit une demande simple : dupliquer la section et inverser les couleurs. Il conserve le même système chromatique tout en créant une alternative convaincante. Le résultat donne deux sections complémentaires, une claire et une sombre, ensuite sauvegardées dans la bibliothèque. Un travail ponctuel devient ainsi un actif réutilisable pour de futures pages.
Générer une page complète plutôt qu’une seule section
L’assistant ne se limite pas à une approche section par section : il peut générer une page complète. Dans la démonstration, une page d’accueil pour un domaine viticole est créée à partir d’une image de référence. La page reprend la structure recherchée : une hero avec un paysage de vignoble, une section de présentation, trois cartes illustrées, une zone d’appel à l’action et un pied de page. L’ensemble est généré en environ 45 secondes, bien plus vite qu’une construction manuelle.
Le véritable intérêt est la vitesse à laquelle une intention visuelle devient une base fonctionnelle — base qui reste ensuite entièrement modifiable avec les outils habituels de Divi.
Explorer les centaines de compétences disponibles
L’agent possède de nombreuses compétences, exposées dans un panneau d’outils qui rend visible l’étendue des actions possibles. Ses outils couvrent notamment :
- la création, l’analyse et l’édition des modules et des sections ;
- l’ouverture, la fermeture, l’ancrage, le désancrage et le redimensionnement des panneaux ;
- la création d’espaces de travail personnalisés ;
- la gestion des couleurs globales, des breakpoints responsive et des presets ;
- la mise à jour des menus et des assignations de templates ;
- l’analyse des pages afin de mieux comprendre le site ;
- la recherche de photos de stock et la génération d’images.
Cette richesse d’outils compte, car l’agent ne travaille pas à l’aveugle : il inspecte le contexte dont il a besoin pour prendre de meilleures décisions avant de modifier une page.
Choisir le modèle adapté à chaque demande
Divi permet de choisir parmi un vaste éventail de modèles. Les résultats varient selon le modèle sélectionné, la complexité de la demande et le contexte fourni. Pour simplifier ce choix, une sélection de modèles recommandés est proposée : l’option recommandée peut router automatiquement chaque demande vers un modèle à la fois capable et rentable. Cette flexibilité permet d’adapter le workflow sans imposer un seul moteur pour tous les cas d’usage.
Personnaliser l’interface avec les outils UI
L’agent peut aussi modifier l’espace de travail. Il suffit de lui demander d’ouvrir l’inspecteur, d’ouvrir le centre de commandes, de le désancrer, de l’agrandir et d’enregistrer la configuration actuelle. Une fois la page actualisée, l’espace de travail conserve ces choix. Ce type d’automatisation paraît simple, mais il retire de petites frictions répétitives et permet de rester concentré sur le design plutôt que sur la manipulation des panneaux.
Donner le bon contexte à l’agent avec le symbole @
Le contexte rend les requêtes plus fiables. En tapant le symbole @, on recherche et ajoute rapidement un élément précis au chat. Ce contexte peut être un élément de la page, un preset, une variable, un canvas ou un outil particulier que l’agent doit utiliser. Par exemple, si un bouton doit reprendre un preset donné, il suffit de joindre ce preset avec @ puis de demander l’ajout du bouton : l’agent sait alors exactement quel style appliquer.
Cibler un élément avec la portée
La portée, ou scope, évite de décrire longuement l’élément à modifier. Il suffit de cliquer sur un élément dans la page pour qu’il apparaisse dans la fenêtre de discussion ; les demandes suivantes sont alors ciblées sur cet élément. Pour modifier une image, on la sélectionne puis on demande l’ajout d’une bordure et d’une ombre portée, sans avoir à expliquer laquelle est concernée. La portée est idéale pour les retouches rapides : styliser une image, modifier un bloc de texte, ajuster un bouton ou corriger un détail sur un site en production.
Automatiser les tâches récurrentes avec les commandes
Les commandes sont des prompts enregistrés, exécutables rapidement. Elles transforment une instruction complexe et souvent répétée en raccourci réutilisable. Une commande peut servir à :
- lancer une phase de nettoyage d’un design ;
- convertir une mise en page Divi 4 basée sur des blocs vers Flex ;
- auditer les couleurs d’une page et remplacer les couleurs statiques par des couleurs globales ;
- créer un preset à partir des styles actuels d’un élément.
Une fois créée, la commande se retrouve en tapant / puis son nom : le prompt complexe n’a plus besoin d’être réécrit à chaque fois.
Migrer un site Divi 4 vers Divi 5
Beaucoup de projets existants tournent encore sous Divi 4. Passer à Divi 5 ne se limite pas à une mise à jour : c’est l’occasion de repenser la structure d’un site. L’agent aide justement à migrer les anciennes mises en page basées sur des blocs vers le nouveau moteur Flex, plus moderne et natif au responsive.
Concrètement, l’assistant peut auditer une page héritée de Divi 4, convertir sa structure en flexbox, remplacer les couleurs statiques par des variables globales et générer les presets manquants. Le résultat : un site plus léger, de meilleures performances et une base de design réutilisable. Pour les utilisateurs qui gèrent des sites WordPress complexes — avec WooCommerce, des champs ACF ou de nombreux templates — cette assistance réduit considérablement le temps de migration.
Deux façons de travailler : Build Mode et Ask Mode
L’agent propose deux modes complémentaires.
- Build Mode lui permet d’agir, de construire et de modifier le site.
- Ask Mode permet de poser des questions et d’obtenir de l’aide directement dans le builder.
Ask Mode est particulièrement intéressant, car il a accès à la documentation du centre d’aide et à des milliers d’extraits de connaissances utilisés pour répondre rapidement aux questions de support. Une question comme « Comment fonctionne le ratio d’aspect dans Divi ? » déclenche une recherche dans la documentation, puis une réponse expliquant les réglages de ratio d’aspect et de cadrage d’image. Le builder devient donc aussi un espace d’assistance intégré, sans quitter le contexte de travail.
Le futur du design web associe contrôle visuel et conversation
L’interface de demain ne se résume pas à un chat qui génère tout de façon opaque. Elle associe deux forces : l’interface visuelle de Divi 5 pour le contrôle détaillé et l’interface conversationnelle pour diriger l’essentiel du travail plus rapidement.
L’agent peut créer des layouts, modifier des designs existants, ajuster les couleurs, créer des variables, générer des presets, organiser une bibliothèque et comprendre le contexte du site. Plus cette façon de travailler devient familière, plus elle ouvre de possibilités. Au moment de cette présentation, le lancement de la bêta de l’assistant de Divi était annoncé comme imminent — le début d’un workflow où le designer reste aux commandes, mais peut enfin déléguer une grande partie de l’exécution.
Pour découvrir l’évolution de l’outil et essayer Divi 5, la nouvelle génération du builder d’Elegant Themes vise à rapprocher encore davantage la vision créative et sa réalisation.
Conclusion
L’agent de Divi 5 marque un vrai tournant dans la création de sites WordPress : il permet de concevoir, modifier et organiser des pages directement dans le builder, tout en gardant le contrôle visuel qui fait la force de Divi. Variables globales, presets, règles et commandes transforment vos styles ponctuels en un système de design réutilisable, et l’aide à la migration Divi 4 vers Divi 5 facilite la mise à niveau de vos projets existants. Le designer reste aux commandes, mais peut enfin déléguer une grande partie de l’exécution et gagner un temps précieux.
N’attendez plus pour essayer Divi 5 et découvrir l’agent IA directement dans votre espace de travail. Chez oaka, nous sommes une agence spécialisée dans la création de sites web et eCommerce, et nous proposons des services complets pour vous accompagner dans la réalisation de votre projet. N’hésitez pas à nous contacter pour toute demande d’assistance.
Partagez vos impressions sur l’agent IA de Divi 5 dans les commentaires. Merci d’avoir lu et à bientôt pour plus d’astuces et de conseils !