Tu as une idée précise de ce que tu voudrais réaliser sur les pages de ton site mais l’éditeur de WordPress est plus que limité pour la mise en forme.
Comme 900 000 personnes, tu vas bâtir ta page exactement comme tu le souhaites avec Elementor.
En effet, tu construis ta page à l’aide de blocs que tu associes à ta convenance : colonnes, slider, vidéo, carte, image, animation, compteur, widget…
Je n’aborderai dans cet article que les fonctionnalités de la version gratuite.
Ce que tu vas apprendre :
Débutant
Les principales fonctionnalités d’Elementor en vidéo
Premiers pas avec Elementor + l'utilisation d'un modèle prédéfini
Rechercher Elementor Page Builder dans les extensions WordPress, l’installer et l’activer.
Avant de te lancer, tu dois bien comprendre que chaque page construite avec Elementor intègre une mise en page propre. Il ne sera plus possible de travailler sur ces pages dans l’éditeur standard de WordPress.
Elementor est parfait pour construire des pages riches et attractives. Cependant, je déconseille fortement son usage pour les articles.
Désormais, tu peux lancer la mise en page avec Elementor.
- Bouton Modifier avec Elementor juste sous le titre dans WordPress.
L’interface spécifique de l’outil diffère fortement de celle de WordPress.
Sur la colonne de gauche, se situent tous les éléments que tu peux intégrer ainsi que leurs réglages. A droite, tu visualises ta page et les modifications apportées en direct.
Pour construire ta page, tu as deux options :
- Partir d’une page blanche
- Utiliser un modèle Elementor
Pour utiliser un modèle, tu sélectionnes Ajouter un modèle dans la colonne de droite.
Tu accèdes à la bibliothèque (ceux marqués PRO sont réservés à la version payante).
Voici trois exemples de modèles gratuits pour te donner une idée.
Clique sur les miniatures pour découvrir la page complète.
Pour l’ajouter à ta page :
- Cliquer sur le modèle choisi
- Bouton Insertion en haut à droite
Tu peux ensuite modifier tous les éléments en cliquant dessus. Les paramètres sont disponibles dans la colonne de gauche.
Les modèles sont attractifs et personnalisables aux couleurs de ta marque. Cependant, je préfère réaliser ma page comme je l’entends et partir d’une page blanche.
Ces modèles sont comparables à des thèmes. Tu peux les personnaliser mais si tu souhaites t’éloigner de la trame le résultat deviens vite improbable.
Définir le style général du document
Les styles définis s’appliquent à toute ta page pour t’éviter de refaire l’opération à chaque section.
Cette étape est inutile si tu as réalisé un thème enfant avec tes couleurs et tes polices personnalisées.
- Cliquer sur le menu en haut à gauche
Couleurs par défaut
Tu vas définir 4 couleurs pour ta page :
- Principale
- Secondaire
- Texte
- Accent
- Cliquer sur la couleur
- Indiquer la référence Hex avec le #
- Cliquer en dehors de la fenêtre
- Bouton Appliquer
Polices par défaut
Tu vas définir 4 polices et leurs tailles :
- Titre principal
- Titre secondaire
- Le texte
- Le texte accentué
- Bouton Appliquer
Nous allons voir comment utiliser Elementor.
Les principes de bases d'Elementor
La construction de ta page va se réaliser par un empilement d’éléments. Chaque bloc sera géré indépendamment et pourra être déplacé.
Pour être efficace, il est préférable d’établir un plan d’ensemble avant de se lancer pour obtenir un résultat homogène sans perdre de temps. Nous verrons cela dans le dernier chapitre.
L’élément de base est la section qui rythme horizontalement ta page.
- Bouton Ajouter une section dans la page
- Définir le nombre d’éléments que tu trouveras dans cette section et leur proportion
Par exemple, une colonne à gauche comme dans l’exemple.
Les options de section apparaissent quand tu la sélectionnes.
Avec de gauche à droite :
- Modifier : pour afficher les réglages et déplacer ta section à un autre emplacement (en laissant appuyé).
- Dupliquer
- Ajouter une section au dessus
- Enregistrer la section comme modèle pour l’utiliser dans d’autres documents
- Supprimer
- Cliquer sur le +
- Glisser l’élément dans l’emplacement
Pour chaque élément sélectionné, tu retrouveras toutes les options disponibles dans la colonne de gauche.
Les réglages diffèrent pour chacun mais les principes de bases sont identiques.
Onglet Contenu
Tu trouveras les caractéristiques de l’élément ainsi pour une image : chargement de l’image, taille, alignement, légende, lien…
Onglet Style
Tu vas définir l’apparence : taille, opacité, l’animation quand la souris passe au dessus, les bordures, les ombres…
Onglet Avancé
Tu vas affiner avec les marges internes et externes du bloc, l’ordre de superposition (Index-Z), les animations d’apparition, l’arrière plan (coloré ou une image), masquer l’élément sur certains appareil…
En bas de colonne
Les réglages reprennent les éléments présent dans la colonne de gauche dans l’éditeur de WordPress.
Responsive bascule entre les affichages Ordinateur, Tablette et Mobile.
Historique te permet de visualiser les dernières modifications apportées à ta page et de revenir en arrière.
Prévisualiser les modifications ouvre l’aperçu de ta page dans une autre fenêtre
La flèche à droite de publier te permet d’accéder à la sauvegarde de ta page.
Le menu pour revenir à l’éditeur WordPress est caché en haut.
Je l’ai cherché un moment celui-ci.
Concrètement, nous allons voir quels éléments vas-tu pouvoir ajouter à ton site.
Les éléments à ta disposition
Colonne 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Colonne 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ajoutez votre texte de titrage ici
Ajoute un espace (difficile de montrer du vide)
titre
texte explicatif.
titre
texte explicatif.
- Élément de liste #1
- Élément de liste #2
- Élément de liste #3
Texte 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Texte 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Texte 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Pour insérer un shortcode qui affichera ton formulaire par exemple
Pour intégrer du HTML
Intègre un repère que tu pourras indiquer dans ton menu (personnellement je suis resté à la méthode basique avec name)
Reprend exactement la barre latérale de tes articles ou ton pied de page
Les widgets WordPress
Tu peux également intégrer les Widgets WordPress. Je ne vais pas tous les tester mais je t’en présente un échantillon de ceux qui peuvent être facilement utilisés dans une page d’accueil.
Archives
- décembre 2019
- novembre 2019
- octobre 2019
- septembre 2019
- août 2019
- juillet 2019
- juin 2019
- mai 2019
- avril 2019
- mars 2019
- février 2019
- janvier 2019
- décembre 2018
- novembre 2018
- octobre 2018
- septembre 2018
- août 2018
- juillet 2018
- juin 2018
- mai 2018
- avril 2018
- mars 2018
- février 2018
- janvier 2018
- décembre 2017
- novembre 2017
- octobre 2017
- septembre 2017
- juillet 2017
- juin 2017
- mai 2017
- avril 2017
La construction efficace d’une page
Pour que cela soit plus concret, j’ai créé en direct la page de présentation de ma newsletter. Tu retrouves toutes les étapes pas à pas.
Le texte
Tu gagnes un temps précieux en rédigeant l’intégralité du texte avant de définir ta mise en page. Ton plan structure ta page et tu visualises rapidement les sections faibles où tu manques d’arguments.
Il est très tentant de commencer par expérimenter les nombreuses animations et éléments visuels d’Elementor avant de te concentrer sur ton texte. L’impression d’avancer très vite au démarrage est vite contrebalancée par un résultat final décousu. Tu risques fort de devoir tout reprendre de zéro.
Le plus simple est d’écrire ton texte dans un éditeur simple. Tu copies-colles ensuite dans chaque bloc.
Je te renvoie à l’article sur les éléments de la page d’accueil pour t’aider à définir ton plan et rédiger ton texte.
La structure de ta page
Tu définis l’organisation générale de ta page. Le plus simple est de réaliser un croquis.
Comme tu le vois, le but n’est pas d’être exposé dans un musée.
J’ai par exemple choisi de diviser ma page d’accueil en trois colonnes.
Mon titre occupe deux colonnes à gauche et mon contenu deux colonnes à droite. Les visuels sont disposés sur toute la largeur des trois colonnes.
Les visuels
Tu intègres tes visuels quand tout le texte est en place. Leur réalisation s’avère chronophage. Il est préférable d’incorporer directement le premier visuel d’une série pour valider le rendu.
Pour la taille de tes visuels, tu pars de la largeur disponible sur ta page (740 px sur Twenty Seventeen) puis par la % de la largeur occupé par ta colonne.
Équilibrer
Une page doit respirer. Il ne faut pas hésiter à réaliser des sauts de ligne, intégrer des visuels et subdiviser avec des titres. Les espaceurs permettent également d’équilibrer facilement les espaces.
Certains éléments peuvent écraser les autres par leur poids. Tu révises certains textes pour améliorer l’aspect visuel de la page.
Intégrer des animations
Pour casser l’effet statique de ta page, tu peux intégrer quelques animations visuelles. Un peu de patience, je te les présente dans le paragraphe suivant.
Mieux vaut se restreindre dans l’envie d’en parsemer son site et utiliser les plus sobres.
Le risque est de se retrouver avec l’effet sapin de noël. Cela clignote de partout. Tes yeux ne savent plus où se poser.
Ajuster pour la version mobile
Quand tu lances la visualisation de ta page en version mobile, tu peux avoir de belles surprises.
Voici comment mes titres de ma page d’accueil ressortaient.
- Cliquer sur l’icône qui représente un ordinateur en bas du menu de gauche
- Sélectionner Mobile
Comme tu le remarque dans l’image ci-dessous, tu as dans les menus de tous tes éléments une icône de mobile en bleu clair. Toutes les modifications que tu réaliseras seront uniquement appliquées à la version mobile quand l’icône sera présente.
Il est souvent judicieux de diminuer la taille de certains visuels et de centrer les titres.
Publier
Si tu n’as pas de page en place, tu cliques simplement sur publier.
Quand tu as déjà une page, tu travailles sur une page vierge puis tu importes ta page au dernier moment.
- Enregistrer ta page finalisée comme modèle
- Supprimer l’ensemble du contenu de ton ancienne page
- Lancer Elementor
- Cliquer sur Ajouter un modèle
- Onglet Mes modèles
- Cliquer sur Insertion
Les fonctionnalités avancées
Les animations
Les animations permettent d’ajouter de la vie à ta page. Comme toutes les bonnes choses, elles sont à utiliser avec parcimonie sinon tu arrives très rapidement à saturation.
Tu les trouveras dans Avancé.
Les animations s’appliquent à un bloc et se déclenchent quand le lecteur arrive à la section.
Je te présente les grandes familles. Attention : cela “piquouille” un peu les yeux.
Fading : affichage progressif
Zoom : zoom grossissant
Bouncing : effet rebond
Slide : glissement
Rotate : effet de rotation pas forcement simple à placer
Attention seeker : pour attirer l’attention sur un point comme ici avec Pulse
Light speed : effet de vitesse
Special : difficile à décrire (arrivée en arc de cercle ??)
Mettre du texte sur une image
J’ai bloqué sur ce seul point dans la réalisation de ma page d’accueil. Ce n’est pas aussi intuitif que pour les autres options.
- Créer une nouvelle section
- Cliquer sur modifier une colonne
- Onglet Style
- Cliquer sur le pinceau dans type d’arrière plan
- Cliquer sur Image et sélectionner ton visuel
Les réglages à effectuer :
- Position : Centre centré
- Fichier joint : Défilement
- Répéter : Non-répété
- Taille : Couvrir
- Ajouter un titre
Tu vas remarquer que ton image ne s’affiche pas en entier. C’est normal.
- Onglet avancé
Pour ajouter un fond de couleur sous ton titre :
- Cliquer sur le pinceau dans arrière plan
- Sélectionner une couleur
- Ajuster la transparence avec la réglette à droite
Voici le résultat :
Les marges internes positionnent ton texte au bon emplacement.
Les marges externes haut et bas ajustent la taille de l’image (s’arrêter quand ton visuel commence à zoomer). Gauche et droite réduisent la taille de l’encadré de couleur.
N’oublie pas de désélectionner la proportionnalité (à droite de la ligne) pour ajuster tes marges comme tu le souhaites.
Tu vas devoir un peu tâtonner avant d’obtenir le résultat souhaité.
- Sélectionner la vue sur mobile
Si le résultat est fantaisiste, mettre toutes les marges à zéro.
Les effets de transition
Les effets s’enchainent naturellement et fonctionnent particulièrement bien en blanc sur un fond de couleur.
Pour accéder à cet outil :
- Survoler la section
- Cliquer sur l’icône de gauche (modifier section)
- Onglet Style
- Menu Forme de séparation
Tu peux installer ta forme en haut ou en bas du bloc.
Les 15 propositions en image :
Montagnes
Gouttes
Nuages
Zigzag
Pyramides
Triangle
Triangle asymétrique
Oscillation
Opacité d’inclinaison
Les réglages des transitions sont globalement identiques :
- Couleur
- Largeur
- Hauteur
- Envoyer à l’avant plan (en cas de superposition pour couvrir)
- Inverser (pour certains)
Conclusion
Elementor s’avère un excellent outil pour construire une page d’accueil ou de vente. La version gratuite offre de nombreuses possibilités.
Les éléments sont responsive et tu peux optimiser la vue sur mobile.
Les fonctionnalités d’Elementor se maîtrisent rapidement et ne nécessitent que quelques essais avant d’obtenir le résultat souhaité.
Vitesse de chargement : Je n’ai pas remarqué de ralentissement de la page. Tu disposes d’une page attractive sans faire fuir tes visiteurs par un temps de chargement interminable.
Il est temps de te lancer pour avoir une page d’accueil ou de vente qui soit conforme à tes envies. Sur quelle page vas-tu te lancer : page d’accueil ou page de vente ?
Si tu souhaites aller plus loin, tu peux personnaliser le thème Twenty Seventeen.
Les autres articles qui peuvent t’intéresser
- Créer les images de ton site
- Réaliser des visuels personnalisés [mockups]
- Le contenu de ta page d’accueil
Retrouve tous les articles pour Créer seul ton site
![Personnalise les pages de ton site gratuitement [tuto]](https://www.pourpasunrond.fr/wp-content/uploads/2018/06/elementor-snippet.jpg)
![Gutenberg : Guide de mise en page sur WordPress [Débutants]](https://www.pourpasunrond.fr/wp-content/uploads/2018/07/article-mise-page-480x96.jpg)
Nicolas
28 Juin 2018Hello Jean et merci pour cet article,
Je suis tombé sur Elementor récemment et étant débutant dans la construction de site, j’ai été séduit par la puissance et la facilité de prise en main de l’outil.
Par contre, savez-vous si la mise en place d’un site enfant reste une étape importante avant de se lancer dans la construction du site ? Ou le fait que ce soit un plugin évite l’écrasage de toutes les modifs CSS lors des mises à jour du thème ?
En vous remerciant pour votre réponse,
Cordialement
Nicolas
Jean
28 Juin 2018Bonjour Nicolas,
Tu as deux niveaux de personnalisation de ton site :
1) La création de pages personnalisées avec Elementor. Cette partie ne nécessite pas de thème enfant. La mise à jour de ton thème n’affectera pas tes créations. Tu pourras, si tu le souhaites par la suite, installer un thème enfant sans que cela ne modifie tes pages.
2) La personnalisation des CSS de ton thème. Si tu souhaites modifier ton thème, tu devras créer un thème enfant qui conservera les modifications apportées aux CSS lors des mises à jour.
A bientôt,
Jean
Maurice
4 Mai 2019Bonsoir Jean,
Merci pour ce super tuto qui m’a fait gagner beaucoup de temps dans la prise en main d’elementor.
Peux-tu nous dire pourquoi Elementor ne te semble pas adapté aux articles ? C’est une question technique, de temps ou quoid’autre.
Merci pour ta réponse
Maurice
Jean
5 Mai 2019Bonjour Maurice,
Je ne recommande pas Elementor pour les articles pour 2 raisons :
En cas de changement d’outil, tu devras refaire tous les articles. Si les pages sont peu nombreuses, reprendre chaque article prendrait des jours pour un apport minime.
Gutenberg offre de nombreuses possibilités pour la mise en page d’articles plus rapide à implémenter qu’avec Elementor.
A bientôt,
Jean