Elementor est le constructeur de pages le plus puissant pour créer du contenu dans un site WordPress.
Même si vous n’avez pas de compétences en création de sites web, vous pouvez apprendre rapidement à l’utiliser.
C’est ce que je propose à mes clients, après avoir créé la maquette et la structure de leur site WordPress.
La création d’une nouvelle page (ou d’un nouvel article) ne se fait pas depuis Elementor, mais depuis le back-office de votre site WordPress.
La raison est simple : tous les éléments de base (titre principal, description pour les moteurs, thème utilisé, etc) doivent être générés à partir de l’outil qui gère votre site web : WordPress.
Pour créer une nouvelle page :
Une fois la création de page initiée avec WordPress, vous allez devoir lui donner un titre principal (celui qui sera affiché dans Google).
Après avoir saisi le titre, allez en haut et à droite de l’écran et cliquez sur « Enregistrer comme brouillon« .
En effet, il est inutile de publier votre page et de la rendre visible aux internautes tant qu’elle n’est pas complète.
Enfin, cliquez sur le bouton « Modifier avec Elementor« .
Elementor comporte deux principales zones de travail.
Zone 1 : tous les éléments de construction (les widgets) sont rangés dans la colonne de gauche, par catégorie (Mise en page, Basique, Pro, WordPress, etc.)
Zone 2 : sous la zone d’affichage du contenu déjà créé (zone vide en blanc pour l’instant), un bouton + vous permet d’ajouter de nouvelles structures.
Elles vous permettront de choisir votre mise en page.
Quand vous cliquez sur le bouton « + » dans la zone prévue pour ajouter de nouvelles structures, vous voyez apparaitre une image vous proposant de choisir entre une mise en page « Flexbox » ou une mise en page « Grille« .
Choisissez la mise en page « Flexbox » : elle permettra d’adapter le contenu selon qu’il sera affiché sur un écran d’ordinateur ou un écran de téléphone portable.
Elementor vous propose ensuite de choisir la structure de votre bloc de mise en page. Cela vous permet de créer des colonnes.
Choisissez la 3e structure : celle qui propose 2 colonnes.
Un nouveau composant muni d’une poignée rose apparait dans la zone d’affichage de votre brouillon de page :
Cette nouvelle structure de mise en page en deux colonnes comporte deux éléments à bien distinguer.
Elément 1 : c’est le conteneur des deux colonnes. Il a une poignée rose. Il est entouré de pointillés roses.
Elément 2 (et 3 à droite) : Ce sont deux zones munies chacune d’un bouton « + ».
En cliquant sur ces boutons, vous allez pouvoir ajouter des widgets, à choisir dans la colonne des widget sur la gauche de votre écran.
Cliquez sur le bouton « + » de la colonne de gauche de votre structure de mise en page et choisissez le widget « Image » rangé dans la catégorie « Basique« .
Cliquez sur le bouton « + » de la colonne de droite de votre structure de mise en page et choisissez le widget « Editeur de texte » rangé dans la catégorie « Basique ».
Lorsque vous cliquez sur votre widget image, vous voyez apparaître sa fenêtre de paramétrage dans la colonne à gauche de votre écran.
Elle comporte trois onglets :
Vous le voyez, les possibilités de réglages sont très nombreuses. Prenez le temps de tout essayer.
Important : les dimensions d’une image téléchargée doivent être identiques à celles de son affichage afin d’optimiser son temps de chargement.
Ne téléchargez pas de gros fichiers d’images. La résolution d’une image pour le web est d’au maximum 96 dpi.
Optez pour un fichier de type PNG pour les logos ou les schémas (peu de couleurs et fond pouvant être transparent).
Optez pour un format JPG pour les photos.
Ces deux formats peuvent aussi être remplacés par un des nouveaux formats tels que le WebP de Google qui compresse mieux les images.
Après avoir cliqué sur le widget « Editeur de texte » que vous avez placé dans la colonne de droite de votre structure de mise en page, vous voilà prêt à écrire le texte de votre choix.
L’éditeur de texte comporte 3 onglets :
Encore une fois, les possibilités de paramétrage sont très nombreuses. Il me serait difficile de tout énumérer ici.
Important : vos textes doivent être utiles et intéressants. Il ne faut surtout pas recopier du texte existant ailleurs.
ChatGPT ne crée pas de contenu intéressant. Il se contente de reformuler des phrases d’autres sites web.
Quand vous aurez complété votre nouvelle page en y ajoutant vos textes et vos images, il faudra vérifier si elle est « responsive design« .
Autrement dit, voir si l’affichage du contenu est correct aussi bien sur un écran d’ordinateur que sur un écran de tablette ou de téléphone mobile.
Tout en haut de votre écran d’ordinateur, dans une zone sur fond noir, Elementor propose trois pictos :
A vous de jouer pour adapter vos réglages afin que l’affichage soit correct dans ces trois modes.
Pour les images, je vous recommande d’opter pour une largeur minimale de 400 pixels afin que vous images soient en pleine largeur sur un mobile.
Si vous avez opté pour des composants de type Flex comme je vous l’avais conseillé plus haut, vous verrez que vos contenus s’adaptent en se plaçant les uns en dessous des autres.
Pour le texte : pensez à créer des marges internes (padding) afin que vos texte ne soient pas collés aux bord de votre écran de mobile.
Si vous ne voulez pas avoir à tout modifier, élément par élément, il va falloir apprendre à utiliser les styles CSS.
C’est le même principe que sous un traitement de textes de type Word.
Les styles sont généralement créés à partir du thème choisi pour votre site WordPress.
Ils peuvent aussi être définis dans Elementor.
Dans un autre tutoriel, je vous apprendrai à créer votre propre feuille de styles sous Elementor.
Tant que votre page est en mode « brouillon », elle n’est visible ni des internautes, ni des moteurs de recherche.
Maintenant que vous avez terminé de tout créer, il est temps de rendre visible votre œuvre d’art !
En haut et à droite de l’écran Elementor, vous pouvez cliquer sur le bouton « Publier » et choisir de voir la page (picto en forme d’oeil) telle qu’un internaute la verra.
Attention : une fois qu’une page a été publiée, ses éléments déjà publiés resteront visibles, même si vous enregistrez de nouveau comme la page comme « brouillon ».
Si vous souhaitez cacher temporairement votre page, cela se fait depuis l’éditeur de WordPress, en optant pour un statut « privé » par exemple.
J’espère que ces informations de base vous aideront à créer vos premières pages.
Prenez le temps de lire les tutoriels proposés par Elementor (cliquez sur la bulle d’aide, c’est à dire le point d’interrogation à gauche du bouton « Publier »).
Exercez-vous avant de rendre publiques des pages, afin de ne pas abimer la réputation de votre entreprise.
Un site web mal conçu donne en effet une sensation d’amateurisme, même si ce que vous publiez semble intéressant.
A chacun son métier ! Je comprend tout à fait que vous puissiez trouver les tarifs d’un créateur de sites web trop élevés, mais quand vous aurez créé quelques pages, vous comprendrez que cela rémunère la qualité et le temps passés à créer ces pages.
Je suis à votre disposition pour le faire si cela vous intéresse.
En plus de savoir utiliser Elementor, je suis surtout un expert en référencement naturel (SEO).
Je crée du contenu en pensant en permanence à la qualité de son SEO.
Vous pouvez placer des liens sur différents éléments d’un contenu.
Pour un référencement efficace, faites en sorte que le lien soit placé sur du contenu (texte, image) correspondant au sujet détaillé dans la page reliée par ce lien.
Il faut d’abord imaginer la structure de votre page avant de se lancer dans sa création. Définissez chacun de ses titres et sous-titres, en respectant la hiérarchie (h2, h3, h4…). Créez un nouveau conteneur à chaque fois que vous démarrez un titre important (h2).
Les images d’une page ne doivent pas être choisies uniquement pour décorer la page, mais aussi pour apporter une information complémentaire au texte. N’oubliez pas d’ajouter une description dans leurs paramètres.
Si votre page est très longue (plus de 2000 mots), ajoutez une table des matières au début de la page et des liens internes (ancres) qui permettront à l’internaute de descendre directement à la portion de la page qui l’intéresse.
L’oeil de l’internaute doit pouvoir détecter rapidement la partie de la page qui l’intéresse. Pour cela, le contenu doit être bien aéré. Laissez des espaces entre les titres et les textes. Idem entre les images et les textes à proximité. Ne collez pas les textes aux bords de l’écran.
La marge externe (margin) est la marge entre le composant (widget) et ce qui l’entoure.
La marge interne (padding) est la marge entre le bord du composant et ce qu’il contient.
Voici une illustration pour mieux expliquer cela :
Retrouvez-moi sur les réseaux sociaux :
Je suis Activateur pour France Num dans le Var (83)
Découvrez mes prestations de pilote de drone sur mon site dronoclip.fr
(c) Diginoman – Tous droits réservés
