Elementor – Les templates (ou modèles)

Qu’est-ce qu’un template ? Un modèle

En anglais, template signifie modèle.

Un template est donc un élément de design, composé d’autres éléments.

Il peut être une page entière, ou une section, un bloc.

Il présente l’avantage de venir avec un design tout fait, visuellement propre, qu’on peut ensuite adapter à sa guise en termes de couleurs, de marges etc ; on pourrait faire la même chose à la main mais cela prendrait plus de temps.

De sorte qu’on peut créer une page vierge, y importer un template de page comportant des sections et des éléments à l’intérieur de ces sections, puis ajouter d’autres templates, sections ou blocs, à l’intérieur de cette page. 

Attention !

Elementor utilise un vocabulaire qui n’est pas clair pour parler des modèles : il utilise le même mot pour désigner deux fonctionnalités assez différentes.

En effet :

• la version gratuite d’Elementor permet de créer des « modèles » / « templates », qui sont en fait des blocs de contenu statiques : on les définit une fois et ils sont ensuite disponibles là où on veut les intégrer
• tandis que la version Pro d’Elementor ajoute aux modèles des fonctionnalités beaucoup plus intéressantes : grâce aux « balises dynamiques » appelant des « contenus dynamiques », on peut intégrer aux modèles des widgets qui vont appeler les contenus : par exemple, on va mettre un widget « titre du post » dans le modèle, et il appellera le titre du post de manière dynamique

Autre différence notable entre les versions gratuite et Pro d’Elementor : 

• seule la version Pro autorise à appliquer les modèles de page à divers types de pages et de posts en fonction de conditions : on peut ainsi définir un modèle d’article de blog, et l’attribuer à tous les articles de blog, ou définir un modèle d’article de blog pour une catégorie donnée, et ne l’attribuer qu’aux articles de cette catégorie
• tandis que la version gratuite se contente de permettre d’intégrer un modèle de page donné à une page qu’on crée, mais on ne pourra pas l’appliquer automatiquement à des ensembles de pages ni à tout le site

Bref, concernant les modèles, Elementor Pro est beaucoup plus puissant et flexible.

Une dernière source de confusion possible à cause d’un vocabulaire mal choisi, réside dans l’option qu’on trouve sur les pages et articles quand on les ouvre avec l’éditeur de WordPress : sur la droite, on a une option « Modèle » qui permet de choisir : 

• modèle par défaut
• Elementor Canvas
• Elementor pleine largeur
• Thème

Or ce concept de modèle n’a rien à voir avec les templates d’Elementor.

En réalité cette option commande la maquette générale de la page :

• Par défaut, comprend l’en-tête (header), le contenu, la colonne latérale (sidebar) et le pied de page (footer)
• Elementor Canvas ne garde que le contenu de ladite page, en retirant l’en-tête, la colonne latérale, le pied de page
• Elementor Full-width garde tout sauf la colonne latérale (c’est donc la zone de contenu qui se retrouve en pleine largeur, Full-width)
• Theme laisse le thème définir la présence ou l’absence des éléments, via le Customizer / outil de personnalisation du thème

La template library (bibliothèque de modèles)

Elementor en version gratuite est fourni avec une petite collection de templates, la templates library.

Elementor Pro en fournit beaucoup plus.

Ajouter un template / modèle

Pour ajouter un modèle à une page, il suffit d’ouvrir cette page avec l’éditeur visuel d’Elementor et, en bas de la colonne de droite dédiée à la prévisualisation de la page, de cliquer sur l’icône « ajouter un modèle » qui montre un dossier sur fond gris.

Cela ouvre une fenêtre en pop-up qui contient 3 onglets :

• blocs
• pages
• mes modèles

Il suffit de cliquer sur l’un de ces éléments pour faire apparaitre un bouton « insérer », cliquer dessus et le modèle choisi s’intègre dans la page : on peut maintenant le déplacer, l’éditer pour l’adapter à ses besoins.

Créer un template / modèle

On peut créer un modèle et l’ajouter à la bibliothèque pour le rendre disponible à n’importe quel autre endroit du site.

Cette procédure va créer une copie de la section ou de la page, qu’on pourra ensuite ouvrir pour l’éditer séparément.

Pour créer un modèle, il y a deux méthodes en fonction du type de modèle :

Créer un modèle de section

Survolez avec la souris la section dont vous voulez faire un modèle.

Faites un clic droit sur l’icône de la section, celle du milieu avec les 6 petits carrés blancs.

Dans les options, choisissez « Enregistrer comme modèle ».

Et voilà, votre section sera maintenant disponible dans la templates library. Vous la retrouverez dans l’onglet « Mes modèles ».

Créer un modèle de page

Pour créer un modèle de page à partir d’une page, cliquez sur l’icône en forme de triangle à droite du bouton gris ou vert Mettre à jour.

Un menu s’ouvre.

Cliquez sur « Enregistrer comme modèle », et voilà, cette page sera disponible comme template. Vous la retrouverez dans l’onglet « Mes modèles », dans la colonne de gauche de l’administration de WordPress.

Il y a une autre méthode possible pour enregistrer un modèle de page : cliquez sur l’icône « ajouter un modèle » qui montre un dossier sur fond gris.

Puis, dans la fenêtre qui s’ouvre, cliquez sur l’icône en forme de disquette « Enregistrer » en haut à droite ; nommez votre modèle de page, et voilà, il sera disponible.

Un modèle de page peut servir à créer une série de pages au look similaire, mais avec des contenus différents à chaque fois.

Notez cependant que si vous modifiez un modèle en version gratuite, il ne se mettra pas à jour là où on l’a intégré.

Par exemple, vous avez enregistré un modèle de page sur fond bleu, vous créez une nouvelle page, vous y intégrez votre modèle de page, et votre page a maintenant un fond bleu.

Si vous modifiez le modèle pour changer le fond en rouge, ça ne changera rien à la page sur laquelle vous l’aviez importé, qui restera sur fond bleu.

Si vous importez le modèle modifié dans une nouvelle page, là, le fond sera rouge.

Exporter et importer un template / modèle

Exporter un modèle

Pour exporter un modèle, rendez-vous sur l’onglet « Mes modèles » (voir plus haut), cliquez sur les trois petits points (…) à la fin de la ligne du modèle choisi, et sélectionner Exporter.

Cela sauvegardera le modèle au format JSON, y compris les images et autres médias.

Importer un modèle

Pour importer un modèle, cela se passe également dans la fenêtre pop-up : en haut vous avez des icônes, cliquez sur celle avec la flèche contenue dans un cercle, puis choisissez le fichier JSON à importer.

Ensuite, vous n’avez plus qu’à l’ajouter à la page que vous voulez.

Modèles enregistrés

Une autre manière d’accéder à vos modèles consiste à passer par l’administration de WordPress : dans la colonne de gauche, l’installation d’Elementor a ajouté une section « Modèles », avec ces pages :

• Modèles enregistrés
• Constructeur de thème
• etc

La page « Modèles enregistrés » liste vos modèles, donne leur type (section ou page) et permet de les modifier en mode WordPress ou Elementor.

En mode WordPress, vous avez accès notamment aux options de votre thème.

La liste des pages du menu Modèles vous donne aussi accès à ces assortiments de modèles de page que sont les kits.