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 :
Elementor c’est un page builder :
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 :
- C’est télécharger et installer Elementor sur notre WordPress.
- Ensuite on va comprendre comment créer une page de notre site en utilisant Elementor.
- Puis voir l’ensemble des widgets que possède Elementor pour nous permettre de créer notre page.
- Enfin comment créer des templates et publier notre page.
- 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.
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 :
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 :
On va modifier sa visibilité en la mettant en privée pour l’instant :
On va vérifier ensuite les permaliens ou url :
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) :
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.
Ensuite on va mettre à jour notre page en cliquant sur le bouton mettre à jour :
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
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 :
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.
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)
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.
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 :
Ensuite Elementor nous demande combien de colonne on souhaite (ce n’est pas définitif).
Pour l’exemple on va dire deux :
On se retrouve avec deux colonnes sur notre page :
Et si par exemple je vais à gauche dans la liste des Widgets et qu’on fait glisser un Titre dans la première colonne :
On a un titre qui apparait dans la première colonne, qu’on va pouvoir ensuite paramétrer :
Seconde option qu’on trouve dans le plan de travail c’est lorsqu’on clique sur l’icône du dossier :
On va ouvir la bibliothèque de contenu :
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 :
Les pages vont nous permettre d’insérer une page entière sur notre page.
Si maintenant on va dans blocs :
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 :
Pour ajouter ce bloc a notre page, il suffit de cliquer en haut à droite sur le bouton Insérer :
Et on a le bloc entier qui s’est ajouté à notre page.
Et c’est exactement le même fonctionnement pour les pages.
Si on va tout en bas et qu’on clique sur le dossier :
Puis sur une page, par exemple celle-ci :
Et qu’on clique sur Insérer :
On a bien la page entière qui s’est insérée dans notre page :
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 :
Et on a alors une vision de notre page telle qu’elle sera publiée en ligne :
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 :
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.
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 + :
On va créer une nouvelle sections contenant entre une et une infinité de colonne.
Prenons ici 2 colonnes :
On va se retrouver avec ça :
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 :
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 :
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.
Dans le panneau de gauche, on a bien la liste de tous les widgets qu’il est possible de faire glisser dans une colonne :
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 :
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.