{"id":628,"date":"2026-02-18T10:10:00","date_gmt":"2026-02-18T10:10:00","guid":{"rendered":"https:\/\/elementor.com\/community\/fr\/?p=628"},"modified":"2026-02-19T09:27:40","modified_gmt":"2026-02-19T09:27:40","slug":"elementor-v4-de-la-duplication-a-linstanciation","status":"publish","type":"post","link":"https:\/\/elementor.com\/community\/fr\/elementor-v4-de-la-duplication-a-linstanciation\/","title":{"rendered":"Elementor V4 : de la duplication \u00e0 l\u2019instanciation, l\u2019\u00e8re des composants"},"content":{"rendered":"\n

Pendant des ann\u00e9es, la construction de sites dans Elementor reposait sur un r\u00e9flexe simple : cr\u00e9er une section, la dupliquer, puis adapter chaque copie. Cette m\u00e9thode permettait d\u2019aller vite, mais elle produisait des projets difficiles \u00e0 faire \u00e9voluer. La moindre modification globale \u2014 un bouton \u00e0 changer, une couleur \u00e0 ajuster, une ligne \u00e0 ajouter \u2014 obligeait \u00e0 retrouver chaque occurrence et \u00e0 la corriger manuellement.<\/p>\n\n\n\n

Comme vous l\u2019avez compris, Elementor V4 propose une autre voie : on ne duplique plus des sections ou des widgets, on instancie des r\u00e8gles qui s\u2019appuient sur un syst\u00e8me de design.<\/strong><\/p>\n\n\n\n

Cette nouvelle approche s\u2019inscrit dans une architecture atomique qui s\u00e9pare clairement structure, style et contenu. Au c\u0153ur de cette \u00e9volution se trouvent les Composants<\/strong>, pens\u00e9s pour des projets r\u00e9els, des \u00e9quipes r\u00e9elles et des clients r\u00e9els.<\/p>\n\n\n\n

Le socle : Variables, Classes\u2026 et maintenant Composants<\/strong><\/h2>\n\n\n\n

La V4 repose d\u2019abord sur deux notions essentielles : les Variables<\/strong> et les Classes<\/strong>.<\/p>\n\n\n\n

Rappelons la logique fondamentale :<\/p>\n\n\n\n

    \n
  • la Variable<\/strong> repr\u00e9sente une valeur unique et s\u00e9mantique : couleur primaire, espacement, rayon, taille de texte \u2014 \u00e9volution directe des styles globaux de la V3 ;<\/li>\n\n\n\n
  • la Classe<\/strong> d\u00e9crit une r\u00e8gle de style r\u00e9utilisable qui consomme ces variables.
    <\/li>\n<\/ul>\n\n\n\n

    Une valeur r\u00e9p\u00e9t\u00e9e devient une variable, un style r\u00e9p\u00e9t\u00e9 devient une classe globale.
    Le local n\u2019est plus la norme, mais l\u2019exception.<\/p>\n\n\n\n

    \u00c0 ce syst\u00e8me s\u2019ajoutent d\u00e9sormais les Composants<\/strong> : des blocs de layout r\u00e9utilisables qui restent synchronis\u00e9s partout o\u00f9 ils sont utilis\u00e9s, tout en permettant une personnalisation contr\u00f4l\u00e9e par instance.<\/p>\n\n\n\n

    Sch\u00e9matiquement :
    la Variable porte la valeur,<\/strong>
    <\/strong> la Classe CSS porte le style,<\/strong>
    <\/strong> le Composant porte le layout.<\/strong><\/p>\n\n\n\n

    Les Composants : concevoir une r\u00e8gle plut\u00f4t qu\u2019une section<\/strong><\/h2>\n\n\n\n

    Ce bloc de layout r\u00e9utilisable n\u2019est pas un simple mod\u00e8le : c\u2019est un \u00e9l\u00e9ment fondamental de la V4, rendu possible par la nouvelle architecture atomique.<\/p>\n\n\n\n

    Cr\u00e9er une fois, utiliser partout<\/strong><\/h3>\n\n\n\n

    N\u2019importe quel conteneur peut \u00eatre transform\u00e9 en Composant. Une fois publi\u00e9, il appara\u00eet dans un onglet d\u00e9di\u00e9 et peut \u00eatre ins\u00e9r\u00e9 sur n\u2019importe quelle page comme un \u00e9l\u00e9ment natif, au m\u00eame titre qu\u2019un widget.<\/p>\n\n\n\n

    Lorsque le Composant est modifi\u00e9 :<\/p>\n\n\n\n

      \n
    • toutes les instances se mettent \u00e0 jour automatiquement,<\/li>\n\n\n\n
    • la structure et les styles restent align\u00e9s,<\/li>\n\n\n\n
    • la coh\u00e9rence du site est garantie dans le temps.<\/li>\n<\/ul>\n\n\n\n

      C\u2019est la diff\u00e9rence cl\u00e9 entre copie<\/strong> et instanciation<\/strong>.<\/p>\n\n\n\n

      Contr\u00f4ler ce qui change, prot\u00e9ger ce qui doit rester<\/strong><\/h2>\n\n\n\n

      La grande difficult\u00e9 des anciens mod\u00e8les \u00e9tait l\u2019\u00e9quilibre entre coh\u00e9rence et flexibilit\u00e9 :<\/p>\n\n\n\n

        \n
      • tout verrouiller emp\u00eachait les \u00e9diteurs de travailler,<\/li>\n\n\n\n
      • tout ouvrir exposait le design aux erreurs.
        <\/li>\n<\/ul>\n\n\n\n

        Les Composants r\u00e9solvent ce dilemme gr\u00e2ce aux propri\u00e9t\u00e9s expos\u00e9es<\/strong>.
        L\u2019administrateur d\u00e9cide pr\u00e9cis\u00e9ment :<\/p>\n\n\n\n

          \n
        • quels textes sont modifiables,<\/li>\n\n\n\n
        • quelles images peuvent \u00eatre remplac\u00e9es,<\/li>\n\n\n\n
        • quels liens peuvent \u00eatre \u00e9dit\u00e9s,<\/li>\n\n\n\n
        • quelles balises HTML sont accessibles.
          <\/li>\n<\/ul>\n\n\n\n

          Tout le reste \u2014 mise en page, espacements, classes, styles \u2014 demeure prot\u00e9g\u00e9.
          C\u2019est un apport consid\u00e9rable pour le travail en \u00e9quipe et la passation des projets au client.<\/p>\n\n\n\n

          Concr\u00e8tement, un Composant permet par exemple de modifier un CTA pr\u00e9sent sur 20 pages en un seul endroit, tout en laissant chaque page conserver ses textes et ses images propres. Les couleurs peuvent \u00eatre ajust\u00e9es via les variables, le style via les classes, et la structure via le Composant lui-m\u00eame \u2014 sans jamais toucher aux pages individuellement.<\/p>\n\n\n\n

          Pens\u00e9s pour les \u00e9quipes et la passation client<\/strong><\/h2>\n\n\n\n

          C\u2019est l\u00e0 que les Composants prennent tout leur sens.<\/p>\n\n\n\n

          Pour les \u00e9quipes :<\/strong><\/p>\n\n\n\n

            \n
          • un vocabulaire commun,<\/li>\n\n\n\n
          • des blocs fiables,<\/li>\n\n\n\n
          • moins de d\u00e9cisions au pixel,<\/li>\n\n\n\n
          • des mises \u00e0 jour globales.
            <\/li>\n<\/ul>\n\n\n\n

            Pour les clients :<\/strong><\/p>\n\n\n\n

              \n
            • \u00e9dition du contenu en autonomie,<\/li>\n\n\n\n
            • impossibilit\u00e9 de casser le design,<\/li>\n\n\n\n
            • s\u00e9curit\u00e9 des mises \u00e0 jour.
              <\/li>\n<\/ul>\n\n\n\n

              Le cr\u00e9ateur de site ne livre plus des pages,  mais un syst\u00e8me.<\/strong><\/p>\n\n\n\n

              En conclusion : une brique cl\u00e9 de la V4<\/strong><\/h2>\n\n\n\n

              Les Composants ne sont pas un module additionnel : ils sont au c\u0153ur de la version 4.
              Ils incarnent la direction prise par Elementor :<\/p>\n\n\n\n

                \n
              • r\u00e9utilisation au niveau du layout plut\u00f4t que du widget,<\/li>\n\n\n\n
              • s\u00e9paration nette entre structure, style et contenu,<\/li>\n\n\n\n
              • gestion centralis\u00e9e pour des projets plus grands.
                <\/li>\n<\/ul>\n\n\n\n

                Associ\u00e9s aux Variables et aux Classes, ils permettent de b\u00e2tir des sites r\u00e9ellement \u00e9volutifs, capables de changer de direction sans tout reconstruire.<\/p>\n\n\n\n

                Elementor V4 marque ainsi un passage d\u00e9cisif de la duplication \u2192 \u00e0 l\u2019instanciation.<\/strong><\/p>\n\n\n\n

                On ne con\u00e7oit plus une section isol\u00e9e, on con\u00e7oit une r\u00e8gle qui vit \u00e0 travers le site. Les Composants transforment la mani\u00e8re de construire, de collaborer et de transmettre un projet  et rendent enfin possible ce que les \u00e9quipes attendaient depuis longtemps : faire \u00e9voluer un site sans le fragiliser.<\/strong><\/p>\n\n\n\n

                Pour voir les composants action, regardez la vid\u00e9o officielle (en anglais) <\/p>\n\n\n\n

                \n