Modifier la page d'accueil avec Elementor : ajouter des modules (texte, images, boutons, etc.)

Apprendre à ajouter des modules de base est une compétence essentielle pour concevoir des pages avec Elementor. Ce chapitre vous montrera comment ajouter du texte, des images, des boutons et d'autres éléments courants à la main, et comment ajuster leurs styles pour donner à votre page d'accueil sa première forme.

Préparation : Entrer dans le mode d'édition d'Elementor

1. Connectez-vous au backend de WordPress, allez dans "Pages" → Trouvez "Home" (ou la page que vous souhaitez modifier) et cliquez sur "Edit".
2. Cliquez sur le bouton "Edit with Elementor" (bleu avec l'icône Elementor) en haut de la page pour accéder à l'interface d'édition visuelle.

Une fois entré, l'interface est divisée en trois sections :

• Gauche : Panneau du module(contient tous les éléments qui peuvent être ajoutés)
• Centre : zone d'édition(Affichage en temps réel des effets de page)
• A droite : Panneau de style(Les styles détaillés peuvent être ajustés lorsqu'un élément est sélectionné)

Étape 1 : Ajouter le module "Title" (titre du texte)

Les titres constituent le "squelette" de la page et servent à guider les visiteurs dans la hiérarchie du contenu.

1. Trouver le module d'en-têteDans le panneau gauche des modules, localisez le module "Titre" (icône "T") sous la catégorie "Basique".
2. Glisser-déposer pour ajouter à la pageAppuyez sur le module "Titre" et maintenez-le enfoncé, faites-le glisser jusqu'à la position "+ Glisser l'élément ici" dans la zone d'édition centrale et relâchez la souris. La page s'affiche alors avec un titre par défaut : "Ceci est le titre".
3. Modifier le contenu du titreSélectionnez le module de titre que vous venez d'ajouter et un panneau d'édition apparaîtra sur la droite :
   • Dans "Contenu" → "Texte du titre", supprimez le texte par défaut et entrez votre titre (par exemple, "Bienvenue sur mon blog personnel").
   • Sélectionnez le niveau dans "Niveau d'en-tête" (H1 est le plus grand, adapté aux titres principaux ; H2 est le deuxième plus grand, adapté aux sous-titres, et est sélectionné en fonction du niveau de contenu).
4. Ajuster le style du titreCliquez sur l'onglet "Styles" dans le panneau de droite pour le personnaliser :
   • style calligraphiqueSélectionnez votre police préférée (par exemple "Microsoft Black" "Arial") dans la liste déroulante "Police".
   • ampleurTaille de la police : Faites glisser le curseur "Taille de la police" ou saisissez directement la valeur (la taille recommandée pour les titres est comprise entre 24 et 48 px).
   • couleurCouleur du texte : Cliquez sur la case "Couleur du texte" pour sélectionner la couleur du titre (par exemple, noir, bleu foncé).
   • s'aligner dans le bon ordreAlignement du texte : Cliquez sur le bouton "Alignement du texte" pour définir le titre à gauche, au centre ou à droite (il est recommandé de centrer le titre principal de la page d'accueil).

Étape 2 : Ajouter le module "Paragraphe" (corps du texte)

Les paragraphes sont utilisés pour présenter des détails, comme un synopsis, une description, etc.

1. Ajouter un module de paragrapheTrouvez le module Paragraphe (l'icône est le symbole du paragraphe) dans la catégorie "Basic" à gauche, et glissez-le sous le module Titre.
2. Modifier le contenu du paragrapheSélectionnez le module paragraphe et saisissez le contenu (par exemple, "Ici, je partage mes leçons de vie et mes notes d'étude, bienvenue pour échanger souvent !) Bienvenue pour communiquer souvent !
3. Optimiser les styles de paragraphePassez à l'onglet Styles :
   • taille de la policeLa taille de l'image doit être comprise entre 16 et 18 px (pour faciliter la lecture).
   • 行高: Ajuster à 1,5-1,8 fois (pour un espacement plus confortable du texte).
   • couleurLe titre doit être d'une couleur qui se distingue du titre (par exemple, gris foncé pour éviter qu'il ne soit trop proche de la couleur du fond d'écran).

Étape 3 : Ajouter le module "Image" (insérer une image)

Les images donnent vie à la page et il est recommandé de choisir des images claires et pertinentes (par exemple, des photos personnelles, des images de produits, des paysages).

1. Télécharger ou sélectionner des imagesTrouvez le module "Images" dans la catégorie "Basic" à gauche et faites-le glisser vers le bas du paragraphe. Sélectionnez le module "Image" et cliquez sur "Sélectionner l'image" dans "Contenu" → "Image" sur le côté droit :
   • Si l'image se trouve déjà sur votre ordinateur, cliquez sur "Télécharger un fichier" → Sélectionnez l'image → Cliquez sur "Sélectionner".
   • Si vous avez déjà effectué un téléchargement, vous pouvez directement sélectionner l'image existante dans la bibliothèque multimédia.
2. Réglage de l'affichage des imagesPassez à l'onglet Styles :
   • taillesDans "Largeur", définissez la proportion de l'image sur la page (par exemple, 100% signifie pleine largeur d'écran, 80% signifie plus étroite).
   • coin arrondi: Faites glisser le curseur du rayon de la bordure pour arrondir les coins de l'image (plus la valeur est grande, plus les coins sont arrondis).
   • fig. une expérience traumatisante qui hante quelqu'unPour ajouter une légère ombre à l'image (pour lui donner un aspect plus stratifié), activez l'option "Box Shadow" (ombre de la boîte).
3. Ajouter une description de l'image (facultatif)La saisie de descriptions d'images (par exemple "Mes photos de voyage") dans "Contenu" → "Texte alternatif" aide les moteurs de recherche à comprendre le contenu des images et améliore le référencement.

Etape 4 : Ajouter le module "Bouton" (clic guidé)

Les boutons sont souvent utilisés pour guider les visiteurs vers des actions, telles que "En savoir plus", "Me contacter", "Acheter maintenant", etc.

1. Ajouter un module de boutonsTrouvez le module "Boutons" dans la catégorie "Basique" à gauche, et glissez-le sous l'image.
2. Définition du contenu des boutons et des liensVérifiez le module de boutons, sur le côté droit dans "Contenu" :
   • copies: Saisissez le texte du bouton (par exemple, "Voir mes messages").
   • lienCliquez sur le champ de saisie à côté de "Dynamique" et entrez l'adresse du lien (par exemple, l'adresse de la page de votre blogroll ou un lien externe).
     • Si vous créez un lien vers une page de la station, vous pouvez cliquer sur l'icône "Sélectionner une page" à droite du champ de saisie pour sélectionner directement la page cible.
3. Conception de styles de boutonsPassez à l'onglet "Style" pour créer des boutons attrayants :
   • couleurChoisissez le blanc pour la "Couleur du texte" et des couleurs vives pour la "Couleur d'arrière-plan" (par exemple, bleu, orange, pour s'harmoniser avec la couleur principale de la page).
   • taillesTaille du bouton : Sélectionnez "Moyenne" ou "Grande" pour la "Taille du bouton" afin de rendre le bouton plus facile à cliquer.
   • géométrieRéglez le "rayon de la bordure" entre 5 et 10 px (les coins légèrement arrondis sont plus esthétiques).
   • ** Effet de survol ** : cliquez sur l'onglet "survol" pour définir la couleur (par exemple, approfondir la couleur) lorsque la souris survole l'écran, afin d'améliorer la sensation d'interactivité.

Étape 5 : Ajuster l'espacement des modules (pour une page plus nette)

Après l'ajout de plusieurs modules, il peut y avoir des problèmes d'espacement entre les modules, et la disposition devra être ajustée :

1. Modules sélectionnésCliquez sur le bord du module (une bordure bleue apparaît).
2. Ajustement des marges extérieuresDans le panneau de droite "Avancé" -> "Marge", définissez la distance entre le module et les éléments supérieurs et inférieurs (par exemple, "Marge supérieure" est définie à 30px pour augmenter l'espacement avec le module supérieur).
3. s'aligner: Appuyer sur la touche et la maintenir enfoncée Ctrl (ou Command clé) Sélectionnez plusieurs modules en même temps et cliquez sur le bouton "Aligner" de la barre d'outils supérieure (par exemple "Aligner au centre") pour aligner les éléments plus proprement.

Étape 6 : Sauvegarde et prévisualisation

1. Enregistrer les modificationsCliquez sur le bouton "Mettre à jour" dans le coin inférieur gauche de la page (il est recommandé de sauvegarder les modifications à temps après chaque révision).
2. Effet de prévisualisationCliquez sur le bouton "Aperçu" dans le coin supérieur gauche et sélectionnez "Aperçu du bureau", "Aperçu de la tablette" et "Aperçu du téléphone portable" pour vérifier l'effet d'affichage sur différents appareils (assurez-vous que le texte ne se chevauche pas et que l'image n'est pas déformée sur le téléphone portable).

Conseils pour les débutants

• Les modules peuvent être ajoutés plusieurs fois : si vous avez besoin de plus d'un paragraphe ou d'une image, vous pouvez directement faire glisser et déposer le module correspondant plusieurs fois.
• Supprimer un module : Après avoir sélectionné un module, appuyez sur le clavier Delete ou cliquez sur l'icône "Corbeille" en haut du module.
• Copier le module : Après avoir sélectionné un module, cliquez sur l'icône "Copier" pour copier rapidement des éléments du même style (il suffit de modifier le contenu).

Grâce aux étapes ci-dessus, vous avez maîtrisé les compétences d'ajout de modules de base d'Elementor. Ensuite, vous pouvez essayer d'ajouter des modules "icon", "divider", "list" et d'autres modules pour rendre la page d'accueil plus riche !