# Reconstruire un site Divi vers Elementor, module par module

> Reprendre un projet construit sous Divi sans repartir de zéro : équivalences concrètes entre modules Divi et widgets Elementor, section par section.

- Auteur : Clément Hadrot
- Publié le : 2020-04-02
- Mis à jour le : 2020-04-02
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/reconstruire-site-divi-vers-elementor-module-par-module/

## L’essentiel

- Le Divi Builder stocke sa mise en page dans un shortcode géant impossible à convertir automatiquement
- Chaque module Divi a un équivalent Elementor, mais rarement paramétré à l'identique
- Le module Blog Divi est le plus long à reconstruire fidèlement

Une agence de communication locale a confié à l'équipe la reprise de son site institutionnel, construit trois ans plus tôt sous Divi par un prestataire disparu. Le client veut garder Elementor comme socle pour l'ensemble de son parc de sites, pour des raisons de cohérence interne avec ses autres prestataires. Premier réflexe : chercher un plugin de conversion automatique. Il n'en existe aucun qui fonctionne correctement, et pour cause — la structure de données des deux builders n'a rien en commun.

Divi stocke sa mise en page dans le contenu de l'article sous forme d'un unique shortcode imbriqué, avec des dizaines de paramètres par module. Elementor, lui, sérialise sa structure en JSON dans une metadonnée séparée. Il n'existe pas de passerelle directe entre les deux formats : la reconstruction se fait module par module, à l'œil, en gardant le site Divi ouvert dans un onglet pour comparer visuellement.

## Repérer la structure avant de casser quoi que ce soit

Avant de toucher à l'éditeur, il est utile de faire un inventaire des modules Divi réellement utilisés sur le site plutôt que de tout redécouvrir en avançant. Sur ce projet de site vitrine, l'inventaire tenait sur une page : sections héro, blurbs (colonnes avec icône), un module Blog personnalisé, un formulaire de contact, et un module Testimonial en carrousel.

## Les correspondances module par module

Certaines correspondances sont directes, d'autres demandent un peu de recomposition avec plusieurs widgets Elementor combinés :

> L'essentiel à retenir : Le Divi Builder stocke sa mise en page dans un shortcode géant impossible à convertir automatiquement ; Chaque module Divi a un équivalent Elementor, mais rarement paramétré à l'identique ; Le module Blog Divi est le plus long à reconstruire fidèlement

- Le module Blurb Divi devient un widget Icon Box, avec l'icône, le titre et la description dans le même widget
- Le module Testimonial devient le widget Testimonial natif d'Elementor, avec les mêmes champs (photo, nom, fonction, citation)
- Le module Blog Divi personnalisé n'a pas d'équivalent gratuit direct : il faut le widget Posts, disponible seulement en version Pro, ou une recomposition manuelle article par article
- Le module Formulaire de contact Divi devient un widget Form (Elementor Pro) ou le shortcode d'un plugin de formulaire tiers réinjecté via le widget Shortcode
- Les sections plein écran Divi deviennent des sections Elementor avec l'option Stretch Section activée

### Le cas particulier du module Blog

C'est le point qui a le plus retardé la livraison sur ce projet. Le module Blog Divi affichait les articles avec une mise en forme personnalisée (image en médaillon, catégorie en surimpression) qui n'existe dans aucun widget gratuit d'Elementor. La solution retenue a été d'installer Elementor Pro pour bénéficier du widget Posts avec ses modèles de carte personnalisables, plutôt que de recoder un widget sur mesure pour un unique client.

## Les couleurs et polices globales ne se reprennent pas automatiquement

Divi possède ses propres réglages de couleurs et polices globales, stockés dans les options du thème Divi. Elementor a son propre système de Global Colors et Global Fonts, totalement indépendant. Il faut donc redéfinir manuellement la charte graphique dans Elementor avant de commencer la reconstruction des pages, sous peine de se retrouver avec des couleurs incohérentes d'une page à l'autre pendant tout le chantier.

| Élément Divi | Équivalent Elementor | Remarque |
| --- | --- | --- |
| Section plein écran | Section + Stretch Section | Vérifier la largeur du conteneur parent |
| Module Blurb | Icon Box | Alignement icône à revoir manuellement |
| Module Counter | Counter (widget natif) | Animation identique par défaut |
| Module Toggle | Accordion | Comportement proche à l'identique |

## Prévenir plutôt que reconstruire deux fois

Sur ce type de mission, la tentation est grande de commencer par la page d'accueil pour rassurer le client visuellement. Il est préférable de démarrer par une page interne simple pour valider les équivalences de modules avant d'attaquer les pages complexes : cela évite de devoir tout reprendre si un module s'avère plus long que prévu à reconstruire.

> Sur une migration Divi vers Elementor, chiffrez toujours le module Blog et le module Portfolio en premier : ce sont les deux qui cachent le plus de travail invisible au premier coup d'œil.

## Notre retour d'expérience

Six jours de travail effectif ont été nécessaires pour les quatorze pages du site, contre quatre initialement estimés. L'écart vient presque exclusivement du module Blog et de la redéfinition complète de la charte graphique. Pour une agence qui envisage ce type de migration en série, mieux vaut facturer au temps réel plutôt qu'au forfait tant que la bibliothèque de correspondances n'est pas rodée sur plusieurs projets similaires.