Table des matières
Elementor Pro enrichit considérablement la version gratuite d’Elementor, en rajoutant :
- de nombreux widgets, notamment les widgets WooCommerce
- les pages WooCommerce
- les balises dynamiques
- le constructeur de thème
- les kits et modèles de page (page templates)
- les formulaires
- le CSS personnalisé (custom CSS)
- les attributs HTML personnalisés (custom attributes)
- et d’autres fonctionnalités encore
Différence entre Elementor Pro et Elementor Experts
Elementor Pro et Elementor Experts sont deux sortes de « plans », c’est à dire de licences payables à l’année.
Elementor Pro en tant que plugin est en fait vendu en 4 plans possibles :
- Essential Plan : activation d’Elementor Pro sur 1 seul site
- Advanced Plan : activation d’Elementor Pro sur 3 sites
- Expert Plan : activation d’Elementor Pro sur 25 sites + accès aux « expert website kits »
- Agency Plan : activation d’Elementor Pro sur 1000 sites + accès aux « expert website kits »
En gros on a donc toujours la même version d’Elementor Pro, ce qui varie est le nombre d’activations possibles, et la disponibilité ou non des sites experts. En plus, les licences experts peuvent s’inscrire à un répertoire sur lequel ils peuvent proposer leurs services.
Si vous avez besoin d’une licence Elementor Pro, j’en ai plus qu’il ne m’en faut dans mon activité de créateur de sites web. Je peux vous en céder une dans le cadre d’une presta d’installation.
Les widgets d’Elementor Pro
Elementor Pro enrichit considérablement le vocabulaire du webdesigner amateur ou professionnel en permettant d’ajouter par glisser-déposer dans n’importe quelle maquette de page, d’article ou de bloc une vaste collection de widgets, qu’on peut ensuite paramétrer finement.
Parmi ces widgets on compte :
- Posts – une liste d’articles, personnalisables : sélection de catégories, choix de mise en forme, etc
- Portfolio – une galerie d’images paramétrable
- Gallery – une autre forme de galerie d’images
- Form – la construction de formulaires, sans plugins tiers
- Login – une interface de connexion
- Slides – un diaporama
- Nav Menu – un menu de navigation, à placer dans l’en-tête (header), la colonne latérale (sidebar) ou le pied de page (footer)
- Animated Headline – un titre animé
- Price List – une liste de prix bien mise en forme
- Price Table – un affichage des prix sous forme de tableau bien mis en forme
- Flip Box – une boîte avec icône, titre et texte, qui se retourne en 3D, verticalement ou horizontalement
- Call to Action – un bloc pré-designé, avec image, titre, texte et bouton, qui met en valeur un appel à l’action
- Media Carousel – un carroussel d’images
- Testimonial Carousel – un carroussel de témoignages clients
- Reviews – mise en forme des avis clients / utilisateurs
- Table of Contents – une table des matières
- Countdown – un compte à rebours
- Share Buttons – des boutons de partage sociaux, avec icônes et liens
- Blockquote – une mise en forme des citations
- Lottie – des petites animations rigolotes
- Facebook Button – les boutons Facebook, Like, partage
- Facebook Comments – l’interface des commentaires de Facebook
- Facebook Embed – intégrer des éléments de Facebook (posts…)
- Facebook Page – intégrer des éléments depuis une page Facebook
- Hotspot – des informations additionnelles situées sur une image (ex : mise en situation de 3 produits, et au survol de chaque produit des infos apparaissent)
- Paypal Button – un bouton Paypal pour permettre aux internautes de payer directement, sans plugin tiers
- Code Highlight – une mise en forme du code informatique
- Video Playlist – une liste de vidéos
- Template – un modèle Elementor
Les widgets de site
Elementor Pro vient aussi avec une série de widgets qui servent à créer facilement et sans code l’interface d’un site web :
- Search Form – un formulaire de recherche
- Author Box – un bloc comportant des infos sur un auteur : image d’avatar, nom / titre, texte / bio, etc
- Post Comments – un bloc de commentaires liés à un article
- Post Navigation – une interface de navigation de type article précédent / article suivant
- Post Info – les informations « meta » du post : date de publication, temps de lecture, nombre de commentaires…
- Sitemap – le plan du site, à fournir aux moteurs de recherche, notamment à Google Search Console, Bing Webmasters Tools, etc
- Breadcrumbs – le fil d’Ariane, paramétrable
- Menu Cart – le panier avec icône et / ou texte et son contenu
- Site Logo – le logo du site
- Site Title – le titre du site
- Page Title – le titre de la page
- Post Title – le titre de l’article
- Post Excerpt – l’extrait de l’article
- Featured Image – l’image à la une de l’article
- Archive Title – le titre de l’archive (catégorie, tag / étiquette)
- Archive Posts – la liste des articles d’une archive de catégorie ou de tag / étiquette
Les widgets WooCommerce
Les widgets WooCommerce ne sont disponibles que sous Elementor Pro. Ils permettent de crééer et designer une boutique e-commerce de manière intuitive et sans code.
- Archive Products – une liste des produits d’une catégorie de produit
- Archive description – une description d’une catégorie de produit
- Products – une liste des produits
- WooCommerce Breadcrumbs – le fil d’Ariane des produits et des catégories produit
- Custom Add To Cart – bouton d’ajout au panier personnalisable
- WooCommerce Pages – ajout d’une page WooCommerce (panier, commande, mon compte…)
- Product Categories – liste des catégories produit
- Menu Cart – interface panier ajoutable au menu
- Product Rating – évaluation / avis produit
- Product Stock – état du stock d’un produit (disponible ou pas, nombre en stock)
- Product Meta – données meta du produit (prix, quantité, livraison…)
- Short Description – description courte du produit
- Product Data Tabs – onglets des données de produit (description longue, infos additionnelles, avis)
- Additional Information – informations additionnelles du produit
- Product Related – produit lié au produit actuel
- Upsells – ventes liées au produit actuel (« vous aimerez aussi… »)
Les widgets des services tiers
Elementor Pro intègre des dizaines d’applications tierces qui ajoutent des fonctionnalités de SEO, réseaux sociaux, gestion de champs de base de données, mailing / marketing, etc.
Il suffit d’installer un plugin d’une de ces applications pour avoir ses widgets disponibles dans l’éditeur visuel d’Elementor, et ensuite les amener par glisser-déposer dans une maquette de page.
Les pages WooCommerce
Dans la foulée des widgets WooCommerce, Elementor Pro offre aussi de vous laisser gérer le design des pages WooCommerce : Panier, Commande, Mon compte, etc.
On peut donc recréer ou modifier entièrement ces pages et appeler les données nécessaires soit par des widgets soit par des balises dynamiques.
Les balises dynamiques (dynamic content)
A quoi servent les balises dynamiques et comment elles fonctionnent
Les balises dynamiques comptent parmi les fonctionnalités les plus intéressantes d’Elementor Pro.
Elles reposent sur un vieux principe de l’informatique : la séparation entre un type de donnée et son contenu, dans une base de données.
Prenons un exemple : une boutique eCommerce vend des produits.
Ces produits ont des attributs :
- nom de produit
- description du produit
- prix
- taille
- poids
- couleur
- marque
L’attribut marque peut aussi avoir des attributs :
- nom de marque
- url du site de la marque
- etc
Ainsi, on va pouvoir avoir un produit dont les données soient les suivantes :
- nom de produit : pantalon pour homme
- description du produit : blablabla
- prix : 49€
- taille : 42
- poids : 200g
- couleur : noir
- marque : Super Pantalon
Et la marque aura ces données :
- nom de marque : Super Pantalon
- url du site de la marque : superpantalon.com
- etc
Pour afficher toutes ces informations sur une page, il faudrait les taper à la main à chaque fois.
Et si on voulait changer la mise en forme, il faudrait le faire sur chaque page.
Imaginez le calvaire si on a 1000 produits de 100 marques…
Elementor Pro va permettre de régler ce problème d’un coup :
- on va d’abord créer des modèles de page (page templates)
- dans lesquelles on va intégrer non pas les données telles quelles, mais leur type (nom de produit, nom de marque, etc)
- et ensuite, Elementor Pro va aller retrouver les données de chaque type et les afficher dans la mise en forme voulue dans le modèle défini : donc sur la page Pantalon pour homme, il va remplacer automatique le nom du produit par « Pantalon pour homme », le prix par « 49€ », etc etc.
Types de contenus dynamiques
De nombreux types d’éléments vont pouvoir être définis comme contenus dynamiques :
- des titres (d’article, de page, de produit…)
- des textes
- des liens
- des images (d’article, de produit…)
- etc
On pourra notamment appeler les champs des produits WooCommerce :
- Nom du produit
- Image du produit
- Galerie du produit
- Description courte
- Description longue
- Prix (et variantes : tarif promo…)
- Avis
- Etiquettes
- etc
Les champs personnalisés via des widgets tiers
Elementor Pro permet l’intégration des meilleurs plugins de gestion de champs personnalisés :
- Advanced Custom Fields (ACF)
- Toolset Custom Fields
- PODS Fields
Ces plugins permettent de créer des champs (types de données), et Elementor Pro nous laisse les intégrer aux maquettes.
Par exemple, imaginons qu’on crée un site de biographies des stars de cinéma. Chaque star aura les champs suivant :
- Nom / Prénom
- Photo
- Date de naissance
- Lieu de naissance
- Date de décès
- Lieu de décès
- Nombre de films
- Principaux films
- etc
Sans les « custom fields », il serait impossible de standardiser ces informations. Avec ces champs, on peut non seulement construire une base de données personnaliser mais l’afficher comme on veut avec Elementor Pro : il suffira de construire une maquette, du genre :
- la photo en haut
- ensuite le prénom et le nom de l’acteur en Titre H2
- ensuite deux colonnes, avec à gauche la date et le lieu de naissance et à droite la date et le lieu de décès
- etc etc
Bref, Elementor Pro étend énormément les possibilités de création facile et intuitive d’un site complexe.
Le constructeur de thème
Le constructeur de thème d’Elementor Pro offre de créer un webdesign de thème de A à Z, sans avoir à gérer aucun code, de manière totalement intuitive.
(On pourra sans mal y ajouter des éléments de webdesign créés avec Midjourney ou une autre intelligence artificielle, ou par un graphiste.)
En puisant dans la bibliothèque des widgets de site d’Elementor Pro, on pourra créer :
- un en-tête de site (header), avec logo, menu de navigation, bouton d’appel à l’action (call to action), panier WooCommerce etc
- un pied de page (footer) avec copyright, menu de pied de page (mentions légales etc)
- des modèles de page (page templates) : page, article de blog (post single), catégorie de blog (archive), page produit, catégorie produit, etc etc
Il n’y aura qu’à :
- créer des maquettes
- glisser-déposer des widgets
- y affecter si besoin des balises de contenu dynamiques
et le tour sera joué !
Les kits et templates
Les kits
Les kits d’Elementor sont des groupes de modèles de pages, déjà designés, stylés, mis en forme, conçus pour diverses activités (magazine, blog, boutique…) et divers métiers (photographe, médecin etc), qui permettent donc de créer rapidement un site propre et beau.
La version gratuite d’Elementor ne donne accès qu’à 16 kits gratuits, plutôt simples.
Elementor Pro donne accès à 83 kits pros.
Elementor Experts ajoute 20 autres kits.
Les templates
De la même manière, Elementor Pro propose beaucoup plus de templates / modèles de pages ou de sections pré-designée que la version gratuite.
Parmi ces plus de 300 templates, on a :
- des landing pages / pages d’atterrissage
- des pop-ups
- des sections call to action
- etc
Les formulaires
Elementor Pro donne de quoi créer des formulaires complets, même sans plugin associé (on peut donc se passer de WP Forms etc., mais si on le souhaite on peut aussi intégrer et styler les formulaires des plugins tiers).
Elementor Pro permet aussi de récupérer des données depuis un email et de les afficher sur une page dynamique.
Le CSS personnalisé (custom CSS)
La plupart des thèmes permettent aujourd’hui d’ajouter du CSS (le langage qui contrôle l’apparence graphique d’un élément HTML) via l’outil de personnalisation (customizer).
Elementor Pro permet d’ajouter ce CSS personnalisé élément par élément.
Par exemple, vous ajoutez un widget image à une page, et vous voulez lui attribuer une classe définie par le thème : vous n’avez qu’à cliquer sur l’élément, aller dans le réglage de CSS personnalisé et taper le nom de la classe, et ce sera fait. Simple et facile !
Les attributs HTML personnalisés (custom attributes)
Comme avec le CSS personnalisé, Elementor Pro vous permet d’ajouter n’importe quel attribut HTML à un élément.
Par exemple, un attribut « role=media ».
Qu'avez-vous pensé de cet article ?
Cliquez sur une étoile pour donner votre avis
Avis moyen 4.9 / 5. Nombre d'avis donnés 9
Soyez le premier à donner votre avis