Elementor : le guide complet du meilleur constructeur de pages pour WordPress

Elementor le constructeur de pages star pour WordPress ne cesse de progresser depuis sa sortie en mai 2016 ! De nombreux utilisateurs ont délaissés leur ancien page builder pour passer sur Elementor, qui compte aujourd’hui plus de 2 millions d’installations actives (contre seulement 600.000 en avril 2017). C’est une vraie folie. Tout le monde veut l’utiliser mais certains ont du mal à le prendre en main… Aujourd’hui je vous propose un guide complet de son utilisation.

Guide elementor

 

1 – Installer Elementor

Installer Elementor

 

  1. Allez à l’onglet Extensions > Ajouter
  2. Faites une recherche dans le champ dédié
  3. Installez puis activez le plugin.

Sinon, vous pourrez également le télécharger sur le répertoire officiel.

 

2 – Les paramétrages d’Elementor

Dès l’activation du plugin, vous verrez apparaître deux nouveaux onglets dans votre administration : l’onglet Elementor et l’onglet Modèles.

Nous allons, dans un premier temps, nous pencher sur le premier onglet.

 

2.1 – Onglet Elementor > Réglages

L’onglet des réglages d’Elementor est composé de 3 sous-onglets. Même si l’onglet Style et Avancé vous permettent de paramétrer quelques options supplémentaires, je voudrais m’attarder un peu sur l’onglet Général.

Elementor Réglages

 

  1. Allez à l’onglet Elementor > Réglages
  2. Ouvrez l’onglet Général
  3. Vous pourrez choisir quels sont les types de contenus qui peuvent être édités avec Elementor. Par défaut, les Articles et les Pages sont cochées. Pour ma part, je conseille généralement de créer les pages avec un page-builder et d’utiliser l’éditeur de WordPress par défaut pour les articles. Dans ce cas, Gutenberg ou l’éditeur classique font très bien le job (puisqu’un article est généralement destiné à de la rédaction pure). Ici, vous pourrez alors simplement désactiver Elementor sur certains types de post.
  4. Vous pouvez désactiver les couleurs par défaut d’Elementor. Ainsi, ce seront les couleurs par défaut de votre thème qui prendront la priorité. C’est souvent ce que nous souhaitons mais par défaut, cette option n’est pas cochée.
  5. Idem pour les polices. Certains utilisateurs remarquent que des polices, pourtant disponibles dans leur thème, ne sont pas disponibles dans les widgets d’Elementor. Si c’est votre cas, n’hésitez à cocher l’option pour désactiver les polices par défaut d’Elementor. Par défaut, cette option n’est pas cochée.
  6. Vous pouvez accepter que le plugin récolte des informations de manière anonyme. Par défaut, cette option n’est pas cochée.
  7. Pensez à enregistrer vos modifications.

 

2.2 – Onglet Elementor > Gestionnaire de rôle

gestionnaire de rôle

 

L’onglet Gestionnaire de rôle va vous permettre de désactiver l’utilisation du page builder en fonction des rôles des utilisateurs. Cela peut être pertinent si vous n’êtes pas le seul à maintenir votre site. Par défaut, tout le monde a le droit d’utiliser Elementor. Vous pouvez le désactiver pour les utilisateurs qui ont le rôle d’éditeur, d’auteur, de contributeur ou d’abonné.

En savoir plus sur les différents rôles au sein de WordPress.

 

2.3 – Onglet Elementor > Outils

 

Onglet Général

outils général

 

Vous ne devriez pas avoir besoin d’aller dans cet onglet. Toutefois, il est bien de savoir qu’il existe et ce qu’il propose :

  1. Ouvrez l’onglet Elementor > Outils
  2. Ouvrez l’onglet Général
  3. Une fonctionnalité vous permet de régénérer le CSS (action facultative).
  4. Synchroniser la librairie est un bouton qui permet de le faire manuellement – par défaut, elle se met à jour quotidiennement (action facultative).
  5. Si vous rencontrez des problèmes ou des conflits, vous pouvez faire des tests en utilisant le mode sans échec.
  6. Idem pour obtenir des informations lors des tests de débogage.
  7. N’oubliez pas d’enregistrer vos modifications.

 

Onglet Remplacer l’URL

remplacer URL

 

Attention, cette fonctionnalité peut avoir des conséquences sur votre site : elle permet de changer l’URL de votre site en base de données et de mettre à jour vos données Elementor. Ceci ne doit être utilisé que dans des cas précis et si vous savez ce que vous faites.

  1. Ouvrez l’onglet Outils
  2. Ouvrez l’onglet Remplacer l’URL
  3. Vous pourrez remplacer l’ancienne URL de votre site avec la nouvelle.
  4. Enregistrez.

 

Onglet Contrôle de version

contrôle de version

 

Si vous avez un problème de compatibilité, vous pourriez faire le choix de rétrograder la version d’Elementor que vous utilisez ou même devenir un Bêta Testeur.

  1. Ouvrez l’onglet Outils
  2. Ouvrez l’onglet Contrôle de version
  3. Cliquez sur Réinstaller la Vx.x.x
  4. Devenez bêta-testeur, si vous le souhaitez – vous pourrez découvrir les futures fonctionnalités du plugin avant sa sortie officielle.
  5. Enregistrez.

 

Onglet Mode maintenance

mode maintenance

 

Cette fonctionnalité d’Elementor vous permettra de mettre votre site en maintenance sans avoir à utiliser un autre plugin.

  1. Ouvrez l’onglet Outils
  2. Ouvrez l’onglet Mode Maintenance
  3. Vous pouvez sélectionner le type de maintenance : le mode Arrive Bientôt (renvoie un code HTTP 200) et le mode Maintenance (renvoie le code HTTP 503)
  4. Durant la mise en maintenance de votre site, vous pourrez définir qui pourra accéder au back-office de votre site en fonction des rôles des utilisateurs.
  5. Pour que ce mode maintenance soit actif, vous devrez créer un “modèle” dans votre bibliothèque Elementor. Ce modèle est un layout (une mise en page) que vous devrez créer en amont. Nous verrons cela plus tard.
  6. Enregistrez.

 

2.4 – Onglet Elementor > Information système

information systeme

 

Ici, rien de bien compliqué. Cet onglet vous permet de contrôler les informations de votre système : WordPress et hébergement. Cela pourrait vous être demandé lorsque vous faites une demande d’aide auprès d’un support.

 

2.5 – Onglet Commencer / Obtenir de l’aide

aide Elementor

 

Les deux onglets suivants vous permettront de trouver des informations et de l’aide. L’onglet Commencer met à disposition des vidéos d’explication et l’onglet Obtenir de l’aide vous renvoie vers la page du support officiel d’Elementor.

 

2.6 – Onglet Elementor > Polices personnalisées

Polices personnalisées

 

L’onglet Polices Personnalisées sera disponible uniquement si vous utilisez la version pro du plugin. Ceci dit, c’est tout à fait faisable sans souscrire à cette licence. Ce tuto vous permettra de rajouter facilement des polices personnalisées via votre thème enfant.

 

3 – Activer Elementor sur un contenu

Maintenant que nous avons fait le tour des principaux paramétrages globaux d’Elementor, nous allons voir comment l’activer au sein de vos pages (ou autres types de posts).

activer Elementor

 

  1. Allez à l’onglet Pages > Ajouter
  2. Saisissez le titre de votre page. Par exemple Accueil ou Contact…
  3. Activez le Page Builder en cliquant sur Modifier avec Elementor
  4. Patientez quelques instants. Votre page s’ouvrira en Front (du côté visuel de votre site) et vous pourrez commencer à construire la mise en page (layout).

 

4 – Comprendre le fonctionnement d’Elementor

Avant d’aller plus loin dans la conception de votre layout, je vous propose de comprendre comment Elementor fonctionne…

 

4.1 – Tour d’horizon

fonctionnement Elementor

 

Voici une image qui reflète une page vide où l’on vient d’activer Elementor (étape précédente). Vous devez distinguer 4 parties :

  1. Les widgets : la partie de gauche (en vert) propose des widgets à insérer au sein de votre layout. Ce sont des “briques” que vous ajouterez par glisser-déposer au sein de votre contenu (pastille n°4). Votre layout sera ainsi composé de plusieurs briques, comme si vous construisiez votre “maison”.
  2. Le header : il est composé de l’en-tête de votre site (avec le ou les menus) ainsi que du titre de la page (éventuellement). Le header ne se gère pas avec Elementor. Disons qu’il ne se gère pas avec Elementor dans sa version gratuite, la version pro quant à elle, vous permettra de le faire. C’est donc le job du thème. Le design de votre site sera dépendant du thème WordPress que vous aurez choisi. Par exemple, le thème Ocean WP propose de nombreux styles d’en-têtes, c’est assez rare pour un thème gratuit.
  3. La sidebar : cette zone n’est pas éditable avec Elementor. C’est WordPress qui se charge de son contenu (onglet Apparence > Widgets) et c’est votre thème qui se charge de son apparence et de son design. Ne cherchez donc pas à modifier cela à l’aide d’Elementor, vous ne le pourrez pas.
  4. Le body : c’est le contenu principal. C’est justement ici qu’interviennent les pages builders, quels qu’ils soient. C’est donc ici que vous pourrez commencer à construire la mise en page de votre page.

 

4.2 – La conception d’un layout (from scratch)

Créer une mise en page from scratch (en partant de zéro) est un bon exercice pour comprendre comment ça marche.

Le principe : vous ajoutez des sections dans lesquelles vous ajoutez des widgets.

Le reste dépendra de votre créativité et de l’utilisation que vous ferez des options proposées par Elementor.

Voici les étapes :

ajouter une section

 

  1. Commencez par cliquer sur l’icône “+” pour ajouter une nouvelle section.
  2. Définissez la structure de votre section. C’est le nombre de colonnes : de 1 à 6 colonnes.
  3. Cette section va venir se positionner en haut du layout (si aucune section pour l’instant) ou à la suite des sections déjà présentes.

Vous pourrez commencer à personnaliser le design de cette section grâce aux options disponibles :

personnaliser la section

 

  1. Sélectionnez la section que vous souhaitez éditer. Elle “s’éclairera en bleu”.
  2. Pour être sûr d’agir sur le bon élément, vérifiez le titre du personnaliseur. Pour cet exemple, il y a bien inscrit “Modifier Section”. La section se personnalise en 3 temps :
  3. L’onglet Mise en Page : vous trouverez ici des options pour personnaliser le positionnement de la section au sein de votre page.
  4. L’onglet Style : vous trouverez ici toutes les options qui touchent au design.
  5. L’onglet Avancé : vous trouverez ici des options pour aller plus loin comme la personnalisation des marges, l’ajout d’animation, l’ajout de CSS personnalisé etc.

 

Ainsi de suite, vous allez ajouter plusieurs sections pour définir la structure de votre layout.

continuer layout

 

Recommencez autant que nécessaire :

  1. Ajoutez une nouvelle section.
  2. Définissez la structure.
  3. Passez aux choses sérieuses en continuant la construction de votre layout grâce à l’ajout de widgets. À chaque icône “+”, vous pourrez insérer un widget de votre choix.

 

5 – La gestion des widgets

ajouter widget

 

  1. Au sein d’une section, cliquez sur l’icône “+”
  2. Le personnaliseur de gauche va vous proposer une liste de modules disponibles depuis l’onglet Eléments.
  3. Sélectionnez un widget et glissez-le au sein d’une section.
  4. L’onglet Global, quant à lui, n’est pas disponible dans la version free. Vous ne pourrez donc pas créer des widgets réutilisables et connectés entre eux.

éditer un widget

 

Une fois que vous aurez inséré votre widget au sein d’une section, le personnaliseur de gauche s’ouvrira afin que vous puissiez paramétrer le module :

  1. Sélectionnez le module à paramétrer.
  2. Vérifiez le titre du personnaliseur afin d’être sûr d’agir sur le bon élément.
  3. Comme pour la section, le personnaliseur est découpé en 3 onglets : Contenu, Style et Avancé.
  4. Commencez vos personnalisations.

Notez que chaque widget proposera des options différentes.

 

6 – La gestion du responsive

gestion du responsive

 

Le côté responsive de votre layout va se gérer à divers endroits :

  1. En bas à gauche de votre écran, vous verrez une petite “icône d’ordinateur”. Si vous cliquez dessus, vous accèderez à 3 types de vues : Ordinateur, Tablette, Mobile.
  2. La vue “Ordinateur” est la vue par défaut,
  3. La vue tablette vous permet de voir comment se comporte votre mise en page en version tablette,
  4. La vue Mobile vous donne un aperçu de votre layout en version téléphone portable.
  5. Pour chaque module (widget) que vous éditez, vous pourrez ouvrir l’onglet Avancé et trouver une option intéressante :
  6. Vous pourrez décider de faire apparaître, ou non, ce module sur les différents devices. Par exemple, un bouton d’appel téléphonique pourrait être masqué sur les ordinateurs et les tablettes et ainsi apparaître seulement sur les mobiles.

 

7 – Les layouts tout-prêts

Nous avons vu qu’il était possible de créer une mise en page en partant de zéro. J’ai une bonne nouvelle ! Vous pouvez également télécharger une mise en page pré-conçue, nommée aussi “premade layout”.

layout prédéfinis

  1. Au lieu de cliquer sur l’icône “+”, cliquez sur l’icône du dossier (en gris)
  2. Vous trouverez 3 onglets, le premier est l’onglet Pages. Il vous permet d’importer en un clic une mise en page toute faite. Ne vous réjouissez pas trop vite : peu de layouts sont gratuits. Et bien sûr, les plus jolis sont disponibles uniquement en version pro.
  3. L’onglet Blocs vous permet de télécharger des widgets (modules) pré-paramétrés.
  4. L’onglet Mes modèles vous permettra de télécharger des modèles que vous aurez préalablement enregistrés dans votre bibliothèque.

Il vous suffira de cliquer sur l’un de ces éléments pour les importer en un clic.

Attention, cela peut paraître être un gain de temps, mais en fait, le temps de changer tous les éléments et les options de paramétrage peut être également fastidieux. À voir…

 

8 – La gestion des modèles

Nous avons vu qu’il était possible d’importer une mise en page en un seul clic. Une autre fonctionnalité intéressante d’Elementor est de pouvoir sauvegarder une mise en page dans la bibliothèque (modèle). Ainsi, ce layout pourra être utilisé à nouveau au sein d’une autre page !

Voyons comment faire :

enregistrer un modèle

  1. Cliquez sur “l’icône du dossier”, situé au sein de la page à sauvegarder.
  2. En haut, à droite, vous verrez une icône de “disquette d’ordinateur” (vous n’avez jamais connu ça n’est-ce pas ? Lol !). Cliquez dessus .
  3. Un popup va s’ouvrir, vous pourrez nommer ce layout.
  4. Cliquez sur enregistrer.
  5. Après cet enregistrement, votre mise en page va aller se stocker dans votre bibliothèque de modèles, à l’onglet Modèles > Modèles enregistrés. C’est ici que vous trouverez tous les layouts que vous aurez sauvegardés. modeles export
  6. Et ce qui est encore plus intéressant, c’est que vous pourrez exporter ces modèles pour les enregistrer sur votre ordinateur et les utiliser sur un autre site par exemple.

Pour importer une mise en page pré-construite que vous auriez sauvegardée sur votre ordinateur, la démarche est inversée mais très similaire :

importer layout

  1. Toujours dans l’onglet Modèles, cliquez sur Importer des modèles
  2. Cliquez ensuite sur Parcourir et choisissez votre layout enregistré sur votre ordinateur. Ce fichier doit certainement être nommé elementor-xxxx.json
  3. Cliquez sur Importer maintenant puis patientez.
  4. Enfin, vous retrouverez votre mise en page dans la liste de vos modèles.

 

ATTENTION : ces modèles peuvent nuire à votre référencement naturel !  Je m’explique : par défaut, la bibliothèque des modèles d’Elementor est indexable par les moteurs de recherche.

Yoast SEO Modèles

N’oubliez pas d’aller dans les réglages de Yoast SEO pour désactiver l’indexation de vos modèles dans les résultats de recherche.

 

9 – Les fonctionnalités cachées

Vous avez dû remarquer qu’Elementor cachait pas mal de fonctionnalités derrière des petites icônes çà et là… Découvrez-les en détail :

autres réglages d'Elementor

  1. L’icône de la “roue dentée” : en bas à gauche, vous verrez une icône pour accéder aux réglages généraux de la page. Ces réglages sont scindés en 3 parties : Réglages, Style et Avancé. L’onglet Réglages vous donne un accès à la modification du titre de la page, l’ajout de l’image de mise en avant, la possibilité de masquer le titre etc.
  2. L’icône des “calques superposés” : il s’agit du navigateur. Une sorte de récapitulatif de la structure de votre layout.
  3. Le bouton PUBLIER : c’est ici que vous pourrez publier votre page (ou article), sinon, vous pourrez le sauvegarder en brouillon ou même l’enregistrer dans votre bibliothèque de modèle.
  4. L’icône pour “remonter le temps” : il s’agit de l’historique de votre layout. Cet historique est scindé en 2 onglets : les ACTIONS et …
  5. … les RÉVISIONS
  6. Ensuite, vous pourrez atteindre d’autres paramétrages en cliquant sur l’icône du “hamburger”, situé en haut à gauche.
  7. Un nouvel écran apparaitra pour vous proposer divers réglages comme :
  8. Le réglage des couleurs par défaut
  9. Le réglage des polices par défaut
  10. Le réglage du sélecteur de couleur
  11. L’accès rapide aux réglages du plugin lui-même
  12. La possibilité de voir un aperçu de votre page en front-end
  13. Ou bien de revenir à l’éditeur de WordPress en backoffice pour pouvoir faire vos optimisations SEO par exemple (en remplissant les champs de Yoast).

autres réglages d'Elementor

 

10 – Version gratuite vs. version pro

Tarif Elementor Pro

Même si Elementor est plutôt satisfaisant en version gratuite, pas mal de fonctionnalités sont bridées. Pour les débloquer, vous devrez passer en version pro. Tarifs : de 49 à 199$ HT par an.

 

11 – Elementor 3.0 : Tout ce que vous devez savoir

Article mis à jour suite à la sortie de la version 3.0 d’Elementor qui amène son lot de nouveautés : constructeur avancé de formulaires, générateur de pop-up et un éditeur de thème qui assure un contrôle total sur l’en-tête et les pieds-de-page.

Theme builder elementor

L’une des promesses d’Elementor: contrôlez toute l’apparence de votre site WordPress

Il y a quelques semaines, c’était l’une des mises à jour les plus importante depuis le lancement d’Elementor en 2015. On retrouve des fonctionnalités inédites et des améliorations concernants trois axes principaux:

1. Un nouveau système de Conception (Design System) centralisé

Il vous permet d’avoir le contrôle sur l’identité du site, la typographie, les couleurs, la mise en page et la lightbox à partir d’un seul endroit. Ce panneau d’options appelé “Réglages du site” est désormais disponible depuis n’importe quelle page (Elementor Core Gratuit et Elementor Pro):

Elementor Nouveautés Par Wpformation10

 

2. Un nouveau “Theme builder” / Constructeur de thème

Contrôler chaque partie de votre site Web – en-tête, pied de page, mise en page d’un seul article, archive, page 404, pages WooCommerce – sur un seul écran (Elementor Pro).

 

3. Une meilleure performance

Mais pour cela il faudrait que je réalise des tests assez détaillés pour vérifier, peut-être dans un prochain article…

Dans cet article, nous allons détailler les nouvelles fonctionnalités offertes par Elementor 3.0 et voir comment elles peuvent vous aider à gagner beaucoup de temps (et d’argent…) dans la conception d’un site Web pour vous ou votre client. Ben, le responsable Marketing d’Elementor, a déclaré que Elementor 3.0 avait une mission principale: introduire un tout nouveau moyen pour développer des sites WordPress tout en aidant les développeurs à réaliser leurs projets encore plus rapidement, de manière professionnelle et efficace. Voyons si leur promesse est tenue.

 

Partie 1 : Ce qui change dans le système de conception d’Elementor (Design System)

Le Design System permet de contrôler la typographie, les couleurs, l’identité du site, la mise en page etc. En fait, il s’agit du look et du design de votre site que le visiteur va percevoir.

Elementor Nouveautés Par Wpformation1

Design System (Le système de conception) d’Elementor

Centralisation du design et de l’identité du site depuis un seul panneau de contrôle Elementor

Elementor a décidé de regrouper l’ensemble des modules et des options qui définissent la cohérence de votre image de marque. On accède à ces options aux depuis n’importe quelle page Elementor, plus besoin de faire des aller-retours entre le tableau de bord ou le customizer. Chaque réglage qui touche au design est désormais disponible à partir d’un seul endroit appelé “Les réglages du site”:

Ce nouveau panneau centralisé est composé de plusieurs éléments:
  • Couleurs globales 
  • Polices globales
  • Style du thème (personnalisez vos éléments HTML qui n’appartiennent pas à Elementor (mais qui sont en général définis par le thème). 
  • Réglages du site : Identité du site, Logo, Titre, Slogan et le Favicon, l’Arrière Plan
  • Layouts et mise en page: définissez les options de la largeur d’une page par défaut, la barre latérale etc.
  • CSS personnalisé
  • Réglages supplémentaires
Elementor Nouveautés Par Wpformation3

Les avantages des “Polices globales”:

  • Vous aurez une cohérence globale des typographies sur tout votre site. Elementor suit la même logique que pour les couleurs: une toute nouvelle méthode de travail avec les styles de texte à appliquer globalement sur votre site:

 

Elementor Nouveautés Par Wpformation6

  • Vous pouvez contrôler la typographie pour tous les modules d’un seul coup: Famille de police, gras, italique, la taille de la police ainsi que tous les réglages responsives.

Les avantages des “Couleurs globales”:

  • Les couleurs globales vous permettent de changer la couleur sur un seul panneau de contrôle et de mettre à jour cette couleur partout, en un clic.
  • Toute votre équipe de devs et de designers sera synchronisées car ils utiliseront tous les mêmes réglages et les même codes couleurs.
  • Si vous entamez une légère refonte du site ou si vous confiez votre site à un nouveau designer, alors il n’aura plus besoin de parcourir toutes les pages et les éléments pour appliquer les nouvelles couleurs.
  • Vous pouvez aussi renommer votre couleur avec la mention de votre choix:
Elementor Nouveautés Par Wpformation9

Possibilité de renommer chaque couleur

Les avantages des styles globaux du thème :

Vous pouvez personnaliser vos éléments HTML définit par le thème qui n’appartiennent généralement pas à Elementor. Parmi eux on retrouve: la typographie des titres H1, H2…, les boutons, les images et les champs de formulaire:

Elementor Nouveautés Par Wpformation8

A titre d’exemple, j’ai appliqué à tous mes H2 un “rouge-bordeaux”, tous mes titres ont été mis à jour sur mon site WordPress:

Elementor Nouveautés Par Wpformation2

Panneau de contrôle Elementor: réglage global de mes titres

Partie 2 : Ce qui change dans le thème builder Elementor (constructeur de thème)

Depuis 2018, Elementor Pro n’est plus un simple constructeur de page comme WPBakery, Fusion Builder ou encore SiteOrigin. Elementor est aussi devenu constructeur de thème afin que vous puissiez concevoir sans coder, TOUT votre site. En gros vous ne créez plus seulement les pages mais aussi tout ce qu’il va autour.

Elementor Nouveautés Par Wpformation4

Le Thème Builder 3.0: tout est centralisé

Le “Theme Builder” vous permet de contrôler chaque partie de votre site WordPress sur un seul écran: l’en-tête, le pied de page, la mise en page de vos articles de blog, les archives, la fameuse page 404 ainsi que les les pages WooCommerce.

Il y a quelque semaine, en utilisant la technologie React, Elementor a décidé de centraliser tout le contenu de votre site pour que chaque catégories soient accessibles rapidement. Regardez par vous même:

elementor wpformation

Elementor a utilisé la technologie “React” pour que l’on puisse passer aisément d’un partie du site à une autre

Pour utiliser ce Theme Builder, suivez les étapes suivantes:

  1. Allez sur n’importe quelle page construite avec Elementor et cliquez sur le menu hamburger disponible depuis votre panneau de contrôle Elementor:Elementor Nouveautés Par Wpformation7
  2. Cliquez sur “Constructeur de thème” Elementor Nouveautés Par Wpformation5
  3. Vous pouvez à présent modifier toutes les parties de votre site

Conclusion sur la mise à jour 3.0

Dans cette mise à jour importante, ce qui compte vraiment c’est le workflow et l’organisation de l’information. En centralisant toutes les options et en réorganisant la manière de modifier chaque partie du site, je peux le confirmer, ça a changé la donne pour retrouvez chaque élément mais aussi pour le travail en équipe.

 

12 – Elementor en conclusion

Elementor est vraisemblablement le Page Builder Freemium le plus puissant du marché. C’est justement parce qu’il est “freemium” qu’il a connu ce grand succès. Mais ce n’est pas la seule raison.

En effet, il a bousculé les “codes” de construction d’un site web avec WordPress, faisant même oublier la notion de “thème” et la place qu’ils prenaient en termes de design jusqu’alors ! À présent, ce n’est plus primordial de bien choisir son thème au vu des fonctionnalités qu’Elementor propose (dans sa version pro)…

 

13 – Formez-vous à Elementor Pro

Pour aller encore plus loin avec le plugin Elementor, découvrez notre formation Elementor à distance et éligible au CPF:

Formation Elementor PRO

 

A propos de l'auteur...

Lycia Diaz

Consultante et formatrice WordPress, j'adore découvrir, tester et partager mes expériences. Mais ce qui me passionne, c'est entreprendre & accomplir de nouveaux projets comme la rédaction de mon livre "Je crée mon site avec WordPress" aux Éditions Eyrolles et l'animation de mes deux blogs : la-webeuse.com et astucesdivi.com.

16 commentaires pertinents à ce jour ;)

  • Adeline dit :

    bonjour
    impeccable,c’est exactement ce que je voulais avoir depuis longtemps pour une prise en main d’ELementor
    par contre que me conseillez vous avec Ocean WP pro, vaut il mieux Elementor Pro ou elementor free+ le plugin “essentiel addon for elementor”?

  • WPFormation dit :

    Bonjour @Adeline,
    C’est fonction de vos besoins, regardez si les options payantes ou add-ons sont nécessaires à votre projet

  • Sylvain dit :

    Bonjour
    Tuto assez complet je dois dire.
    Par contre (et j’ne ai fait les frais il n’y a pas longtemps), si vous modifiez le modèle et qu’il est déjà utilisé dans une page, les modifications du modèle ne sont pas prises en compte. Impossible de trouver comment on fait la mise à jour. Suppression de pages et création à nouveau d’une page. Donc si vous avez affiné le modèle dans la page, vous perdez toutes vos modifications.
    A moins d’avoir raté un truc ;o)

  • DAILLEAU dit :

    Bonjour,
    Bravo pour ce cours très bien fait ! J’ai cependant deux questions :
    1) A quand une suite tout aussi documentée pour aller plus loin dans l’utilisation d’Elementor ?
    2) Connaissez-vous des formateurs en la matière ?

    Merci de votre retour
    Cordialement
    Marc Dailleau

  • WPFormation dit :

    Bonjour @Marc
    non je connais ni pour le un ni pour le deux
    Mon petit doigt me dit qu’un ebook complet mais payant sur Elementor serait en préparation ;)

  • Anna dit :

    Bonjour,
    Merci pour cet article très instructif (je débute avec mon thème + Elementor…). C’est vrai que la version gratuite est quand même un peu frustrante… Mon thème est GeneratePress (version gratuite ) et pour plus de personnalisation, j’hésite entre choisir, en plus, GeneratePress Premium ou Elementor Pro…

  • BrunoV dit :

    Bonjour Article intéressant.
    Web-designer depuis plusieurs années, je transfère peu à peu tous mes sites clients vers elementor et du point de vue de tous c’est un vrai plus.
    Cela dit, elementor ne remplace pas pas une vraie bonne connaissance du CSS. En fait, c’est parce que qu’on projette le code CSS que va générer elementor que c’est intéressant et cela ne remplace pas une vrais réflexion sur la structure et la cohésion des styles pour conserver un code propre et rapide.
    Personnellement, j’utilise maintenant elementor Pro avec leur thème Hello et j’en suis très satisfait. Je l’ai complété par peu de plugins si ce n’est PAFE pro qui apporte un vrai plus avec des outils introuvables ailleurs et qui à lui seul remplace énormément d’autres plugins payants.

    Au plaisir de lire d’autres articles intéressants.
    Cordialement
    bV

  • Georges dit :

    Bonjour,

    Tuto très bien conçu. Je galérais pour concevoir mon site et ça me tire une épine du pied.

    Il y a deux points que j’aurais aimé voir abordés :
    1- Comment revenir au tableau de bord WP (j’ai trouvé, mais ça m’a pris une journée)
    2- Les options de modèles de page “Elementor canevas” et “Elementor pleine page” .

    Je serais preneur d’un article sur le thème de comment développer une refonte d’un site existant. Est-il intéressant de travailler sur un sous-domaine pour tester la nouvelle version ? Comment le faire migrer ? Là, je vais faire une version basique de mon site, mais j’envisage le faire évoluer en fonction de l’orientation de mon activité…

    Cordialement.

    GM

  • Aralar dit :

    Bonjour

    Je commence avec Elementor. J’ai expérimenté la même frustration que vous, Georges… Comment revenir vers le tableau de bord de Word Press ? Vous dites « j’ai trouvé, mais ça m’a pris une journée ».

    Alors si vous-même, ou l’auteure de l’article, pouviez nous explique comment est-ce qu’on fait, nous pourrions gagner une journée.

    D’avance, merci

    Cordialement

    MA

  • Aralar dit :

    Rebonjour

    1 ) J’avais oublié de le dire. Bravo et merci, madame Diaz. J’ai pris en main Elementor en une heure grâce à votre excellent article, clair et développé pas à pas. Et en français !

    2) Pour la question soulevée par Georges, j’ai trouvé. C’est simple, mais il faut le savoir.

    Quand vous êtes sur Elementor, pour retourner vers le tableau de bord de WordPress il faut aller sur la boite de gauche de la page (elementor), cliquer sur l’icône de gauche dans la barre supérieure, une flèche pointant sur la gauche apparait… À l’intérieur de la boite, aller avec la souris jusqu’à la dernière option, c’est là : «Revenir à l’éditeur WordPress ».

  • M Aralar dit :

    Bonjour

    Message pour le modérateur des commentaires.

    Bon, mes deux commentaires antérieurs étaient absurdes. Je me suis laissé emporter par la question de Georges (dernier commentaire publié). Comment basculer vers le tableau de bord de Word Press ? J’avais lu presque tout l’article de madame Dias… sauf les toutes dernières sections. Et là, section 9 « Les fonctionnalités cachées », indication 13 « revenir à l’éditeur de WordPress en backoffice » on trouve la réponse a la question.

    Donc, mes deux commentaires antérieurs sont absurdes et je vous demande de ne pas les valider.

    Par contre, je vous ferais parvenir à l’instant un quatrième commentaire, à publier, sur la qualité de l’article.

    Et je vous en prie de m’excuser pour cette embrouille…

    Cordialement,

    MA

  • M Aralar dit :

    Bonjour

    Bravo et merci à madame Dias pour cet excellent article, clair, concis et très bien organisé et développé.

    Grâce à vous, j’ai pris en main Elementor en moins d’une heure et j’ai construit ma première page avec ce module en quelques minutes. C’est un excellent point de départ pour approfondir.

    Cordialement,

    MA

  • Jean dit :

    Bonjour, merci pour le tuto !
    Juste que je ne pige pas comment ouvrir un modèle de page pour créer un article identique au modèle…

  • NJN dit :

    Bonjour, votre tuto est intéressant, bien ficelé, mais je pense qu’il ne précise pas la non prise en compte de tous les paramétrages de Yoast (bien utiles pourtant) lors de l’utilisation d’Elementor. Ce qui me gêne d’autant plus qu’Elementor est simple et pratique à utiliser par ailleurs.

  • BESSIERE Martine dit :

    Est-ce que vous faites des formations gratuites à Word Press et Elementor pendant le confinement ?

  • WPFormation dit :

    @Martine,
    en effet en ces temps difficiles, nous proposons un webinar gratuit sur Elementor le Mardi 21 avril 2020 de 14:00 à 15:00