WordPress Elementor - Créer une page modèle multi-sections pour ordinateur ou mobile
Date de la dernière modification: 14 novembre 2020
Encore beaucoup de travail … mais ayant pas mal d’autres activités, j’ai quand même décidé de déjà le publier.
L’article WordPress Elementor – Page modèle – Exercice est aussi en travail et sera utilisé pour montrer quelques aspects techniques discutés ici, voire expliqué directement dans l’exercice lui-même. L’article d’introduction Mes premiers pas avec WordPress Elementor devra aussi être consulté comme premier aperçu de la “bête” et, par exemple, la liste des extensions que je recommande!
Introduction
Cette article nous explique comment créer une page modèle sous WordPress Elementor. Les utilisateurs de WordPress devront préalablement installer l’extension Elementor dont nous utiliserons la version gratuite.
Le but de cet article est de montrer comment développer soit des modèles de page, soit de section. Si on décide de construire son site Web avec un menu, une en-tête et un pied de page, commun à toutes nos pages et uniquement sous Elementor (sans les outils traditionnels de WordPress), ce mode de travail sera encore plus adapté.
Une attention particulière sera portée aux aspects de présentation sur ordinateur et sur smartphone et comment les définir pour ce dernier. Un exemple typique est une présentation puzzle sur un smartphone.
Les débutants pourront aussi consulter mes autres articles consacrés à ce sujet:
Introduction: Mes premiers pas avec WordPress Elementor
et
Installation de Xampp, Wampserver, WordPress et Elementor.
Création d’une page modèle
Pour la création d’un site Web de présentation dédiée à un sujet déterminé, nous utiliserons plutôt des pages que des articles. Mon site Programmer en Java pour le Raspberry Pi est continuellement en travail avec des adaptations et de nouveaux articles: dans ce cas une configuration WordPress avec des articles est pour moi plus appropriée pour montrer quelque chose qui bougent constamment. La procédure écrite ici est équivalente pour des articles ou des pages.
Nous commencerons par créer une page modèle. La manière traditionnelle est d’aller dans le tableau de bord sous Modèle, Ajouter. Nous indiquerons si c’est une page ou un article et lui donnerons un nom. Une autre possibilité et tout simplement créer une page avec le menu: Page, Ajouter. Ici j’ai nommé la page WordPress Elementor – Page modèle – Exercice et ceci avant de cliquer sur le bouton en haut à gauche: Modifier avec Elementor.
Une page vide sous Elementor nous sera présentée et nous pourrons la sauvegarder, même avant une quelconque édition, avec le menu du petit curseur à côté du bouton METTRE À JOUR en bas à gauche: le choix à utiliser sera Enregistrer comme modèle. Il faudra lui donner un nom, évidemment. Nous recevrons alors une invitation pour enregistrer la page comme modèle.
Dans le tableau de bord de WordPress, avec le menu Modèles, nous pourrons vérifier la présence de nos modèles et les modifier éventuellement (nous utiliserons alors directement le choix: Modifier avec Elementor). Nous trouverons aussi, pour chaque modèle, le lien Exporter un modèle. Un fichier, avec un nom similaire à elementor-1645-2020-11-07.json, sera enregistré dans le répertoire de téléchargement. Je préfère changer de nom, c’est plus clair, par exemple exportPageHamburgerTest.json (une page de test pour un menu sous smartphone). En accédant un autre site WordPress, il sera possible d’importer ce modèle, avec ce fichier, et avec le bouton Importer des modèles dans le tableau principal sous Modèle. Ensuite on pourra créer une page vide, par exemple Elementor #1153 (il faudra plus tard la renommer sous Modification rapide), et importer ce modèle avec ces réglages de page.
Création d’un modèle de bloc de section(s)
La création de modèle d’une ou plusieurs sections a été le premier cas qui s’est présenté à moi pour la création de menus. Il nécessitent une préparation bien réfléchie pour les présentations PC ou smartphone, en particulier par exemple lors de l’utilisation de logos apparaissant différemment sur PC ou smartphone.
Nous pouvons aussi à tout moment sauvegarder un bloc contenant une ou plusieurs sections: expliquer encore.
Lorsqu’une section est sélectionnée la section est bien visible à l’écran avec ces boutons apparaissant au dessus.
Création d’une page avec un modèle
En créant une nouvelle page vide, nous aurons le moyen d’insérer un modèle de page en utilisant le bouton du milieu Ajouter un modèle et ensuite le menu de droite Mes modèles où nous choisirons le modèle créé à partir de la liste présentée. Le type sera ici Page.
Il faudra évidemment considérer plus tard les corrections dues à une modification des modèles. Si nous utilisons un modèle pour un certain nombre de pages d’un site, et que nous désirions rester avec la version gratuite d’Elementor, il faudra apporter alors des modifications manuelles. Un exemple typique: nous avons une date de Copyright à passer de 2020 à 2021. Dans ce cas nous irons dans chaque page pour apporter la correction.
Un modèle peut aussi être utilisé pour créer par exemple un menu avec un certain nombre de choix qui sont des liens URL qu’on désire souligner différemment sur chaque page. Une édition manuelle sera nécessaire.
Quoique j’aime bien utiliser les modèles de page, il peut s’avérer nécessaire d’utiliser des modèles de blocs de section. Cela peut s’avérer plus rapide pour les corrections: on retire les blocs à corriger et les remplaçons par nos nouveaux modèles de bloc!
Expliquer comment mettre plusieurs sections!
Conseil de design de pages
Le plus délicat c’est le cas de sections multiples où l’on désire y inclure des images, voire des puzzles d’images dont les bords “collent” bien sans des espacements curieux qui sautent aux yeux.
Des gadgets supplémentaires
Je vais mettre ici en vrac quelques gadgets qui peuvent améliorer nos pages.
Je commencerai par l’extension Piotnet Addons for Elementor. Il va permettre par exemple d’ajouter des info-bulles comme ici pour me contacter:
Encore pas mal de travail …