Modèles de section Elementor

Elementor nous permet d’enregistrer n’importe quelle section comme modèle, que nous pourrons ensuite utiliser dans d’autres documents de notre site web autant de fois que nous le souhaitons, ou l’exporter pour l’utiliser dans d’autres documents. Nous pouvons utiliser ces modèles de manière indépendante ou globale. De manière indépendante, la modifier n’affectera pas les autres instances. De manière globale (en utilisant le widget Template), lorsque nous modifions le modèle, toutes ses instances seront également modifiées.

Enregistrer des sections comme modèles

1. Choisissez la section que vous souhaitez enregistrer et faites un clic droit sur
2. Dans le menu contextuel, cliquez sur Enregistrer comme modèle.
3. Donnez-lui un nom et cliquez sur Enregistrer.

Comment insérer dans un document un modèle de section enregistré

Vous pouvez utiliser les modèles que vous avez enregistrés dans n’importe quel document de votre site web, y compris dans les articles via le shortcode du modèle. Voyons comment faire.

Insérer un modèle indépendant depuis la bibliothèque

Si nous insérons le modèle de cette manière, il sera indépendant du modèle global et les modifications que nous y apporterons n’affecteront pas les autres instances.

1. Cliquez sur l’icône Ajouter un modèle dans l’éditeur Elementor.
2. Dans la fenêtre contextuelle, cliquez sur l’onglet Mes modèles.
3. Vous verrez une liste de tous les modèles que vous avez enregistrés ; cliquez sur le bouton Insérer du modèle que vous souhaitez utiliser. Si vous n’êtes pas sûr qu’il s’agisse du modèle dont vous avez besoin, avant d’insérer vous pouvez cliquer sur Prévisualiser.
4. Une petite fenêtre contextuelle Importer les réglages du document s’affichera. Dans ce cas, comme il s’agit d’un modèle de section, le mieux est de cliquer sur Non.

Insérer un modèle de section en global

Pour insérer un modèle de section que nous avons préalablement enregistré comme modèle global, nous devrons le faire via le widget Template. Gardez à l’esprit que, comme il s’agit d’un modèle de section inséré à l’intérieur d’une autre section via le widget Template, les deux sections conserveront toutes leurs configurations.

1. Dans l’éditeur Elementor, recherchez le widget Template et faites-le glisser dans une section ou dans l’encadré Glissez le widget ici.
2. Cliquez sur le sélecteur Choose Template et saisissez le nom, ou une partie du nom, du modèle que vous souhaitez insérer ; une fois qu’il apparaît dans le sélecteur, cliquez dessus.

Insérer un modèle dans un article de blog

Nous pouvons insérer un modèle de section dans un article de blog avec l’éditeur de blocs Gutenberg de WordPress, même si je recommande de ne pas utiliser Elementor dans les articles de blog. Pourquoi ? Parce qu’aujourd’hui Elementor est pour vous le meilleur constructeur de pages, mais l’avenir est incertain : auparavant, j’utilisais WPWakery (Visual Composer), à l’époque je le trouvais fantastique, et maintenant, comparé à Elementor, il me paraît nul.

Imaginez qu’à l’avenir 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érable, mais refaire des centaines d’articles de blog serait irréalisable ou trop laborieux ; ces articles seront déjà bien positionnés et il n’est pas question de les perdre. C’est pourquoi je recommande d’utiliser uniquement Gutenberg pour les articles de blog.

1. Dans le back-end WordPress, sélectionnez Modèles > Modèles enregistrés.
2. Cliquez sur le shortcode du modèle que vous souhaitez utiliser, puis copiez ce code avec CTRL + C (Windows) | CMD + C (Mac) ou bien Clic droit > Copier (Windows) | CMD + clic > Copier (Mac).
3. Ouvrez maintenant l’article dans lequel vous souhaitez insérer le modèle.
4. Utilisez le bloc Shortcode de Gutenberg et collez-y le code que vous avez copié précédemment.

Modifier un modèle de section

Depuis l’éditeur Elementor

Toutes les modifications que vous apportez à un modèle se répercuteront sur toutes ses instances.

1. Cliquez sur le bloc de modèle que vous souhaitez modifier.
2. Dans l’onglet Contenu de la colonne de configuration, cliquez sur le bouton

Depuis le menu Modèles

1. Dans le back-end WordPress, sélectionnez Modèles > Modèles enregistrés.
2. Placez le curseur sur le modèle que vous souhaitez modifier et cliquez sur Modifier avec Elementor.

Comment exporter un modèle

Nous pouvons exporter des modèles (pour les utiliser dans un autre projet web) au format .json avec tous les éléments qui les composent, y compris des images et d’autres éléments de la bibliothèque de médias. Toutefois, il faut tenir compte du fait que ces médias ne sont pas intégrés dans le fichier .json (fichier léger composé uniquement de code similaire à XML) : ils ne sont référencés dans son code que via une URL. C’est lors de l’importation du modèle que ce fichier (image, vidéo, etc.) est stocké dans notre bibliothèque de médias. Cela signifie que si le média exporté est supprimé à la source, il ne pourra pas être importé.

Exporter un modèle depuis Modèles enregistrés

1. Dans le back-end WordPress, sélectionnez Modèles > Modèles enregistrés.
2. Placez le curseur sur le modèle que vous souhaitez modifier et cliquez sur Exporter le modèle.
3. Dans la fenêtre contextuelle Enregistrer sous, choisissez l’emplacement et cliquez sur le bouton Enregistrer.

Exporter des modèles depuis l’éditeur Elementor

1. Cliquez sur l’icône Ajouter un modèle dans l’éditeur Elementor.
2. Dans la fenêtre contextuelle, cliquez sur l’onglet Mes modèles.
3. Vous verrez une liste de tous les modèles que vous avez enregistrés ; cliquez sur le bouton Insérer du modèle que vous souhaitez utiliser. Si vous n’êtes pas sûr qu’il s’agisse du modèle dont vous avez besoin, avant d’insérer vous pouvez cliquer sur Prévisualiser.

Comment importer un modèle

Nous pouvons importer des modèles dans notre projet ; ils doivent être au format .json. Lorsque nous importons un modèle et qu’il contient des fichiers médias tels que des images, des vidéos, des fichiers PDF, etc., ces fichiers sont téléversés dans notre propre bibliothèque de médias WordPress. Vous pouvez voir ci-dessous un exemple de code d’un fichier .json réel : c’est très simple, une section avec une colonne et un widget avec une image. J’ai mis en évidence l’URL ou le lien vers l’image en gras.

{"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","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"}

Comme vous le voyez, dans le fichier .json les médias (images, vidéos, …) ne sont pas stockés ; ce sont des liens vers leur emplacement dans le projet source depuis lequel le modèle a été exporté qui sont stockés. Si cette image est supprimée du projet source, lorsque nous importerons ce modèle dans un autre projet, l’image ne sera pas importée.

Importer un modèle depuis Modèles enregistrés

1. Dans le back-end WordPress, sélectionnez Modèles > Modèles enregistrés.
2. En haut, cliquez sur le bouton Importer des modèles.
3. Cliquez sur le bouton Sélectionner un fichier et, dans la fenêtre contextuelle Ouvrir, sélectionnez le fichier .json que vous souhaitez importer, puis cliquez sur le bouton Ouvrir.
4. Cliquez maintenant sur le bouton Importer maintenant.

Importer un modèle depuis l’éditeur Elementor

1. Cliquez sur l’icône Ajouter un modèle dans l’éditeur Elementor.
2. Dans la fenêtre contextuelle, cliquez sur l’onglet Mes modèles.
3. En haut, cliquez sur l’icône Importer un modèle.
4. Cliquez sur le bouton CHOISIR LE FICHIER et, dans la fenêtre contextuelle Ouvrir, sélectionnez le fichier .json que vous souhaitez importer, puis cliquez sur le bouton Ouvrir.
5. Vous devriez maintenant voir ce nouveau modèle dans la liste avec tous les modèles ; cliquez sur le bouton Insérer du modèle pour l’insérer.