Le guide d’utilisation d’Elementor : personnalise tes pages

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.

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.

H4Les Widgets WordPress

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.

Comme 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
• Optimise images de ton site [Poids et SEO]
• Réalise facilement la page d’accueil de ton site

Retrouve tous les articles pour Créer seul ton site

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean