Utiliser la pleine largeur d’une page Elementor

Comment utiliser la pleine largeur d'une page construite avec Elementor
SOMMAIRE

Vous souhaitez ajouter du contenu « collé » au bord de votre écran mais une marge est toujours présente ? Voici les paramètres à vérifier pour réussir votre mission !

ETAPE 1 : Vérifier le modèle de page

Suivant le thème utilisé, il est important de vérifier le modèle de votre page en cours de création / mise à jour.

Pour cela, rendez-vous sur « Réglages » situé au niveau de la roue crantée en bas à gauche lorsque vous modifiez votre page / article.

Pour utiliser toute la largeur de l’écran, vous pouvez sélectionner le modèle de page : « Elementor pleine largeur ». Comme mentionné, ce modèle permet de conserver l’en-tête et le pied de page, ce qui est généralement le plus utilisé pour un site internet.

Si vous n’avez pas besoin de votre header et de votre footer, vous pouvez utiliser le modèle de page « Elementor Cavenas », idéal pour intégrer du contenu à partir d’une page blanche.

Changer de modèle de page avec Elementor pour utiliser toute la largeur d'un écran
Réglages > Modèle de page

ETAPE 2 : Vérifier les sections (et les sections internes)

Pour que votre contenu utilise toute la largeur d’un écran, il faut se positionner sur le paramétrage de la section sur laquelle vous travaillez. Sur l’onglet « Mise en page » , sélectionnez « Pleine largeur » dans le champ « Largeur du contenu »

Si vous utilisez des sections internes, vous devez choisir le même paramétrage sur la section interne.

Ajuster le paramétrage de la section pour utiliser la pleine largeur d'une page Elementor
Modifier Section > Largeur du contenu > Pleine largeur

ETAPE 3 : Vérifier les marges internes / écarts de colonnes

Par défaut, il existe une petite marge au niveau des colonnes, laissant (encore) apparaitre un léger décalage à droite et gauche de votre contenu.

Deux solutions sont possibles pour arriver à coller votre contenu aux bords de l’écran.

  1. Au niveau de la section (et de la section interne) : Sélectionnez « Aucun écart » dans le champ « Ecart de colonnes »
  2.  Au niveau des colonnes : Entrez 0 dans les champs « Marge interne » de l’onglet « Avancé »

Une fois paramétré, n’oubliez pas de mettre à jour et de tester si votre contenu utilise bien la pleine largeur de votre écran.

Enlever l'écart de colonnes pour enlever la marge au bord de l'écran
Modifier Section > Ecart de colonnes > Aucun écart
Supprimer les marges internes des colonnes pour éviter d'avoir des espaces au bord
Modifier Colonne > Marge Interne > 0px

Conseil Bonus

Je vous recommande d'utiliser le thème gratuit Hello Elementor qui permet de construire un site sans se soucier des paramétrages du thème. On peut tout construire avec Elementor (et avec la version professionnelle d'Elementor, c'est encore plus facile) !

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.