Vous avez surement remarqué que vos widgets Elementor sont espacés par défaut ?
Un espacement parfois trop important pour l’intégration de vos éléments… A travers ce tutoriel, je vais vous montrer quatre solutions pour ajuster (réduire/agrandir) cet espace.
SOLUTION 1 : Au niveau des colonnes
Tout d’abord, Elementor est paramétré sur un espacement de 20px entre les modules.
Dans cette première solution, il est possible d’agir au cas par cas au niveau du paramétrage de la colonne où vous souhaitez modifier l’espacement entre vos différents contenus (titre, image, bouton,…).
Dans le champ « Espace des widgets (px) » situé dans l’onglet « Mise en page » , sélectionnez une nouvelle valeur. Vous pouvez faire varier ce paramètre en fonction des tailles d’écrans (ordinateur, tablette, mobile) avec la fonctionnalité responsive d’Elementor (en bas à gauche).
SOLUTION 2 : Réglages du site
Vous avez validé votre nouvelle valeur pour cet espacement entre les modules d’Elementor ? Vous pouvez le faire sur chaque colonne ou… le faire une fois pour toute !
Pour cela, Cliquez sur le petit burger menu en haut à gauche de votre écran, puis sur « Réglages du site », rendez-vous sur l’entrée « Mise en page », saisissez votre nouvelle valeur dans le champ « Espace des widgets (px) » et mettez à jour.
SOLUTION 3 : Utilisation d'un widget
Généralement, je laisse le paramétrage par défaut de 20px sur l’espace des widgets (cet espace est important, principalement pour la navigation mobile ! ).
Pour agrandir l’espace entre 2 modules, vous pouvez utiliser un autre widget dédié. Il s’appelle « Espaceur » dans la partie « Basique » . Glissez-le à l’endroit où vous souhaitez marquer une séparation entre 2 contenus. Puis saisissez une valeur d’espacement.
SOLUTION 4 : Utilisation des marges
Utiliser un widget pour séparer 2 autres widgets est un peu dommage techniquement car cela ajoute du code HTML (langage informatique permettant de créer le squelette d’un site internet).
Il est possible d’ajouter une marge depuis le panneau « Avancé » de n’importe quel widget Elementor, ce qui va espacer votre contenu avec le précédent ou le prochain (marge haute ou basse). En utilisant une marge, vous ajoutez du CSS à votre module (langage informatique permettant de changer la présentation d’un site).
Pour ajouter une marge haute à un élément, allez dans « Avancé » du widget, désélectionnez le cadenas (icône en forme de lien) puis entrez une valeur dans le champ « Haut ».
Le cadenas permet de mettre une marge commune dans tous les sens (haut, droite, bas, gauche). En l’enlevant, vous pouvez saisir une valeur unique dans chaque case.
Conseil Bonus
Il est important de bien gérer l'espacement de son contenu sur son site internet. Les sites sont de plus en plus aérés et il est possible avec Elementor de travailler sur toutes les marges. N'hésitez pas à bien tester votre site sur mobile pour rendre la navigation intuitive et agréable. Cela vous évitera quelques erreurs de la Google Search Console (outil dédié de Google pour le Référencement) et de monter dans les résultats des moteurs de recherches.
