Une « notice » pour Elementor Pro

Elementor Pro a des fonctions très sophistiquées et, malheureusement, cela va de paire avec une interface un poil complexe.

Bien que 100000 fois plus simple que de devoir coder hein 😉

Cet article se veut donc une sorte d’inventaire, de notice d’Elementor Pro pour t’aider à t’y retrouver peu importe ce que tu cherches.

N’hésite pas à utiliser Ctrl+F sur cette page pour accéder directement à ce que tu veux 😉

Trouver Elementor sur l’interface WordPress

Ça y est ! Tu as installé Elementor Pro !

Non ? Alors rends-toi vite ici pour l’installer immédiatement !

Maintenant, tu peux voir deux nouveautés dans la barre latérale de ton tableau d’administration de WordPress :

• Elementor
• Modèles

Voyons voir ce qui se cache derrière…

Elementor

C’est ici que tu vas pouvoir paramétrer Elementor Pro.

Notamment :

• les polices par défaut, la largeur du contenu, des sections…
• toutes les intégrations : reCapcha, autorépondeurs…
• la possibilité d’ajouter des fichiers JSON ou SVG (qui ne peuvent pas être ajoutés sinon)

Modèles

Cet onglet a « un peu » changé par rapport à le version gratuite :p

Maintenant, il y a les fenêtres modales et le constructeur de thème .

Les fenêtres modales sont les popup et les lightbox que tu utilises pour proposer ton bonus (entre autre :p) à tes visiteurs. Plus besoin de les créer sur d’autres logiciels (payants).

Le constructeur de thème te permet de créer ton propre en-tête, ton pied de page, les pages d’archives (par exemple la page qui regroupe les résultats de recherche sur ton site). Et même plusieurs modèles de chaque et de les appliquer comme tu le désires sur certaines pages et pas sur d’autres.

Visite guidée de l’éditeur de page Elementor Pro

Allons maintenant plus en profondeur, vers ce qui nous intéresse vraiment : créer une page avec l’éditeur Elementor.

Comment accéder à l’éditeur de page d’Elementor

Tu pourras te rendre compte que les possibilités pour accéder à l’éditeur de page Elementor sont nombreuses :

• dans l’éditeur de page, le gros bouton rouge tout en haut : Modifier avec Elementor
• la même chose dans l’éditeur d’article
• dans Modèles > Modèles enregistrés > passer la souris sur n’importe quel modèle et cliquer sur Modifier avec Elementor
• dans Modèle > Ajouter tout simplement, après avoir choisir le type de modèle que l’on veut faire 😉
• sur les pages « Toutes les pages » ou « Tous les articles », passer la souris sur n’importe quel article/page et cliquer sur Modifier avec Elementor
• en visitant le site et en étant connecté sur l’espace d’administration Worpress, pour chaque page et chaque article il y a aussi, en haut, la possibilité de Modifier avec Elementor 😉

Je crois que ma liste est à peu près exhaustive ? Si ce n’est pas le cas, dis-le moi 😀

Ah oui, il m’est arrivé qu’en passant par l’un de ces chemin l’éditeur Elementor ne charge pas pour modifier une page déjà existante. Il faut alors tester les autres chemins, notamment le dernier : quand la page est en mode aperçu, cliquer sur « Modifier avec Elementor ».

Aperçu de l’éditeur et des étapes pour commencer

Une fois l’éditeur Elementor ouvert, le processus sera toujours à peu près le même :

1. Régler les paramètres de la page/article (titre, image mise en avant, et surtout le modèle de page : par défaut, Elementor canva ou Elementor pleine largeur)
2. Passer en mode Mobile grâce à l’onglet Responsive pour optimiser l’organisation de son site pour du « Mobile First » qui plait tant à Google (et à 80% de tes visiteurs :p)
3. Revenir aux Elements pour pouvoir choisir ce que tu veux mettre sur ta page / ton article
4. Ajouter une Section (pour pouvoir glisser des éléments dedans) ou directement un modèle de page/d’article préexistant dans la bibliothèque
5. Chercher dans la barre de recherche l’élément que tu veux (la liste est longue, ça peut vite prendre du temps :p).

Puis, il faudra glisser l’élément sélectionné dans la section que tu veux, rajouter une autre section (avec plusieurs colonnes si besoin ?), placer des éléments dedans, etc.

Regardons maintenant plus en détail chaque partie de l’éditeur Elementor.

L’essentiel :

Éléments

Elementor comme … Elements ! Tu es un génie, nous sommes des génies !

Trève de plaisanterie.

Peu importe l’onglet sur lequel tu es, tu peux cliquer sur les 9 petits carrés en haut à droite pour retrouver l’onglet Elements. C’est dans cet onglet que tu pourras retrouver tous les blocs à glisser dans ta page ou ton article.

• Titre
• Editeur de texte
• Call To Action
• Galeries
• …

Après avoir fait les premiers réglages de la page (ou de l’article) c’est toujours l’onglet Elements que tu utilisera.

• 

• 

Style global, réglage généraux et plus

C’est en cliquant sur le burger (menu) en haut à gauche que tu peux choisir les réglages par défaut de cette page (et uniquement de cette page ou de cet article).

• Couleurs par défaut : pour définir une palette de couleur (principal, secondaire, texte et accentué) à partir de palettes prédéfinies ou de valeurs hexadécimales
• Polices par défaut : titres principaux, titres secondaires, texte de corps, texte d’accentuation
• Style du thème : arrière plan, polices, boutons… Attention, il n’est visible que si aucune Couleurs par défaut ou Polices par défaut n’est sélectionnée 😉
  >> et c’est ici que tu peux choisir les couleurs et la police de tes h1, h2, h3, etc. :p
• Réglages généraux : Style (largeurs des contenus, espacement ces widgets…) et Visionneuse (tout pour régler la visionneuse d’image par défaut, c’est à dire ce qui se passe quand un visiteur clique sur une image)
• Réglages du tableau de bord : qui permet notamment d’aller à la page Intégrations d’Elementor (là où on peut relier un compte reCaptcha ou Active Campaing)
• A propos d’Elementor (qui renvoie sur le site d’Elementor)
• Préférence de l’éditeur (pour choisir notamment le mode clair ou sombre de l’éditeur Elementor)
• Finder : pour rechercher parmi les articles que tu as déjà créés avec Elementor
• Voir la page : un aperçu mais qui n’ouvre pas un nouvel onglet ; pense bien à enregistrer le brouillon avant de cliquer pour voir la page (mais de toute façon, Elementor te prévient ;))
• Revenir à l’éditeur WordPress : comme son nom l’indique, tu quittes Elementor pour revenir sur Gutemberg (ou l’ancien éditeur si tu as installé le plugin qui le permet ;))

Réglages de la page

En cliquant sur la roue crantée en bas à gauche, tu accèdes aux réglages de la page.

• Réglages généraux : titre, extrait, image mise en avant, et, très important, le Modèle de page : Par défaut, Elementor canva ou Elementor pleine largeur (voir plus bas)
• Style du corps : type d’arrière plan (uni ou dégradé), marges internes
• Avancés : pour rajouter du CSS

C’est donc dans ce menu que tu pourra actualiser le titre, l’extrait et l’image mise en avant de ta page. Mais surtout, c’est ici que tu pourra choisir le modèle de page adapté à ta situation.

Quel modèle de page choisir ?

• Par défaut :
  
  la page/ l’article prendra comme modèle celui du thème et le contenu sera dans la zone réservée à cet effet par le thème. Si tu veux une page (de blog par exemple) avec une barre latérale, tu peux choisir ce modèle qui l’ajoutera automatiquement. ça ne t’empêche pas de rajouter des éléments variés, mais le contenu ne sera pas en pleine largeur.
  
  
• Elementor Canva :
  
  tu obtiens là une page blanche, sans en-tête ni pieds de page (header et footer en anglais :p). C’est à toi de remplir entièrement la page, comme tu le veux. On utilisera Elementor Canva pour faire des landing pages facilement (et sans payer d’autres services ;))
  Voir cet article (en anglais) pour plus de détail : Utiliser le modèle de page Elementor canva
  
• Elementor pleine largeur :
  
  comme son nom l’indique, le contenu ici pourra prendre toute la largeur de l’écran et ne restera pas enfermé dans une « boîte » au milieu de l’écran. L’entête et le pieds de page du thème (ou définis avec le constructeur de thème d’Elementor) seront conservés.
  Attention toutefois à ne pas laisser du texte en pleine largeur : il deviendrait rapidement illisible sur ordinateur !
  Voir ces articles (en anglais) pour plus de détail : Utiliser le modèle Elementor pleine largeur et Comment créer une page en pleine largeur avec Elementor
  

PS : même si cette option apparaît en créant des widgets, elle n’aura aucun effet sur ceux-ci.

Le mode « responsive »

C’est l’une des fonctionnalités essentielles d’Elementor, maintenant que Google préfère les sites « Mobile first » !

En sélectionnant le mode mobile ou tablette tu peux avoir un aperçu en temps réel de la page sur ces différents appareils.

Tu peux aussi, évidemment, travailler sur ta page directement avec ce mode d’affichage.

Nous reviendrons dans un prochain article sur le « responsive », il y a beaucoup à dire 😉

Le reste :

Navigateur

Si tu as du mal à sélectionner la colonne ou la section que tu veux, tu peux passer par le navigateur 😉

Il te permet aussi, en glissant et déposant les différentes sections/colonnes, de les réorganiser sur la page.

Historique

C’est ici que tu pourra retrouver toutes les modifications effectuées sur ta page, et les différentes versions.

Dans l’onglet Actions tu retrouvera les dernières actions effectuées, et dans l’onglet Révision tu retrouvera toutes les versions de la page.

Je m’explique. Lorsque tu publies une première fois ta page, tu as la première version. Quand tu reviens dessus, que tu fais des modifications et que tu publies à nouveau, tu obtiens une seconde version. Et ainsi de suite.

Pour les deux onglets, il te suffit de cliquer sur l’une des actions ou l’une des versions pour revenir en arrière ou restaurer une ancienne version.

Prévisualiser

Ouvre un nouvel onglet pour prévisualiser la page (youhouu t’avais vraiment besoin de cette précision, pas vrai ? xD).

Publier

Tu peux soit publier directement ta page depuis Elementor en cliquant sur Publier, soit cliquer sur la flèche pour Enregistrer le brouillon ou Enregistrer comme modèle.

Attention, si tu publies depuis Elementor, tu n’auras pas, par défaut, le partage sur les réseaux sociaux ni la possibilité de programmer la publication. Pour cela, tu devras revenir sur l’éditeur WordPress (dans le menu des réglages généraux, tu te souviens) et publier/programmer dans Gutemberg.

Enregistrer comme modèle te permet de conserver une mise en page type et de l’utiliser pour d’autres pages. Mais nous y reviendrons dans un autre article, dans lequel je t’expliquerai également comment exporter tes modèles (pour ton autre site WordPress par exemple).

Ce qu’il faut retenir pour utiliser Elementor Pro :

En 5 étapes :

1) Régler les paramètres de la page/article (titre, image mise en avant, et surtout le modèle de page : par défaut, Elementor canva ou Elementor pleine largeur)

2) Passer en mode Mobile grâce à l’onglet Responsive pour optimiser l’organisation de son site pour du « Mobile First » qui plait tant à Google (et à 80% de tes visiteurs :p)

3) Revenir aux Elements pour pouvoir choisir ce que tu veux mettre sur ta page / ton article

4) Ajouter une Section (pour pouvoir glisser des éléments dedans) ou directement un modèle de page/d’article préexistant dans la bibliothèque

5) Chercher dans la barre de recherche l’élément que tu veux (la liste est longue, ça peut vite prendre du temps :p) et l’insérer par glisser-déposer

Merci d’avoir lu cet article, j’espère qu’il te sera utile ! Comme toujours, n’hésite pas à me faire part de tes remarques ou problèmes rencontrés dans les commentaires 😉

A très vite !