Aujourd'hui, On Parle

Guide Elementor : Tutoriel complet pour débuter

Découvrez le meilleur constructeur de page Wordpress grâce à ce guide Elementor et commencez à créer votre site internet dès aujourd’hui.

Partager cet article

Guide Elementor : Tutoriel complet

Créé en 2016 par Yoni Luksenberg, Yakir Sitbon et Ariel Klikstein, Elementor a su s’imposer comme la référence dans son domaine.

Elementor est un constructeur visuel de page WordPress, basé sur un système de module à glisser déposer, qui va vous permettre de créer simplement des mises en pages personnalisées sur votre site internet.

Lors de sa création en 2016, Elementor a rapidement su se démarquer de ses concurrents comme Divi, WP Bakery ou bien Beaver Builder de par sa simplicité d’utilisation, son optimisation et sa modularité. Il est devenu en seulement 4 ans, le premier constructeur de page WordPress du marché.

Dans ce guide elementor, nous allons voir ensemble comment configurer et prendre en main le plugin afin de créer votre première page Elementor.

Préparation de l’environnement wordpress

Nous allons commencer par préparer notre environnement WordPress afin d’accueillir le plugin Elementor.

Pour ce guide, nous vous conseillons de partir sur une base saine avec un WordPress vierge, sans plugin ni thème installé.

Il est également recommandé de ne pas utiliser plusieurs constructeurs de page sur une même installation wordpress. Utilisez seulement Elementor pour construire l’ensemble de votre site.

Installation du plugin Elementor

Premièrement, nous allons installer le plugin Elementor, vous pouvez le télécharger directement en passant par le backoffice wordpress.

Installation du thème Hello Child Elementor

Afin de suivre les bonnes pratiques WordPress, il est recommandé de toujours utiliser ce qu’on appelle un thème enfant (ou child theme) en complément de votre thème principal.

Ce thème enfant va permettre de faire des modifications au niveau de l’architecture CSS ou des templates, sans risquer de perdre vos modifications en cas de mise à jour du thème principal.

Nous avons conçu spécialement pour ce guide elementor “Hello Child Elementor by Growwwup” qui hérite du thème principal “Hello Elementor”, vous pouvez le télécharger ci-dessous.

Il est très important d’utiliser ce thème, car il a été optimisé et conçu pour Elementor.

Conclusion des pré-requis WordPress pour Elementor

Créer une page avec Elementor

Les choses sérieuses commencent ! Nous allons créer notre première page avec Elementor.
Pour cela, toujours sur le backoffice WordPress, suivez les instructions ci-dessous.

Dans “Pages”, cliquez sur ajouter et créez une page “Hello Word”, le bouton “Modifier avec Elementor” apparait en cliquant dessus, Elementor va générer l’interface de construction de page puis, vous rediriger vers celle-ci.

Configurer le kit par défaut

Avant de commencer l’intégration des éléments sur notre page, nous allons configurer le kit par défaut d’Elementor.

Cette étape va nous permettre de définir les polices et les couleurs principales de notre site internet. Tous les widgets que nous attacherons à nos pages hériteront de ces paramètres. Un véritable gain de temps. Vous pourrez à tout moment modifier ces réglages et tous vos widgets seront mis à jour automatiquement.

Toujours sur l’éditeur Elementor, cliquez sur l’ icône en haut à gauche puis, “réglages du site”. L’affichage de l’éditeur passe en bleu, vous êtes désormais sur l’édition du thème (Kit par défaut).

Définir les couleurs globales

Nous allons commencer par définir les couleurs globales du site. Cliquez sur “couleurs globales”, pour notre exemple, nous allons définir les couleurs suivantes :

Définir les polices globales

Nous allons passer aux polices d’écriture. Revenez en arrière grâce à la flèche en haut à gauche de l’éditeur puis cliquez sur “polices globales”.

Définissez les polices d’écriture de votre site internet avec les valeurs ci-dessous en cliquant sur “Famille” puis renseignez le nom de la police.

Vous ne trouvez pas la font qui vous convient ? Nous avons écrit un article pour ajouter une police d’écriture personnalisée à Elementor.

Afin de rendre ce tutoriel Elementor plus digeste, nous passerons les autres réglages du thème. Le plus important ici, c’est de comprendre comment on modifie les éléments globaux. Vous pouvez revenir sur les réglages du site à tout moment pour continuer la personnalisation des autres éléments.

Vous pouvez maintenant sauvegarder en bas à droite de l’éditeur avec “Mettre à jour“, puis fermer le réglage du site via la petite croix en haut à droite.

Vous allez être redirigé vers l’éditeur de page classique en l’occurrence, la page que vous étiez en train de créer “Hello World”.

L'éditeur de page Elementor

Maintenant, nous allons étudier les différents éléments qui composent l’éditeur Elementor. On peut voir deux onglets “Éléments” et “Global“.

L’onglet “Eléments” contient tous les widgets proposés par Elementor, environ 40 pour la version gratuite. C’est avec ces widgets que vous allez construire votre site internet.

L’onglet “Global” quant à lui est plus complexe, nous n’allons pas nous attarder dessus pour le moment.

Tout en bas de l’éditeur vous avez différentes icones

Réglages : Modifier les informations de la page comme le titre, l’image mise en avant et l’état de publication.
Navigateur : Naviguer entre les différentes sections de votre page
Historiques :
- Actions : Historique de vos modifications actuelles
- Révisions : Historique des enregistrements actuels
Responsive : Permet de voir l’affichage sur tablette et mobile
Prévisualiser : Sert à créer un aperçu des modifications en cours

Masquer le titre par défaut

Pour commencer, nous allons retirer le titre de la page actuelle.

Cliquez ensuite sur l’icône widgets avec les 9 petits points en haut à droite pour revenir à l’onglet “Eléments”.

Créer une section sur Elementor

La structuration d’une page sur Elementor est basée sur un principe de section, ce qui est comparable à des tableaux. Chaque section possède des colonnes qui vont nous permettre d’insérer des widgets comme du texte, des titres, des images et beaucoup d’autres éléments.

Nous allons créer notre première section qui nous servira d’entête pour notre page. Cette section comprendra :

Un titre
Une description
Une image

Cliquez sur le au milieu de l’écran et sélectionnez la structure à deux colonnes. Voilà, votre section est désormais créée.

Dans ce cas de figure, notre section est découpée en deux colonnes, mais chaque section est divisible en plusieurs colonnes selon vos besoins.

Modifier la hauteur d'une section

On constate maintenant que les options de l’éditeur à gauche ont changé, vous êtes passé en mode “édition de section”, on peut remarquer plusieurs onglets.

Ces éléments peuvent varier en fonction des widgets utilisés, à vous de les explorer.

Pour la mise en page de notre section, nous allons définir une hauteur minimale.

N’oubliez pas de sauvegarder en bas à droite de l’éditeur.

Modifier l'alignement vertical d'une colonne

Pour harmoniser notre mise en page dans notre colonne, nous allons aligner verticalement les widgets intérieurs en “milieu” .

Utiliser les widgets Elementor

Notre section est maintenant prête, nous allons maintenant pouvoir insérer nos premiers widgets.

Créer un titre

Pour commencer, nous allons créer un titre, pour cela, retournez sur la liste des modules en cliquant en haut à droite de l’éditeur , glissez et déposez le widget “Titre” sur la colonne de gauche de la section.

Remplacez le texte par le titre que vous souhaitez.

Modifier le balisage sémantique du titre

Le titre que nous venons de créer, représente l’intitulé de la page, il possède donc un poids important en SEO, il faut donc modifier le balisage sémantique et le mettre en H1.

Si vous souhaitez en savoir plus sur le balisage sémantique, je vous invite à lire notre article sur la rédaction SEO.

Changer la couleur d'une section

Afin de rendre notre section un peu moins triste, nous allons changer la couleur du fond en un dégradé violet et bleu. Il est possible de mettre aussi une couleur uni ou bien un média video ou image en arrière plan.

Ajouter une forme de séparation à une section

Pour donner un petit coté design à notre section, nous allons ajouter une forme de séparation en bas de celle-ci.

Il vous suffit de jouer sur les réglages indiqué en 3 pour modifier la forme de séparation.

Modifier la couleur d'un texte

Avec le changement de couleur d’arrière plan de notre section, le titre n’est plus assez lisible. Nous allons donc changer sa couleur pour qu’il ressorte davantage.

Notre texte est maintenant blanc et nettement plus lisible.

Ajouter une image dans une colonne de section

Terminons la mise en page de notre première section Elementor par l’ajout d’une image d’illustration. Cela va donner un peu de vie à notre entête.

Retournez dans la liste des widgets en cliquant sur l’icône puis glissez-déposez le widget “image” sur la colonne de droite de la section.

Ajouter l’image du kit création “Illustration_1.png“

Modifier la mise en forme d'une image

A présent nous allons mettre en forme notre image. Définissez la taille maximum de votre image à 400px puis ajoutez un rayon de bordure comme sur le screen.

Cela donne un effet un peu plus lisse à l’image ce qui est plus agréable et cohérent avec la forme de séparation de la section.

Conclusion sur la création d'une section elementor

Pour conclure sur la création de notre première section, nous avons appris à :

Créer une section à deux colonnes
Définir une taille minimum de section
Changer la couleur du texte
Changer la couleur d'arrière plan d'une section
Ajouter un titre à une section
Ajouter une image
Mettre en forme une image (bordure et taille)

Conclusion du guide Elementor pour bien débuter

A vous de jouer maintenant et de découvrir l’outil dans sa globalité. Nous avons étudié la configuration et la création basique d’une section avec Elementor.

Vous avez toutes les clés en mains pour faire parler votre imagination et commencer à intégrer de nouveaux contenus.

Elementor est un outil très puissant qui permet de créer une multitude de types de site internet, e-commerce, blog, vitrine… Votre imagination est votre seul limite, donc dépassez là !

Bon courage et bonne création 🙂