Formation
à Elementor

Vous souhaitez apprendre Elementor ?

Je vous forme par téléphone
+ partage d’écran.

Créez votre site
avec Elementor Pro

Vous faites un site professionnel ?

Elementor Pro est le meilleur constructeur de page WordPress.

Créez votre site
avec Elementor Cloud

Vous voulez créer votre site avec Elementor ?

Hébergez-le sur Elementor Cloud.

Elementor Pro

Elementor Pro – plus riche, plus fort, plus loin !

5
(2)

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.

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
Widgets Elementor Pro
Widgets Elementor Pro

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  
Widgets Elementor de site
Widgets Elementor de site

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… »)
Widgets Elementor Pro WooCommerce
Widgets Elementor Pro WooCommerce

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.

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’à :

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 ajouter 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 5 / 5. Nombre d'avis donnés 2

Soyez le premier à donner votre avis

Ouvrir les commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Besoin d’un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C’est pourquoi j’y héberge tous mes sites.

Panier
Retour haut de page