Le guide d’utilisation d’Elementor : personnalise tes pages
  • Post author:

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.

elementor le tuto complet
guide d'utilisation d'elementor
picto articles débutants
Débutant

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 ?

pourquoi utiliser elementor

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 ?

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

Avantages Elementor
  • 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
inconvénients Elementor
  • 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.

Les bases d'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.

extension elementor

Avant de te lancer, tu effectues des paramétrages rapides.

Elementor > Réglages

menu réglages elementor

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.

réglages généraux

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

réglage de la police par défaut dans style

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).

exclure des rôles

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.

modifier avec elementor

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

interface elementor

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.

accès menu général

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

menu général

Si tu n’as pas activé celles par défaut de ton thème, tu indiques :

  • tes couleurs
    • Principale
    • Secondaire
    • Texte
    • Accent
couleurs document
  • tes polices
    • Titre principal
    • Titre secondaire
    • Le texte
    • Le texte accentué
titres document

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
style thème

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.

menu bas

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.

réglages page

Les modèles de page :

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

page standard

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 canevas

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

elementor pleine largeur

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.

navigateur

Historique

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

historique

Mode responsive

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

visualisation responsive

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

enregistrer brouillon

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.

ajouter un modèle

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

modèles de pages Elementor populaires

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

modèle pro

Tu cliques dessus pour accéder à l’aperçu.

Tu insères ensuite la création.

insérer un modèle

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

création compte bibliothèque

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.

modèle Elementor agence
modèle Elementor hotel
modèle Elementor restaurant

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).

modifier section

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

image arrière plan

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

filtre image

Réinitialise les polices

Tu cliques sur le texte.

Dans l’onglet Styles, tu cliques sur retour par défaut sur la police.

réinitialiser la police

Tu effaces ensuite la couleur.

effacer la couleur de police

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 +.

ajouter une section elementor

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

colonnes

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

modifier manuellement la largeur

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.

déplacer supprimer ajouter une section elementor

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
options de la section

Les options des sections

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

réglages mise page section

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

étirer js

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.

effet contener

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
style section

Dans Avancé, tu modifies les marges

marges section

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.

section responsive

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.

illustration sections internes

Tu ajoutes une section pleine largeur.

Les éléments apparaissent quand tu cliques sur le +.

ajouter un élément

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

section interne

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

ajouter nouvelle colonne

Les principaux blocs à ta disposition

Tu retrouves les éléments classiques d’une page web.

Basique

menu des éléments basiques

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.

elements basique

Les réglages des blocs

réglages 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…
menu contenu titre
  • Style pour l’apparence : taille, opacité, l’animation quand la souris passe au-dessus, les bordures, les ombres…
style titre
  • 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…
titre avancé

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.

boite image

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.

boite icônes

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.

notification étoiles

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.

carrousel

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.

galerie

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

liste icone

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

compteur

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

barre progression

Témoignage simplifie l’insertion des retours utilisateurs.

témoignage

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.

onglets

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

accordéon

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.

va-et-vient

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

icones reseaux

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

alerte

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
archives
  • barre de recherche
barre de recherche
  • articles récents
articles récents
  • catégories
catégories

Elementor possède de nombreuses possibilités pour donner du tonus à ta page.

Les effets en tutoriel vidéo.

Les effets d'Elementor 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

chevauchement exemple sections

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.

marges et z-index pour le chevauchement sur Elementor

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

marge négative pour le chevauchement

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

texte caché dessous

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.

index-z
texte au dessus

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

chevauchements multiples

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

version mobile

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

réglages index-Z pour mobiles

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.

effets de mouvement : animations elementor

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

exemples animations elementor

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.

animation plusieurs elements

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

exemple transition sections

et aux sous-sections.

transition 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.

menu formes de séparation

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

Montagnes

montagnes

Nuages

nuages

Triangle asymétrique

triangle asymétrique

Opacité d’inclinaison

opacité d'inclinaison

Pinceau vague

pinceau vague

Fendu

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)
réglages des formes de séparation
inverser la transition

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.

réglages survol bouton

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

images effets survol

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.

arriere plan survol

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

visuel sans texte

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

visuel avec texte

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.

superposition arrière-plan survol

H4Les Widgets WordPress

Voici des idées pour tirer le meilleur d’Elementor.

4 astuces illustrées en vidéo.

4 astuces pour utiliser Elementor 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 ?

resultat superposition 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
superposition texte image

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.

marges

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 ?

exemple pour obscurcir ou éclaircir une image sur Elementor

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é.

obscurcir une image d’arrière-plan sur Elementor

Cette option n’existe pas pour les images classiques.

Tu ajoutes une couleur d’arrière-plan dans Avancé.

couleur d’arrière-plan

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

opacité de l'image

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.

code court

Tu copies le code fourni dans le menu à gauche.

insérer code court

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.

ancre menu

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 ?

elementor connecter feed instagram

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.

menu réglages instagram feed

Tu connectes ton compte et tu enregistres.

connecter compte instagram

Tu intègres le code court dans ta page.

[instagram-feed]

Comment ajouter un formulaire dans la version gratuite d’Elementor ?

intégration contact form 7 dans 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.

dupliquer une section

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

copier une colonne

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

coller le style

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.

enregistrer page modèle

Tu nommes ton modèle.

nommer modèle

Dans tes pages, tu ajoutes un modèle.

ajouter modèle dans une page

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

insérer modèle

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

exporter modèle Elementor

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

importer modèle

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

modèle à partir d'une section Elementor

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

elementor blocks for gutenberg

ajoute un bloc

bloc elementor library pour Gutenberg

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

insersion bloc elementor dans gutenberg

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.

exemple mise page

C’est une autre chanson sur mobile.

empillement colonne

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

logique empillement mobile

Dans Avancé > Responsive, tu inverses les colonnes.

inverser ordre colonne

Le mal est réparé.

colonnes inversées

Les chevauchements

superposition

obtiennent des résultats fantaisistes sur mobiles.

problème décalage

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

marges mobiles

Tu réinitialises les marges.

réinitialiser les marges des mobiles
correction marges mobiles

Les espacements sont harmonieux.

colonnes ordinateur

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

colonnes mobiles

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

ajout espaceur

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

masquer espaceur ordi
espace rectifié

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.

rank math elementor

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.

essential addons elementor

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

menu essentiel addons
activer bloc

Les nouveaux blocs s’ajoutent en fin de liste.

essential addons menu

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

call to action

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

call to action exemple
content ticker

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

articles dynamiques

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

selection articles
countdown

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

décompte
fancy texte

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

texte dynamique
flip

La carte rotative dévoile le dos en basculant.

carte tournante
image accordion

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

accordéon images
pricing table

Un élément indispensable.

grille prix
tooltip

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

apparition explications
creative button

Un bouton avec plus d’options.

bouton avancé

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.

premium addons elementor

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

activer blocs premium addons

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

premium templates
premium counter

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

premium compteur
premium dual heading

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

titre coloré
premium image scroll

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

scroll bannière
premium image separator

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

séparateur illustré
premium modal box

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

pop-up bouton
premium team members

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

portraits avancés
premium princing table

La table de prix est attractive.

premium table prix

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 tweeter

Comme exercice, Authority Hacker a essayé de reproduire la page d’accueil de Trello.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean lochet fondateur pourpasunrond.fr  1

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.

Cet article a 8 commentaires

  1. Muriel

    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 😀

    1. Jean

      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

  2. Gaëlle

    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.

    1. Jean

      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

  3. Maurice

    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

    1. Jean

      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

  4. Nicolas

    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

    1. Jean

      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

Laisser un commentaire