Elementor est un constructeur de pages no code pour WordPress qui permet de créer des mises pages complexes.
Pour mes client(e)s, c’est l’assurance de pouvoir être autonomes sur leur site rapidement.
Mais s’il est no-code et intuitif, c’est un outil puissant qui nécessite quelques bases pour être pris en main.
Je t’emmène faire un tour ?
L'interface d'Elementor
L’interface d’Elementor se compose de 3 parties principales :
- La barre supérieure
- Le panneau latéral
- Ta (future) page
Tu trouveras également une “Poignée” qui te permettra de masquer le panneau latéral afin de visualiser ta page en plein écran.
Barre supérieure
C’est ici que tu trouveras… Beaucoup de choses !
Les réglages généraux d’Elementor, de ta page, le responsive…
Mais pas de panique, je t’en dis plus sur ses principaux éléments.
Menu Principal
Le menu principal, que tu peux activer en cliquant sur l’icône d’Elementor, te permet d’accéder :
- Au constructeur de thème (les modèles créés pour ton site)
- À ton historique (tes actions passées sur la page)
- Aux préférences de ton compte (affichage principalement)
- À une liste de raccourcis claviers
- À ton dashboard WordPress
Historique
Si le constructeur de thème est important (il mériterait d’avoir un article dédié, c’est dans ma to-do), tu auras certainement plus souvent besoin de la fonction “Historique”.
Un clic maladroit, un conteneur effacé par erreur, une idée finalement pas si terrible… Et ce sont des dizaines de minutes de travail sur ton site qui disparaissent.
Là encore, pas de panique, Elementor à pensé à toi (et à moi aussi). Grâce à l’historique, tu peux facilement annuler une ou plusieurs actions faites sur ton page (et même revenir à une précédente session de travail).
Ajout de widget
Probablement le bouton que tu utiliseras le plus souvent.
Grâce à lui, tu accèderas au panneau latéral qui contient tous les widgets d’Elementor (et de WordPress, Woocommerce…).
Je ne vais pas tous les détailler ici mais n’hésite pas à créer une page de brouillon et les tester pour te faire la main sans risquer de casser ton site ou tes pages !
Widgets de base
Ce sont ceux que tu utiliseras le plus souvent : Titre, texte, image, bouton…
Certains widgets sont “dynamiques”, c’est à dire que tu ne devras pas les remplir, ils seront automatiquement complétés avec une donnée du site.
Ce sont des widgets particulièrement utiles pour les templates de ton site (archive et article de blog, Portfolio, Boutique en ligne…). Tu les retrouveras dans les sections “Unique” et “Site”, mais aussi WooCommerce si tu as une boutique en ligne.
C’est le cas notamment :
- Titre de la publication
- Extrait de publication
- Image mise en avant
- Information de publication
- Table des matières
- Logo et Titre du site
- Titre de la page
- Menu WordPress…
Certains widgets sont “mixtes” (ils peuvent être remplis manuellement ou faire appel à une balise dynamique), comme les titres, les textes… Si le sujet t’intéresse, n’hésite pas à me le faire savoir pour que je t’explique leur fonctionnement.
Elementor Pro
Dans sa version Pro, Elementor propose de nombreux widgets “avancés”. Call to action, galeries, compte à rebours… Si les possibilités sont grandes, essaie de ne pas en utiliser trop sur une même page.
Dans sa versions Pro, Elementor propose de nombreux widgets “avancés”. Je ne vais pas tous les détailler ici mais n’hésite pas à créer une page de brouillon et les tester pour te faire la main sans risquer de casser ton site ou tes pages !
Réglages du site
L’un des gros avantages d’Elementor, en dehors de toutes les possibilités de création qu’il propose, c’est certainement de ses “réglages globaux”.
Tu décides de changer d’identité visuelle ? En quelques minutes à peine, tu pourras mettre à jour tes couleurs, typographies, styles… sur toutes tes pages !
Couleurs globales
Plusieurs couleurs sont définies sur ton site, notamment principale, secondaire, texte et accentué. Cette dernière correspond à tes boutons, liens… et à tous les éléments pour lesquels tu l’auras utilisée !
Polices globales
Là aussi, des polices ont été définies, à minima, pour tes titres principaux, secondaires, textes et accentués.
Identité du site
C’est ici que tu pourras modifier :
- Le nom de ton site
- Sa description
- Ton logo
- Ton favicon.
Mise en page
Ces réglages concernent les conteneurs, ils ont été définis afin de conserver une mise en page cohérente sur toutes les pages :
- Largeur max du contenu
- Marges internes de conteneurs
- Ecarts entre les widgets
C’est aussi ici que tu pourras définir l’apparence générale de tes boutons (couleurs, effets au passage de la souris, arrondis…), de tes images, etc.
Dans les réglages du site, tu trouveras également une section “CSS Personnalisé” (“Cascading Style Sheets” ou “feuilles de style en cascade”). Ce code, créé sur mesure, est utilisé pour une personnalisation plus poussée (FAQ, certaines zones de texte, menus, boutons, etc.)
Ces lignes ne doivent pas être supprimées.
Bien entendu, il est tout à fait possible d’outrepasser ces réglages “globaux” et d’appliquer un style différents à un ou plusieurs éléments de ton choix. J’aborde ce point dans la partie 2 : “Les fonctions de base”.
Navigateur.
Que ta page soit longue ou complexe (Z-Index, des marges négatives, des positions absolues, etc.), il y a un élément qui va certainement t’aider à y voir plus clair : le navigateur !
En affichant la structure de la page sous forme d’arborescence, il te permet d’accéder facilement à chaque élément qui la compose.
Ouvrir le navigateur
Tu as trois options :
1. Faire un clic droit sur n’importe quel élément, puis clique sur “Structure”. Cela te dirigera directement vers cet élément dans l’arborescence de navigation.
2. Cliquer sur l’icône “Structure” dans la barre supérieure.
3. Utiliser le raccourci clavier “Cmd/Ctrl + I”.
Renommer un élément/widget avec le Navigateur
Si tu as 36 conteneurs qui s’appellent tous “Conteneur” sur ta page… Tu vas avoir du mal à t’y retrouver !
Bonne nouvelle, avec le Navigateur, tu vas pouvoir renommer tes éléments comme tu le souhaites.
Pour cela, c’est tout simple, un clic droit sur l’élément dans le navigateur, et il ne te reste plus qu’à saisir un nom plus “parlant” pour toi.
Même si tu peux renommer chaque élément de tes pages, ce n’est pas indispensable, tu peux choisir les principaux. L’objectif est de te faciliter la gestion de ton site, pas de te donner du travail supplémentaire !
Réglages de la page
Les réglages de la page d’Elementor te permettent de modifier :
- Son titre
- Son état (publié, brouillon, en attente de relecture)
- Son extrait (qui peut-être utilisé avec ton plugin SEO ou pour les extraits d’articles, par exemple)
- L’image mise en avant (qui sera visible lorsque tu partageras ta page sur les réseaux sociaux notamment)
- D’afficher ou masquer son titre
- De modifier le style par défaut de la page
Responsive
Tu le sais, avoir un site Responsive (adapté aux différents formats d’appareils) n’est pas une option, c’est indispensable.
Elementor intègre un outil qui te permet de visualiser ta page sur plusieurs formats d’écrans (large, desktop, portable, tablettes et mobiles).
Bien entendu, il faudra faire des vérifications plus poussées avant la mise en ligne de ta page, mais cela te permet de visualiser (et d’adapter son rendu) dès sa création/modification.
Aperçu
Ce bouton te permet de visualiser ta page sans avoir à enregistrer tes dernières modifications (pratique si tu veux tester un widget ou une mise en page).
Publier et enregistrer
Ce bouton porte bien son nom puisqu’il te permet de publier (mettre en ligne) ta page.
La flèche, quant à elle, te donne d’autres options :
- Enregistrer un Brouillon (pratique si tu n’as pas fini de faire toutes tes modifications ou que tu souhaites attendre pour sa mise en ligne)
- Enregistrer un modèle à réutiliser sur une autre page de ton site
À suivre...
Voilà ! C’est tout pour cette première partie de présentation d’Elementor.
On se retrouve pour la suite ?
