Dans l’éditeur visuel d’Elementor, les widgets les plus courants (texte, titre, image…) ont tous à peu près les mêmes réglages, du moins ils en ont un grand nombre en commun, tandis que d’autres leur sont spécifiques.
Cet article traite de tous les réglages communs.
Les réglages spécifiques sont décrits dans l’article sur les widgets.
Note : pour gérer les tailles des éléments, des textes, des images, des colonnes etc, Elementor utilise une variété d’unités – px, %, em, rem, vw, vh.
Les réglages communs des principaux widgets
Quand on ajoute une section ou un widget dans la colonne de droite, de prévisualisation, de l’éditeur visuel d’Elementor, apparaissent alors 3 onglets dans la colonne de gauche : Contenu, Style, et Avancé.
Les sections et les widgets partagent de nombreux réglages communs, tandis que d’autres leur sont propres.
Dans cet article on va avant tout se baser sur les réglages de la section, commun avec ceux des widgets qui lui ressemblent, notamment les widgets contenant du texte.
Contenu (layout)
Cet onglet paramètre la section ou le widget en tant qu’élément de maquette. On définit :
La mise en page
- la largeur du contenu (encadré = avec des marges, ou pleine largeur, sans marges)
- la largeur en pixels, par exemple 800 pixels ou 1200 pixels (on peut donc avoir une page contenant des sections de largeurs différentes)
- l’écart entre les colonnes, si la section en contient plusieurs
- la hauteur (adapté à l’écran = la section prendra toute la hauteur de l’écran, quelle qu’elle soit, soit si le contenu excède de toute façon cette hauteur ; ou bien hauteur minimum = vous définissez par exemple que la section fait au minimum 400 pixels même si elle ne contient qu’un titre ou un paragraphe)
- l’alignement vertical (du contenu de la section : le contenu s’aligne en haut, en bas ou au milieu de la section, etc ; essayez un peu pour vous rendre compte)
- le débordement (si le contenu excède les paramètres définis, par exemple si le contenu est plus haut que 400 px alors qu’on a défini une hauteur de 400 px, doit-on montrer le contenu qui dépasse, ou le masquer ?)
- étirer la section (permet d’étirer la section jusqu’aux bords de l’écran, quelle que soit sa largeur)
- balise html (permet d’attribuer à la section une balise html, par exemple div, ou article, ou nav : pour bien comprendre ceci il faut s’y connaitre en html… si vous ne savez pas, laissez le réglage par défaut)
La structure
Si on a choisi une section avec plusieurs colonnes, on peut toujours modifier le nombre et la taille des colonnes.
Style
L’onglet style contient les paramètres de style graphique.
L’arrière plan
On peut régler l’arrière-plan dans son état normal, ou au survol – par exemple il est blanc par défaut mais il devient gris clair si on le survole avec la souris.
On peut le définir comme étant :
1/ une couleur unie
qu’on peut définir par 3 méthodes :
- soit avec le « color picker », le sélecteur de couleur : on clique dans une plage de couleurs, on règle ensuite l’opacité / la transparence
- soit en tapant le code d’une couleur, en hexadécimal ou en RGB
- soit en sélectionnant une couleur globale (méthode recommandée pour assurer la cohérence d’un graphisme) ; l’icône représentant un globe terrestre simplifié indique qu’une couleur est une couleur globale
2/ un dégradé entre deux couleurs
- on sélectionne une première couleur, puis une deuxième ; soit avec le color picker, soit avec les couleurs globales
- on place un « emplacement », l’endroit du dégradé où cette couleur commence à se fondre avec l’autre ; par défaut c’est 0 et 100 mais si par exemple on met du bleu à 33 et du blanc à 67, on aura un dégradé avec du bleu pur jusqu’au tiers du dégradé, puis un fondu du bleu au bleu jusqu’aux deux-tiers, puis du blanc pur
3/ une vidéo
On peut en effet utiliser une vidéo comme arrière-plan de section ; attention néanmoins à la lourdeur d’un tel choix : sur mobile, la vidéo va ralentir l’affichage ; on a d’ailleurs une option pour ne pas lire la vidéo sur mobile.
Soit c’est une vidéo extérieure hébergée sur Youtube ou Vimeo, et vous n’avez qu’à coller le lien ; soit vous devez héberger cette vidéo quelque part et là encore, indiquer le lien.
4/ un diaporama (slideshow)
On peut sélectionner une galerie d’images comme arrière-plan ; on indique si on veut que le diaporama passe en boucle ou pas.
On définit une durée du diaporama en millisecondes, un style de transition entre les images (fade = les images apparaissent, slide = elles glissent dans telle ou telle direction), et une durée de la transition.
Le réglage de taille de l’image a 4 options :
- par défaut, prend les images telles quelles
- auto, les adapte – je ne sais pas trop comment…
- couvrir, va faire en sorte que l’image s’ajuste à la section pour l’inclure totalement sur la dimension la plus faible, hauteur ou largeur, ce qui fait qu’une partie de l’image ne sera pas affichée
- contenir, va ajuster l’image à la section de manière à l’y inclure entièrement, ce qui va laisser des blancs si les formats ne correspondent pas exactement
On choisit aussi une position des images dans l’arrière-plan sur les deux dimensions de largeur et de hauteur : supérieur droit, ou centré / centré par exemple.
L’effet Ken Burns est un effet de zoom lent, zoom in ou zoom out.
Attention aussi à ce que ces images soient légères et optimisées, sinon ce choix va ralentir la page ; le chargement différé peut faire en sorte que les images ne se chargent que quand l’internaute arrive sur cette section, et pas lors du chargement de la page.
La superposition d’arrière-plan
On peut superposer une couleur, un dégradé ou une image à un arrière-plan.
L’arrière-plan se trouve automatiquement situé en-dessous et la superposition, par-dessus.
On a en gros les mêmes options de couleur et de dégradé que celles de l’arrière-plan.
On a aussi un réglage d’opacité / transparence.
On peut donc par exemple avoir une image en noir et blanc comme arrière-plan, et lui superposer un dégradé du jaune au blanc à 50% d’opacité.
La bordure
La section peut avoir une bordure, un contour – dans son état normal, ou au survol.
On choisit un style de bordure : continu, double, pointillés, tirets, rainure.
Le rayon de bordure (qui correspond à l’instruction CSS border-radius) permet d’arrondir les angles de la section. Plus les valeurs sont grandes, plus l’arrondi est grand.
On définit ce rayon soit en pixels, soit en %. Si on met 50% partout, on obtient un cercle ou un ovale parfait.
On peut aussi définir une ombre de la boîte (en CSS : box-shadow). Cette ombre peut avoir une couleur, une largeur horizontale, une hauteur verticale, un flou, une diffusion, et enfin une position par rapport au bord de la section. Testez un peu pour voir les possibilités !
Formes de séparation
Les formes de séparation sont des éléments graphiques qu’on va ajouter en haut ou en bas des sections, pour mieux les séparer visuellement.
On leur attribue une couleur et un type (il y en a des dizaines), une largeur et une auteur.
Là encore il faut tester pour se rendre compte des possibilités !
Typographie
On a là une série de réglages typographiques qui vont s’appliquer uniquement à cette section, même s’ils contredisent les réglages généraux.
Si un élément inclus dans cette section a d’autres réglages typographiques, alors ce sont les réglages de l’élément qui primeront.
L’ordre des priorités est clair : les réglages qui s’appliquent sont ceux du niveau le plus profond. Un widget de texte prime sur la section qui prime sur les réglages de la page qui priment sur les réglages généraux.
La typographie influence le SEO d’un site de, par exemple, psychologue, en influençant le temps de lecture. Une typo illisible diminue le temps de lecture, qui fait peut-être partie des critères de classement de Google.
Plus d’infos sur le formatage typographique dans Elementor.
Avancé
Avancé
L’onglet Avancé permet d’abord de gérer les marges externes et internes (margin et padding en CSS).
Partout dans Elementor, on gère soit en pixels, soit en em, soit en rem, soit en %.
Index-Z représente le niveau d’un élément dans l’empilement des couches : un élément avec un z-index de 1 se place au-dessus d’un élément à 0.
Id de CSS : correspond au # du CSS, pour donner un identifiant à un élément.
Classe CSS : correspond à la classe CSS notée .classe.
Effets de mouvement
Cette partie vous laisse ajouter des effets d’animation : votre section peut apparaitre (fade), glisser (slide in), rebondir (bounce), etc etc, il y a des dizaines d’effets. Testez !
A utiliser avec modération car cela peut ralentir la page et devenir gadget si tout remue de partout, mais cela peut assurément donner un côté visuellement attrayant si c’est bien utilisé.
Responsive
Ces options vont permettre notamment d’inverser l’ordre des colonnes en fonction de l’écran qui affiche la section : par exemple si vous aviez mis un texte à gauche et une image à droite sur ordinateur, alors le texte sera placé en premier et l’image en second sur mobile ; vous pouvez donc modifier cet ordre.
Vous pouvez également choisir de ne pas afficher cette section en fonction du type d’écran : ainsi vous pouvez créer sur une même page deux sections différentes, l’une qui s’affichera sur ordinateur, l’autre sur mobile. N’en abusez pas car même les éléments qui ne s’affichent pas feront partie du code HTML de la page. Une fois ça va, mais pas 20 fois.
Plus d’infos sur le mode responsive d’Elementor.
Attributs et CSS personnalisé
Attributs HTML personnalisés et CSS personnalisé sont des fonctionnalités d’Elementor Pro.
