A Avec 5 millions d’utilisateurs, Elementor s’est imposé comme le constructeur de pages de WordPress.
Une des raisons de son succès réside dans sa version gratuite généreuse qui offre de nombreuses possibilités.
Tu vas créer ta page exactement comme tu le souhaites. L’éditeur de WordPress s’améliore tous les jours mais il manque encore de finesse dans l’organisation d’une page complexe (accueil, vente…).
Je te montre des astuces et des techniques pour donner un effet Wahou à tes créations.
J’aborderai dans cet article uniquement les fonctionnalités de la version gratuite.
Tu retrouveras trois vidéos qui complètent le tutoriel avec des exemples de réalisations.
Sommaire
Cet article prend environ 19 minutes à lire. Si tu n’as pas le temps, tu l’épingles sur Pinterest pour le lire plus tard.


Si tu n’as pas le temps d’apprendre un nouvel outil ou de designer ta page, je te propose une alternative plus rapide à mettre en œuvre : des blocs Gutenberg dédiés aux pages de vente.
Un page builder est un formidable outil mais cela sera contreproductif de l’utiliser sur l’ensemble de ton site.
Pourquoi utiliser un constructeur de page ?

Elementor est parfait pour les pages complexes :
- Éléments qui se chevauchent
- Format pleine largeur sans le menu et le pied de page
- Gestion fine des marges
- Effets de transition entre les blocs
- Animations
Tu construis avec Elementor des pages d’accueil et de vente riches et attractives. Cependant, je te déconseille fortement son usage pour les articles.
Si c’est possible, le mieux est de ne pas utiliser de constructeur de page.
Tu vas perdre un temps précieux. Elementor est moins souple que l’éditeur de WordPress. De plus, tu dois préparer l’avenir.
Elementor est le page builder le plus performant actuellement mais cela pourrait évoluer. WordPress intègre rapidement les fonctionnalités des constructeurs de page dans Gutenberg. L’équipe ne cache pas son objectif de les remplacer.
Quelque pages à refaire sont facilement gérables. Quand tu dois reprendre des dizaines d’articles, c’est une autre paire de manches.
Elementor intègre une mise en page spécifique. Il ne sera plus possible de travailler sur ces pages dans l’éditeur de WordPress sans casser l’apparence.
Il existe de nombreuses possibilités avec Gutenberg que tu découvriras dans ce tutoriel dédié à la mise en page sur WordPress.
C’est quoi Elementor ?

Elementor ressemble dans son fonctionnement à Gutenberg. Tu empiles les sections qui hébergent des blocs.
Tu disposes de colonnes pour organiser tes éléments au sein d’une section.
Tu personnalises les paramètres de ta section puis de chaque composant. Les options sont nombreuses et autorisent des mises en page élaborées.
Ma page d’accueil et celle de la newsletter sont réalisées sous Elementor. Cela te donnera une idée du rendu pour des pages simples.
Les thèmes compatibles
La majorité des thèmes récents fonctionnent avec Elementor. Certains développeurs travaillent en étroite collaboration avec l’équipe en charge d’Elementor dont :
- GeneratePress
- OceanWP
- Astra
- Jupiter X…
Tu retrouves la liste complète des thèmes développés spécifiquement pour Elementor sur le site.
Le thème développé par l’équipe est à éviter.
Pourquoi tu ne dois pas utiliser le thème Hello
Ce thème est conçu pour la version Pro du plugin. Il s’agit d’une coquille vide dont tu crées l’habillage : menu, barre latérale, pied de page…
Ces options ne sont pas accessibles en gratuit.
Les avantages et inconvénients

- Tu visualises immédiatement tes modifications
- La version gratuite est complète
- Personnalisation poussée
- Interface ergonomique en français
- Faible impact sur le chargement

- Un apprentissage est nécessaire
- Personnalisation des blocs un par un
- Certains éléments marketing manquent (mais disponibles dans des extensions gratuites)
- Quelques bugs sur l’affichage des icônes
Tu es convaincu ? Génial. Passons à la mise en pratique.
Les bases pour débuter avec Elementor en vidéo.
Installe et effectue les réglages de l’extension
Tu installes et actives Elementor depuis le répertoire officiel de WordPress.

Avant de te lancer, tu effectues des paramétrages rapides.
Elementor > Réglages

Tu décoches les types de contenus pour lesquels tu n’utiliseras pas Elementor :
- Ma bibliothèque
- Articles (conseillé)
Si tu as personnalisé ton thème, tu désactives les couleurs et les polices par défaut pour harmoniser l’aspect de ton site.

Tu indiques la police qui s’appliquera le temps que ta police principale se charge dans Style (Serif ou Sans-serif).

Dans Gestionnaire de rôle, tu précises qui aura accès à Elementor. Si tu es seul, mieux vaut quand même supprimer l’accès aux utilisateurs (subscribers).

Tu enregistres.
Il est temps de découvrir la bête.
L’interface d’Elementor
Tu crées une nouvelle page. Tu complètes ton titre et tu enregistres.
Tu cliques sur Modifier avec Elementor.

La zone centrale est la visualisation de ta page en cours. Tu retrouves le menu sur la gauche.

Les options du menu se révèlent denses. Nous allons faire un tour d’horizon des fonctionnalités qui t’intéressent.
Le menu principal
Tu accèdes au menu général par le hamburger.

C’est à cet endroit que tu reviens sur WordPress.

Si tu n’as pas activé celles par défaut de ton thème, tu indiques :
- tes couleurs
- Principale
- Secondaire
- Texte
- Accent

- tes polices
- Titre principal
- Titre secondaire
- Le texte
- Le texte accentué

Tu accèdes aux Styles du thème.
Tu peux appliquer un formatage spécifique sur les autres éléments de la pages :
- Arrière-plan
- Typographie
- Boutons
- Champs de formulaire
- Images
- CSS personnalisés

Le résultat est impressionnant. Cependant, en dehors de l’arrière-plan, je ne vois pas trop l’intérêt.
Tu vas découvrir une pépite cachée.
Le menu bas
Ce menu est accessible en permanence.

Réglages
Tu charges l’image mise en avant même si elle n’apparaît pas sur ta page.
Tu masques le titre de la page si tu le souhaites. Cela te simplifieras le travail de mise en page.
Tu feras attention à ne pas ajouter un deuxième titre H1 identique dans ta page. Pour cela, tu utiliseras un paragraphe standard et ajusteras la taille de la police.
La magie réside dans les modèles de pages qui sont étrangement cachées.

Les modèles de page :
Par défaut : c’est le formatage de ton thème qui s’applique

Elementor Canevas : tu pars d’une page blanche sans menu, barre latérale et pied de page. C’est idéal pour supprimer toutes les distractions sur une page de vente.

Elementor Pleine largeur : ta barre latérale et la limitation en largueur du texte disparaissent.

Navigateur
Le navigateur est un sommaire avec les différents éléments. Il est particulièrement utile pour sélectionner un élément spécifique ou la section quand plusieurs couchent se superposent.
Je te conseille de renommer tes sections pour retrouver plus facilement tes petits.

Historique
Tu disposes de la liste de tes dernières actions pour pouvoir annuler précisément une partie de tes modifications.

Mode responsive
Tu visualises ton design sous les autres formats : mobile et tablette.

La prévisualisation et la publication sont explicites. Je reviendrais plus tard sur la gestion des modèles.

Tu disposes de toutes les informations pour te lancer.
Crée ta page avec Elementor
Pour construire ta page, tu as deux options :
- Partir d’une page blanche
- Utiliser un modèle
Pour débuter, je te conseille de charger un modèle sur une page temporaire et de jouer avec pour voir rapidement les fonctionnalités qui s’ouvrent à toi.
Pour utiliser un modèle, tu sélectionnes Ajouter un modèle au centre.

Pour faire apparaître en premier les modèles gratuits dans la bibliothèque, tu tries par populaire.

Ceux marqués PRO sont réservés à la version payante.

Tu cliques dessus pour accéder à l’aperçu.
Tu insères ensuite la création.

Tu devras créer un compte gratuit pour accéder à ce service.

Voici trois exemples de modèles gratuits pour te donner une idée. Tu cliques dessus pour découvrir la page de démonstration complète.
Tu retrouves l’ensemble des modèles sur le site. Malheureusement, les modèles payants ne sont pas identifiés comme dans l’extension.
Ces modèles sont comparables à des thèmes. Tu les personnalises aisément mais le résultat devient vite improbable si tu t’éloignes radicalement de la trame.
Tu modifies tous les éléments en cliquant dessus. Les paramètres sont disponibles dans la colonne de gauche.
Modifie et ajoute des éléments
Avant de rentrer dans le détail de construction d’une page, je vais te donner quelques indications pour modifier un modèle existant.
Malheureusement, tu es obligé d’intervenir sur tous les blocs. Tu réaliseras des copiés-collés des blocs pour aller plus vite.
Change la couleur et le visuel d’arrière-plan
Tu cliques en haut de la section pour accéder aux paramètres (alternative : avec le clic droit).

L’arrière-plan se trouve dans l’onglet Styles. Tu modifies la couleur ou tu cliques sur la photo pour en changer.

Un filtre de couleur est souvent appliqué sur les en-têtes, il se situe juste en dessous dans Superposition d’arrière-plan.

Réinitialise les polices
Tu cliques sur le texte.
Dans l’onglet Styles, tu cliques sur retour par défaut sur la police.

Tu effaces ensuite la couleur.

Nous allons approfondir le maniement des éléments.
Ajoute, structure et personnalise tes sections
La construction de ta page se réalise par un empilement d’éléments. Chaque section sera composée de blocs gérés indépendamment.
Pour être efficace, il est préférable d’établir un plan d’ensemble avant de te lancer. Tu obtiendras un résultat homogène sans perdre de temps.
L’élément de base est la section qui rythme horizontalement ta page. Tu l’ajoutes à l’aide du +.

Tu choisis la répartition des contenus à l’aide des colonnes.

Tu modifies manuellement la largeur des colonnes en déplaçant la barre de séparation.

Quand ta section est sélectionnée, une barre bleue apparaît. Tu déplaces ta section en maintenant appuyé sur les 6 points centraux et en glissant la section à l’emplacement désiré. Le + ajoute une section au-dessus et la x la supprime.

Les options de la section apparaissent au clic droit :
- Modifier : les options apparaissent dans la colonne de gauche
- Dupliquer
- Copier
- Coller le style d’une autre section
- Enregistrer la section comme modèle pour l’utiliser dans d’autres documents
- Effacer

Les options des sections
Ces options vont définir le comportement de toute la section.

Étirer la section en JS n’a d’effet que pour les pages par défaut. Ici la barre rouge.

La largeur du contenu sera pleine largeur ou délimité dans espace déterminé (contener). Ce sera particulièrement utile pour les mises en page Canevas et Pleine page. Ici la partie bleue est en pleine largeur.

Les autres options :
- écart des colonnes
- hauteur
- adapté à l’écran pour occuper tout l’espace disponible
- hauteur minimale est particulièrement utile pour l’affichage de visuels en fond
- alignement vertical
- structure pour changer la répartition entre les colonnes
Dans Style, tu définis :
- l’arrière-plan
- la bordure
- les formes de séparation
- les polices de toute la section

Dans Avancé, tu modifies les marges

et les règles d’affichage spécifiques sur mobiles et tablettes. Inverser les colonnes est particulièrement utile quand tu alternes les blocs de textes et d’images.

Les sections internes pour des mises en page élaborées
Pour éviter de gérer de multiples sections, tu vas les compartimenter. C’est pratique pour une image de fond unique et éviter de refaire les réglages.

Tu ajoutes une section pleine largeur.
Les éléments apparaissent quand tu cliques sur le +.

Tu glisses à l’intérieur les sections internes depuis le menu de gauche.

Tu cliques droit sur une colonne pour en ajouter une nouvelle. Tu peux dupliquer et effacer une colonne.

Les principaux blocs à ta disposition
Tu retrouves les éléments classiques d’une page web.
Basique

Les explications ne sont pas vraiment nécessaires. Tu retrouves les mêmes sur Gutenberg en dehors des icônes et de Google Maps.
J’ai mis l’espaceur en gris pour bien l’identifier.

Les réglages des blocs

Les réglages s’adaptent pour chaque bloc mais les principes de base sont identiques. Je vais illustrer avec les titres.
- Contenu pour les caractéristiques de l’élément : texte, taille, lien, chargement alignement…

- Style pour l’apparence : taille, opacité, l’animation quand la souris passe au-dessus, les bordures, les ombres…

- Avancé pour affiner : les marges internes et externes du bloc, l’ordre de superposition (Index-Z), les animations d’apparition, l’arrière-plan (coloré ou une image), masquer l’élément sur certains appareils…

Tu retrouves systématiquement ces éléments mais certaines fois dans un autre onglet. La standardisation des menus fait partie des améliorations possibles d’Elementor.
Je vais m’attarder sur les éléments plus spécifiques.
Général
Le bloc Boîte d’image présente un visuel suivi d’un titre et d’un paragraphe. Il n’offre pas de réel attrait.

La boîte d’icône offre une vaste palette de visuels pour illustrer tes rubriques. Il est parfois complexe d’illustrer un service ou un concept. Les icônes facilitent la tâche et passent mieux que certaines photos.

Les icônes rencontrent parfois des problèmes d’affichage même si ce que tu observes dans Elementor est correct. La prévisualisation aide à identifier rapidement si tu rencontres ce souci.
Les étoiles illustrent parfaitement une note.

Les carrousels d’images (appelés également sliders ou diaporamas) sont attractifs mais impactent rapidement le poids d’une page.
Tu règles la vitesse de lecture dans les Options supplémentaires du contenu.

Cette galerie ne présente pas beaucoup d’options. Quand le visiteur clique sur une image elle s’ouvre en plein écran dans un carrousel.

Les listes avec des icônes représentent un moyen facile de dynamiser tes listes.

Pour mettre en valeur tes chiffres, tu disposes d’animations visuelles avec les blocs compteur

et barre de progression en complément de la notation par étoiles.

Témoignage simplifie l’insertion des retours utilisateurs.

Tu disposes de trois options pour ne pas afficher le texte et laisser le choix au visiteur d’en apprendre plus sur un sujet.
Les onglets sont intéressants si tu n’as pas un fort volume de texte.

L’accordéon masque systématiquement les autres parties quand tu cliques sur une section.

Va-et-vient dévoile le texte à la demande. Il est idéal pour créer une partie en Savoir plus immédiatement consultable sans alourdir la présentation de la page.

Tu disposes de nombreux logos de réseaux sociaux souvent avec deux alternatives de présentation.

Les alertes sont des mises en avant préformatées. Tu as le choix entre 4 versions personnalisables ensuite à tes couleurs.

Je n’utilise jamais de Widgets dans mes pages. Ils répondent à des besoins spécifiques.
Les Widgets WordPress
Tu retrouves les widgets que tu intègres normalement dans ta colonne latérale ou ton pied de page. Je te présente un échantillon des plus utiles pour ta page d’accueil.
- archives

- barre de recherche

- articles récents

- catégories

Elementor possède de nombreuses possibilités pour donner du tonus à ta page.
Les effets en tutoriel vidéo.
Réalise des effets visuels avec Elementor
Maintenant que tu as de bonnes bases, nous allons fouiller dans les menus pour enrichir ta page.
Les superpositions

Tes sections se chevauchent pour donner du relief et assurer des transitions plus fluides.
Pour disposer de souplesse dans la gestion de tes superpositions, je te conseille de déplacer les sections et les sous-sections.
Pour superposer deux sections, tu vas jouer sur deux éléments dans avancé : les marges et l’Index-Z.

Tu indiques une marge négative en direction de l’élément que tu souhaites recouvrir.

L’élément que tu souhaites mettre en avant peut désormais se retrouver masqué.

L’Index-Z attribue un ordre d’apparition. L’élément avec le chiffre le plus élevé se situe en haut de la pile et est apparent.


Tu peux superposer plusieurs éléments dans des directions différentes.

Tu vérifies systématiquement l’apparence sur mobiles.

Tu rectifies si besoin. Tu remets les marges à 0 et tu effectues le déplacement à nouveau.

Il est souvent judicieux de réaliser une version simplifiée pour les mobiles si la composition est trop complexe.
Les animations
Tu ajoutes de la vie à ta page avec les animations. Elles sont à utiliser avec parcimonie. Tes visiteurs saturent rapidement.
Tu retrouves Effets de mouvement dans l’onglet Avancé.
Tu choisis l’effet, sa vitesse d’exécution et le délai avant le déclenchement en millisecondes.

Les animations s’appliquent à un bloc et se déclenchent quand le lecteur arrive à la section.

Le Lazy Loading interfère et modifie le comportement des animations.
Les grandes familles :
- Fading : affichage progressif
- Zoom
- Bouncing : rebond
- Slide : glissement
- Rotate : effet de rotation pas forcément simple à placer
- Attention seeker : attire l’attention
- Light speed : effet de vitesse
- Special : arrivée en arc de cercle
Tu combines les effets de la même famille pour un effet Wahou comme ici avec sliding sur une image et du texte.
Pour déterminer l’ordre d’arrivée des éléments, tu ajoutes un délai de déclenchement.

Les transitions apportent du dynamisme à ta page en cassant l’aspect monolithique de la succession des blocs.
Les effets de transition
Les effets s’enchainent naturellement et fonctionnent particulièrement bien en blanc sur un fond de couleur.
Ils s’appliquent aux sections

et aux sous-sections.

Style > Forme de séparation
Tu choisis l’emplacement de ta forme en haut ou en bas du bloc et tu sélectionnes ton effet.

Voici une sélection de 6 effets parmi les 18 proposés.
Montagnes

Nuages

Triangle asymétrique

Opacité d’inclinaison

Pinceau vague

Fendu

Les réglages
- Couleur
- Largeur pour affiner l’apparence
- Hauteur
- Retournement pour une symétrie verticale (utile pour casser la monotonie)
- Envoyer à l’avant plan pour couvrir en cas de superposition
- Inverser pour une symétrie horizontale (selon les modèles)


Les effets de survol ajoutent de l’interactivité au contenu.
Les effets au survol
Le passage de la souris au-dessus d’un élément déclenche une action.
Les effets au survol ne fonctionnent pas avec un écran tactile. Si la très grande majorité de ton audience est sur mobile, ne t’attarde pas sur ce point.
Les boutons représentent l’utilisation la plus évidente car le mouvement incite à l’action.
Dans Style > Bouton > Au survol, tu indiques des couleurs spécifiques du texte, de l’arrière-plan et de la bordure. Tu ajoutes une animation pour renforcer l’effet.

Le principe est similaire pour les images. Tu précises l’opacité, l’animation et sa vitesse d’exécution.

L’opacité offre de nombreuses opportunités en couplant avec l’arrière-plan au survol. Tu règles l’opacité de ta photo à 0 au survol.
Dans Avancé > Arrière-plan > Au survol, tu charges le visuel à révéler.

Pour un effet réussi, tu utilises des visuels aux formats strictement identiques. Par exemple cette image

couplée avec sa version complétée d’un texte en arrière-plan.

Tu disposes des mêmes réglages pour la section avec une option supplémentaire.
Tu superposes une couleur ou une image sur l’arrière-plan dans Style.

Voici des idées pour tirer le meilleur d’Elementor.
4 astuces illustrées en vidéo.

Les conseils et astuces pratiques pour Elementor
Cette section est rédigée comme une foire aux questions et vise à te donner le plus rapidement possible la réponse.
Comment mettre du texte sur une image ?

Tu effectues ta mise en page dans une section unique à l’aide des sous-sections.
Style > Arrière-plan
Tu charges ton visuel.
Les réglages à effectuer :
- Position : Centre centré
- Fichier joint : Défilement (ou fixe pour un effet parallaxe)
- Répéter : Non-répété
- Taille : Couvrir

Les marges internes de ta section positionnent ton texte au bon emplacement.
Les marges externes haut et bas ajustent la taille de l’image. Tu t’arrêtes quand ton visuel commence à zoomer.

Tu tâtonnes souvent un peu avant d’obtenir le résultat souhaité.
Comment obtenir un effet de défilement (parallaxe) ?
Cet effet est obtenu en figeant le visuel du fond. Tu ajoutes une photo en arrière-plan comme expliqué dans la question ci-dessus. Tu indiques Fixe dans Fichier joint.
Comment obscurcir ou éclaircir une photo ?

Nous allons jouer avec une couleur en superposition pour éclaircir (couleur claire) ou obscurcir (couleur sombre) une photo.
Dans le cas d’une image d’arrière-plan, tu disposes directement de l’option dans Style > Superposition d’arrière-plan.
Tu sélectionnes ta couleur et tu règles l’opacité.

Cette option n’existe pas pour les images classiques.
Tu ajoutes une couleur d’arrière-plan dans Avancé.

Dans Style > Image, tu modifies l’opacité.

Comment ajouter des fonctionnalités supplémentaires avec les codes courts ?
Certaines fonctionnalités ne sont pas disponibles dans l’extension. Tu utilises le bloc Code court (dans Général) qui intègre les modules d’autres extensions.

Tu copies le code fourni dans le menu à gauche.

Tu retrouves dans les questions suivantes des exemples d’utilisations.
Comment faire une table des matières avec Elementor ?
Tu retrouves le bloc Ancre de menu pour réaliser manuellement ton sommaire.

C’est chronophage et archaïque. Je te propose d’installer Easy Table of Content qui génère et met à jour automatiquement la table. Tu l’utiliseras sur tous tes articles et dans ta table des matières.
Comment insérer son feed Instagram dans Elementor ?

L’extension Instagram feed renommée Smash Balloon Social Photo Feed dans le repertoire WordPress ajoute les derniers visuels de ton compte.
L’installation ne prend que 2 minutes.
Tu retrouves les réglages dans Instagram Feed > Settings.

Tu connectes ton compte et tu enregistres.

Tu intègres le code court dans ta page.
[instagram-feed]
Comment ajouter un formulaire dans la version gratuite d’Elementor ?

L’option formulaire n’est disponible que dans la version payante mais cela ne t’empêche pas d’utiliser un plugin externe. Cela t’évitera de devoir gérer plusieurs solutions en parallèle.
Contact Form 7 et les autres gestionnaires de formulaires s’intègrent parfaitement avec les codes courts.
Comment ne pas refaire les mêmes réglages bloc par bloc ?
Le plus simple est de dupliquer la section avec le clic droit.

Une autre option sera de copier-coller les sections, les colonnes ou les blocs.

Tu peux coller uniquement le style. Il faudra reproduire l’action pour chaque élément : section, colonne et bloc.

Comment dupliquer une page ou un article avec Elementor grâce aux modèles ?
Tu ajoutes une page aux modèles à l’aide du menu déroulant de publier.

Tu nommes ton modèle.

Dans tes pages, tu ajoutes un modèle.

Tu retrouves dans Mes Modèles celui que tu viens de créer. Tu insères.

Tu l’exportes si tu souhaites l’utiliser sur un autre site.

Tu l’importeras dans la bibliothèque de modèles.

Tu accèdes à l’enregistrement comme modèle pour une section avec le clic droit.

Il est également possible de l’intégrer dans tes pages réalisées avec l’éditeur de WordPress.
Comment utiliser une section Elementor directement dans Gutenberg ?
Tu crées un modèle (la démarche se trouve dans la question juste au-dessus).
L’extension Elementor Blocks for Gutenberg

ajoute un bloc

qui te donne accès à tes modèles Elementor.

Comment adapter l’apparence de ton site sur mobile ?
Elementor assure des pages responsives en adaptant le design spécifiquement pour les mobiles.
Je ne parle jamais des tablettes que je gère comme la version ordinateur ce qui fonctionne dans 99 % des cas.
Tu es super fier de ta mise en page.

C’est une autre chanson sur mobile.

L’ordre d’empilement des colonnes fait que deux blocs textes et deux visuels se suivent. Tu sélectionnes la section centrale.

Dans Avancé > Responsive, tu inverses les colonnes.

Le mal est réparé.

Les chevauchements

obtiennent des résultats fantaisistes sur mobiles.

Tu cliques sur l’icône ordinateur des marges pour basculer sur les réglages spécifiques aux téléphones.

Tu réinitialises les marges.


Les espacements sont harmonieux.

En visualisant le résultat sur smartphones, le texte de la première colonne est trop proche du bloc précédent.

Tu ajoutes un espaceur en haut de première colonne.

Tu ne l’actives que sur mobiles dans Avancé > Responsive.


Quelle solution SEO utiliser avec Elementor ?
Rank Math est disponible directement dans le menu. Tu n’as pas besoin de réaliser des allers-retours avec l’éditeur de WordPress. Tu effectues directement les ajustements.

Comment ajouter gratuitement des blocs supplémentaires ?
Je te présente deux extensions (en anglais) qui décuplent les possibilités d’Elementor.
Essential Addons for Elementor
Essential Addons for Elementor complète bien les manques de la version gratuite avec 40 blocs supplémentaires.

Dans le menu de l’extension, tu visualises les éléments. Tu les désactives si tu ne les utilises pas.


Les nouveaux blocs s’ajoutent en fin de liste.

Une sélection de 9 blocs qui sortent du lot.

L’appel à l’action est simple mais efficace.


Il s’agit d’un texte qui défile comme les news en bas d’écran des chaînes d’info en continu.

Tu sélectionnes la source. Tu filtres les informations qui s’affichent par auteur, catégorie…


Le décompte se détermine à l’aide d’une date. Tu indiques l’action à déclencher en fin de période.


Le texte s’auto-complète en boucle.


La carte rotative dévoile le dos en basculant.


L’accordéon en image fait partie des rares blocs spectaculaires et utiles en remplacement d’un slider.


Un élément indispensable.


Celui-ci est plus gadget. Une notice apparaît au survol.


Un bouton avec plus d’options.

Découvre une extension avec des blocs supplémentaires.
Premium Addons for Elementor
Le plugin Premium Addons for Elementor te donne accès à 40 blocs.

Tu désactives les blocs que tu n’utilises pas.

Le vrai bénéfice de cette extension est l’accès à des designs hallucinants qui tirent le meilleur des options à disposition.


Le compteur est agrémenté d’une icône.


Tu mixes deux polices et couleurs dans un même titre.


L’image défile dans la bannière.


Ce séparateur couvre les éléments précédents et suivants.


Tu déclenches un pop-up à l’aide d’un bouton.


Un effet de glissement attractif pour présenter les membres d’une équipe. Les icônes posent problème chez moi.


La table de prix est attractive.

D’autres packs d’extensions complémentaires sont disponibles dans le répertoire de WordPress.
Conclusion
Les possibilités de création sont immenses avec la version gratuite d’Elementor.
Les meilleurs effets sont souvent plus le résultat d’une recherche graphique que d’une prouesse technique.
Les extensions complémentaires ouvrent davantage de possibilités. Les modèles de Premium Addons for Elementor poussent très loin le design et regorgent d’idées à reprendre.
Le guide détaillé de la version gratuite d'Elementor pour donner du relief à tes pages WordPress [Tuto] Cliquez pour tweeterComme exercice, Authority Hacker a essayé de reproduire la page d’accueil de Trello.

Les articles qui peuvent t’intéresser :
- Prend en main Gutenberg l’éditeur de textes de WordPress
- Créer les images de ton site
- Réalise facilement la page d’accueil de ton site
Retrouve tous les articles pour Créer seul ton site

Jean
Fondateur, auteur et homme à tout faire
J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.
Bonjour,
Bonsoir à tous,
J’utilise Elementor, et j’aimerai avoir sur chaque page, la date de création ou la date de mise à jour, (voir image jointe)
j’ai trouvé ce plugin WP Last Modified Info mais malheureusement je n’arrive pas à faire fonctionner ce plugin avec Elementor.
Pourriez-vous m’aider s’il vous plaît ?
Merci
Serge
Bonjour Serge,
Les extensions proposent en général des codes courts que tu peux ensuite intégrer directement dans Elementor.
Magnifique journée,
Jean
Bonsoir Jean
Bravo pour ton engagement et merci de prendre de ton temps pour nous faire progresser.
J’ai une question que je sais pas à qui poser , peut-être peux-tu m’aider.
Impossible de faire du glisser/déposer dans Elementor sur une tablette (notamment Samsung tab s7).
Est-ce un problème de configuration de la tablette ou est-ce impossible avec la version gratuite d’elementor ?
Merci d’avance de ton aide.
Bien amicalement
Bonjour Jean-Jacques,
Je ne pense pas que la limitation vienne de la version gratuite mais du fait qu’Elementor n’a pas été conçu pour être utilisé sur tablette.
Magnifique journée,
Jean
Bonjour Jean,
Un tout grand merci pour cette aide précieuse.
Saurais-tu me dire s’il est possible d’insérer un gif, de grand format, sur une page Elementor ?
Un tout grand merci,
Eva
Bonjour Eva,
Tu insères un GIF dans Elementor comme une image classique. Cela fonctionne également pour les grands formats à condition que le poids reste raisonnable.
La seule particularité sera que ton GIF doit être exactement dimensionné à la taille affichée sinon l’animation ne se joue pas et tu te retrouves avec seule la première image.
Magnifique journée,
Jean
Bonjour Jean
J’utilise elementor (la version gratuite) et je voulais reprendre un modèle de page utilisant le principe des photos parallaxe avec des articles mais je n’arrive pas à modifier les images utilisées pour le défilement : comment les modifier ?
Merci !
Bonjour Gérard,
Les visuels en parallaxe s’appliquent sur tout le site ou une section. Tu sélectionnes la région concernée puis tu changes l’image dans Style > Arrière-plan > Type d’arrière-plan.
En détail : https://www.pourpasunrond.fr/elementor/#Realise_des_effets_visuels_avec_Elementor
Magnifique fin de journée,
Jean
Merci pour ce tuto Jean,
J’aimerais enlever le pied de page de mon thème qui est automatique et en mettre un avec elementor qui contiendrait un menu, est-ce possible ? Merci d’avance !
Bonsoir Chris,
La version gratuite d’Elementor ne le permet pas. Tu peux modifier le thème avec Elementor Pro.
Magnifique soirée,
Jean
Bonjour Jean,
Un grand merci pour ce tuto, clair et didactique ! Je rencontre pour ma part un “souci” avec les modèles de bloc Elementor. Je n’arrive en effet pas à les personnaliser. Ou plus précisément, à modifier l’onglet “Style”. Dès lors que je clique sur cet onglet, la colonne Elementor de gauche devient vide et aucun retour en arrière n’est possible. Je me retrouve donc avec un modèle de Bloc totalement inexploitable.
Une idée ?
Bonjour Guilaine,
Cela ressemble fort à un bug d’Elementor. Tu peux le signaler aux développeurs.
Magnifique soirée,
Jean
Bonjour Jean, j’ai découvert récemment Elementor et j’ai hâte d’améliorer mon site grâce à tes tutos,
Je recherche aussi le moyen de cliquer sur mes images pour amener l’utilisateur vers une galerie ou une autre page avec galerie, comment procéder ? Merci pour votre aide
Elodie
Bonjour Élodie,
Tu peux ajouter du texte avec un lien ou un bouton et mettre ton image en fond pour diriger vers la section que tu souhaites.
Magnifique WE,
Jean
Bonjour Jean,
D’abord un grand merci pour ce tuto. Je débute complètement sur la création de site et je n’ai besoin que d’un site vitrine. Une seule page avec des section me suffit. Le thème Hantus est celui que j’ai choisi.
Ma question est : est-ce que Elementor limite la quantité de texte ou de sections pour une page ?
En fin de page, je souhaite créer 4 sections relatives à un descriptif de chaque prestation que je propose dans mon activité. Ce n’est que du texte. J’ai déjà dû tout supprimer et recommancer pour voir ce qui déclenche le code error 500. On dirait que c’est limité en texte.
Je ne peux plus mettre le site à jour, j’avais quasiment terminé. Je précise que je n’ai encore créé aucun lien vers un site web externe, bien que je souhaiterais le faire pour finaliser le site. Je ne peux pas finaliser mes ancres derrière les boutons et menu non plus.
La création de pages complémentaires me paraît riche par rapport au contenu nécessaire plus lisible sur une seule page.
Merci d’avance pour tes conseils pour éviter le déclenchement de ce code error 500.
Très belle journée à toi
Béatrice
Bonjour Béatrice,
Elementor ne limite aucunement la quantité de texte ou de sections pour une page.
Je ne pense pas que cela soit la cause de l’erreur serveur.
Tu peux regarder du côté de la taille de tes images qui peuvent alourdir fortement la page et poser problème si ton hébergement est très limité.
Magnifique journée,
Jean
Bonjour Jean!
Un grand merci pour ce super tuto.
Par contre j’ai un gros soucis. J’utilise ELEMENTOR PRO et j’ai crée une page dans laquelle j’ai téléchargé via ELEMENTOR une mise en page déja construite.Or , je ne comprends pas, celle-ci se retrouve dans TOUT mon site web…toute mon architecture de web a changé et c’est cette mise en page que je retrouve dans toutes les pages de mon site. Par contre l’ancienne mise en page n’a pas été effacée mais se retrouve en bas de page. Quand je clique sur “EDITER avec ELEMENTOR” impossible de la supprimer…une idée d’où cela vient?
Comment puis-je revenir en arrière?Comment modifier cette mise en page qui s’applique seule à mes autres pages?
Un grand merci!
Bonjour Adeline,
Au vu de ce que tu indiques, je pense que tu n’as pas intégré une page mais un Kit qui comprend plusieurs pages dont la page d’accueil, blog, contact…
Si tu n’avais qu’une seule page, tu peux effacer les autres mais le plus simple sera peut être de repartir d’une sauvegarde récente. Tu peux également voir avec ton hébergeur. Certains propose la restauration de la veille.
Belle journée,
Jean
Merci Jean! Le plus simple a été de revenir à une sauvegarde de la veille effectivement. Sinon, je n’ai pas trouvé la solution à ce problème..Merci encore!
Bonjour Adeline,
Je pense que c’est l’installation de pages multiples dans un Kit. Il est prévu pour être installé directement sur une installation neuve.
Belle journée,
Jean
Bonjour Jean
Merci pour ce tutoriel ! Savez-vous comment peut-on accéder au code pour insérer par exemple un code de cracking (site BtoB) sur chaque page?
Merci !
Jeanne
Bonjour Jeanne,
Je ne vois pas comment accéder au code d’Elementor pour insérer un code de de suivi par pages.
La couche WordPress de chaque page doit être accessible mais je ne sais pas si le code sera actif.
Google Tag Manager est une bonne solution pour intégrer un tracking fin.
Beau week-end,
Jean
Bonjour Jean,
Moi quand je veux mettre ELEMENTOR, WordPress me dit de passer à l’offre business…
Bonjour Marie,
Il existe deux versions de WordPress :
– Celle que j’utilise : wordpress.org qui est la version gratuite sans limitation mais que tu dois héberger toi-même et assurer le fonctionnement (vitesse, sécurité…). Certaines extensions sont payantes.
– La version commerciale : wordpress.com qui gère tout pour toi mais qui limite le champ d’action et restreint certaines fonctionnalités en fonction des packages.
Au vu de ta réponse, je pense que tu es en .com ce qui expliquerait que tu ne puisses pas installer librement les extensions que tu souhaites.
Belle soirée,
Jean
Bonjour et merci pur vos différents tutos. Je me pose une question. j’ai créé un modèle de section avec elementor (version gratuite), que j’ai inséré dans différents articles de mon site. Existe t-il une manipulation qui permettrait que lorsque je modifie mon modèle de section, ces modifications se répercute automatiquement dans mes articles comprenant ce modèle ? En quelque sorte une mise à jour ou synchronisation automatique, à l’aide d’un code court ou autre ? Bonne continuation
Bonjour Anthony,
Cette fonction existe dans Gutenberg. Quand tu mets à jour une section réutilisable les modifications se répercutent sur toutes les pages et articles.
Je ne connais pas l’équivalent dans Elementor. Quand tu changes ton template, tu es obligé d’aller le modifier manuellement partout ce qui n’est franchement pas souhaitable.
Je te souhaite une magnifique journée.
Jean
Bonjour Jean. Et merci d’avoir pris le temps de répondre.
Après quelques recherches. Voici deux solutions pour Elementor.
La première, pour ceux utilise OceanWp, il suffit de créer un modèle à partir du thème panel. Une fois le modèle créé dans theme panel > ma bibliothèque un shortcode est attribué automatiquement à chaque modèle. Il suffit alors de l’insérer sur une page. Toute modification effectué sur le modèle sera prise en compte directement dans le contenu des pages.
Et Pour ceux qui n’utilisent pas le thème OceanWP, le plugin Anywhere Elementor fonctionne de la même manière apparemment.
Bonne continuation
Anthony
Bonjour Anthony,
Il faudra que je teste la réplication des modifications avec Anywhere Elementor.
Je te souhaite une magnifique journée.
Jean
J’ai appris à me servir d’Elementor toute seule mais ton super tuto qui me servira à l’avenir comme méthode… On peut faire de jolies choses avec la version gratuite ! Manque une option “appliquer les changement du modèle sur les articles/pages”, ou alors je n’ai pas trouvé encore la fonction, je ne sais pas si elle existe dans la version payante… ce serait si pratique plutôt que faire mes modifs article par article quand je change un détail dans le design… ! Merci merci, je vais continuer de lire ton blog 😀
Bonjour Muriel,
Je ne connais pas de fonction similaire aux blocs réutilisables sur Gutenberg.
Je n’utilise que la version gratuite d’Elementor.
Belle journée,
Jean
Bonjour Muriel.
Je débute aussi avec elementor et me posais la même question. Regardes mon commentaire du 11 aout. tu devrais trouver la réponse sur la mise à jour automatique des modèles.
Cordialement
Bonjour Jean,
Je voulais rebondir sur votre réponse du 05 Mai 2019 à Maurice, concernant l;a création d’articles avec Elementor.
Vous dites qu’il ne vaut pas mieux car on perdrait la mise en page en cas de changement d’outil, pourtant avec Elementor, il est bien indiqué que justement si on désactive ou supprime l’outil, on ne perd aucunement notre mise en page. C’est sensé être l’un de ses points forts justement.
Et l’écriture des article sous Elementor est aussi très intéressante pour se servir de l’outil.
Bonjour Gaëlle,
Je confirme que tu perds ta mise en page quand tu désactives Elementor. Le point positif est que tu conserves tes éléments ce qui n’est pas le cas avec certaines extensions où tu perds tout à la désactivation.
Belle journée,
Jean
Bonsoir Jean,
Merci pour ce super tuto qui m’a fait gagner beaucoup de temps dans la prise en main d’elementor.
Peux-tu nous dire pourquoi Elementor ne te semble pas adapté aux articles ? C’est une question technique, de temps ou quoid’autre.
Merci pour ta réponse
Maurice
Bonjour Maurice,
Je ne recommande pas Elementor pour les articles pour 2 raisons :
En cas de changement d’outil, tu devras refaire tous les articles. Si les pages sont peu nombreuses, reprendre chaque article prendrait des jours pour un apport minime.
Gutenberg offre de nombreuses possibilités pour la mise en page d’articles plus rapide à implémenter qu’avec Elementor.
A bientôt,
Jean
Hello Jean et merci pour cet article,
Je suis tombé sur Elementor récemment et étant débutant dans la construction de site, j’ai été séduit par la puissance et la facilité de prise en main de l’outil.
Par contre, savez-vous si la mise en place d’un site enfant reste une étape importante avant de se lancer dans la construction du site ? Ou le fait que ce soit un plugin évite l’écrasage de toutes les modifs CSS lors des mises à jour du thème ?
En vous remerciant pour votre réponse,
Cordialement
Nicolas
Bonjour Nicolas,
Tu as deux niveaux de personnalisation de ton site :
1) La création de pages personnalisées avec Elementor. Cette partie ne nécessite pas de thème enfant. La mise à jour de ton thème n’affectera pas tes créations. Tu pourras, si tu le souhaites par la suite, installer un thème enfant sans que cela ne modifie tes pages.
2) La personnalisation des CSS de ton thème. Si tu souhaites modifier ton thème, tu devras créer un thème enfant qui conservera les modifications apportées aux CSS lors des mises à jour.
A bientôt,
Jean