30. Les widgets Pro de design

Elementor Pro ajoute une cinquantaine de widgets de design aux widgets gratuits du chapitre 16. Ce chapitre est un inventaire raisonné : pour chacun, à quoi il sert sur un site vitrine, les réglages qui comptent et le piège à éviter. Il se lit comme un catalogue, et se consulte ensuite comme une fiche.

En bref

Public: Toute personne équipée d’Elementor Pro qui se demande « existe-t-il un widget pour ça ? ».
Enjeu: Choisir le bon widget en connaissance de cause, et surtout ne pas en ajouter par gourmandise.
Idée clé: Un widget Pro est une réponse à un besoin, jamais une décoration : si vous ne savez pas nommer le besoin, ne le déposez pas.
Prérequis: Chapitres 06 (atomes et widgets classiques), 16 (widgets gratuits), 24 (Constructeur de thème), 27 (Loop Builder), 28 et 29 (formulaires, popups).
Lecture: Environ 25 minutes (+ 40 minutes d’exercice).

30.1 — Comment lire cet inventaire

Tous les widgets présentés ici sont des widgets classiques (V3) : ils s’ouvrent avec les trois onglets Contenu, Style et Avancé, et se déposent dans un Flexbox atomique comme n’importe quel widget du chapitre 16. Leurs libellés français ne sont pas tous fixés dans la traduction d’Elementor Pro ; chaque carte donne donc le nom anglais, qui reste le plus sûr dans la recherche du panneau, et une traduction prudente. Les badges indiquent le plan nécessaire : Pro pour tous les plans Pro à partir d’Essential, Advanced+ pour les plans Advanced Solo, Advanced, Expert et One.

Le Centre d’aide annonce 57 widgets Pro dans le plan Essential et 85 dans les plans Advanced et supérieurs, les 28 de différence étant pour l’essentiel les widgets WooCommerce (chapitre 31), le Tableau de prix, la Liste de prix et le bouton PayPal. Les widgets de contenu dynamique déjà traités ailleurs (Titre de publication, Contenu de publication, Loop Grid, Formulaire, Menu panier) ne sont pas repris ici, sauf pour renvoi.

Elementor Pro

Tout ce chapitre suppose une licence Elementor Pro active sur le site. Avec le plan Advanced Solo (84 $ par an hors taxes, au 6 septembre 2026) retenu pour la Menuiserie Roche, l’ensemble des widgets ci-dessous est disponible. Avec le plan Essential (60 $ par an), les cartes marquées Advanced+ manquent : pour un site vitrine, la plus regrettée est le Tableau de prix, que l’on remplace alors par trois Blocs Div stylés à la main (chapitre 17).

Méthode

Avant de déposer un widget Pro, posez trois questions. Le besoin existe-t-il vraiment sur cette page (un carrousel de témoignages pour deux avis n’a pas de sens) ? Un élément atomique ou un widget gratuit fait-il déjà l’affaire (un Titre et un Bouton valent souvent un Appel à l’action) ? Le widget charge-t-il des ressources extérieures, et donc des traceurs (Facebook, Lottie hébergé ailleurs) ? Si la réponse à la première question est oui et aux deux autres non, déposez-le.

30.2 — Naviguer dans le site

Ces widgets servent surtout dans l’en-tête et le pied de page du Constructeur de thème (chapitre 24), là où le thème Hello ne fournit rien.

Menu WordPress (WordPress Menu) Pro Classique

Affiche un menu composé dans Apparence › Menus. Réglages qui comptent : le menu choisi, la disposition (horizontale, verticale, déroulante), le point de rupture à partir duquel il devient un menu « hamburger », et le style des sous-menus. Piège : oublier de tester le menu mobile ouvert, sur un vrai téléphone, avec les sous-menus dépliés.

Mega Menu Pro Classique

Un menu dont chaque entrée peut ouvrir un panneau construit librement (images, colonnes, boutons) plutôt qu’une simple liste. Utile quand un site a beaucoup de prestations à organiser. Piège : pour cinq pages, c’est une complexité inutile ; le Menu WordPress suffit.

Off-Canvas (« panneau latéral ») Pro Classique

Un panneau qui glisse depuis un bord de l’écran, ouvert par un bouton ou un lien, et qui peut contenir n’importe quel élément : menu, coordonnées, formulaire de rappel. Réglages : côté d’ouverture, largeur, voile, fermeture. Piège : y cacher des informations essentielles (téléphone, horaires) qui devraient être visibles sans clic.

Recherche (Search) Pro Classique

Un champ de recherche moderne, avec plusieurs présentations dont une recherche en plein écran, et la possibilité de limiter les résultats à un type de contenu. Pertinent dès qu’un site a un blog fourni. Piège : un site de cinq pages n’a pas besoin de recherche ; l’espace vaut mieux pour un bouton « Devis ».

Table des matières (Table of Contents) Pro Classique

Construit automatiquement un sommaire à partir des titres H2-H3 de la page, avec liens d’ancre, et peut rester collé au défilement. Réglages : niveaux de titres inclus, option de réduction, position collante. Piège : l’activer sur une page dont les titres ne sont pas hiérarchisés (chapitre 13) produit un sommaire incompréhensible.

Modèle (Template) Pro Classique

Insère un modèle enregistré (chapitre 21) à cet endroit de la page ; le modèle reste modifiable en un seul lieu. C’est l’ancêtre des Composants (chapitre 22), qui lui sont préférables pour un contenu atomique. Piège : imbriquer un modèle dans un modèle, ce qui rend le site illisible à maintenir.

30.3 — Mettre en avant

Ces widgets attirent l’œil sur un message. Un par page suffit ; deux se neutralisent.

Titre animé (Animated Headline) Pro Classique

Un titre dont une partie est soulignée, entourée ou surlignée par un tracé animé, ou dont un mot tourne dans une liste (« escaliers », « cuisines », « agencements »). Réglages : le texte avant et après, les mots qui tournent, le style et la durée. Piège : l’utiliser pour le H1 de la page ; les moteurs et les lecteurs d’écran préfèrent un H1 stable.

Appel à l’action (Call to Action) Pro Classique

Regroupe en un widget une image ou un fond, un titre, un texte, un bouton et un ruban, avec des effets au survol. Pratique pour un bandeau « Demandez votre devis » homogène. Piège : un Flexbox atomique avec Titre, Paragraphe et Bouton fait la même chose avec vos classes ; ne prenez ce widget que pour ses effets de survol.

Boîte à bascule (Flip Box) Pro Classique

Une carte à deux faces : la face avant se retourne au survol pour révéler un texte et un bouton. Réglages : contenu des deux faces, effet et direction, hauteur. Piège : sur téléphone, il n’y a pas de survol ; la carte se retourne au toucher et le bouton demande un second toucher. Mettez le lien aussi sur la face avant.

Diapositives (Slides) Pro Classique

Un diaporama plein écran ou en bandeau : chaque diapositive a son image de fond, son titre, son texte et son bouton, avec lecture automatique. Réglages : hauteur, transition, délai, flèches et points. Piège : le diaporama d’accueil qui tourne seul est lourd et rarement lu ; une seule image forte convertit mieux (chapitre 14).

Compte à rebours (Countdown) Pro Classique

Affiche le temps restant jusqu’à une date, avec des actions à l’échéance (masquer, rediriger, afficher un message). Légitime pour des portes ouvertes ou une offre réellement datée. Piège : le compte à rebours « permanent », qui repart pour chaque visiteur, crée une fausse urgence et peut constituer une pratique commerciale trompeuse ; n’en mettez jamais.

Points chauds (Hotspot) Pro Classique

Pose des repères cliquables sur une image, chacun ouvrant une infobulle. Idéal pour commenter une réalisation : « garde-corps en chêne », « marches sans contremarche ». Réglages : position de chaque point en pourcentage, contenu et déclenchement de l’infobulle. Piège : plus de cinq ou six points, et l’image devient illisible.

Lottie Pro Classique

Joue une animation vectorielle au format Lottie (fichier JSON), légère et nette à toute taille, déclenchée à l’affichage, au survol, au clic ou au défilement. Réglages : source du fichier, déclencheur, boucle, vitesse. Piège : charger l’animation depuis un site tiers ; téléversez le fichier dans votre Médiathèque, et respectez la règle « peu et bien » du chapitre 20.

Suivi de progression (Progress Tracker) Pro Classique

Une barre, horizontale ou circulaire, qui se remplit à mesure que le visiteur fait défiler la page ou un conteneur. Utile sur un long article de conseils. Piège : sur une page courte, il ne signifie rien ; réservez-le aux articles du blog (chapitre 25).

30.4 — Montrer ses réalisations et ses preuves

Pour un artisan, la photo d’un chantier et l’avis d’un client valent tous les arguments. Ces widgets les mettent en scène ; les chapitres 14 et 27 restent la référence pour les images et les grilles dynamiques.

Publications (Posts) et Portfolio Pro Classique

Publications affiche une grille d’articles avec des dispositions prêtes (classique, cartes, contenu complet), une requête et une pagination. Portfolio affiche une grille filtrable par catégorie avec effet au survol. Piège : depuis le Loop Builder (chapitre 27), ces deux widgets sont surtout utiles pour aller vite ; le Loop Grid donne un gabarit de carte entièrement à vous.

Galerie (Gallery) Pro Classique

Version Pro de la Galerie basique : plusieurs galeries dans un même widget avec une barre de filtres (Escaliers, Cuisines, Agencements), dispositions grille, justifiée ou mosaïque, visionneuse. Réglages : galeries et leurs titres, disposition, espacement, survol. Piège : y verser des photos non compressées ; préparez-les d’abord (chapitre 14).

Carrousel de médias (Media Carousel) Pro Classique

Un carrousel d’images et de vidéos, en défilement classique, en diaporama avec vignettes ou en présentation décalée. Réglages : diapositives, effet, lecture automatique, visionneuse. Piège : le carrousel automatique qui tourne pendant que l’on lit ; laissez le visiteur commander.

Carrousel de témoignages (Testimonial Carousel) Pro Classique

Fait défiler des témoignages avec photo, nom, fonction et texte, selon plusieurs habillages. Réglages : les témoignages, le nombre visible, la navigation. Piège : inventer ou reformuler des avis ; utilisez des avis réels, avec l’accord écrit de leurs auteurs, et citez la commune plutôt qu’un nom complet si la personne le préfère.

Carrousel imbriqué (Nested Carousel) Pro Classique

Un carrousel dont chaque diapositive est un conteneur : on y met ce que l’on veut, une réalisation avec son texte et son bouton, par exemple. C’est le carrousel le plus souple. Réglages : nombre de diapositives visibles, espacement, navigation, lecture automatique. Piège : des diapositives de hauteurs différentes ; fixez une hauteur minimale.

Avis (Reviews) Pro Classique

Un carrousel d’avis saisis à la main, chacun avec une note en étoiles, un nom et une icône de réseau. Piège : ce widget n’importe pas vos avis Google ; il affiche ce que vous y écrivez. Recopier des avis Google reste possible, mais mentionnez leur origine et gardez-les fidèles.

Citation (Blockquote) Pro Classique

Une citation mise en valeur, avec auteur, dans plusieurs styles (bordure, encadré, guillemets), et un bouton de partage facultatif. Bien pour un mot de l’artisan sur la page À propos. Piège : le bouton de partage vers un réseau charge parfois des ressources tierces ; désactivez-le si vous n’en avez pas l’usage.

Facebook (page, bouton, intégration, commentaires) Pro Classique

Quatre widgets qui affichent une page, un bouton J’aime, une publication ou des commentaires Facebook. Piège majeur : ils chargent le kit de développement de Facebook, donc des traceurs, dès l’affichage de la page. Sans bandeau de consentement conforme (chapitre 35), préférez une simple icône Icônes réseaux sociaux qui renvoie vers votre page.

Liste de lecture vidéo (Video Playlist) Pro Classique

Une liste de vidéos YouTube, Vimeo ou auto-hébergées avec un lecteur principal et des vignettes, organisables en onglets. Utile pour une série de conseils d’entretien. Piège : les vidéos YouTube posent des traceurs ; activez leur mode de confidentialité renforcée si le widget le propose, ou hébergez vous-même (chapitre 14).

Boutons de partage (Share Buttons) Pro Classique

Des boutons « partager cette page » vers les réseaux et par e-mail, avec libellé, compteur facultatif et habillages. Ils n’appellent pas de ressources extérieures avant le clic. Piège : en mettre sur la page d’accueil ; ils n’ont de sens que sur un article ou une réalisation.

Mise en évidence de code (Code Highlight) Pro Classique

Affiche un extrait de code informatique avec coloration syntaxique et numéros de ligne. Sans usage pour un site d’artisan ; mentionné pour que vous ne le confondiez pas avec le widget HTML du chapitre 16, qui exécute du code au lieu de l’afficher.

Connexion (Login) Pro Classique

Un formulaire de connexion WordPress mis en forme, avec redirection après connexion et lien « mot de passe oublié ». Utile seulement si des clients ou des salariés ont un compte sur le site (espace de suivi de chantier, par exemple). Piège : l’afficher publiquement sans raison invite les robots à tenter des mots de passe.

30.5 — Vendre et convertir

Ces widgets transforment l’intérêt en action. Deux d’entre eux, le Tableau de prix et la Liste de prix, sont classés par le tableau comparatif du Centre d’aide dans les plans Advanced et supérieurs, alors que d’autres pages Elementor ne font pas cette distinction ; nous les marquons Advanced+ par prudence.

Tableau de prix (Price Table) Advanced+ Classique

Une colonne d’offre : en-tête, prix avec devise et période, liste de caractéristiques avec icônes, bouton, ruban « Le plus choisi ». Trois widgets côte à côte dans un Flexbox donnent une grille d’offres. Réglages : prix et période, éléments de la liste, bouton, ruban. Piège : afficher des prix hors taxes à des particuliers ; pour un consommateur, le prix s’affiche toutes taxes comprises.

Liste de prix (Price List) Advanced+ Classique

Une liste de lignes « prestation, description, prix », avec image facultative, comme une carte de restaurant ou une grille tarifaire. Réglages : les lignes, le séparateur pointillé, l’alignement du prix. Piège : la mettre à jour dans une page et l’oublier dans une autre ; un tarif se met en un seul endroit, éventuellement dans un Composant (chapitre 22).

Bouton PayPal et Bouton Stripe Advanced+ Classique

Un bouton de paiement d’un montant fixe, sans boutique : acompte, bon cadeau, atelier d’initiation. Réglages : compte marchand, montant, devise, description, mode test. Le Centre d’aide classe le bouton PayPal en Advanced+ ; le bouton Stripe est à considérer au même régime. Piège : encaisser sans conditions générales ni facture ; le chapitre 31 décrit les obligations minimales.

Boutons flottants et Barres flottantes (Floating Buttons, Floating Bars) Gratuit Classique

Ce ne sont pas des widgets mais des modèles, créés depuis l’administration dans les modèles d’Elementor : un bouton de contact toujours visible (téléphone, WhatsApp, e-mail) ou une barre d’annonce en haut de page. Les conditions d’affichage de ces modèles sont réservées à Pro. Piège : un bouton flottant qui masque le bouton du formulaire sur mobile ; testez la superposition.

Pas-à-pas : trois offres en Tableau de prix

Préparez le conteneur. Sur la page « Prestations », ajoutez un Flexbox en ligne, écart 24 px, retour à la ligne activé, aligné en haut. Sur mobile, passez-le en colonne (chapitre 12).
Déposez un Tableau de prix (recherche price table) et renseignez l’onglet Contenu : en-tête « Escalier droit », prix et période (« à partir de », « TTC, pose comprise »), quatre caractéristiques, bouton « Demander un devis » relié à la page Contact.
Stylez une fois. Onglet Style : en-tête bois chaud #A8663C, texte blanc cassé, liste en anthracite, bouton avec le style de vos boutons primaires. Le widget classique n’utilise pas vos classes atomiques : réglez-le avec les couleurs globales du chapitre 19.
Dupliquez deux fois (Ctrl+D ; Cmd+D sur Mac) et modifiez les contenus : « Cuisine sur mesure », « Agencement ». Activez le ruban sur l’offre à privilégier.
Vérifiez l’alignement des trois boutons en bas de colonne (hauteur égale des tableaux, ou aligner les éléments sur Étirer dans le Flexbox), puis la vue mobile.

Attention

Un tableau de prix engage. Pour un artisan dont chaque chantier est unique, préférez des prix « à partir de » clairement libellés, précisez ce qu’ils comprennent (fourniture, pose, déplacement) et datez la grille. Un prix affiché et non tenu est un motif de litige, pas un argument.

30.6 — Les éléments « Site »

Ces widgets, rangés dans la catégorie Site du panneau, affichent des informations que WordPress connaît déjà. Ils n’ont de sens que dans les modèles du Constructeur de thème (chapitres 24 et 25), où ils évitent de ressaisir ce qui change d’une page à l’autre.

Logo du site (Site Logo) Pro Classique

Affiche le logo défini dans Réglages du site › Identité du site, avec un lien vers l’accueil par défaut. Changez le logo une fois, il change partout. Réglages : taille, alignement, lien. Piège : téléverser le logo en 3000 pixels de large ; 400 à 600 pixels suffisent, ou un SVG (chapitre 14).

Titre du site et Titre de page (Site Title, Page Title) Pro Classique

Le premier affiche le nom du site, le second le titre de la page en cours, comme le ferait un widget Titre avec une balise dynamique (chapitre 26). Réglages : balise HTML, lien, typographie. Piège : Titre de page en H1 dans l’en-tête alors que la page a déjà son propre H1 ; un seul H1 par page.

Fil d’Ariane et Plan du site (Breadcrumbs, Sitemap) Pro Classique

Le fil d’Ariane affiche le chemin « Accueil › Réalisations › Escalier en chêne » ; il s’appuie sur la fonction de fil d’Ariane d’une extension SEO (Yoast SEO, cité en exemple) et affiche un avertissement sans elle. Le Plan du site liste toutes les pages et publications par type, pour une page « Plan du site » utile à l’accessibilité. Piège : un fil d’Ariane dans l’en-tête d’un site de cinq pages n’apporte rien ; il devient utile avec un blog et des réalisations classées.

Formulaire de recherche, Titre d’archive, Publications d’archive (Search Form, Archive Title, Archive Posts) Pro Classique

Le Formulaire de recherche est la version simple du widget Recherche, pour le modèle Résultats de recherche. Titre d’archive affiche « Catégorie : Escaliers » et Publications d’archive la liste des contenus de l’archive en cours ; tous deux vivent dans le modèle Archive (chapitre 25). Piège : Publications d’archive hors d’un modèle d’archive n’affiche rien de prévisible ; utilisez Loop Grid ailleurs.

30.7 — Quel widget pour quel besoin

Le tableau qui suit part du besoin, pas du widget. Il indique aussi l’alternative gratuite ou atomique quand elle existe, parce qu’elle est souvent préférable sur un site de cinq pages.

Besoin sur un site vitrine	Widget Pro	Alternative ou remarque
Un menu de navigation dans mon en-tête	Menu WordPress	Sans Pro : menu du thème Hello via le Customizer (chapitre 24).
Un bouton « Appeler » toujours visible sur mobile	Boutons flottants (modèle)	Bouton atomique en position fixe avec lien `tel:`, visible sur mobile seulement (chapitre 15).
Afficher mes tarifs en trois offres	Tableau de prix (Advanced+)	Trois Blocs Div stylés avec une classe « carte » (chapitre 18).
Une grille tarifaire ligne par ligne	Liste de prix (Advanced+)	Widget Éditeur de texte avec un tableau simple (chapitre 13).
Montrer mes avis clients	Carrousel de témoignages, Avis	Widget Témoignage gratuit dans une Grille atomique (chapitre 16).
Une galerie filtrable de réalisations	Galerie (Pro)	Loop Grid avec Filtre par taxonomie si les réalisations sont des contenus (chapitre 27).
Commenter une photo de chantier point par point	Points chauds	Image atomique suivie d’une Liste d’icône.
Un bandeau d’appel au devis sur chaque page	Appel à l’action	Composant atomique « Appel à devis » (chapitre 22), préférable.
Un mot qui change dans le titre d’accueil	Titre animé	Un Titre H1 fixe reste la valeur sûre pour le référencement.
Annoncer des portes ouvertes datées	Compte à rebours	Un Paragraphe avec la date, plus une popup limitée (chapitre 29).
Encaisser un acompte ou un bon cadeau	Bouton PayPal / Stripe (Advanced+)	Lien de paiement fourni par la banque ou le prestataire, posé sur un Bouton (chapitre 31).
Le logo, cliquable vers l’accueil, dans l’en-tête	Logo du site	Image atomique avec lien vers l’accueil, à changer à la main si le logo change.
Un sommaire sur un long article de conseils	Table des matières	Liste de liens d’ancre saisie à la main (chapitre 15).
Ma page Facebook sur le site	Facebook (page)	Icône Icônes réseaux sociaux vers la page : aucun traceur.

Bonne pratique

Notez, dans un document de suivi du site, la liste des widgets Pro que vous utilisez et sur quelles pages. Le jour où la licence n’est pas renouvelée (chapitre 02) ou où un widget change, vous saurez immédiatement quoi vérifier. Sur le site de la Menuiserie Roche, cette liste tient en six lignes : Menu WordPress, Logo du site, Formulaire, Tableau de prix, Loop Grid, Boutons flottants.

Exercice 30.1 — La page « Prestations » de la Menuiserie Roche 40 min

Objectif : employer trois widgets Pro à bon escient sur une même page, sans surcharge, et vérifier leur rendu sur mobile.

Ouvrez la page « Prestations ». Dans le bandeau de haut de page, remplacez le sous-titre par un Titre animé en H2 : texte avant « Nous fabriquons vos », mots tournants « escaliers », « cuisines », « agencements », texte après « sur mesure ». Laissez le H1 « Prestations » inchangé au-dessus.
Sous le bandeau, construisez la grille de trois Tableaux de prix en suivant le pas-à-pas de 30.5 : Escalier droit, Cuisine sur mesure, Agencement, avec des prix « à partir de » TTC, quatre caractéristiques chacun et un bouton vers la page Contact. Ruban sur l’offre Cuisine.
Depuis l’administration, créez un modèle de Boutons flottants avec deux actions : « Appeler » (lien tel:0473000000) et « WhatsApp » (lien de contact WhatsApp du chapitre 26, ou le modèle WhatsApp proposé). Placez-le en bas à droite, définissez sa condition d’affichage sur tout le site sauf la page Contact.
Passez en vue mobile : les trois tableaux en colonne, le titre animé lisible sur deux lignes au plus, les boutons flottants qui ne recouvrent ni un bouton de tableau ni le pied de page. Corrigez les marges internes si nécessaire.
Publiez, ouvrez la page sur un téléphone, et appuyez sur « Appeler » : le composeur téléphonique doit s’ouvrir avec le numéro prérempli.

Résultat attendu : une page « Prestations » avec un H1 stable, un sous-titre animé, trois offres alignées dont une mise en avant, et deux boutons de contact flottants présents sur tout le site sauf la page Contact, testés sur téléphone. Le tout n’emploie que trois widgets Pro, chacun répondant à un besoin nommé.

À retenir

Les widgets Pro de design sont des widgets classiques : trois onglets, déposés dans vos Flexbox atomiques, stylés avec les couleurs globales plutôt qu’avec les classes.
Le plan Essential en compte 57, les plans Advanced et supérieurs 85 ; Tableau de prix, Liste de prix, PayPal et WooCommerce relèvent des seconds.
Pour l’en-tête : Menu WordPress et Logo du site ; pour les preuves : Galerie, Carrousel de témoignages ; pour vendre : Tableau de prix et Boutons flottants.
Les widgets Facebook, YouTube et certains boutons de partage chargent des ressources tierces : sans bandeau de consentement, préférez une icône vers le réseau.
Avant chaque dépôt, nommez le besoin, cherchez l’alternative atomique ou gratuite, et tenez la liste des widgets Pro employés.