Comment créer des pages avec Elementor (guide débutant)

Créer des pages avec Elementor : guide débutant complet

Elementor est le page builder WordPress le plus populaire — plus de 16 millions de sites l’utilisent. Il transforme la création de pages en un processus visuel par glisser-déposer, sans écrire une seule ligne de code. En 30 minutes, vous pouvez créer une page d’accueil professionnelle. Ce guide vous apprend tout depuis l’installation jusqu’aux techniques avancées.

1. Installer et découvrir Elementor

Installation

1. Allez dans Extensions → Ajouter
2. Recherchez « Elementor »
3. Installez et activez Elementor Website Builder
4. Thème recommandé avec Elementor : Astra ou Hello Elementor (thème vide parfait pour Elementor)

Gratuit vs Pro

Conseil : commencez avec la version gratuite. Elle suffit pour créer des pages complètes. Passez au Pro quand vous avez besoin des formulaires ou du thème builder.

2. L’interface Elementor

Ouvrir l’éditeur

1. Créez une page : Pages → Ajouter
2. Donnez un titre
3. Cliquez le bouton bleu « Modifier avec Elementor »

Les 3 zones de l’interface

Hiérarchie de la page

Page Elementor
├── Section (conteneur pleine largeur, fond coloré/image)
│   ├── Colonne 1
│   │   ├── Widget (Titre)
│   │   └── Widget (Texte)
│   └── Colonne 2
│       └── Widget (Image)
├── Section 2
│   └── Colonne unique
│       ├── Widget (Titre)
│       └── Widget (Bouton)
└── ...

• Section : bande horizontale (la fondation)
• Colonne : division verticale dans une section (1, 2, 3 ou 4 colonnes)
• Widget : élément de contenu (texte, image, bouton, etc.)

3. Créer votre première page : pas à pas

Étape 1 : Ajouter une section Hero

1. Cliquez le « + » rose au centre de la page
2. Choisissez une structure : 1 colonne
3. Cliquez l’icône de la section (6 points) pour la sélectionner
4. Onglet Style :
   • Arrière-plan → Type : Classique → Couleur : #1a1a2e (bleu foncé)
   • Ou : Image de fond → choisissez une photo
5. Onglet Avancé :
   • Padding : 100px en haut, 100px en bas
   • Sur mobile : réduisez à 50px

Étape 2 : Ajouter du contenu dans la section

1. Depuis le panneau gauche, glissez un widget Titre dans la section
2. Tapez votre titre (ex: « Votre partenaire digital à Dakar »)
3. Onglet Style :
   • Couleur : blanc (#FFFFFF)
   • Taille : 48px (desktop), 28px (mobile)
   • Poids : 800
   • Alignement : centré
4. Glissez un widget Éditeur de texte en dessous
5. Tapez votre sous-titre, mettez la couleur en gris clair
6. Glissez un widget Bouton
7. Texte : « Demander un devis », Lien : /contact
8. Style : fond rouge (#e94560), texte blanc, border-radius 8px

Étape 3 : Ajouter une section Services

1. Cliquez « + » et choisissez 3 colonnes
2. Dans chaque colonne, ajoutez :
   • Widget Icône (choisissez dans Font Awesome)
   • Widget Titre (H3, nom du service)
   • Widget Éditeur de texte (description du service)
3. Pour la section : fond blanc, padding 60px haut/bas
4. Vérifiez le responsive : les 3 colonnes passent en 1 colonne sur mobile

4. Widgets essentiels et comment les utiliser

Widget Image

• Choisissez une image de votre médiathèque
• Taille : « Large » ou « Full » selon l’usage
• Style : border-radius pour arrondir, box-shadow pour l’ombre
• Important : renseignez le texte alternatif (alt) pour le SEO

Widget Bouton

• Type : Default, Info, Success, Warning
• Taille : Small, Medium, Large, Extra Large
• Icône : ajoutez une icône avant ou après le texte (flèche →)
• Style hover : changez la couleur au survol pour un effet interactif
• ID de lien : utilisez #section-id pour scroller vers une section de la page

Widget Icône Box

Combine une icône, un titre et un texte — parfait pour présenter des services :

• Icône : choisissez dans Font Awesome (3000+ icônes)
• Position : en haut (top) ou à gauche (left)
• Style : couleur de l’icône, taille, espacement

Widget Compteur

Anime un chiffré de 0 à la valeur ciblé — excellent pour les statistiques :

• Nombre initial : 0
• Nombre final : votre chiffré (ex: 150 pour « 150+ clients »)
• Titre : texte en dessous (ex: « Clients satisfaits »)
• Suffixe : « + » ou « % »

5. Templates : ne partez pas de zéro

Bibliothèque de templates

1. Dans l’éditeur, cliquez l’icône dossier en bas du panneau (ou au centre d’une section vide)
2. Parcourez les templates par catégorie :
   • Pages : pages complètes (accueil, contact, à propos)
   • Blocs : sections individuelles (hero, services, témoignages, pricing, FAQ)
3. Cliquez « Insérer » pour ajouter le template à votre page
4. Modifiez les textes, images et couleurs

Astra Starter Templates

Le plugin Starter Templates (du même éditeur qu’Astra) offre des sites complets importables en 1 clic :

1. Installez le plugin Starter Templates
2. Apparence → Starter Templates
3. Filtrez par « Elementor »
4. Choisissez un template, importez
5. Personnalisez chaque page

6. Design responsive

Basculer entre les appareils

En bas de l’éditeur, 3 icônes permettent de prévisualiser en Desktop, Tablette et Mobile :

• Cliquez l’icône tablette ou mobile
• Ajustez les tailles, paddings et marges pour chaque appareil
• Chaque paramètre avec une icône d’appareil peut être ajusté séparément

Bonnes pratiques responsive

Masquer un élément sur mobile

Sélectionnez le widget → Onglet Avancé → Responsive → Cochez « Masquer sur mobile » si un élément n’est pas pertinent sur petit écran.

7. Fonctionnalités avancées

Sections avec fond en parallaxe

1. Sélectionnez la section
2. Style → Arrière-plan → Type : Image
3. Taille : Couvrir
4. Position : Centre centre
5. Attachement : Fixe (crée l’effet parallaxe)
6. Ajoutez un overlay sombre (Arrière-plan overlay → Couleur noire, Opacité 50%) pour la lisibilité du texte

Animations d’entrée

Sélectionnez un widget → Onglet Avancé → Motion Effects :

• Entrance Animation : Fade In, Slide Up, Zoom In
• Animation Duration : Normal (1s) ou Slow (2s)
• Animation Delay : 100-300ms entre les éléments pour un effet séquentiel

Conseil : utilisez les animations avec modération. Maximum 2-3 par section. Trop d’animations distraient et ralentissent le site.

CSS personnalisé (par widget)

Onglet Avancé → CSS personnalisé (gratuit depuis Elementor 3.x) :

/* Appliquer un effet de hover personnalisé */
selector {
  transition: transform 0.3s ease;
}
selector:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

8. Sauvegarder et réutiliser

Sauvegarder comme template

1. Cliquez droit sur une section → Enregistrer comme template
2. Donnez un nom (ex: « Hero bleu avec CTA »)
3. Retrouvez-le dans Templates → Templates enregistrés
4. Réutilisez-le sur n’importe quelle page via l’icône dossier

Copier-coller entre pages

1. Cliquez droit sur une section → Copier
2. Ouvrez une autre page avec Elementor
3. Cliquez droit dans la zone de contenu → Coller

9. Performance : garder Elementor rapide

• Limiter les sections : une page avec 30+ sections est trop lourde. Visez 8-12 sections max
• Pas d’images en fond de section : utilisez un widget Image dans une colonne + overlay CSS plutôt qu’un background image lourd sur la section
• Désactiver Google Fonts : Elementor → Réglages → Avancé → Google Fonts Load → Désactiver (si vous les chargez via votre thème)
• Optimiser les CSS : Elementor → Réglages → Avancé → Improved CSS Loading → Oui
• Ne pas utiliser Elementor pour TOUT : les articles de blog n’ont pas besoin d’Elementor — utilisez l’éditeur Gutenberg natif pour le contenu textuel

10. Raccourcis clavier

Elementor démocratise la création de pages web professionnelles. Commencez par importer un template Starter, personnalisez les couleurs et le texte, puis progressivement construisez vos propres sections. En quelques heures de pratique, vous serez capable de créer n’importe quelle mise en page.