DEVIS GRATUIT
25 ANS D'EXPÉRIENCE POUR VOTRE PROJET !
Créer un site web professionnel était autrefois réservé aux développeurs expérimentés ou aux agences spécialisées. La maîtrise du HTML, du CSS, du PHP et du JavaScript était indispensable pour obtenir un résultat personnalisé et performant. Mais l’apparition des constructeurs de pages (page builders) a radicalement changé la donne. Parmi eux, Elementor s’est imposé comme l’un des outils les plus puissants, flexibles et populaires de l’écosystème WordPress.
Elementor, lancé en 2016, a rapidement séduit les utilisateurs par sa promesse simple mais ambitieuse : permettre à n’importe qui de créer un site web attrayant, responsive et fonctionnel sans écrire une seule ligne de code. Grâce à son interface en glisser-déposer (drag and drop), à ses widgets variés et à sa compatibilité avec la majorité des thèmes WordPress, Elementor est devenu un incontournable pour les freelances, les petites entreprises, les blogueurs, les artistes et même certaines agences web.
Mais si Elementor est facile à prendre en main, il cache aussi une grande richesse fonctionnelle. Ce guide s’adresse donc à un public large : débutants qui découvrent Elementor, utilisateurs intermédiaires qui souhaitent approfondir leurs connaissances, voire professionnels qui veulent gagner en efficacité ou découvrir des fonctionnalités avancées.
Nous allons, au fil des pages, décomposer chaque aspect de l’outil pour que vous puissiez :
comprendre le fonctionnement général d’Elementor,
construire des pages attrayantes et professionnelles,
créer des sites cohérents et optimisés,
personnaliser tous les éléments de votre site (y compris l’en-tête, le pied de page, les articles de blog…),
tirer parti de la puissance d’Elementor Pro et d’outils complémentaires.
Ce guide sera entièrement structuré, progressif et illustré d’exemples concrets, afin que vous puissiez mettre en pratique chaque étape sur votre propre site WordPress. À la fin de votre lecture, vous serez capable de bâtir un site complet, beau, performant, responsive, et surtout parfaitement adapté à vos besoins.
Bienvenue dans l’univers d’Elementor. Prêt à construire votre site comme un pro ? Commençons par les bases.
Avant de plonger dans la construction de pages, il est essentiel de bien comprendre ce qu’est Elementor, ce qui le distingue des autres outils, et les possibilités qu’il offre.
Elementor est un constructeur de pages (« page builder ») pour WordPress. Il permet de créer et de modifier des pages web par simple glisser-déposer, en voyant immédiatement le résultat à l’écran. Ce système de conception « en temps réel » (live editing) facilite énormément le processus de création, notamment pour les utilisateurs non-techniciens.
Elementor fonctionne en complément de WordPress, et non comme un outil indépendant. Il s’intègre dans l’interface WordPress pour vous permettre de concevoir :
des pages de contenu (accueil, à propos, services, contact…),
des articles de blog,
mais aussi, avec la version Pro, des éléments plus techniques comme le header, le footer, les modèles d’article, ou encore des archives de blog, voire des pages WooCommerce.
L’avantage majeur d’Elementor est sa souplesse : au lieu de se limiter aux modèles proposés par votre thème WordPress, vous pouvez tout personnaliser visuellement.
Elementor existe en deux versions :
Suffisante pour créer des pages simples avec du contenu statique.
Propose une sélection de widgets de base : titre, image, texte, vidéo, bouton, séparateur, Google Maps, icône, etc.
Permet de créer des mises en page à colonnes, avec sections, en toute liberté.
Compatible avec la majorité des thèmes WordPress.
Déverrouille des fonctionnalités avancées et professionnelles :
Theme Builder : personnalisation du header, footer, blog, page produit, etc.
Formulaires complets (contact, inscription, newsletter…).
Widgets dynamiques : menu, carrousel, posts récents, témoignages…
Conditions d’affichage (afficher un modèle seulement sur certaines pages).
Intégrations externes (Mailchimp, HubSpot, WooCommerce, etc.).
Fonctionnalités marketing : popup builder, A/B testing avec des plugins, etc.
La version Pro est payante à l’année (à partir de 59 $/an pour un site), mais représente un investissement rentable si vous voulez aller au-delà d’un simple site vitrine.
Voici ce qui distingue Elementor de ses concurrents :
Tout se fait par glisser-déposer, sans ligne de code. Vous voyez en direct ce que vous créez.
Les blocs, les widgets et les modèles proposés par Elementor respectent les standards UX/UI modernes. Même sans être designer, vous pouvez obtenir un site esthétique.
Vous pouvez construire des mises en page très variées, même complexes, sans dépendre de la structure imposée par votre thème.
De nombreux tutoriels, modèles gratuits, plugins compatibles et forums d’entraide existent en ligne, en français comme en anglais.
De nombreux add-ons (extensions) sont disponibles pour enrichir Elementor : Essential Addons, Crocoblock, JetElements, etc.
Même si Elementor est un excellent outil, il n’est pas parfait. Voici quelques limites ou points d’attention :
Certains sites construits uniquement avec Elementor peuvent être un peu lourds, notamment si on utilise beaucoup d’animations ou d’effets visuels. Il est donc important d’optimiser les images, d’utiliser un plugin de cache, et de rester sobre dans le design.
Une fois que vous avez construit vos pages avec Elementor, vous devenez dépendant du plugin. Si vous le désactivez, le contenu reste, mais la mise en page est perdue. Cela n’est pas un problème si vous vous engagez à long terme avec l’outil.
Créer une page simple est facile. Mais maîtriser les modèles dynamiques, le Theme Builder, les réglages responsives ou les intégrations avec des CPT demande du temps et de la pratique.
Elementor est souvent comparé à d’autres outils de création visuelle. Voici quelques différences notables :
Elementor vs Gutenberg (éditeur natif de WordPress) :
Gutenberg progresse, mais reste encore limité par rapport à Elementor en termes de flexibilité et d’intuitivité.
Elementor vs Divi :
Divi est aussi puissant, mais plus lourd et moins intuitif selon de nombreux utilisateurs. Elementor est souvent préféré pour sa clarté d’interface.
Elementor vs Beaver Builder :
Beaver Builder est plus sobre, plus orienté développeur ou agence, avec moins de widgets. Elementor est plus riche en fonctionnalités natives.
En résumé : Elementor se place comme un excellent équilibre entre simplicité, puissance et évolutivité.
Elementor fonctionne avec quasiment tous les thèmes WordPress bien codés. Toutefois, certains thèmes sont conçus spécialement pour tirer parti de ses capacités.
Voici quelques recommandations :
Hello Theme (officiel) : thème ultra-léger développé par l’équipe Elementor. Idéal si vous utilisez Elementor Pro pour construire tout votre site.
Astra : rapide, compatible avec Elementor, et très personnalisable.
OceanWP : riche en options, très utilisé.
GeneratePress : performant, parfait pour les sites SEO.
Il est généralement conseillé de choisir un thème léger et épuré, car Elementor va prendre le relais pour la mise en page.
Elementor est bien plus qu’un simple plugin : c’est un véritable outil de conception visuelle, aussi adapté aux débutants qu’aux professionnels du web. Sa version gratuite permet déjà de faire beaucoup, tandis que la version Pro ouvre des possibilités quasi infinies. Avant de commencer à créer des pages concrètes, il est important de bien comprendre cette logique de fonctionnement, car elle structure toute l’approche Elementor.
Dans la partie suivante, nous verrons comment installer Elementor et bien configurer votre environnement WordPress avant d’entrer dans la création concrète.
Avant de créer ta première page avec Elementor, il est essentiel de préparer ton environnement WordPress. Cette étape garantit une base propre, stable et performante sur laquelle Elementor pourra pleinement s’exprimer.
Elementor est un plugin WordPress, il nécessite donc quelques éléments de base :
Tu as deux options :
Hébergement mutualisé classique (ex. : o2switch, Infomaniak, Hostinger, Ionos…).
Offres gérées “WordPress” (plus simples, mais parfois limitées).
🔧 Elementor recommande PHP 7.4 ou supérieur, MySQL 5.6 ou MariaDB 10.1 ou supérieur, et WordPress à jour (au minimum version 5.6, idéalement la dernière).
Tu dois avoir ton domaine actif et pointé vers ton hébergement. Par exemple : www.tonsite.fr
Indispensable pour la sécurité et pour les performances SEO. La plupart des hébergeurs le proposent gratuitement (via Let’s Encrypt).
La majorité des hébergeurs permettent une installation WordPress en un clic. Si tu dois l’installer manuellement :
Télécharge WordPress depuis https://wordpress.org.
Envoie les fichiers sur ton serveur via FTP.
Crée une base de données.
Lance l’installation via ton navigateur et suis les instructions.
Connecte-toi à ton tableau de bord WordPress.
Va dans Extensions > Ajouter.
Recherche “Elementor”.
Clique sur Installer, puis sur Activer.
Tu peux maintenant éditer n’importe quelle page avec Elementor (bouton “Modifier avec Elementor”).
Va sur https://elementor.com et achète une licence Pro.
Télécharge le fichier ZIP du plugin Elementor Pro.
Dans WordPress : Extensions > Ajouter > Téléverser une extension.
Téléverse le fichier ZIP et active le plugin.
Une fois Elementor Pro activé, entre ta clé de licence dans les réglages pour activer toutes les fonctionnalités.
⚠️ Attention : Elementor Pro ne fonctionne que si la version gratuite est installée et active.
Elementor fonctionne avec presque tous les thèmes WordPress, mais certains sont mieux optimisés.
Voici les meilleurs choix :
Ultra-léger, sans fioritures.
Idéal si tu veux construire tout le site avec Elementor (header, footer, etc.).
Fortement recommandé avec Elementor Pro.
Très populaire, rapide et compatible Elementor.
Propose de nombreux modèles prédéfinis.
Excellent pour les sites axés SEO et performance.
Léger, propre, et très fiable.
Puissant, riche en fonctionnalités, parfois un peu plus complexe.
Pour installer un thème :
Va dans Apparence > Thèmes > Ajouter.
Recherche le thème voulu (ex. : “Hello Elementor”).
Clique sur Installer, puis Activer.
WordPress installe par défaut certains contenus inutiles. Pour partir sur une base propre :
Supprime les pages par défaut (ex. : “Sample Page”).
Supprime les articles de démonstration (“Hello world!”).
Désactive ou supprime les extensions inutiles.
Configure tes permalinks (Réglages > Permaliens > “Nom de l’article”).
Avant de commencer à construire tes pages avec Elementor, crée les pages de base du site :
Va dans Pages > Ajouter.
Crée les pages suivantes (même vides pour l’instant) :
Accueil
À propos
Services
Contact
Mentions légales (obligatoire en Europe)
Politique de confidentialité (obligatoire RGPD)
Ensuite, définis ta page d’accueil dans :
Réglages > Lecture > “La page d’accueil affiche” → une page statique : sélectionne “Accueil”.
Quelques réglages importants à faire avant d’utiliser Elementor :
Active une page d’accueil statique.
Coche Décourager les moteurs de recherche de référencer ce site pendant la construction (à décocher plus tard).
Vérifie l’adresse du site (avec ou sans “www”, en HTTPS).
Renseigne le titre du site et le slogan.
Désactive les commentaires si ton site n’a pas vocation à en recevoir.
Sélectionne Nom de l’article pour des URLs propres (ex : www.monsite.fr/contact).
Voici quelques extensions utiles et compatibles avec Elementor :
Elementor Pro : pour débloquer toutes les fonctionnalités.
Essential Addons for Elementor : widgets supplémentaires.
Rank Math SEO (ou Yoast SEO) : pour optimiser ton site sur Google.
WP Rocket (payant) ou LiteSpeed Cache : pour accélérer le site.
UpdraftPlus : pour les sauvegardes.
Wordfence ou iThemes Security : pour sécuriser ton site.
Installe-les depuis Extensions > Ajouter.
Avant d’éditer ta première page :
Va dans Elementor > Réglages.
Onglet Général :
Active Elementor pour les pages (et articles si besoin).
Onglet Style :
Choisis si Elementor doit contrôler les couleurs et les polices globales (souvent utile).
Onglet Avancé :
Active le mode sans conflits si tu rencontres des problèmes avec d’autres plugins.
Tu es maintenant prêt à commencer la création de ton site avec Elementor !
L’un des plus grands atouts d’Elementor est sa simplicité visuelle. Dès la première utilisation, on peut construire une page complète par simple glisser-déposer. Cette section va t’apprendre à maîtriser l’interface, à comprendre la logique des blocs (sections, colonnes, widgets) et à créer ta première page structurée.
Une fois Elementor installé :
Va dans le tableau de bord WordPress > Pages.
Crée une nouvelle page (ex : “Page d’accueil”).
Clique sur le bouton bleu “Modifier avec Elementor”.
Tu vas accéder à l’interface de construction en plein écran. Voici les principaux éléments que tu verras :
L’interface se divise en deux parties principales :
C’est la partie où tu construis réellement ta page. Chaque modification est visible en temps réel.
C’est le tableau de bord d’Elementor :
Il affiche les widgets disponibles (éléments que tu peux glisser).
Lorsque tu cliques sur un widget, il affiche les réglages du widget sélectionné.
Icône “Hamburger” (≡) : réglages globaux d’Elementor.
Bouton “Aperçu” (œil) : voir la page comme un visiteur.
Bouton “Mettre à jour” : pour enregistrer les modifications.
Icône d’historique : pour revenir en arrière.
Icône “Responsive” : pour tester le rendu sur mobile/tablette/PC.
L’organisation de base dans Elementor repose sur 3 niveaux hiérarchiques :
Ce sont les blocs principaux de ta page. Chaque section peut contenir plusieurs colonnes.
👉 Clique sur le bouton “+” pour ajouter une nouvelle section.
À l’intérieur de chaque section, tu peux définir 1, 2, 3 ou plus de colonnes. Tu peux :
ajouter/supprimer des colonnes,
ajuster leur largeur,
les empiler verticalement sur mobile.
Ce sont les éléments concrets : titres, images, boutons, formulaires, vidéos, icônes, etc.
Tu glisses un widget dans une colonne pour l’ajouter.
🧱 Exemple concret :
Section → 2 colonnes
Colonne 1 : widget Titre + Image
Colonne 2 : widget Texte + Bouton
Faisons ensemble une première section :
Clique sur le “+” violet.
Choisis une mise en page avec 2 colonnes.
Dans le panneau gauche, fais glisser :
Un Titre dans la colonne de gauche.
Un Texte ou une Image dans celle de droite.
Clique sur chaque widget pour :
modifier son contenu (dans l’onglet Contenu),
ajuster son style (couleur, typographie, alignement),
régler les options avancées (marges, responsive, etc.).
Chaque widget possède 3 onglets de réglages :
Modifier le texte, l’image, l’icône, le lien…
Choisir l’alignement, les options de base.
Définir les couleurs, les typographies, les arrière-plans, les bordures…
Modifier l’état “au survol” (hover).
Marges et padding (espacements internes et externes).
Responsive : masquer sur mobile/tablette si besoin.
Effets de mouvement, transitions, z-index…
💡 Conseil : Commence simple. Inutile de surcharger ta première page. Un titre clair, une image, un bouton : c’est déjà très bien.
Elementor propose une galerie de modèles déjà conçus :
Clique sur l’icône de dossier 📁 dans la zone vide d’une section.
Tu accèdes à la bibliothèque Elementor :
Pages : modèles complets de pages.
Blocs : sections isolées (ex : témoignages, footer, formulaire…).
Clique sur Insérer pour charger un modèle dans ta page.
💡 Ces modèles peuvent être entièrement personnalisés ensuite.
Pense à cliquer sur “Mettre à jour” régulièrement en bas du panneau gauche. Cela enregistre ta page.
Tu peux aussi :
Enregistrer un brouillon,
Publier directement,
Apercevoir le résultat sur différents appareils (PC, tablette, smartphone).
Elementor garde un historique :
Clique sur l’icône Horloge (Historique) en bas à gauche.
Onglet Actions : pour annuler ou refaire une action.
Onglet Révisions : pour revenir à une ancienne version (ex. : 12h30 – sauvegarde auto).
Un bon site doit être responsive. Elementor te permet de vérifier et d’ajuster le rendu sur chaque écran :
Clique sur l’icône Écran (mobile) en bas de l’interface.
Choisis : Bureau / Tablette / Mobile.
Tu peux ajuster séparément les marges, tailles de texte, alignements selon l’appareil.
💡 Astuce : commence ta mise en page pour ordinateur, puis adapte aux petits écrans ensuite.
🔄 Utilise les blocs réutilisables : enregistre une section ou un widget pour l’utiliser ailleurs.
🧱 Regroupe bien tes contenus dans des sections logiques.
🗃️ Nomme tes sections (clic droit > “Navigateur”) pour t’y retrouver facilement.
🎯 Utilise le mode structure (navigateur) pour voir l’arborescence complète de la page.
⚠️ Ne surcharge pas ta page : simplicité = efficacité = rapidité.
📐 Maîtrise les marges internes (padding) pour aérer tes contenus.
⏱️ Gagne du temps avec des modèles : duplique des sections, enregistre des blocs…
Les widgets sont les éléments de base d’une page construite avec Elementor. Ils permettent d’ajouter tout type de contenu : texte, image, vidéo, bouton, formulaire, tableau de prix, portfolio, etc. Elementor propose des dizaines de widgets dans sa version gratuite, et des dizaines d’autres dans sa version Pro.
On distingue plusieurs types de widgets :
Titre
Image
Texte
Vidéo
Bouton
Séparateur
Espaceur
Icône
Google Maps
Colonnes internes
Formulaire
Appel à l’action (CTA)
Posts (articles dynamiques)
Portefeuille
Slides
Compte à rebours
Tableau de prix
Témoignages
Avis
Galerie Pro
Menu de navigation
Boutons de partage
Intégrations (Mailchimp, HubSpot…)
Produits
Catégories de produit
Ajout au panier
Avis produits
Filtrage dynamique
Titre de l’article
Contenu de l’article
Image en vedette
Champ personnalisé
Date, auteur, taxonomies…
Voici un tour d’horizon de leurs fonctions principales :
Permet d’ajouter une balise HTML (h1 à h6).
Contrôle complet sur typographie, couleur, ombre portée.
Utilise h1 uniquement une fois par page (titre principal).
Bloc de texte libre, comme un éditeur Word.
Parfait pour les paragraphes descriptifs.
Importe une image locale ou externe.
Ajuste taille, lien, légende.
Ajoute un effet au survol ou une bordure.
Ajoute un appel à l’action cliquable.
Texte, lien, taille, style, icône, animation.
Pense à bien relier à une page ou section interne.
Intègre des vidéos YouTube, Vimeo ou autre via URL.
Possibilité d’activer l’autoplay, le mute, la boucle.
Choisis parmi la bibliothèque Font Awesome.
Combine avec texte pour créer des mini-blocs.
Gère les espacements entre les sections ou les widgets.
Évite de tout gérer avec les marges/paddings.
Elementor Pro ouvre un puissant arsenal marketing et visuel. Voici les plus importants :
Champ texte, email, téléphone, dropdown, date…
Envoi vers email, Mailchimp, webhook, base de données.
Anti-spam intégré.
Action après envoi : redirection, message, email, webhook…
Image + titre + bouton dans un même bloc.
Très utile pour les offres commerciales.
Affiche les articles de blog sous forme de grille, liste, carrousel.
Filtrage par catégorie, date, auteur…
Mise en page ultra personnalisable.
Idéal pour artistes, photographes, architectes.
Grilles filtrables.
Responsive et esthétique.
Création de carrousels d’images ou de contenu.
Transitions, vitesses, boutons, pagination.
Très visuel, à utiliser avec modération pour la performance.
Crée une urgence : “offre valable jusqu’à…”.
Design attractif, paramétrable.
Présentation claire des forfaits, services ou abonnements.
Titre, prix, description, bouton, options.
Ajoute des témoignages clients avec photo et citation.
Très utile pour renforcer la crédibilité.
Pour montrer des compétences, niveaux, statistiques.
Animées et stylisables.
Ces widgets sont liés à des données dynamiques issues de WordPress (articles, champs personnalisés, taxonomies).
À utiliser dans des modèles d’article (Theme Builder).
Permet d’afficher automatiquement le contenu du post en cours.
Utilise l’image définie dans l’article comme “image à la une”.
Permet d’afficher des données spécifiques comme :
Prix personnalisé,
Lieu d’un événement,
Informations produits personnalisées…
Affiche dynamiquement les métadonnées d’un post.
Ces widgets prennent tout leur sens dans des modèles dynamiques (ex : une page unique par produit, événement, propriété…).
Peu importe le widget, les réglages de Style et Avancé sont souvent similaires :
Typographie : police, taille, graisse, espacement.
Couleurs : texte, arrière-plan, bordures.
Ombre : sur le texte ou le bloc.
Effets de survol (hover) : pour rendre les interactions vivantes.
Marge/Padding : ajustement des espacements.
Z-index : superposition des éléments.
Masquage : cacher sur mobile, tablette, ordinateur.
Animations d’entrée : effet “slide in”, “fade in”, etc.
La clé pour un design réussi, ce n’est pas la quantité de widgets utilisés, mais leur combinaison logique. Voici quelques structures types :
Titre (widget Titre)
Icône ou image
Texte explicatif
Bouton « En savoir plus »
Hero avec image + texte + bouton
Section “Nos services” (grille de 3 colonnes avec icônes)
Bloc témoignages
Appel à l’action avec arrière-plan vidéo
Formulaire de contact en bas de page
Titre accrocheur
Vidéo de présentation
Liste de bénéfices (icônes + texte)
Tableau de prix
Compte à rebours
Bouton “Commander maintenant”
Tu peux gagner un temps précieux en enregistrant un widget ou une section comme “modèle” :
Clic droit > Enregistrer comme modèle.
Donne-lui un nom (ex : “bouton contact rouge”).
Tu pourras le réinsérer sur d’autres pages.
Plusieurs extensions gratuites ou payantes ajoutent des dizaines de widgets :
Timeline, carrousel de logos, galeries avancées, etc.
Pack ultra-complet pour les sites dynamiques, e-commerce, filtres…
Très bon design, animations fluides.
⚠️ Conseil : ne multiplie pas les add-ons pour ne pas alourdir ton site.
Créer un site ne se limite pas à empiler des widgets. Il faut réfléchir à l’organisation du contenu, à l’expérience utilisateur (UX), et au rendu visuel (UI). Elementor permet une grande liberté de design, à condition de maîtriser les marges, colonnes, proportions, couleurs, typographies et responsive design.
La base d’un bon design Elementor repose sur une architecture claire :
Chaque section est un bloc de contenu cohérent (ex. : une accroche, une galerie, un témoignage).
Chaque section peut être divisée en colonnes pour distribuer l’information (ex. : image à gauche, texte à droite).
Chaque colonne contient des widgets, qui doivent être bien espacés et hiérarchisés.
🔁 Conseil : pense chaque section comme une “scène” indépendante, avec un objectif visuel clair (informer, séduire, convertir…).
Padding : espace à l’intérieur d’un élément (entre le bord et le contenu).
Marge : espace autour de l’élément (séparation avec ce qui l’entoure).
Dans Elementor :
Onglet Avancé > Espacement.
Active/désactive le lien entre les valeurs (haut/droite/bas/gauche).
💡 Utilise les unités em ou % pour un rendu plus fluide sur tous les écrans.
Pour que l’utilisateur comprenne rapidement l’information :
Utilise une seule balise H1 par page (généralement en haut).
Structure le contenu avec des H2 pour les sections principales, H3 pour les sous-parties.
Varie la taille, le poids, la couleur pour guider le regard (mais reste cohérent).
🎨 Exemple :
H1 : “Nos services” (30 px, gras, noir)
H2 : “Création de site” / “Référencement naturel” (24 px, bleu foncé)
Texte : gris foncé, 16 px, interligne 1.6
Évite d’utiliser plus de 3 couleurs principales :
Une couleur d’accent (boutons, éléments clés)
Une couleur de fond neutre
Une couleur de texte
📌 Crée une palette cohérente (ex. : https://coolors.co).
Choisis 1 ou 2 polices maximum (une pour les titres, une pour le corps).
Attention à la lisibilité : pas trop petite, pas trop condensée.
Garde une cohérence entre les pages.
🔧 Tu peux définir des styles globaux dans :
Elementor > Réglages > Style global
Une bonne image ou une couleur de fond peut structurer visuellement la page. Pour cela :
Sélectionne la section > Onglet Style > Arrière-plan
Tu peux choisir :
Une couleur unie
Un dégradé
Une image (avec positionnement, effet de parallaxe, superposition de couleur)
💡 Astuce : ajoute une superposition noire semi-transparente sur les images de fond pour faire ressortir le texte blanc par-dessus.
Elementor permet une gestion granulaire des versions mobile, tablette et bureau :
Clique sur l’icône écran (en bas à gauche).
Sélectionne l’aperçu mobile/tablette.
Adapte :
Taille des textes
Disposition des colonnes (elles passent souvent en “stack” vertical)
Espacements
Alignements
🧪 Ne te contente pas de l’aperçu visuel : teste aussi ton site sur ton vrai téléphone.
Trop d’animations tuent l’animation. Elementor propose des effets pour dynamiser le design, mais à utiliser subtilement :
Dans Avancé > Effets de mouvement
Exemple : Fade in, Slide in, Zoom in…
Appliqué à l’apparition dans la page
Dans Style > Hover
Changement de couleur, ombre portée, zoom…
Ne jamais animer tout à la fois.
Évite les animations longues ou saccadées.
N’anime pas les éléments clés comme le menu ou les formulaires.
Quand tu veux plus de complexité dans la structure, Elementor te permet :
D’utiliser un widget Colonne interne à l’intérieur d’une colonne (utile pour des blocs imbriqués).
D’imbriquer plusieurs sections avec des couleurs ou espacements différents.
D’utiliser un widget “Conteneur” (nouveau système “Flexbox” d’Elementor), plus léger et performant.
🚀 Le système de conteneurs est plus moderne mais demande une bonne prise en main. À privilégier pour les projets futurs.
Ton site ne doit pas être une juxtaposition de pages au design différent. Pour créer une identité forte, harmonise :
Ta structure de page (utilise des modèles ou des sections enregistrées).
Tes couleurs (définies dans Elementor > Réglages > Couleurs globales).
Tes typographies (polices et tailles globales).
Tes boutons (mêmes formes, couleurs, tailles partout).
Ton header et footer (on les verra dans la Partie 6 avec le Theme Builder).
Pour améliorer l’expérience utilisateur :
🧭 Navigation claire : place toujours un bouton “Retour à l’accueil” ou un menu visible.
📱 Responsive impeccable : 50% du trafic est mobile.
🧱 Aération : laisse de l’espace entre les blocs. Moins = mieux.
👁 Lisibilité : pas de texte trop clair sur fond clair.
🎯 Appel à l’action : visible, clair, incitatif.
🐌 Évite les effets gadgets : ils ralentissent le site et déconcertent.
Construire une page avec Elementor est une chose. Construire un site cohérent, complet et professionnel en est une autre. Dans cette partie, tu vas apprendre à organiser l’ensemble du site autour d’une architecture logique, à utiliser le Theme Builder, à créer un header et un footer personnalisés, et à bâtir des modèles de page réutilisables.
Un site professionnel, même simple, comporte généralement les pages suivantes :
Accueil
À propos
Services (ou Produits)
Contact
Mentions légales
Politique de confidentialité
Politique de cookies (si tracking)
Témoignages / Réalisations
Page de vente
Foire aux questions (FAQ)
📝 Crée d’abord ces pages vides dans WordPress via Pages > Ajouter, puis édite-les une par une avec Elementor.
Voici une structure type d’une bonne page d’accueil Elementor :
Hero section (image ou vidéo de fond + titre + bouton)
Présentation rapide de ce que tu proposes
Bloc Services (3 colonnes avec icônes ou images)
Témoignages clients
Appel à l’action clair avec bouton (ex. : “Prendre rendez-vous”)
Formulaire de contact ou lien vers page contact
💡 Utilise les blocs préconçus dans Elementor (Bibliothèque) pour gagner du temps et harmoniser le design.
C’est une fonctionnalité d’Elementor Pro qui te permet de remplacer ton thème WordPress et de créer :
Un header
Un footer
Des modèles d’articles
Des pages d’archives
Des pages 404, résultats de recherche…
Va dans Templates > Theme Builder.
Onglet Header > Ajouter nouveau.
Crée un header :
Logo (Image)
Menu de navigation (widget “Menu de navigation”)
Icônes ou bouton (ex. : téléphone, mail, réservation)
Clique sur “Conditions d’affichage” : choisis “Tout le site” pour l’afficher partout.
Même méthode, dans l’onglet Footer.
💡 Tu peux aussi afficher un header différent sur certaines pages (ex. : une landing page sans menu).
Elementor n’a pas de menu natif dans sa version gratuite, mais tu peux utiliser le menu WordPress.
Va dans Apparence > Menus.
Crée un menu avec tes pages principales.
Attribue-le à la zone de menu principale.
Dans Elementor, ajoute un widget Menu de navigation (Pro) dans ton header.
Tu peux le styliser : orientation, couleurs, typographie, hamburger mobile, animations…
Si tu veux que toutes tes pages aient la même structure (ex. : bannière en haut + titre + contenu + appel à l’action), fais ceci :
Crée une page-type avec Elementor.
Clique sur le dossier > Enregistrer comme modèle.
Nomme-le (ex. : “Modèle de page standard”).
À chaque nouvelle page, tu pourras l’importer pour gagner du temps et garder une identité visuelle uniforme.
Si ton site comprend un blog, Elementor Pro permet de personnaliser :
le modèle d’article unique (single post),
la page de blog (archive),
les catégories.
Va dans Templates > Theme Builder > Single > Ajouter.
Utilise les widgets dynamiques :
Titre de l’article
Contenu
Image mise en avant
Auteur, date, catégorie
Navigation “article suivant / précédent”
Clique sur Conditions d’affichage > “Tous les articles”.
Tu auras ainsi un design cohérent pour tous tes posts.
Tu peux également personnaliser la page qui liste tous tes articles :
Dans Theme Builder > Archive > Ajouter.
Utilise le widget Posts ou Archive Posts.
Ajoute des filtres ou tris si besoin.
Tu peux aussi personnaliser les archives de catégories, étiquettes, auteur, etc.
Theme Builder > Ajouter > Page 404.
Ajoute un message sympa (“Oups, cette page n’existe pas”), un bouton vers l’accueil, une image.
Même principe, dans l’onglet Search Results.
Pense à :
Placer le menu principal dans le header.
Ajouter un menu secondaire ou des liens rapides dans le footer (contact, mentions légales, réseaux sociaux…).
Intégrer des boutons clairs pour la navigation entre les pages (ex. : “Voir nos services”, “Nous contacter”).
Avant de mettre ton site en ligne :
Orthographe et liens internes
Responsive (mobile et tablette)
Chargement rapide
Cohérence des polices et couleurs
Fonctionnement du formulaire
Présence d’un favicon et titre de page
Google Chrome + outil de test responsive
GTmetrix (performance)
WAVE (accessibilité)
PageSpeed Insights (optimisation mobile)
Créer un beau site, c’est bien. Créer un site rapide, sûr et visible sur Google, c’est mieux. Dans cette partie, tu apprendras à optimiser ton site construit avec Elementor, à l’entretenir correctement, et à éviter les erreurs fréquentes.
Un site lent fait fuir les visiteurs.
Google pénalise les pages qui mettent trop de temps à charger, surtout sur mobile.
N’importe quelle image > 300 Ko est trop lourde.
Utilise des formats WebP ou compressés.
Outils recommandés :
Recommandés : WP Rocket (payant), LiteSpeed Cache (gratuit), W3 Total Cache
Le cache permet de précharger les pages pour les visiteurs.
Chaque effet ralentit le site.
Utilise les animations avec modération.
Elementor charge certains éléments partout : utilise un plugin comme Asset CleanUp pour désactiver les scripts inutiles.
Rank Math (complet, gratuit, recommandé)
Yoast SEO (ancien mais efficace)
Ces plugins permettent d’ajouter des titres SEO, méta-descriptions, de générer un sitemap et de gérer les balises.
Un seul H1 par page (souvent le titre principal).
Utilise H2 pour les sections, H3 pour les sous-sections.
Relie les pages entre elles avec des liens contextuels.
Ajoute des liens vers tes articles dans tes pages de service, et inversement.
Ajoute des “posts récents” ou des articles liés pour favoriser la navigation.
Même si Elementor n’est pas vulnérable en soi, tu dois protéger ton site WordPress :
Wordfence : protection complète.
iThemes Security : bon compromis.
Limit Login Attempts Reloaded : limite les tentatives de connexion.
Utilise un mot de passe fort et unique.
Active la double authentification (2FA).
Mets toujours WordPress, tes extensions et ton thème à jour.
Supprime les plugins inutilisés.
Ne jamais négliger les sauvegardes.
UpdraftPlus (gratuit, très complet)
All-in-One WP Migration (pour exporter facilement un site)
BlogVault ou ManageWP (solutions cloud)
🗓️ Plan de sauvegarde conseillé :
Sauvegarde automatique hebdomadaire (ou quotidienne en cas de site actif).
Téléchargement mensuel d’une copie sur ton PC ou sur Google Drive/Dropbox.
Texte suffisamment contrasté (noir sur blanc > ok, gris clair sur blanc > non).
Taille de police lisible (16px minimum pour les paragraphes).
Liens clairs (“cliquez ici” est à éviter : préfère “voir notre politique de confidentialité”).
Affiche une bannière cookies (avec Complianz ou CookieYes).
Crée une page Politique de confidentialité.
Informe l’utilisateur s’il y a collecte (formulaires, statistiques…).
Nomme clairement tes sections et widgets dans le navigateur Elementor.
Utilise des modèles enregistrés pour les éléments récurrents.
Privilégie les couleurs et typographies globales pour garder la cohérence.
Teste toujours le responsive design avant de publier.
Garde Elementor et ses add-ons à jour.
Ajouter trop de widgets d’add-ons inutiles (ralentissement).
Créer des pages très longues sans navigation interne.
Ne jamais tester ton site sur mobile.
Utiliser trop de couleurs ou trop de polices différentes.
Elementor Pro n’est pas simplement une version enrichie de l’outil gratuit. C’est une véritable boîte à outils de développement visuel, capable de rivaliser avec les prestations d’une agence web. Si tu maîtrises les fonctionnalités avancées, tu pourras concevoir des sites haut de gamme : personnalisés, dynamiques, évolutifs, connectés à des bases de données.
Avec Elementor Pro, tu peux afficher un modèle (header, footer, page d’archive, bloc personnalisé, etc.) en fonction de règles précises, comme :
Sur tout le site
Uniquement sur une page donnée
Pour certains types d’articles (CPT)
Pour une catégorie précise
Pour les utilisateurs connectés uniquement (ou non)
Créer un footer spécial “page contact”
Créer un header allégé pour les pages de vente
Afficher une bannière uniquement pour les articles de la catégorie “Promotions”
🔧 Configuration dans :
Templates > Theme Builder > Conditions d’affichage
Avec Elementor Pro, tu peux personnaliser toutes les pages WooCommerce, notamment :
Fiche produit individuelle
Page boutique (archive)
Panier, commande, compte client
Produit
Titre du produit
Prix
Image du produit
Description
Évaluations
Ajouter au panier
Produits associés
Construire un template de fiche produit avec un design unique
Ajouter des upsells ou témoignages sous chaque produit
Adapter le design selon le type de produit (physique, numérique…)
⚠️ Elementor Pro ne remplace pas un plugin WooCommerce : il le complète visuellement.
Tu peux transformer ton site Elementor en site sur mesure (agence, restaurant, catalogue, immobilier, etc.) grâce aux contenus dynamiques.
Advanced Custom Fields (ACF) pour créer des champs personnalisés (ex : prix, lieu, nombre de chambres…)
Custom Post Type UI (CPT UI) pour créer des types de contenus personnalisés (ex : Propriétés, Recettes, Témoignages…)
Crée un type de contenu personnalisé : “Propriétés”
Ajoute des champs personnalisés : superficie, prix, photos
Crée un template Elementor dynamique pour “Propriétés”
Affiche les champs avec les widgets dynamiques : Texte dynamique, Image dynamique, etc.
Résultat : un site sur-mesure, mais géré sans coder.
Elementor Pro permet de créer des popups puissants, sans plugin externe :
Popups de capture d’e-mail (newsletter)
Popups de sortie (exit intent)
Popups promotionnels ou de coupon
Popups contextuels (ex : affichés seulement à une catégorie d’articles)
Au bout de X secondes
Au scroll
Au clic sur un bouton
Lors d’une tentative de sortie de page
🎯 Tu peux combiner cela avec des conditions d’affichage (ex : popup de réduction affichée uniquement pour les visiteurs non connectés sur la page Panier).
Elementor Pro s’intègre avec des dizaines d’outils tiers :
Mailchimp
ActiveCampaign
HubSpot
GetResponse
Zapier
Webhooks
Envoyer un email automatique après soumission d’un formulaire
Ajouter un contact à une liste Mailchimp
Créer une tâche dans un CRM à chaque nouvelle demande de devis
💡 Pour aller plus loin, tu peux coupler Elementor à Make (ex-Integromat) ou Zapier pour créer de véritables automatisations.
Elementor a introduit un nouveau système de mise en page : les conteneurs, basé sur Flexbox CSS.
Plus léger, plus rapide que les sections/colonnes classiques
Plus de contrôle sur l’alignement et la distribution des éléments
Parfait pour les designs complexes et mobiles
⚠️ Ce système est optionnel, mais recommandé pour les nouveaux projets. Il demande un peu d’apprentissage mais offre une flexibilité extrême.
Même avec Elementor Pro, tu peux étendre les possibilités via des plugins complémentaires premium, notamment :
Outils ultra puissants pour sites dynamiques, filtres, formulaires conditionnels, tableaux, méga-menus…
Création de formulaires conditionnels très avancés
Widgets supplémentaires stylisés et performants
⚠️ Reste sobre : installe uniquement ce dont tu as besoin.
Tu viens de parcourir un guide complet, étape par étape, sur Elementor, l’un des outils les plus puissants et accessibles pour créer des sites WordPress sans coder. Qu’il s’agisse d’un blog personnel, d’un site vitrine, d’une boutique en ligne ou d’un portail complexe avec du contenu dynamique, Elementor offre une flexibilité exceptionnelle, couplée à une prise en main intuitive.
Revenons brièvement sur tout ce que tu as appris :
Tu as appris à installer Elementor (gratuit et Pro), choisir un thème compatible, et préparer un environnement WordPress propre et optimisé.
Tu maîtrises la configuration initiale indispensable pour travailler dans de bonnes conditions.
Tu sais comment fonctionne l’interface Elementor : sections, colonnes, widgets.
Tu as pris en main les outils de base pour créer des pages responsives, cohérentes et esthétiques.
Tu as exploré en détail les widgets gratuits et Pro : texte, images, vidéos, boutons, carrousels, formulaires, posts dynamiques, témoignages, etc.
Tu maîtrises l’art d’utiliser les bons widgets au bon endroit, en les personnalisant avec style et efficacité.
Tu sais comment organiser l’espace, gérer les marges, hiérarchiser les contenus, définir des typographies et des couleurs globales.
Tu as appris à adapter ton site à tous les écrans grâce aux outils de responsive intégrés.
Tu sais comment construire un site entier, page par page, avec un header, un footer, des modèles réutilisables, une navigation fluide.
Grâce au Theme Builder, tu peux personnaliser chaque partie de ton site en fonction de son contenu ou de sa cible.
Tu connais les bonnes pratiques pour :
Accélérer ton site (images, cache, poids des pages)
Améliorer ton SEO (balises, maillage, structure)
Sécuriser ton installation (mises à jour, sauvegardes, RGPD)
Tu as découvert le potentiel illimité d’Elementor Pro : conditions d’affichage, WooCommerce, contenus dynamiques (CPT + ACF), popups intelligents, automatisations…
Tu as entre les mains les outils pour créer des sites professionnels, performants, adaptables à chaque client ou projet.
Voici quelques suggestions pour continuer à progresser :
Mets en application tout ce que tu as appris pour bâtir un site professionnel complet. Même si tu n’as pas encore de client, crée une démo pour t’entraîner.
De nombreux experts Elementor partagent leurs méthodes. Recherche des tutoriels avancés sur :
les conteneurs Flexbox,
les automatisations (Zapier/Make),
la création de thèmes WordPress uniquement avec Elementor.
Facebook, Reddit, Discord : il existe des groupes très actifs d’utilisateurs Elementor.
Tu y trouveras entraide, inspiration et mises à jour fréquentes.
Crocoblock, JetEngine, Happy Addons, etc. permettent de repousser les limites encore plus loin.
Elementor est très demandé. Tu peux :
proposer tes services en freelance,
vendre des templates,
créer des sites pour des associations, PME, commerces locaux.
Pourquoi choisir PRESTISSIME ?
Un partenaire de confiance pour mener à bien votre projet web.
Des tarifs attractifs
Mes tarifs sont adaptés à votre budget et à votre projet.
Disponibilité, Réactivité
Car votre projet mérite le meilleur, je m'engage à le mener à bien.
Un support 7/7
Un support 7/7 par mail, téléphone, WhatsApp.
100% de satisfaction client
Votre satisfaction est ma priorité, je m'immerge dans votre projet.
PRESTISSIME, Agence web Nancy, vous accompagne dans votre projet de site internet, e-commerce. 25 ans d’expérience pour votre projet web.
Du lundi au vendredi de 9h à 19h
© 2025 – PRESTISSIME – SIRET : 510 995 970 00017 – APE : 6201Z – Mentions légales – Politique de confidentialité