Préparer ce que vous allez créer
Vous allez publier une page Atelier Céramique : une présentation du cours, un bouton qui mène à la section « Participer à un atelier » et, si vous le souhaitez, une image. La capture ci-dessous montre le résultat à reproduire. Vous pourrez remplacer les exemples par vos propres textes au fil du guide.
Tout l’exercice se fait avec Elementor gratuit, sans abonnement Pro, sans modèle payant et sans code. Vous pouvez même commencer sans image : prévoyez un titre, deux courts textes et le lien ou les coordonnées que vous souhaitez présenter. Les captures viennent d’une installation WordPress de démonstration en français.
Il vous faut une installation WordPress qui autorise l’ajout d’extensions et un compte administrateur. Vérifiez que vous voyez le menu Extensions dans le tableau de bord. Si vous utilisez WordPress pour la première fois, faites l’essai sur une installation locale ou sur la copie de préproduction de votre site. Le guide a été réalisé avec WordPress 7.1.4 et Elementor gratuit 4.4.0. Les libellés des captures correspondent à cette installation en français.
Avant de démarrer sur un site existant, ouvrez une page publique et repérez l’en-tête, le menu et le pied de page. Ils appartiennent généralement au thème. Gardez cette page dans un autre onglet comme point de comparaison. La nouvelle page aura son propre brouillon, ce qui vous permet de travailler sur son contenu et de vérifier le résultat avant publication.
Installer Elementor depuis WordPress
Depuis le tableau de bord, ouvrez Extensions → Ajouter une extension. Dans la zone de recherche, saisissez Elementor. Repérez la fiche Elementor Website Builder publiée par Elementor. Le nom de l’auteur est utile car plusieurs extensions ajoutent des widgets à Elementor et affichent son nom dans leur propre titre. La capture montre la fiche du constructeur à installer.
Cliquez sur Installer maintenant et attendez la fin de l’installation. WordPress remplace normalement ce bouton par Activer. Vous pouvez aussi retrouver Elementor dans Extensions → Extensions installées. Si le lien Activer apparaît sur la ligne, cliquez dessus. Après l’activation, le lien devient Désactiver et l’entrée Elementor apparaît dans le menu du tableau de bord. Ces deux indices permettent de confirmer que l’extension est prête.
Si le téléchargement depuis le tableau de bord échoue, récupérez l’archive ZIP de la version gratuite sur la fiche officielle d’Elementor dans le répertoire WordPress. Revenez dans Extensions → Ajouter une extension et choisissez Téléverser une extension. Sélectionnez le fichier ZIP tel que téléchargé et lancez l’installation. Vous pouvez ensuite activer Elementor depuis la liste des extensions installées. Ce parcours donne accès au même constructeur.
Passer l’accueil et régler les contenus modifiables
Elementor peut afficher un écran de démarrage après l’activation. Il présente des modèles, des services et la possibilité de connecter un compte. Pour notre page, rendez-vous dans les réglages d’Elementor à partir du tableau de bord. Le menu peut regrouper les réglages sous Éditeur. Le premier écran à utiliser est l’onglet Général de Réglages.
Cherchez les types de publication autorisés. Pour cet exercice, gardez Pages coché. Sur la copie de test, nous avons laissé Articles décoché parce que le contenu à construire est une page de présentation. Sur un site où des articles sont déjà gérés avec Elementor, notez d’abord les cases présentes et conservez les types qui font partie du fonctionnement habituel. Enregistrez avec Enregistrer les modifications et vérifiez les cases une fois la page rechargée.
Les options de couleurs et de polices par défaut agissent plus largement sur les éléments Elementor. Pour la première page, conservez le réglage déjà en place et observez le rendu du thème. Vous pourrez changer l’apparence du titre et du bouton dans la page exemple. Ce choix évite d’altérer la présentation des autres pages pendant l’apprentissage.
Créer un brouillon et ouvrir l’éditeur Elementor
Ouvrez Pages → Ajouter une page dans WordPress. Saisissez un nom que vous retrouverez facilement dans le tableau de bord. Le nom choisi pour l’exercice est Atelier Céramique. Enregistrez le brouillon. Si WordPress propose d’abord une composition de page, fermez le choix ou sélectionnez l’option qui vous laisse partir d’une page vide.
Le bouton Modifier avec Elementor apparaît dans l’éditeur WordPress lorsque la page fait partie des types de contenus autorisés. Cliquez dessus. Attendez que le panneau d’éléments et l’aperçu de la page soient prêts avant de commencer. Si le bouton est absent, revenez aux réglages d’Elementor, vérifiez Pages et ouvrez à nouveau votre brouillon. Vérifiez également dans la liste des extensions qu’Elementor est actif.
Le titre saisi dans WordPress permet de reconnaître la page et peut être affiché par le thème. Le titre que vous ajoutez dans Elementor est un élément du contenu. Selon votre thème, les deux peuvent apparaître sur la page publique. Nous vérifierons ce point dans l’aperçu, où le résultat est plus facile à lire que dans les réglages seuls.
Choisir la mise en page et comprendre le panneau
Repérez le panneau des éléments et la zone où s’affiche la page. Le panneau sert à choisir un élément, à modifier son contenu ou à régler son apparence. La zone d’aperçu montre l’ordre des éléments et leurs dimensions. Le panneau de structure, lorsqu’il est ouvert, aide à retrouver un élément qui occupe peu de place ou qui se trouve dans un autre bloc.
Une mise en page fournie par le thème est un bon point de départ. Elle conserve la navigation et le pied de page de votre site. Si le thème limite trop la largeur de la page, vous pouvez essayer le modèle Elementor pleine largeur, puis contrôler que le menu et le pied de page sont toujours présents. Le modèle Canevas Elementor est prévu pour construire sur un canevas indépendant. Utilisez-le si vous avez besoin d’une page sans ces éléments de navigation et vérifiez le résultat dans l’aperçu.
Pour une page de service destinée aux visiteurs du site, gardez un accès au reste du site. Observez d’abord le modèle en place. Vous pourrez ensuite revenir au modèle précédent si le changement réduit la lisibilité ou supprime un élément utile. Le contrôle se fait dans la page de démonstration et n’exige pas de modifier le thème entier.
Planifier les deux parties de la page
La première partie présente le cours. Utilisez un titre précis, par exemple Cours d’initiation à la céramique, puis une phrase qui annonce ce que le visiteur va apprendre. Ajoutez un bouton qui conduit à la suite. Sur un téléphone, une phrase courte permet de voir le bouton rapidement.
La deuxième partie répond à la question suivante du lecteur. Pour notre exemple, elle s’intitule Participer à un atelier. Indiquez comment demander une place ou obtenir des renseignements. L’objectif du bouton de la première partie est de conduire à cette section. Sur un site réel, vous pouvez aussi le diriger vers une page de contact déjà publiée. Choisissez la destination avant de régler les couleurs du bouton.
Imaginez des boîtes empilées : un conteneur regroupe les éléments d’une partie ; un widget est l’un de ces éléments, comme un titre, un texte ou un bouton. Gardez une seule colonne pour ce premier essai. Le titre, le texte et le bouton se liront dans le même ordre sur ordinateur et sur téléphone.
Ajouter le premier conteneur et ses éléments
Cliquez sur le + dans la zone vide de la page. Choisissez Flexbox, puis la disposition verticale à une colonne. Le nouveau cadre sert de conteneur. Vous y déposerez le titre, le texte et le bouton, les uns sous les autres. Si vous ouvrez le panneau Structure en haut de l’éditeur, vous pourrez vérifier que ces trois éléments se trouvent au même niveau, à l’intérieur du conteneur.
Dans le panneau de gauche, repérez Basique. Elementor 4 peut aussi présenter un groupe Éléments atomiques, avec certains noms identiques. Pour suivre les captures de ce tutoriel, utilisez les widgets de Basique. Cliquez sur le petit + au centre du conteneur vide, puis cliquez sur le widget Titre dans le panneau. Vous pouvez aussi essayer de le faire glisser directement. Cliquez sur le titre posé dans la page pour retrouver ses réglages, puis remplacez le texte d’exemple par Cours d’initiation à la céramique.
Ajoutez ensuite Éditeur de texte sous le titre. Si vous préférez ajouter le widget par clic, sélectionnez d’abord le titre dans la page, utilisez le + de la barre supérieure pour revenir à la liste des widgets, puis cliquez sur Éditeur de texte. Vérifiez dans Structure qu’il se trouve juste après le titre, dans le même conteneur. Saisissez par exemple « Apprenez à modeler une première pièce lors d’un atelier guidé. Aucun matériel à apporter. »
Le choix du niveau de titre dépend de ce qui est déjà affiché. Dans notre page exemple, le thème affiche Atelier Céramique en titre principal. Le titre du cours peut donc être un H2, comme celui de la deuxième partie. Si votre page ne comporte aucun titre principal visible et que le titre du cours remplit ce rôle, choisissez H1 pour ce widget. La taille du texte se règle séparément dans Style. Vous pouvez donc faire ressortir un titre sans changer sa place dans la hiérarchie de la page.
Créer la deuxième partie et relier le bouton
Ajoutez un deuxième conteneur sous le premier. Déposez-y un widget Titre et un Éditeur de texte. Saisissez Participer à un atelier comme titre. Dans le texte, expliquez la prochaine étape au visiteur. Pour un exercice, « Les ateliers sont ouverts aux débutants. Consultez la page de contact pour demander les prochains créneaux » suffit. Sur une vraie page, ajoutez le lien vers votre page de contact ou un autre moyen de vous joindre qui est déjà en service.
Pour permettre au bouton de pointer vers cette partie, cliquez sur le titre Participer à un atelier. Si vous avez du mal à le sélectionner, ouvrez Structure et cliquez sur le widget Titre du deuxième conteneur. Ouvrez l’onglet Avancé et repérez le champ ID de CSS. Saisissez participer, sans espace et sans signe #. Cet identifiant doit être unique sur la page. Vous venez de donner une adresse interne au titre de la section.
Revenez au premier conteneur et ajoutez le widget Bouton sous le texte. Dans son onglet Contenu, indiquez Découvrir les cours dans le champ du texte, puis #participer dans le champ Lien. Le signe # apparaît ici parce que vous pointez vers une section de la même page. Le texte du bouton doit rester compréhensible hors contexte. « Découvrir les cours » renseigne mieux sur la destination que « Cliquez ici ».
Il existe une autre approche si vous possédez déjà une page de contact ou une page de réservation. Collez son adresse dans Lien, puis ouvrez cette destination en aperçu pour vérifier qu’elle existe. Le bouton peut ainsi être utile dès votre première page. Aucun formulaire Elementor ni module supplémentaire n’est nécessaire pour un lien vers une page existante.
Ajouter une image depuis la médiathèque
Cette étape est facultative. Placez l’image sous le bouton pour que la première action reste facile à trouver, même sur un petit écran. Choisissez une image qui montre ce que le visiteur va découvrir. Pour l’atelier, l’exemple est un bol sur un tour de potier.
- Sélectionnez le bouton du premier conteneur, puis cliquez sur le + de la barre supérieure pour retrouver la liste des widgets. Cliquez sur Image dans Basique et vérifiez dans Structure qu’il apparaît juste sous le bouton, dans le même conteneur.
- Cliquez sur le widget Image, puis sur sa vignette dans le panneau de gauche. Choisissez une image dans la Médiathèque ou ouvrez Téléverser des fichiers → Sélectionnez des fichiers pour en ajouter une depuis votre ordinateur.
- Sélectionnez le fichier. Dans les détails du média, complétez le Texte alternatif si l’image apporte une information. Exemple : « Bol en terre cuite posé sur un tour de potier ». Une image purement décorative peut garder ce champ vide. Validez la sélection pour revenir à l’éditeur.
- Prévisualisez la page. Si votre fichier est très lourd, préparez une version plus légère avant de le téléverser. Vérifiez en vue mobile que l’image tient dans la colonne et que le bouton reste au-dessus.
Régler les espacements, le texte et le bouton
Sélectionnez le premier conteneur dans Structure. Dans le panneau Modifier Flexbox, ouvrez Style, puis Espacement. Dans un conteneur classique, cherchez la marge interne dans Avancé. Pour un bloc dont le fond doit entourer le texte, essayez 24 pixels de marge interne de chaque côté. Sur un téléphone, réduisez cette valeur si le texte manque de place. La marge interne sépare le contenu du bord du bloc. La marge externe sépare le bloc des éléments voisins.
Pour le bouton, ouvrez Style et regardez ensemble la couleur du texte et celle de l’arrière-plan. Par exemple, du blanc sur un rouge sombre donne un repère facile à trouver sur un fond clair. Contrôlez le bouton au repos et au survol. Sur téléphone, prévoyez assez d’espace autour pour l’atteindre avec le doigt. Si vous changez la typographie du titre, vérifiez aussi ce que donne la deuxième section, qui doit rester facile à repérer dans la même page.
Ces réglages peuvent rester locaux à la page. Pour une première création, vous pouvez garder les polices et les couleurs héritées du thème et limiter vos modifications aux espacements. Lorsque vous voudrez établir une même palette sur plusieurs pages, commencez par relever les couleurs de votre site et faites un essai sur une copie. Vous saurez alors distinguer une modification de widget d’une modification qui s’applique à l’ensemble du site.
Vérifier la page en ordinateur et en mobile
Dans la barre supérieure, passez de Ordinateur à Tablette en mode portrait, puis à Portrait mobile. Dans la vue mobile, lisez la page du haut vers le bas. Cherchez un titre qui déborde, un texte trop près du bord, un bouton difficile à atteindre ou un espace vide disproportionné. Un titre réparti sur deux lignes peut rester très lisible. Réduire fortement sa taille pour le faire tenir sur une seule ligne n’est généralement pas nécessaire.
Si un réglage affiche une icône d’appareil, vérifiez le mode choisi avant de modifier sa valeur. Par exemple, vous pouvez réduire une marge interne sur mobile en conservant la valeur de l’ordinateur. Revenez ensuite au mode ordinateur pour vérifier que la présentation large vous convient toujours. Les champs sans réglage par appareil peuvent s’appliquer à toutes les vues.
Ouvrez Prévisualiser les changements. Sur cette page, cliquez sur Découvrir les cours et vérifiez que la section Participer à un atelier s’affiche. Si le bouton ne mène nulle part, vérifiez d’abord le couple #participer dans le bouton et participer dans le champ ID de CSS. Essayez aussi d’atteindre le bouton avec la touche Tab, puis de l’activer avec Entrée. L’aperçu aide à contrôler ces interactions loin des poignées de l’éditeur.
Publier et contrôler ce que voit un visiteur
Lorsque vous êtes prêt, cliquez sur Publier. Si vous souhaitez reprendre plus tard, ouvrez les options à côté de Publier et enregistrez le brouillon. Pour une page déjà publiée, le bouton principal enregistre vos modifications sur la version publique : ouvrez d’abord l’aperçu si vous voulez les relire.
Publier une page ne l’ajoute pas automatiquement à toutes les navigations. Si elle doit apparaître dans le menu, ajoutez-la depuis les réglages de navigation de votre thème. Avec un thème basé sur les blocs, vous trouverez généralement la navigation dans Apparence → Éditeur. Avec un thème classique, cherchez Apparence → Menus. Laissez cette étape de côté si vous souhaitez seulement partager l’adresse directe.
- Ouvrez l’adresse publique depuis la liste Pages, puis copiez-la dans une fenêtre privée, sans être connecté à WordPress. Vérifiez que vous voyez la page, son menu et son pied de page.
- Cliquez sur le bouton. Il doit mener à la section « Participer à un atelier », ou à la page de contact choisie. Vérifiez que les coordonnées et les liens sont définitifs avant de partager l’adresse.
- Refaites le test sur votre téléphone si possible. Lisez le titre, ouvrez le lien et vérifiez que vous n’avez pas à faire défiler la page horizontalement.
Résoudre les blocages courants et savoir quoi faire ensuite
Vous voyez deux titres. Ouvrez Réglages de Page dans la barre supérieure. Si le thème prend cette option en charge, Masquer le titre permet de retirer celui affiché automatiquement. Prévisualisez la page après ce changement. Si le thème l’affiche toujours, gardez son titre comme titre principal et adaptez le titre Elementor, ou comparez les modèles disponibles sur le brouillon. Gardez un titre principal visible et une hiérarchie claire pour les sections.
L’éditeur et le site public affichent des versions différentes. Vérifiez l’adresse et l’état de publication. Après une modification, enregistrez la page puis comparez à nouveau depuis une fenêtre privée. Si l’ancienne version persiste, videz le cache de cette page dans l’outil que vous utilisez, puis refaites le test. Vérifiez sur un brouillon ou une copie avant de désactiver une extension active sur un site en service.
Un widget vous demande une mise à niveau. Revenez à la liste Basique pour retrouver les titres, l’éditeur de texte, le bouton et l’image utilisés dans le guide. Si vous voulez recueillir des messages, le tutoriel WPForms Lite en fin de page montre comment créer un formulaire gratuit et vérifier qu’un message arrive dans votre boîte de réception.
Vous avez maintenant une page que vous pouvez adapter à un service, une association ou une activité locale. Avant d’ajouter de nouveaux éléments, remplacez le texte de démonstration, vérifiez le lien du bouton et relisez la page sur un petit écran. Ces trois vérifications comptent davantage pour votre premier visiteur que le nombre de widgets présents.
