Anthony
NICOLAIEFF

Modifier l’espacement entre les widgets Elementor

Tutoriel permettant de modifier les espaces entre les widgets Elementor
SOMMAIRE

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).

Modifier l'espacement des widgets depuis la colonne Elementor
Modifier Colonne > Espace des widgets

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.

Comment se rendre dans les réglages d'un site Elementor
Burger Menu > Réglages du site
Ajuster l'espace des widgets Elementor depuis les réglages du site
Mise en page > Espace des widgets (px)

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. 

Utiliser le widget Espaceur pour marquer une marge entre 2 modules Elementor
Widget Espaceur > Espace

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.

Ajouter des marges CSS pour ajouter une marge entre 2 contenus Elementor
Modifier Widget > Avancé > Marge > Haut

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.

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.