III. Utiliser des templates pré-construits pour bâtir vos pages

Maintenant que vous avez vu comment utiliser des conteneurs et des widgets, je vous propose de voir comment gagner du temps pour construire vos mises en page à partir de templates préconstruits.

Installer la version pro d’Elementor

La première étape consiste à installer la version professionnelle d’Elementor ; pour ce faire, il va vous falloir faire 2 choses :

  • Installer le plugin Elementor Pro (en plus de la version gratuite) et l’activer
  • Puis vous rendre sur une page « cachée » de l’interface pour activer la licence

Pour ce faire je vous propose de suivre le mode d’emploi qui se trouve dans un Google Doc privé (accessible uniquement avec votre adresse ISD Flaubert !) : https://docs.google.com/document/d/1yjGPbB3HDmepXldNafzUu6Mu6gIXO2l4ZZ6OiDF8A0w/edit?usp=sharing

Premiers essais avec des blocs préconstruits

Entrons maintenant dans le vif du sujet : pour faire simple et voir tout le potentiel de l’outil, nous allons commencer par intégrer des blocs “prêts à l’emploi”.

Ça vous permettra d’avoir une bonne base pour la construction de vos pages et vous pourrez tout à fait construire vos propres blocs vous-mêmes une fois que vous comprendrez le fonctionnement d’Elementor !

Dans la partie “Rendu”, cliquez sur l’icône qui représente un petit dossier :

Cela vous donne accès à une bibliothèque de blocs pré-construits que vous pouvez filtrer en fonction de vos besoins. Sélectionnez par exemple “Call to Action” pour afficher des structures prêtes à l’emploi pour inciter au clic :

Puis choisissez l’un des blocs proposés (par exemple celui-ci)

NB : Lorsque vous essaierez d’insérer ce bloc pour la 1ère fois, si vous n’avez pas lié votre site à un compte gratuit Elementor, celui-ci vous demandera d’en créer un pour pouvoir accéder à la bibliothèque de templates.

Pour ce faire, il suffit de suivre les étapes qui s’affichent :

A la fin de votre inscription, vous pouvez connecter votre compte Elementor à votre site local :

Une fois le processus terminé, le bloc se chargera sur votre page et vous pourrez utiliser librement tous les autres accessibles avec la version gratuite sans avoir à vous reconnecter.

Rappels élémentaires

Pour comprendre le fonctionnement de l’éditeur de page, il faut décomposer les différentes parties qui permettent de créer des structures.

Pour construire vos pages, vous allez essentiellement utiliser 2 outils :

  • Des conteneurs pour définir la structure des différentes parties de vos pages (colonnes & lignes)
  • Les widgets ou éléments pour remplir les différentes parties générées dans les conteneurs.

Les conteneurs

Les sections sont représentées par un liseré rose clair clair et cette icône :

En cliquant sur le petit “+“ , vous allez pouvoir ajouter soit un nouveau template pré-construit, soit partir sur une structure vide :

Si vous choisissez de partir sur une structure vide, vous aurez le choix entre 2 types de mise en page : Flexbox, ou en grille

  • Flexbox permet de créer tout type de mise en page
  • La grille permet surtout de gérer des mises en page en colonnes ou basées sur des lignes.

Généralement, on utilise plus souvent Flexbox car il permet beaucoup plus de libertés dans la définition de la structure des différents conteneurs.

Les widgets

Les widgets sont les éléments ponctuels qui remplissent vos colonnes : il peut s’agir d’un texte, d’une image, d’un bouton, d’un formulaire, etc.

Comme pour les sections et colonnes, vous allez pouvoir les paramétrer en cliquant sur l’icône qui représente un petit crayon et en modifiant les options dans le panneau latéral gauche.

Quelques petits trucs à savoir sur la manipulation de ces éléments :

  • Vous pouvez les glisser-déposer pour les agencer comme bon vous semble

Le clic gauche de votre souris est actif dans l’interface d’Elementor. Vous pouvez par exemple l’utiliser pour dupliquer ou supprimer rapidement un élément :

Pour ce qui est des colonnes, vous pouvez également modifier leur largeur très simplement ainsi :

Enfin, notez que la fenêtre de paramétrage de chaque élément affiche 3 sous-onglets qu’il vous faudra manipuler pour changer leur apparence :

  • L’onglet « Contenu » permet généralement de changer les textes présents dans les widgets
  • L’onglet « Style » permet de modifier son apparence de façon basique
  • L’onglet « Avancé » permet également de travailler sur l’apparence du widget, mais de façon plus poussée.

Focus sur l’onglet « Avancé »

Si vous avez suivi le tuto sur la création d’une page de A à Z, vous devriez avoir les bases suffisantes sur l’utilisation des onglets « Contenu » et « Style ».

Regardons maintenant à quoi sert cet onglet « avancé » avec le bouton présent dans le template pré-construit.

Cliquez sur le bouton, et rendez-vous dans l’onglet « Avancé » :

L’outil ouvert par défaut permet de jouer sur la mise en page. Nous n’allons pas tout détailler, mais quelques propriété peuvent être intéressantes à connaître :

  • Les marges permettent de jouer sur l’espace qui se trouve autour du widget
  • L’alignement auto permet de définir la position du widget dans son conteneur (essayez de le centrer par exemple)
  • L’ordre permet de changer la position du widget dans le conteneur par rapport aux autres widgets ; essayez de le mettre en 1ère position

Le reste des réglages étant vraiment situationnel, nous n’allons pas nous étaler dessus.

Les autres options « avancées » :

Si vous fouillez un peu les autres onglets disponibles, vous verrez qu’il y en a un certain nombre :

Vous pouvez changer les réglages de ces différentes options si vous souhaitez voir à quoi elles servent. Dans l’absolu, voilà un résumé de leur utilité :

Effets de mouvement : Permet d’ajouter des animations à vos éléments, comme des effets de défilement ou des mouvements à l’apparition, afin de rendre vos sections plus dynamiques.

Transformer : Utilisé pour ajuster la taille, la rotation, l’inclinaison ou encore déplacer un élément (par exemple, agrandir ou faire pivoter un bloc) sans affecter la structure HTML.

Arrière-plan : Permet de définir des images, des couleurs, ou des dégradés comme arrière-plan pour un élément spécifique. Il est aussi possible de paramétrer différents arrière-plans en fonction des états (normal ou survol).

Bordure : Sert à ajuster les bordures autour d’un élément, comme l’épaisseur, le style, et la couleur. Il inclut également des options pour arrondir les angles.

Masque : Cette option vous permet de définir des formes spécifiques pour vos éléments afin de créer des effets de découpe ou des designs créatifs.

Responsive : Permet de contrôler la manière dont un élément est affiché sur différents types d’appareils (ordinateurs, tablettes, mobiles). Vous pouvez par exemple choisir de cacher certains éléments sur mobile.

Attributs : Vous permet d’ajouter des attributs HTML personnalisés, comme des identifiants ou des classes CSS, pour faciliter la personnalisation de l’apparence ou le suivi d’éléments spécifiques.

Custom CSS : Donne la possibilité d’ajouter du CSS personnalisé pour un contrôle plus fin de la mise en forme et du style d’un élément. Très utile pour des ajustements spécifiques que les paramètres standards ne permettent pas.

Vous l’aurez compris, ces différentes options se trouvent dans l’onglet « Avancé » car elles ne sont pas forcément toutes utiles et sont plutôt réservées à un usage avancé. Néanmoins, lorsque vous utiliserez des templates pré-construits, pensez à jeter un oeil à ces différents onglets si vous ne comprenez pas comment un widget a été configuré par son auteur !

L’outil le plus pratique d’Elementor : le navigateur

Enfin, il y a une dernière fonctionnalité dont nous n’avons pas parlé jusqu’ici et qu’il est indispensable de connaître : le navigateur de la structure général de la page.

Pour l’activer, c’est très simple : cliquez sur le bouton représentant des calques superposés dans la barre d’outils en haut à gauche ->

Cela aura pour effet de faire apparaitre une petite fenêtre par dessus votre zone de travail :

Il s’agit de la version épurée de la liste des conteneurs et widgets que vous avez utilisés. C’est une sorte de « plan général » de votre espace de travail.

En effet, lorsque vous travaillerez avec des interfaces de plus en plus complexes, il est parfois difficile de cibler précisément un élément sur la zone de travail. En le sélectionnant directement dans cette fenêtre de navigation, vous vous assurez d’être sur le bon élément.

Je vous recommande donc chaudement de garder cette petite fenêtre ouverte constamment afin de ne pas vous perdre dans votre page !

Ressources supplémentaires

Pour peaufiner ce qui a été vu jusqu’ici, je vous propose quelques petites lectures complémentaires :

Mon groupe de support officiel sur WordPress

Pour rappel voici l’accès vers le groupe privé sur Discord si vous avez des soucis et que vous avez besoin de support : https://discord.gg/7JHBJAVtAb

N’hésitez pas à venir y poser vos questions ! 😉

Voilà, maintenant à vous de jouer : mettez en pratique ce que vous avez appris pour créer la page d’accueil de votre site internet, à partir de votre wireframe et en suivant votre cahier des charges (en respectant vos choix de couleurs / typos et images).