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

/

article guide utilisation elementor

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.

tutoriel elementor
guide d'utilisation d'elementor

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

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 restaurant
modèle Elementor hotel

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

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


54 réponses à “Le guide d’utilisation d’Elementor : personnalise tes pages”

  1. bonjour
    super guide pour bien demarrer avec elementor .
    j’ai vu sur des videos que l’on pouvez modifier dynamiquement sa section ou sa colonne simplement en selectionnant la bordure avec la souris !
    En vous remerciant pour votre réponse,
    Cordialement
    Louise

    • Bonjour Louise,

      La modification des éléments directement est typique de DIVI où tu redimensionnes les blocs et sections à la souris. Ils l’ont peut-être intégré pour certains blocs d’Elementor mais cela ne semble pas encore la norme.

      Excellente journée,
      Jean

  2. Bonjour,
    Tout d’abord, un énorme merci pour vos articles qui sont très bien expliqués et surtout utiles pour les débutantes comme moi.
    Donc, j’ai un petit souci sur mon site, je voudrais modifier ma page de blog avec Elementor, mais ça ne veut pas fonctionner.
    J’ai bien mis dans les réglages que la page affichant les articles est la page de blog, mais Elementor m’indique un message d’erreur : ‘Nous sommes désolé quelque chose s’est mal passé’, du coup je ne comprends pas trop pourquoi il ne veut pas sur cette page précisément alors que sur les pages normales (n’affichant pas d’articles) ça fonctionne parfaitement.
    Le template de la page blog répond à home.php, je ne sais pas si cela a une importance mais je le précise au cas où. Est ce que j’ai fait une mauvaise manipulation ? est ce que je dois créer une page d’archive personnalisée ?
    Merci beaucoup par avance pour votre réponse.
    Belle journée.

    • Bonjour Mary,

      La page des articles est générée automatiquement et n’est pas modifiable par Gutenberg ni Elementor en version gratuite.

      Il est possible que cela soit réalisable avec Elementor pro avec le theme builder mais je n’en suis pas certain. La prochaine version de WordPress intégrera normalement des fonctionnalités de theme builder.

      Magnifique journée,
      Jean

  3. Bonjour Jean,

    D’abord un grand merci pour ce travail ; je n’ai pas trouvé mieux sur le sujet.
    Mais je crains apporter une touche de noirceur sur ce plugin dans mes propos.
    En effet, j’utilise Elementor gratuit pour construire le site de notre asso qui contient des vidéos. Nous les avons mis, non pas sur Youtube mais sur un sous-domaine de notre domaine.
    L’outil « vidéo » qu’il soit de base ou sur Premium Addons permet de mettre sur site des vidéos qui proviennent de sources autre que Youtube ; video > source « Self Hosted » > External Url « http://sous-domaine.domaine.org/fichier_video.mp4

    Youpeeee !!! ça marche … sur mon ordi (linux mint) ceux de mes collègues, enfin pas tous : ça ne marche pas sur Windows 7 et après vérification, ça ne marche pas non plus sur les smartphones ( Je précise que le thème employé est OceanWp).

    Notre Hébergeur O2Switch nous dit que ça vient de l’outil car si ça venait du serveur, la vidéo ne marcherait sur aucun système d’exploitation.
    Nous avons alors eu l’idée de la mettre dans l’outil « Editeur de texte » ; là ça marche sur tout les systèmes utilisés sauf que la présentation n’est pas aussi belle qu’avec l’outil dédié.

    Est-ce vraiment un bug ou est-ce moi qui ne sait pas utiliser correctement l’outil ?
    Et si c’est un bug, à qui doit-on s’adresser pour le corriger ?

    • Bonjour François,

      Cela ressemble effectivement à un bug.
      Tu peux tester d’héberger ta vidéo dans le bloc Gutenberg pour valider que cela provient d’Elementor.
      Tu peux contacter le support et exposer ton problème.

      Magnifique journée,
      Jean

  4. Bonjour Jean,

    Très sympathique approche sur les bases que ce site !!! Des infos « pour pas un rond » utiles 😉

    Je rencontre un souci depuis quasi l’origine de mon site (Elementor free/Astra free), à savoir Google n’arrive pas à « décrypter » ma configuration de base (layout).
    En clair, la search console revient sans cesse sur deux problèmes « d’ergonomie mobile » : 1) « éléments cliquables trop rapprochés » et 2) « contenu plus large que l’écran ». Le site apparaît pourtant nickel « dans la vraie vie » (desktop, mobile).
    Donc non seulement les requêtes, le (temps de) chargement etc sont énormes (sections en double (versions mobile et desktop), sections/blocks responsives -affichés ou pas selon device) mais, alors que quand je teste les pages en direct c’est bon dans 99.99% des cas, lorsque je lance la validation de la search console, c’est no way… ?
    Accessoirement, je ne comprends pas non plus pourquoi sur mobile, Elementor charge la totalité, càd tout ce qui n’apparaît PAS (les sections exclusivement desktop, les images dans TOUS les formats, les widgets et animations…) qui pourtant sont bien invisibles à l’écran mais présents dans le code ?

    Je précise avoir essayé en « pleine largeur » -étiré et espacé, et « encadré », tout ou contenu seulement, le « viewport » configuré en ‘content= »width=device-width, initial-scale=1″‘(les plus petites images sont en 300px), j’ai même viré la section desktop intro qui avait une image en background (non supporté en Webp), bel exemple de section qui n’était pas sensée être présente en mobile (et qui n’apparaît pas mais se charge !)

    Bref, désolé pour la tartine, et j’espère être compréhensible. Sur le forum WP je ne suis pas seul dans ce cas, mais le support ne donne pas de solution.
    Merci de m’avoir lu, dans l’espoir d’une solution…
    Bonne soirée !!

    • Bonjour Laurent,

      Les problèmes d’ergonomie mobile de la search console des éléments cliquables trop rapprochés est souvent lié au manque de distance entre les éléments du menu.

      Elementor est une bonne solution pour arriver rapidement à un résultat design. Cependant, c’est une solution qui surcharge le site et joue sur sa vitesse. La page chargée est identique pour tous les supports seul l’affichage diffère.

      Certains thèmes encadrent le contenu dans un conteneur qui bloque l’affichage pleine page. Il est souvent possible de modifier les paramètres dans les réglages du thème ou des articles.

      Magnifique journée,
      Jean

      • Bonjour et merci pour la réponse !
        Que j’ai bien reçue par mail, mais par soutien au site et à Jean, j’en reviens ici.
        Comme je l’ai répondu, mon menu n’est pas en cause, étant le même sur toutes mes (qq) pages.. Du builder au code, des caches en ligne, des extensions « dev » en ligne etc, pas moyen de trouver les « éléments cliquables trop rapprochés »… D’autant que la search console joue au yoyo avec les résultats. Donc, pas le menu, pas les boutons (40px padding minimum), ni les liens…
        Pareil pour « contenu plus large que l’écran », impossible de trouver.
        Concernant l’affichage, le thème Astra permet encadré, pleine largeur, les deux en « espacé » ou « étiré », sa propre mise en page etc, j’ai tout essayé sans succès.

        Quant à elementor, de fait, si j’avais compris au départ que c’était une usine à gaz, certes pratique, mais excessivement lourde puisque chargeant tout même si la version mobile ne propose qu’un quart de la version desktop, j’aurais évité!!!
        En tout cas c’est une info qui est loin d’être clairement divulguée, elle aurait pourtant grand mérite à l’être !! Dans l’espoir, sans doute utopique, que cela évolue…

        Encore merci Jean !

        • Bonjour Laurent,

          Google Search Console déraille certaines fois sur ces deux points : éléments rapprochés et contenu plus large que l’écran. Dans ce cas, il n’y a qu’une ou deux pages concernées et le problème est noté comme résolu au passage suivant.

          L’outil de test de la version mobile permet de valider que le site est responsive : https://search.google.com/test/mobile-friendly?hl=FR

          Excellente fin de journée,
          Jean

  5. Bonjour,
    Merci pour ce tutoriel très instructif!
    Est-il possible de masquer du texte dans une page gérée par Elementor ?
    Le but est de ne pas afficher l’intégralité des textes d’une page blog, mais uniquement les premières lignes.
    Merci

    • Bonjour Lilou,

      Tu peux utiliser le bloc Va et vient d’Elementor qui permet de disposer du texte qui se dévoile uniquement quand le visiteur déplie le bloc.

      Magnifique journée,
      Jean

  6. Bonjour à vous Jean. Un grand merci pour vos éclairages plus qu’intéressant pour le néophyte que je suis. J’ai crée mon site avec wordpress avec un portfolio avec élémentor. Hélas, je n’arrive pas à déplacer mes miniatures. A priori, elles sont triées et visibles sur mon site par date de publication…Pouvez-vous m’apporter une aide sur ma demande ? D’avance, un grand merci et au plaisir de vous lire sur la toile virtuelle. Bien à vous Alain

    • Bonjour Alain,

      Les miniatures semblent gérées automatiquement comme des articles. Dans ce cas, c’est effectivement la date de publication qui dicte les emplacements.

      Tu peux créer une page spécifique où tu réalises tes propres miniatures et sur laquelle tu auras la main. Tu peux également jouer avec les dates de publication.

      Magnifique journée,
      Jean

  7. Bonjour,
    Je me permet d’écrire ici car j’ai besoin d’aide. Tout d’abord, mon premier problème est le responsive, en effet, les images et textes se déforment selon la taille de la fenêtre. C’est-à-dire que si la fenêtre est entre le format d’une page classique web et le format d’une tablette, les images et textes vont se déformer et ne vont pas se mettre automatiquement en format initial (Ordinateur, tablette, téléphone) .
    Pour mon deuxième problème, le site n’est pas compatible avec le navigateur Google Chrome. En effet, sur Safari le site est complet or sur Google Chrome des images et vidéos n’apparaissent pas (notamment sur la page d’accueil).
    Puis, il y a des légers problèmes de chargement du site (contenu trop lourd ?) .
    Merci d’avance pour vos conseils et aides à mes problèmes.
    Bien Cordialement,
    Charles Montiel

    • Bonjour Charles,

      Le problème de chargement est probablement lié à des images trop lourdes. Le fait de les adapter exactement au format affiché et de les compresser avec TinyPng par exemple réduit considérablement le poids.

      Concernant l’affichage sur mobiles et tablettes, tu peux adapter tes pages spécifiquement pour ces deux formats et t’assurer que le rendu soit optimal.

      Je n’ai jamais remarqué de soucis entre Chrome et Elementor.

      Magnifique journée,
      Jean

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

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

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

  11. 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 !

  12. 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 !

  13. 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 ?

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

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

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

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

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

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

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

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

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *