Comment Personnaliser vos Pages avec Elementor sur WordPress ?

Elementor est le constructeur de page (page builder) visuel le plus populaire sur WordPress. Il permet de créer des mises en page sur-mesure en glisser-déposer (drag & drop) sans toucher au moindre code CSS ou HTML. Que vous utilisiez un template LeReveDigital ou une page blanche, ce tutoriel vous détaille son fonctionnement de A à Z.

1. Comprendre la structure sémantique d'Elementor

Pour construire des pages propres et rapides à charger, Elementor utilise un système d'emboîtement hiérarchique très simple :

• Le Conteneur / Section : C'est la zone globale qui définit le fond (couleur, image de fond, vidéo) et la largeur de la ligne.
• La Colonne : Située à l'intérieur de la section, elle permet d'aligner du contenu côte à côte (ex: 2 colonnes = 50% / 50%).
• Le Widget : C'est l'élément de contenu final (texte, image, bouton, formulaire, vidéo) déposé dans la colonne.

2. Modifier du texte, des images et des boutons

L'édition visuelle dans Elementor se déroule directement en direct :

1. Modifier un texte : Cliquez simplement sur le texte sur la page. Dans le panneau latéral gauche, l'onglet Contenu vous permet de modifier la rédaction, et l'onglet Style permet de changer la typographie, la taille et la couleur.
2. Remplacer une image : Cliquez sur le bloc image. Dans le panneau de gauche, survolez l'aperçu et cliquez sur Choisir une image pour ouvrir votre médiathèque WordPress.
3. Personnaliser un bouton : Cliquez sur le bouton pour changer le texte, coller le lien de destination et ajuster les couleurs d'état normal et d'au survol (hover).

3. Gérer l'affichage Responsive (Mobile & Tablette)

Plus de 60 % du trafic web s'effectue sur smartphone. Elementor intègre un mode responsive puissant pour adapter vos pages :

1. En bas du panneau latéral gauche, cliquez sur l'icône Mode Responsive (icône représentant un écran et un smartphone).
2. Une barre d'outils supérieure apparaît : basculez entre Ordinateur, Tablette et Mobile.
3. Ajustez les tailles de police, les marges (padding / margin) ou l'alignement. Les modifications portant une petite icône mobile ne s'appliqueront que sur mobile sans casser la version ordinateur !

4. Sauvegarder et restaurer les révisions

Pour éviter toute perte de travail :

• Enregistrer les modifications : Cliquez sur le bouton vert Mettre à jour en bas à gauche.
• Annuler une erreur : Utilisez le raccourci clavier CTRL + Z (sur Windows) ou CMD + Z (sur Mac).
• Historique des révisions : Cliquez sur l'icône Historique (petite horloge en bas à gauche) pour revenir à un état précédent sauvegardé.

FAQ — Questions fréquentes sur Elementor

Quelle est la différence entre Elementor Free et Elementor Pro ?

La version gratuite donne accès aux widgets de base (titres, textes, images, boutons). Elementor Pro ajoute la création d'en-têtes/pieds de page (Theme Builder), la gestion des formulaires, l'intégration WooCommerce avancée et des effets de mouvement.

Pourquoi mon changement ne s'affiche pas sur mon site en navigation privée ?

Si vos modifications n'apparaissent pas après avoir cliqué sur Mettre à jour, videz le cache de votre extension de performance (comme LiteSpeed Cache ou WP Rocket) ainsi que le cache de votre navigateur.