Elementor – guide complet (sections, widgets, générateur de thèmes, pop-up)

Elementor est le constructeur de pages numéro 1 pour WordPress - utilisé sur 18 millions de sites web au monde. Chez websky-studio.pl/, nous basons 80 % de nos projets sur cette plateforme, car elle offre le meilleur rapport performance/vitesseJe vais vous montrer tout ce que vous devez savoir, de la première section au générateur de thèmes en passant par les fenêtres contextuelles.

En bref

• Élémentaire est un constructeur de pages visuel : vous concevez en faisant glisser des éléments, aucun codage n’est requis.
• Version gratuite Suffisant pour 60 % des projets. Pro (99 $/an) Débloque le générateur de thèmes, les fenêtres contextuelles, les formulaires et le générateur de motivation.
• Elementor génère Beaucoup de HTML et de CSS — Si elle est mal optimisée, elle peut ralentir le site. Ce problème peut être géré.
• L'erreur la plus courante : tout construire à partir de widgets par défaut au lieu d'utiliser son propre CSS.

Elementor Architecture - 4 niveaux d'imbrication

Chaque page dans Elementor comporte 4 niveaux :

1. Section — pleine largeur ou conteneur (limité à 1200 px)
2. Colonne — dans les sections, 1 à 6 colonnes par ligne
3. Widget — élément atomique (titre, bouton, image, icône)
4. Attributs — typographie, marges, animations par widget

Depuis la version 3.16, il y a également Récipient — une alternative aux sections, plus légère et plus flexible (Flexbox). Nous recommandons l'utilisation de conteneurs, et non des sections.

Premiers pas - Installation et configuration

1. Installation

Extensions → Ajouter → « Elementor » → Installer → Activer. Une fois activée, « Elementor » apparaît dans le menu WordPress.

2. Configuration

Elementor → Paramètres :
– Éditeur: Activer les « conteneurs » (nouvelle option améliorée)
– Performance: Activer « Optimisation CSS », « Chargement amélioré des ressources »
– Expériences : Activer les « icônes de police intégrées » (moins de requêtes)
– Éteindre: Google Fonts (il est préférable d'héberger les polices localement)

3. Choisir un thème

Elementor fonctionne avec tous les thèmes, mais certains sont spécialement optimisé pour cela:

• Bonjour Elementor (Officiel d'Elementor) - la toile la plus légère et épurée
• Astra — populaire, léger, nombreux modèles prêts à l'emploi
• GénérerPress — modules haut de gamme très légers

Ne pas utiliser Les thèmes lourds comme BeTheme, Avada, Newspaper génèrent du CSS inutile et sont incompatibles avec Elementor.

Les widgets les plus importants de la version gratuite

Titre

Typographie, couleurs, espacement. N'oubliez pas. le niveau HTML correct — H1 une fois par page, H2 pour les sections, H3 pour les sous-sections.

Éditeur de texte

Éditeur WYSIWYG pour le contenu. Permet d'insérer des shortcodes et du HTML. Organisez votre texte en paragraphes plutôt qu'en un seul bloc : un atout pour le référencement naturel.

Image

Zawsze ustaw alt (atrybut alternatywny dla SEO i dostępności). Włącz lazy loading. Format WebP au lieu de JPG/PNG (Elementor 3.5+ prend en charge nativement ce format).

Bouton

Règles d'appel à l'action de la page : couleur contrastée, min. 44 × 44 px (Interface humaine Apple), texte d'action (« Obtenir l’offre », et non « Cliquez ici »).

Liste d'icônes

Listes à base d'icônes. Idéales pour mettre en avant les arguments de vente uniques, les avantages et les caractéristiques d'un produit.

Boîte d'image

Une carte avec image + titre + description + appel à l'action. L'élément le plus fréquemment utilisé dans les sections « Ce que nous faisons » / « Services ».

Elementor Pro - Ce que vous obtenez pour 99 $/an

Créateur de thèmes

La fonctionnalité la plus importante pour les professionnels. Permet de concevoir dans Elementor :

• En-tête (titre de l'ensemble du site web)
• Pied de page
• Modèle de publication unique (modèle d'article de blog)
• Modèle de page unique
• Archives (catégorie, étiquette, auteur)
• page 404
• Résultats de la recherche

Sans Theme Builder, il faut écrire ces modèles en PHP/theme. Avec Theme Builder, c'est visuel, sans code.

Créateur de pop-up

Créateur de pop-ups. Déclencheurs : temps passé sur la page, pourcentage de défilement, intention de quitter la page, clic. Applications : newsletter, promotion, consentement RGPD, aimant à prospects.

Formulaires

Mieux que Contact Form 7. Glisser-déposer, logique conditionnelle, intégrations avec Mailchimp, ActiveCampaign, GetResponse, Zapier.

Créateur de WooCommerce

Modèles personnalisés pour les pages produits, catégories, panier et paiement. Indispensables pour les boutiques Elementor.

CSS personnalisé

Cette fonctionnalité n'est pas disponible dans la version gratuite. Dans la version Pro, vous ajoutez du CSS par élément, section ou page. Indispensable pour les projets personnalisés.

Effets de mouvement

Animations pour le défilement, la parallaxe et le suivi de la souris. Sois prudent — Les animations interrompent l'interaction avec le rendu suivant. À utiliser avec parcimonie.

Meilleures pratiques pour les pop-ups

5 types de pop-ups qui fonctionnent

1. Intention de sortie — Indique lorsqu'un utilisateur est sur le point de quitter la page. Taux de clics : 4 à 8 %.
2. Basé sur le temps — après 30 secondes sur la page. Taux de clics : 2 à 4 %.
3. Basé sur le défilement — après avoir fait défiler 50 % de la page. Taux de clics : 3 à 5 %.
4. Basé sur le clic — après avoir cliqué sur le bouton « Obtenir l’offre ». Taux de conversion : 15 à 25 %.
5. Consentement relatif aux cookies — Conformité au RGPD, une première pour l'utilisateur.

Ce qu'il ne faut PAS faire

❌ Une fenêtre contextuelle apparaît immédiatement après l'entrée - cela fait fuir les clients
❌ Fenêtre contextuelle sans bouton de fermeture (X) : vous perdez des clients
❌ Fenêtres contextuelles mobiles bloquant tout le contenu - Google pénalise les « interstitiels intrusifs »
❌ Fenêtre contextuelle d'inscription à la newsletter pour un utilisateur déjà inscrit - fuites de suivi des cookies

Configuration du générateur de pop-up Elementor

1. Modèles → Fenêtres contextuelles → Ajouter
2. Choisissez un modèle (ou commencez à partir de zéro)
3. Conditions d'affichage : Où afficher (page entière/catégorie)
4. Déclencheurs : quand afficher (heure, défilement, sortie)
5. Règles avancées : pour qui (une fois par jour, connecté)
6. Publier → copie le code court à insérer

Conception réactive dans Elementor

Elementor possède 3 points de rupture par défaut :

• Ordinateur de bureau — > 1024 px
• Comprimé — 768–1024 px
• Mobile — < 768 px

La version Pro vous permet d'ajouter 5 points de rupture supplémentaires (portrait mobile, paysage tablette, grand écran d'ordinateur de bureau).

7 règles de réactivité dans Elementor

1. Conception pour ordinateur et mobile (ou inversement - mobile first), mais toujours tester à chaque point de rupture
2. Masquer sur mobile pour les éléments inutiles (séparateurs décoratifs, grandes images)
3. Polices plus petites sur mobile — H1 de 56 px → 32 px, H2 de 40 px → 24 px
4. Moins de colonnes sur mobile — 4 colonnes → 2 (empilées)
5. Boutons pleine largeur sur mobile — plus facile à cliquer
6. Réduction des marges de section sur mobile — ordinateur 100 px → mobile 40 px
7. Testez pour de vrai — pas seulement sur un ordinateur portable, mais sur un vrai téléphone

7 erreurs d'Elementor qui nuisent au référencement

1. Trop d'imbrication de sections

Section → Section interne → Section interne → colonnes → widget = HTML terriblement lourd. Limite : maximum 2 niveaux d'imbrication.

2. Utiliser l'image par défaut au lieu d'en télécharger une optimisée.

Elementor ne compresse pas les images. Veuillez importer des images WebP (ShortPixel) déjà optimisées et à la taille appropriée.

3. Polices Google chargées par Elementor

Chaque page charge les polices Google depuis fonts.googleapis.com – requête supplémentaire. Hébergez les polices localement (plugin). OMGF).

4. Activation de l'« Animation » sur chaque élément

Chaque animation nécessite le chargement d'une bibliothèque JS. Si 50 éléments sont animés, la charge CPU est multipliée par 50. Limite : 5 animations par page.

5. Utilisation exclusive des widgets Elementor au lieu du HTML/code court.

Les onglets, les accordéons et les curseurs dans Elementor génèrent du JavaScript supplémentaire. Parfois, un simple code HTML dans un widget « HTML » est plus léger.

6. Effets de mouvement excessifs

Parallaxe, suivi de la souris, éléments collants : ils perturbent le fonctionnement d’INP et de CLS. À utiliser avec discernement.

7. Manque d'optimisation CSS

Dans Elementor → Performance, activez « Optimisation CSS » i « Icônes de police intégrées » — réduit automatiquement la taille du CSS de 30 à 50 %.

Elementor ou Gutenberg ?

En 2026, Gutenberg a rattrapé Elementor sur de nombreux points (édition complète du site, modèles). Le choix dépend de :

Application: Pour les projets personnalisés axés sur un design soigné, utilisez Elementor. Pour les blogs et les éditeurs, utilisez Gutenberg.

Et ensuite ?

Vous débutez avec Elementor ? Programme sur 7 jours :

1. Jour 1 et 2 : Installez Elementor et suivez le tutoriel dans les paramètres.
2. Jour 3 : Reconstruire 1 page simple (par exemple « Contact »)
3. Jour 4 : Créer une page d’accueil avec des modèles prêts à l’emploi → Bibliothèque
4. Jour 5 : Configurer le générateur de thèmes (si version Pro)
5. Jour 6 : Créer 1 pop-up (newsletter)
6. Jour 7 : Test de compatibilité mobile et de vitesse de chargement des pages

Elementor est notre stack par défaut — Le forfait de base de pages de cartes de visite à partir de 500 PLN inclut une conception entièrement personnalisée dans Elementor. Découvrez nos projets.