{"id":6680,"date":"2021-09-06T19:18:16","date_gmt":"2021-09-06T17:18:16","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/modeles-de-section-elementor\/"},"modified":"2026-09-02T22:39:34","modified_gmt":"2026-09-02T20:39:34","slug":"modeles-de-section-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/modeles-de-section-elementor\/","title":{"rendered":"Mod\u00e8les de section Elementor"},"content":{"rendered":"\n

Elementor nous permet d\u2019enregistrer n\u2019importe quelle section comme mod\u00e8le, que nous pourrons ensuite utiliser dans d\u2019autres documents de notre site web autant de fois que nous le souhaitons, ou l\u2019exporter pour l\u2019utiliser dans d\u2019autres documents. Nous pouvons utiliser ces mod\u00e8les de mani\u00e8re ind\u00e9pendante ou globale. De mani\u00e8re ind\u00e9pendante, la modifier n\u2019affectera pas les autres instances. De mani\u00e8re globale (en utilisant le widget Template<\/strong>), lorsque nous modifions le mod\u00e8le, toutes ses instances seront \u00e9galement modifi\u00e9es. <\/p>\n\n

Enregistrer des sections comme mod\u00e8les<\/h2>\n\n
    \n
  1. Choisissez la section que vous souhaitez enregistrer et faites un clic droit<\/strong> sur \"Sélecteur<\/li>\n\n\n\n
  2. Dans le menu contextuel, cliquez sur Enregistrer comme mod\u00e8le<\/strong>.<\/li>\n\n\n\n
  3. Donnez-lui un nom et cliquez sur Enregistrer.<\/strong><\/li>\n<\/ol>\n
    \n
    \"Enregistrer<\/figure>\n<\/div>\n

    Comment ins\u00e9rer dans un document un mod\u00e8le de section enregistr\u00e9<\/h2>\n\n

    Vous pouvez utiliser les mod\u00e8les que vous avez enregistr\u00e9s dans n\u2019importe quel document de votre site web, y compris dans les articles via le shortcode du mod\u00e8le. Voyons comment faire. <\/p>\n\n

    Ins\u00e9rer un mod\u00e8le ind\u00e9pendant depuis la biblioth\u00e8que<\/h3>\n\n

    Si nous ins\u00e9rons le mod\u00e8le de cette mani\u00e8re, il sera ind\u00e9pendant du mod\u00e8le global et les modifications que nous y apporterons n\u2019affecteront pas les autres instances.<\/p>\n

    \n
    \"Insérer\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
      \n
    1. Cliquez sur l\u2019ic\u00f4ne Ajouter un mod\u00e8le<\/em> \"Ajouter dans l\u2019\u00e9diteur Elementor.<\/li>\n\n\n\n
    2. Dans la fen\u00eatre contextuelle, cliquez sur l\u2019onglet Mes mod\u00e8les<\/strong>.<\/li>\n\n\n\n
    3. Vous verrez une liste de tous les mod\u00e8les que vous avez enregistr\u00e9s ; cliquez sur le bouton Ins\u00e9rer<\/strong> du mod\u00e8le que vous souhaitez utiliser. Si vous n\u2019\u00eates pas s\u00fbr qu\u2019il s\u2019agisse du mod\u00e8le dont vous avez besoin, avant d\u2019ins\u00e9rer vous pouvez cliquer sur \"Prévisualiser\"\/ Pr\u00e9visualiser<\/strong>. <\/li>\n\n\n\n
    4. Une petite fen\u00eatre contextuelle Importer les r\u00e9glages du document<\/strong> s\u2019affichera. Dans ce cas, comme il s\u2019agit d\u2019un mod\u00e8le de section, le mieux est de cliquer sur Non<\/strong>. <\/li>\n<\/ol>\n\n

      Ins\u00e9rer un mod\u00e8le de section en global<\/h3>\n\n

      Pour ins\u00e9rer un mod\u00e8le de section que nous avons pr\u00e9alablement enregistr\u00e9 comme mod\u00e8le global, nous devrons le faire via le widget Template<\/em>. Gardez \u00e0 l\u2019esprit que, comme il s\u2019agit d\u2019un mod\u00e8le de section ins\u00e9r\u00e9 \u00e0 l\u2019int\u00e9rieur d\u2019une autre section via le widget Template<\/em>, les deux sections conserveront toutes leurs configurations. <\/p>\n

      \n
      \"Insérer\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
        \n
      1. Dans l\u2019\u00e9diteur Elementor, recherchez le widget Template<\/strong> et faites-le glisser dans une section ou dans l\u2019encadr\u00e9 Glissez le widget ici<\/em>.<\/li>\n\n\n\n
      2. Cliquez sur le s\u00e9lecteur Choose Template<\/strong> et saisissez le nom, ou une partie du nom, du mod\u00e8le que vous souhaitez ins\u00e9rer ; une fois qu\u2019il appara\u00eet dans le s\u00e9lecteur, cliquez dessus.<\/li>\n<\/ol>\n\n

        Ins\u00e9rer un mod\u00e8le dans un article de blog<\/h3>\n\n

        Nous pouvons ins\u00e9rer un mod\u00e8le de section dans un article de blog avec l\u2019\u00e9diteur de blocs Gutenberg de WordPress, m\u00eame si je recommande de ne pas utiliser Elementor dans les articles de blog. Pourquoi ? Parce qu\u2019aujourd\u2019hui Elementor est pour vous le meilleur constructeur de pages, mais l\u2019avenir est incertain : auparavant, j\u2019utilisais WPWakery (Visual Composer), \u00e0 l\u2019\u00e9poque je le trouvais fantastique, et maintenant, compar\u00e9 \u00e0 Elementor, il me para\u00eet nul. <\/p>\n\n

        Imaginez qu\u2019\u00e0 l\u2019avenir apparaisse un nouveau constructeur de pages qui surpasse Elementor, par exemple Gutenberg, et que vous souhaitiez refondre votre site web avec ce nouveau constructeur. Refaire les pages de votre site web serait un travail relativement g\u00e9rable, mais refaire des centaines d\u2019articles de blog serait irr\u00e9alisable ou trop laborieux ; ces articles seront d\u00e9j\u00e0 bien positionn\u00e9s et il n\u2019est pas question de les perdre. C\u2019est pourquoi je recommande d\u2019utiliser uniquement Gutenberg pour les articles de blog. <\/p>\n

        \n
        \"Insérer\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
          \n
        1. Dans le back-end WordPress, s\u00e9lectionnez Mod\u00e8les<\/strong> > Mod\u00e8les enregistr\u00e9s<\/strong>.<\/li>\n\n\n\n
        2. Cliquez sur le shortcode du mod\u00e8le que vous souhaitez utiliser, puis copiez ce code avec CTRL + C<\/strong> (Windows) | CMD + C<\/strong> (Mac) ou bien Clic droit > Copier<\/strong> (Windows) | CMD + clic > Copier<\/strong> (Mac).<\/li>\n\n\n\n
        3. Ouvrez maintenant l\u2019article dans lequel vous souhaitez ins\u00e9rer le mod\u00e8le.<\/li>\n\n\n\n
        4. Utilisez le bloc Shortcode<\/strong> de Gutenberg et collez-y le code que vous avez copi\u00e9 pr\u00e9c\u00e9demment.<\/li>\n<\/ol>\n\n

          Modifier un mod\u00e8le de section <\/h2>\n\n

          Depuis l\u2019\u00e9diteur Elementor<\/h3>\n\n

          Toutes les modifications que vous apportez \u00e0 un mod\u00e8le se r\u00e9percuteront sur toutes ses instances.<\/p>\n\n

            \n
          1. Cliquez sur le bloc de mod\u00e8le que vous souhaitez modifier.<\/li>\n\n\n\n
          2. Dans l\u2019onglet Contenu<\/em> de la colonne de configuration, cliquez sur le bouton \"Modifier<\/li>\n<\/ol>\n\n

            Depuis le menu Mod\u00e8les<\/h3>\n
            \n
            \"Modifier\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
              \n
            1. Dans le back-end WordPress, s\u00e9lectionnez Mod\u00e8les<\/strong> > Mod\u00e8les enregistr\u00e9s<\/strong>.<\/li>\n\n\n\n
            2. Placez le curseur sur le mod\u00e8le que vous souhaitez modifier et cliquez sur Modifier avec Elementor<\/strong>.<\/li>\n<\/ol>\n\n

              Comment exporter un mod\u00e8le<\/h2>\n\n

              Nous pouvons exporter des mod\u00e8les (pour les utiliser dans un autre projet web) au format .json<\/strong> avec tous les \u00e9l\u00e9ments qui les composent, y compris des images et d\u2019autres \u00e9l\u00e9ments de la biblioth\u00e8que de m\u00e9dias. Toutefois, il faut tenir compte du fait que ces m\u00e9dias ne sont pas int\u00e9gr\u00e9s dans le fichier .json<\/strong> (fichier l\u00e9ger compos\u00e9 uniquement de code similaire \u00e0 XML) : ils ne sont r\u00e9f\u00e9renc\u00e9s dans son code que via une URL<\/strong>. C\u2019est lors de l\u2019importation du mod\u00e8le que ce fichier (image, vid\u00e9o, etc.) est stock\u00e9 dans notre biblioth\u00e8que de m\u00e9dias. Cela signifie que si le m\u00e9dia export\u00e9 est supprim\u00e9 \u00e0 la source, il ne pourra pas \u00eatre import\u00e9. <\/p>\n\n

              Exporter un mod\u00e8le depuis Mod\u00e8les enregistr\u00e9s<\/h3>\n
              \n
              \"Exporter\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
                \n
              1. Dans le back-end WordPress, s\u00e9lectionnez Mod\u00e8les<\/strong> > Mod\u00e8les enregistr\u00e9s<\/strong>.<\/li>\n\n\n\n
              2. Placez le curseur sur le mod\u00e8le que vous souhaitez modifier et cliquez sur Exporter le mod\u00e8le<\/strong>.<\/li>\n\n\n\n
              3. Dans la fen\u00eatre contextuelle Enregistrer sous<\/strong>, choisissez l\u2019emplacement et cliquez sur le bouton Enregistrer<\/strong>.<\/li>\n<\/ol>\n\n

                Exporter des mod\u00e8les depuis l\u2019\u00e9diteur Elementor<\/h3>\n
                \n
                \"Exporter\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
                  \n
                1. Cliquez sur l\u2019ic\u00f4ne Ajouter un mod\u00e8le<\/em> \"Ajouter dans l\u2019\u00e9diteur Elementor.<\/li>\n\n\n\n
                2. Dans la fen\u00eatre contextuelle, cliquez sur l\u2019onglet Mes mod\u00e8les<\/strong>.<\/li>\n\n\n\n
                3. Vous verrez une liste de tous les mod\u00e8les que vous avez enregistr\u00e9s ; cliquez sur le bouton Ins\u00e9rer<\/strong> du mod\u00e8le que vous souhaitez utiliser. Si vous n\u2019\u00eates pas s\u00fbr qu\u2019il s\u2019agisse du mod\u00e8le dont vous avez besoin, avant d\u2019ins\u00e9rer vous pouvez cliquer sur \"Prévisualiser\"\/ Pr\u00e9visualiser<\/strong>. <\/li>\n<\/ol>\n\n

                  Comment importer un mod\u00e8le<\/h2>\n\n

                  Nous pouvons importer des mod\u00e8les dans notre projet ; ils doivent \u00eatre au format .json<\/strong>. Lorsque nous importons un mod\u00e8le et qu\u2019il contient des fichiers m\u00e9dias tels que des images<\/em>, des vid\u00e9os<\/em>, des fichiers PDF<\/em>, etc.<\/em>, ces fichiers sont t\u00e9l\u00e9vers\u00e9s dans notre propre biblioth\u00e8que de m\u00e9dias WordPress. Vous pouvez voir ci-dessous un exemple de code d\u2019un fichier .json<\/strong> r\u00e9el : c\u2019est tr\u00e8s simple, une section avec une colonne et un widget avec une image. J\u2019ai mis en \u00e9vidence l\u2019URL ou le lien vers l\u2019image en gras<\/strong>. <\/p>\n\n

                  {\"content\":[{\"id\":\"63358d39\",\"settings\":[],\"elements\":[{\"id\":\"78eb379f\",\"settings\":{\"_column_size\":100,\"_inline_size\":null},\"elements\":[{\"id\":\"13d2289b\",\"settings\":{\"image\":{\"url\":\"https:\/\/elementor.lacolmenatecnologica.com\/wp-content\/uploads\/2021\/07\/la-colmena-tecnologica-logo.png<\/strong>\",\"id\":974,\"alt\":\"\",\"source\":\"library\"}},\"elements\":[],\"isInner\":false,\"widgetType\":\"image\",\"elType\":\"widget\"}],\"isInner\":false,\"elType\":\"column\"}],\"isInner\":false,\"elType\":\"section\"}],\"page_settings\":[],\"version\":\"0.4\",\"title\":\"Plantilla la Colmena\",\"type\":\"section\"}<\/code><\/pre>\n\n
                  Comme vous le voyez, dans le fichier .json<\/strong> les m\u00e9dias (images, vid\u00e9os, \u2026) ne sont pas stock\u00e9s ; ce sont des liens vers leur emplacement dans le projet source depuis lequel le mod\u00e8le a \u00e9t\u00e9 export\u00e9 qui sont stock\u00e9s. Si cette image est supprim\u00e9e du projet source, lorsque nous importerons ce mod\u00e8le dans un autre projet, l\u2019image ne sera pas import\u00e9e. <\/p>\n\n
                  Importer un mod\u00e8le depuis Mod\u00e8les enregistr\u00e9s<\/h3>\n
                  \n
                  \"Importer\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
                    \n
                  1. Dans le back-end WordPress, s\u00e9lectionnez Mod\u00e8les<\/strong> > Mod\u00e8les enregistr\u00e9s<\/strong>.<\/li>\n\n\n\n
                  2. En haut, cliquez sur le bouton Importer des mod\u00e8les<\/strong>.<\/li>\n\n\n\n
                  3. Cliquez sur le bouton S\u00e9lectionner un fichier<\/strong> et, dans la fen\u00eatre contextuelle Ouvrir<\/em>, s\u00e9lectionnez le fichier .json<\/strong> que vous souhaitez importer, puis cliquez sur le bouton Ouvrir<\/strong>.<\/li>\n\n\n\n
                  4. Cliquez maintenant sur le bouton Importer maintenant<\/strong>.<\/li>\n<\/ol>\n\n
                    Importer un mod\u00e8le depuis l\u2019\u00e9diteur Elementor<\/h3>\n
                    \n
                    \"Importer\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
                      \n
                    1. Cliquez sur l\u2019ic\u00f4ne Ajouter un mod\u00e8le<\/em> \"Ajouter dans l\u2019\u00e9diteur Elementor.<\/li>\n\n\n\n
                    2. Dans la fen\u00eatre contextuelle, cliquez sur l\u2019onglet Mes mod\u00e8les<\/strong>.<\/li>\n\n\n\n
                    3. En haut, cliquez sur l\u2019ic\u00f4ne \"Importer Importer un mod\u00e8le<\/em>.<\/li>\n\n\n\n
                    4. Cliquez sur le bouton CHOISIR LE FICHIER<\/strong> et, dans la fen\u00eatre contextuelle Ouvrir<\/em>, s\u00e9lectionnez le fichier .json<\/strong> que vous souhaitez importer, puis cliquez sur le bouton Ouvrir<\/strong>.<\/li>\n\n\n\n
                    5. Vous devriez maintenant voir ce nouveau mod\u00e8le dans la liste avec tous les mod\u00e8les ; cliquez sur le bouton Ins\u00e9rer<\/strong> du mod\u00e8le pour l\u2019ins\u00e9rer.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
                      Elementor nous permet d\u2019enregistrer n\u2019importe quelle section comme mod\u00e8le, que nous pourrons ensuite utiliser dans d\u2019autres documents de notre site web autant de fois que nous le souhaitons, ou l\u2019exporter pour l\u2019utiliser dans d\u2019autres documents. Nous pouvons utiliser ces mod\u00e8les de mani\u00e8re ind\u00e9pendante ou globale. De mani\u00e8re ind\u00e9pendante, la modifier n\u2019affectera pas les autres instances. […]<\/p>\n","protected":false},"author":4,"featured_media":6681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Mod\u00e8les de sections Elementor pour cr\u00e9er rapidement votre site","_seopress_titles_desc":"Elementor nous permet d\u2019enregistrer n\u2019importe quelle section comme mod\u00e8le, que nous pourrons ensuite utiliser dans d\u2019autres documents de notre site web autant de fois que nous le souhaitons\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[400],"tags":[431,432],"class_list":["post-6680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-conception-web","tag-modeles-elementor"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6680"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6680\/revisions"}],"predecessor-version":[{"id":6682,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6680\/revisions\/6682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6681"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}