CHAPITRE VI

Installer un constructeur de page : Elementor

Comme dit au début du chapitre précédent, le thème est la peau de notre site. 

Il offre une structure et un design dans lesquels on va pouvoir poser notre contenu. 

Le problème est son manque de flexibilité, parce que ce qu’on gagne en vitesse et en consistance, on le perd en personnalisation. 

C’est pourquoi on va voir dans ce chapitre comment installer et utiliser le plugin WordPress Elementor (version gratuite), pour créer des pages entièrement personnalisables

Sommaire chapitre 6 :

Qu'est-ce que Elementor et pourquoi c'est bien pour nous ?

Elementor c’est un page builder :

Installer un theme Elementor constructeur de site
Un page builder permet de construire une page à partir de module entièrement personnalisables.

La page que vous êtes en train de lire par exemple est très simple mais elle est construite avec Elementor car aucun template nous permettrai d’avoir un haut de page aussi personnalisé.

Concrêtement, Elementor est un plugin de WordPress qui existe en version gratuite et qui débloque encore plus de fonctionnalités dans sa version payante. 

Il permet de créer des pages en faisant glisser des éléments dessus. Par exemple des images, des textes, des boutons, des paragraphes déroulant etc. 

L’intérêt est qu’il permet un niveau de personnalisation total. 

On est donc plus dépendant du design d’un thème, on va pouvoir designer entièrement une page exactement comme on le souhaite. 

La contrepartie c’est que cela nécessite d’avantage de temps et que le résultat va dépendre de notre capacité à créer quelque chose de beau car on peut vraiment partir d’une page blanche si on le souhaite. 

Ce qu’on va faire :

  1. C’est télécharger et installer Elementor sur notre WordPress. 
  2. Ensuite on va comprendre comment créer une page de notre site en utilisant Elementor. 
  3. Puis voir l’ensemble des widgets que possède Elementor pour nous permettre de créer notre page. 
  4. Enfin comment créer des templates et publier notre page. 
  5. On terminera avec quelques exemples en essayant de copier des sections de plusieurs site pour comprendre comment construire exactement la page que l’on souhaite

Télécharger et installer Elementor sur son site WordPress

Elementor est un plugin donc pour l’installer on va dans Tableau de bord > Extensions > Ajouter

Ici on cherche Elementor et il s’agit ce celui ci qu’on Installe et qu’on Active

elementor constructeur de site wordpress plugin

Paramétrer une page utilisant Elementor

Une fois fait on va dans créer une nouvelle page. 

Donc on va dans Tableau de bord > Page > Ajouter :

Et on va faire la même chose que pour une page normale : 

Lui donner un Titre de page :

Constructeur site wordpress Elementor titre page

On va modifier sa visibilité en la mettant en privée pour l’instant :

page visibilité privé WordPress

On va vérifier ensuite les permaliens ou url

page wordpress url permaliens

On va sécuriser la page de façon à ce qu’il y ait un https dans l’url

Pour ça sous HTTPS, on va cocher les deux cases Sécuriser l’article (faire apparaitre un https devant l’url de cette page) et Sécuriser les articles enfants (toutes les pages enfants à celle-ci, dans le menu, seront automatiquement sécurisées avec un https) : 

page WordPress ssl https

Enfin on va dire à WordPress quel design est ce qu’il doit utiliser pour cette page. 

Par défaut il va utiliser notre thème, ici le thème actif est Illdy. 

On veut qu’il utilise pour cette page-ci Elementor. 

Donc dans Attributs de page, on sélectionne Elementor canevas.

Constructeur site wordpress Elementor canevas template

Ensuite on va mettre à jour notre page en cliquant sur le bouton mettre à jour : 

mettre a jour page wordpress

Puis on va l’éditer avec Elementor. Pour ça on clique sur le nouveau bouton qui est apparu depuis qu’on a installé Elementor : Modifier avec Elementor 

page wordpress modifier avec elementor

Et tout le contenu on va le mettre directement dans Elementor, on ne va rien mettre de plus que le titre dans l’éditeur WordPress. 

On a donc créé une page qui utilise Elementor en template et on vient de l’ouvrir dans Elementor.

Voyons maintenant plus en détail Elementor : 

Découvrir l'interface d'Elementor

Donc on arrive sur une page vide avec à gauche l’interface d’Elementor, au centre, la prévisualisation de notre page et à droite une barre de navigation (pour l’instant vide) qui va être très utile pour nous. 

Constructeur site wordpress Elementor interface
Voici l'interface d'Elementor. Pour l'instant notre page est totalement vide.

Note : Si la barre de navigation n’est pas présente immédiatement, on peut la faire apparaitre en cliquant sur l’icône Navigateur tout en bas à gauche)

Constructeur site wordpress Elementor barre navigation

Les différents widgets Elementor pour créer ses pages

Les widgets donc sont des éléments qu’on va faire glisser sur sa page pour la créer. 

  • On a des sections interne, donc des colonnes
  • Des titre 
  • Des images, 
  • des Textes 
  • des boutons
  • Etc.
Constructeur site wordpress Elementor widgets

Les widgets se font glisser à droite dans le WYSIWYG (what you see is what you get) ou plan de travail et de prévisualisation.

Une fois un widget glissé dans le plan de travail, on va avoir sur la gauche accès à tous les paramètres pour personnaliser ce widgets

Le plan de travail et de prévisualisation d'Elementor

Au milieu, on a le plan de travail

Il est vide pour l’instant on part d’une page blanche. 

C’est ici qu’on va construire notre page. 

Pour ajouter du contenu dans le plan de travail, on va le voir juste après, il faut commencer par ajouter une section qui va pouvoir encadrer et accueillir nos éléments. 

Donc on va cliquer sur le + rouge

Constructeur site wordpress Elementor ajouter section

Ensuite Elementor nous demande combien de colonne on souhaite (ce n’est pas définitif). 

Pour l’exemple on va dire deux : 

Constructeur site wordpress Elementor colonnes par sections

On se retrouve avec deux colonnes sur notre page : 

Constructeur site wordpress Elementor 2 colonnes

Et si par exemple je vais à gauche dans la liste des Widgets et qu’on fait glisser un Titre dans la première colonne

Constructeur site wordpress Elementor ajouter titre

On a un titre qui apparait dans la première colonne, qu’on va pouvoir ensuite paramétrer : 

Constructeur site wordpress Elementor paramétrer titre

Seconde option qu’on trouve dans le plan de travail c’est lorsqu’on clique sur l’icône du dossier

Constructeur site wordpress Elementor titre

On va ouvir la bibliothèque de contenu

Constructeur site wordpress Elementor bibliotheque de template

La bibliothèque de contenu c’est des pages et des blocs tous faits et qu’on peut directement insérer dans notre page. 

Ensuite on les édite et on les modifie avec notre contenu et en retirant ou ajoutant ce qu’on a besoin. 

On a deux choses importantes : Pages et blocs : 

Constructeur site wordpress Elementor page et bloc

Les pages vont nous permettre d’insérer une page entière sur notre page. 

Si maintenant on va dans blocs

Constructeur site wordpress Elementor bloc

Ici on va pouvoir insérer seulement des sections de pages pour la construire petit bout par petit bout. 

On retrouve une barre de navigation qui propose différentes sections pour faciliter la recherche.

Un peu comme on pouvait le faire avec les thèmes WordPress sauf qu’ici on a un niveau de personnalisation quasi total. 

Par exemple si on clique sur un bloc comme le bloc blanc FAQ

Constructeur site wordpress Elementor bloc faq

Pour ajouter ce bloc a notre page, il suffit de cliquer en haut à droite sur le bouton Insérer

Constructeur site wordpress Elementor insérer bouton

Et on a le bloc entier qui s’est ajouté à notre page. 

Constructeur site wordpress Elementor bloc faq

Et c’est exactement le même fonctionnement pour les pages

Si on va tout en bas et qu’on clique sur le dossier :

Constructeur site wordpress Elementor titre

Puis sur une page, par exemple celle-ci : 

Constructeur site wordpress Elementor page elementor

Et qu’on clique sur Insérer :

Constructeur site wordpress Elementor insérer bouton

On a bien la page entière qui s’est insérée dans notre page :

Constructeur site wordpress Elementor page template

Pour prévisualiser sa page, il suffit alors de refermer le volet de gauche en cliquant sur la petite flèche sur le bord du volet :

Constructeur site wordpress Elementor fleche bouton aperçu

Et on a alors une vision de notre page telle qu’elle sera publiée en ligne : 

Constructeur site wordpress Elementor preview

Donc voila pour l’interface.

Et maintenant si on regarde à droite le panneau de navigation :

Panneau de navigation des pages Elementor :

On a tous les éléments présents sur la page qui apparaissent dans le panneau de navigation

Constructeur site wordpress Elementor navigateur

Il permet de comprendre comment est construite notre page.

De sélectionner rapidement ses éléments et de les faire glisser les uns au dessus des autres. 

C’est très utile quand il y a beaucoup d’éléments sur la page, des éléments qui se superposent. 

Ou encore quand un élément s’est glissé et qu’il créé un bug, le navigateur permet d’avoir une vue d’ensemble de ce qu’il se passe sur notre page. 

Les grilles, architecture de sa page web

On vient de découvrir l’interface d’Elementor. 

  • A gauche le panneau qui nous sert à paramétrer l’élément sélectionné, à ajouter un élément ou à naviguer dans le menu d’Elementor. 
  • Au centre la prévisualisation 
  • A droite la barre de navigation

Maintenant on va comprendre comment se construit une page avec Elementor. 

Pour ça, on va commencer avec le principe de grilles

Ici il s’agit des colonnes et des sections

Si on clique sur le bouton +

Constructeur site wordpress Elementor ajouter section

On va créer une nouvelle sections contenant entre une et une infinité de colonne

Prenons ici 2 colonnes

Constructeur site wordpress Elementor 2 colonnes

On va se retrouver avec ça : 

Constructeur site wordpress Elementor 2 colonnes

En bleu on a une Section qui contient en gris une colonne

Il faut penser à sa page comme à un tableau contenant des colonnes et des lignes. 

A l’intérieur on fait glisser nos éléments. 

Cette construction en grille permet de créer un site qui va s’adapter automatiquement quel que soit le type d’écran (Ordinateur, tablette, mobile).

Donc voyons déjà les Sections

Les Sections sous Elementor :

Une Section est une bande prenant toute la largeur du site. 

Elle contient un type d’éléments communs. 

En général il y a une section par partie de la page

Par exemple dans ce qu’on a chargé on voit qu’à chaque partie différente de la page il y a une section, en voici une : 

Constructeur site wordpress Elementor sous section
La section est représentée par le cadre beu ciel. Elle encadre une partie d'une page.

Donc dès qu’on veut créer une nouvelle partie de notre page, on ajoute une nouvelle section.

Lorsqu’on paramètre une section, tous les éléments qui s’y trouvent subissent les paramètres

A l’intérieur d’une section il y a une ou plusieurs colonnes.

Les colonnes sous Elementor :

Les colonnes vont pouvoir accueillir les éléments qui composent la page (Texte, boutons, Titres, images etc.).

Elles sont représentées par un cadre gris et se trouvent systématiquement à l’intérieur d’une section

Constructeur site wordpress Elementor colonnes
La colonne se trouve à l'intérieur d'une section et est représentée par un cadre gris.

Dans les colonnes on va pouvoir ajouter ses éléments Titres, texte ou bouton par exemple. 

Lorsqu’on paramètre une colonne (par exemple les marges internes), tous les éléments qui se trouvent dans la colonne subissent les paramètres

Les Elements ou Widgets sous Elementor :

Dans les colonnes on va pouvoir ajouter ses éléments Titres, texte ou bouton par exemple.

Il s’agit de widgets.  

Constructeur site wordpress Elementor widgets
Ici on retrouve un widget Titre, texte et bouton, à l'intérieur de la colonne.

Dans le panneau de gauche, on a bien la liste de tous les widgets qu’il est possible de faire glisser dans une colonne

Constructeur site wordpress Elementor widgets

Et si on garde notre exemple, on voit donc bien dans le panneau de navigation l’architecture en grille : 

On a une section

Dans laquelle il y a une colonne

Dans laquelle il y a un titre, un texte et un bouton

Constructeur site wordpress Elementor navigateur

Conclusion

Donc toute page suit cette grille : Section > Colonne(s) > Widget(s). 

Avant de créer ou de copier une page existante, il faut bien se poser la question du nombre de colonnes que l’on souhaite avoir dans une section

Bien visualiser le tableau général qui se cache derrière un design. 

Et en déduire le nombre de colonnes.

Voyons maintenant comment paramétrer chaque éléments Section, colonne et widget