Maintenant que vous avez vu comment se repérer dans l’interface d’Elementor, nous allons passer à un projet pratique “pas à pas” : construire une landing page (page d’atterrissage) avec Elementor
Construire la partie haute de la page
L’objectif de ce tuto est de parvenir à ce résultat :
Créer une nouvelle page web
Comme vu précédemment, créez une nouvelle page web que vous appellerez “Exercice 1” (par exemple), puis cliquez sur le bouton “Modifier avec Elementor”.
Ensuite, comme vous l’avez fait précédemment, changez le modèle de page pour tout remettre à 0 et partir sur une page blanche.
Réfléchir à l’agencement
Dans un premier temps, il faut réfléchir à l’agencement général des différents éléments qui vont composer la page :
- Combien de conteneurs allez-vous utiliser ?
- Quelles images seront nécessaires ?
- Quels textes allez-vous intégrer ?
- Quel espace souhaitez-vous occuper sur la page ?
- Quelles couleurs et typos souhaitez-vous utiliser ?
Voilà comment sera construite cette partie de la page :
- En bleu, vous avez les limites des 2 conteneurs principaux (1 pour la partie haute, 1 pour la partie basse)
- En noir vous voyez 2 sous-conteneurs qui feront office de colonnes
- En vert les widgets qui seront intégrés dans les colonnes
Préparer la partie haute
Commencez par créer une section vide en cliquant sur le petit + :
Et choisissez une structure « Flexbox » en 1 seule colonne (le sens n’a pas d’importance ici)
Dans les paramètres, vous allez pouvoir commencer à modifier quelques valeurs :
- Dans l’onglet “Mise en page” du conteneur
- Mettez la largeur à 90% : en gros, on va faire en sorte que le conteneur occupe 90% de la largeur de l’écran. Ce qui revient à laisser 10% de marge sur les 2 côtés
- Mettez comme hauteur mini 10vh : c’est une hauteur standard pour les menu / header. VH signifie « viewheight » – il s’agit de la proportion que va prendre le conteneur par rapport à la hauteur totale de l’écran. Pour faire simple, dites-vous que 10 vh équivaut à 10% de la valeur de la hauteur.
- Pour ce qui est de la justification du contenu, choisissez de le centrer.
Voilà ce que ça doit vous donner :
2. Cliquez ensuite sur l’onglet « Style » pour commencer à intégrer des couleurs :
- Choisissez un type d’arrière-plan classique et attribuez-lui la couleur #726EE4
- Tip : vous pouvez enregistrer cette valeur pour la réutiliser plus rapidement en cliquant sur le petit “+” en haut du sélecteur de couleurs
L’ajout d’un widget
Pour cette partie du site nous allons ajouter le widget “Liste d’icônes” :
- Cliquez sur le bouton qui permet d’ajouter un widget : il s’agit du petit + présent en haut à gauche de votre interface
Entrez le mot « icône » dans le moteur de recherche puis glissez le widget “Liste d’icône” directement dans la section
- Dans la barre d’outils, supprimez 2 icônes pour n’en garder qu’une seule :
- Toujours dans l’onglet contenu, cliquez sur la dernière icône restante à modifier, puis changez son texte et son image pour obtenir ceci (pour trouver l’image cherchez le terme “Graduate”)
- Ensuite dans l’onglet “Style”, vous allez pouvoir changer les couleurs du texte et de l’image :
- La couleur de l’icône est la suivante : #FEFF32
- Sa taille est réglée à 20
La couleur du texte est blanche et sa taille est également fixée à 20. Vous pouvez définir également sa graisse et sa famille de police comme suit :
- Si vous voulez que chaque première lettre s’affiche en majuscule comme dans l’exemple, choisissez l’option de transformation “Capitaliser”
- Voici ce que vous devriez voir une fois tous les paramètres renseignés :
Bien joué ! Maintenant passons à la partie basse qui est un peu plus complexe
Préparer la partie basse
Voici les différentes étapes à réaliser pour la partie basse :
a. Création de la section et des colonnes
- Ajoutez un conteneur flexbox qui contiendra 2 colonnes
- Dans les options de mise en page de la section, attribuez-lui une largeur de 80%, et une hauteur minimum de 80 VH.
- Dans les options de Style, attribuez-lui la même couleur de fond que pour la partie haute :
- Pour créer l’effet de vague tout en bas, il suffit de vous rendre dans l’onglet “Forme de séparation” (toujours sous l’onglet “Style”), sous-onglet “Bas” , puis de choisir le type “Vague” (vous pouvez en essayer d’autres si vous voulez voir ce que ça fait !), puis de modifier les valeurs de largeur / hauteur pour définir la forme de la vague.
b. Intégration des widgets
Comme vous avez pu le remarquer, les 2 colonnes sont elles-mêmes 2 autres conteneurs, qui ont leur propre logique d’affichage. Si vous cliquez sur le petit rectangle gris qui s’affiche en haut à gauche de l’une (celle de gauche par exemple), vous allez pouvoir établir ses propres règles de mise en forme interne :
- Vous pourrez également y ajouter des éléments, ou des widgets (en cliquant sur le petit + en haut à gauche de l’interface).
- En l’occurence, essayez d’ajouter :
- Un widget titre d’une taille de 50 px, couleur blanche, police Playfair Display et en transformation Capitalize)
- Un deuxième widget titre qui reprend les mêmes paramètres que son prédécesseur (dupliquez-le) mais dont la couleur est jaune
- Un widget texte de couleur blanche, police Poppins, mise en gras (weight) à 200.
Voilà ce que ça devrait vous donner :
- Pour ajouter les 2 boutons sous le texte, vous allez devoir ajouter un nouveau conteneur, qui prendra cette fois-ci la direction horizontale
Ajoutez ensuite un widget “Bouton” dans la colonne de gauche : donnez-lui une taille medium, police poppins, une graisse (weight) de 500.
La couleur de fond doit être jaune, le texte bleu. Pour arrondir ses angles, il faut changer les valeurs du Rayon de bordure : mettez la valeur 50 sur les 4 côtés. Voilà à quoi doit ressembler l’onglet style de votre bouton :
Vous pouvez également ajouter un effet d’animation lorsqu’on passe la souris dessus : Profitez-en pour changer également la couleur de fond du bouton afin d’ajouter un effet de survol supplémentaire.
Pour créer le bouton de droite, il vous suffit de dupliquer le bouton que vous venez de faire, et de changer ses couleurs. Pour le dupliquer, faites un clic droit dessus et choisissez « dupliquer » :
L’image d’illustration
Enfin, ajoutez un widget image dans la colonne de droite ; vous pouvez récupérer l’image ci-après (clic droit -> « enregistrer sous ») pour l’intégrer dans votre site :
Un autre site vous permet de générer des illustrations aux couleurs de votre choix : https://undraw.co (il offre la possibilité de changer la couleur principale directement en ligne, essayez-le !)
Quelques derniers réglages
Vous devriez avoir une page qui ressemble à peu près à ça désormais :
On pourrait, pour peaufiner le travail, centrer les contenus des 2 colonnes afin de rendre l’ensemble plus agréable.
Pour ce faire, c’est très simple : rendez-vous dans le panneau de configuration du conteneur qui contient les 2 colonnes, puis dans l’onglet « Mise en page », à la ligne « Aligner les éléments », choisissez « centrer » :
Voilà ce que ça devrait donner :
Enfin, il vous suffit de cliquer sur le bouton « publier » en haut à droite de l’écran pour valider la création de la page :
On récapitule
En suivant ces directives, vous avez vu :
- Comment ajouter des conteneurs pour gérer la mise en page
- Comment ajouter des widgets pour alimenter la page de contenus
- Comment modifier leurs paramètres via les onglets “Mise en page” (ou “Contenu” pour certains widgets) et « Style ».
Exercice : à vous de jouer – construire la partie basse de la page
Pour cette étape, à vous de jouer !
Cette fois, sans guide, vous allez devoir terminer la page avec ce que vous avez appris jusqu’ici.
Pour rappel voici à quoi doit ressembler la partie basse de votre page :
Quelques tuyaux pour vous aider à créer cette partie du site :
- Vous pouvez dupliquer le conteneur et inverser les colonnes, retirer la forme de séparation et modifier l’arrière plan.
- Voici l’illustration utilisée :
S’assurer du bon affichage de la version mobile
Le site a été réalisé avec votre résolution d’écran “normal” (autour de 1200px de large). Qu’en est-il de l’affichage sur des écrans plus petits ? Par exemple, comment la page s’affiche-t-elle sur une tablette ? Sur un mobile ? Essayez de réduire votre fenêtre et voyez comment les éléments s’organisent.
Ça doit passer à peu près, mais il doit quand même y avoir quelques cafouillages.
Pour gérer la partie mobile, c’est très simple : vous allez devoir utiliser les mêmes outils, mais en changeant la résolution de l’interface directement dans Elementor : les modifications que vous effectuerez ne seront valables que pour la résolution dans laquelle vous travaillez !
Pour passer dans un autre mode de résolution, il suffit de cliquer sur cette icône dans la barre du haut (au milieu) :
Après, à vous de jouer et de replacer les éléments de façon à ce qu’ils s’affichent correctement sur chaque résolution d’écran choisie !
Maintenant que vous avez vu les bases de l’utilisation des conteneurs et des widgets, je vous propose de voir comment utiliser des templates prêts à l’emploi que vous pourrez récupérer pour vos projets. La suite, c’est par ici !