De zéro à un site pro
Elementor Pro est le page builder WordPress le plus utilisé au monde. Mais entre "je sais glisser-déposer des widgets" et "je construis un site professionnel, rapide et maintenable", il y a une vraie différence de méthode. Cette formation te donne la feuille de route pour franchir ce cap — sans code, sans mauvaises surprises, avec des résultats concrets dès les premières heures.
Comprendre la logique de construction
Penser en blocs, pas en pages
La première erreur des débutants sur Elementor : construire page par page sans réfléchir à ce qui est partagé. Un site professionnel, c’est d’abord une structure réutilisable — le header, le footer, la mise en page des articles, la structure des pages produit. On construit ces briques une fois, elles s’appliquent partout.
La bonne façon de démarrer un projet :
- Définir son design system (couleurs, polices) — une fois pour toutes
- Créer le header et le footer
- Créer les templates de pages récurrentes (article, archive, landing…)
- Construire les pages de contenu
Dans cet ordre, chaque modification globale (changer une couleur, modifier le header) se fait en un seul endroit et se répercute automatiquement sur tout le site.
Les deux types de contenu dans Elementor
Contenu statique : tu le tapes directement dans le widget — titre, texte, image. Simple, rapide pour les pages uniques.
Contenu dynamique : Elementor pioche automatiquement les données depuis WordPress — le titre de l’article, son image à la une, sa date, sa catégorie. Indispensable pour les templates de blog, les fiches produit, les portfolios. Tu construis la mise en page une fois, elle s’adapte automatiquement à chaque contenu.
Dès que tu travailles sur un template qui va s'appliquer à plusieurs pages (articles, fiches, archives), utilise du contenu dynamique. C'est ce qui fait la vraie puissance d'Elementor Pro.
Flexbox et responsive
Construire des layouts sans se battre
Le Container Flexbox est la brique de base d’Elementor pour construire n’importe quel layout. Il remplace l’ancien système de sections et colonnes par quelque chose de beaucoup plus souple. Tu contrôles visuellement :
- La direction : les éléments côte à côte ou empilés
- L’alignement : centré, à gauche, espacé uniformément
- L’espacement entre les éléments (Gap) — plus besoin de marges manuelles sur chaque widget
- Le retour à la ligne automatique quand l’espace manque
Résultat : une grille de 3 cartes qui passe automatiquement à 2 colonnes sur tablette puis 1 colonne sur mobile, sans jamais toucher au CSS.
Le responsive sans prise de tête
Elementor travaille en desktop-first : tu construis d’abord le layout desktop, puis tu l’adaptes pour les écrans plus petits via les icônes de breakpoints en bas de l’éditeur (ordinateur → tablette → mobile).
La majorité des adaptations se font en deux gestes :
- Changer la largeur d’un container sur mobile (passer de 33% à 100%)
- Changer la direction d’un container (de côte-à-côte à empilé)
Checklist responsive avant livraison :
- Tester les 3 breakpoints dans l’éditeur
- Vérifier les tailles de texte sur mobile
- Vérifier les paddings des containers (souvent trop serrés sur mobile)
- Vérifier que les images ne débordent pas
- Désactiver les animations complexes sur mobile si besoin
3. Theme Builder — construire les templates globaux
Ce que le Theme Builder change
Sans Theme Builder, tu es limité à construire le contenu des pages. Avec lui, tu prends le contrôle total de l’apparence du site : header, footer, mise en page des articles, des archives, des pages 404. C’est la fonctionnalité qui fait passer Elementor Pro d’un simple page builder à un vrai outil de création de sites.
Accès : WP Admin → Templates → Theme Builder
Header et Footer
Crée ton header dans le Theme Builder exactement comme tu construirais n’importe quelle section dans Elementor — avec les mêmes widgets, la même flexibilité. La différence : ce header s’applique sur toutes les pages du site (ou celles que tu choisis via les conditions d’affichage).
Bonnes pratiques header :
- Utilise le widget Nav Menu pour la navigation — il gère automatiquement le menu WordPress
- Active l’option Sticky dans les paramètres du template pour un header visible au scroll
- Pense à créer une version mobile du header avec un menu hamburger — le widget Nav Menu le gère nativement
Template Single — la mise en page des articles
Le template Single définit comment chaque article s’affiche. Tu le construis une fois avec des Dynamic Tags qui se remplissent automatiquement avec le contenu de chaque article.
Structure recommandée pour un article de blog :
- Zone hero : image à la une en background + titre de l’article + date et catégorie
- Zone contenu : widget « The Content » qui affiche le corps de l’article
- Zone bas de page : articles liés, auteur, commentaires
Template Archive — la mise en page des listes
Le template Archive s’applique sur toutes les pages de liste : catégories, étiquettes, résultats de recherche, archives par date. Il utilise un widget Loop Grid qui affiche automatiquement les articles correspondants.
La mise en page de chaque carte dans la grille est définie dans un Loop Item template — un mini-template que tu construis une fois et qui se répète pour chaque article affiché.