Aujourd'hui, on parle

Guide Elementor : Tutoriel complet pour débuter

Growwwup
janvier 30, 2021

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 de page visuelle sur WordPress, basé sur un système de 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, nous allons voir ensemble comment configurer et prendre en main le plugin afin de créer notre première page avec 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.

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.

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

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.

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 car, 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 renseigner 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 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, on y reviendra à la fin du tutoriel quand les bases seront assimilés.

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

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
Historique :
- Actions : Historiques de vos modifications actuelles
- Révisions : Historiques 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.

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 verticale 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 éléments 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 une video 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.

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.

Retourner dans la liste des widgets en cliquant sur l’icône puis glisser déposer le widget image sur la colonne de droite de la section.

Ajouter l’image contenue dans le 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 ajouter 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 défini :

Création de la section à deux colonnes
Définition d'une taille minimum de la section
Changement du couleur du texte
Changement du couleur d'arrière plan section
Ajout d'un titre à la section
Ajout d'une image
Mise en forme d'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 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…

Bon courage et bonne création 🙂

Vous souhaitez en savoir plus ?

Parlez-nous de votre projet et de vos objectifs

Vous souhaitez booster votre activité ?

Parlez nous de votre projet