Présentation du tuto
Autre tuto de la série Elementor, qui sera cette fois plus simple , mais néanmoins indispensable si l’on veut éviter la crise de nerf lorsque l’on essaye de créer un site en full screen. Tu vas découvrir dans ce tuto comment faire pour retirer les petites gouttières blanches qui apparaissent de chaque côté de notre section/bloc lors de l’insertion.
Etape 1 : Intégrer nos blocs
Lorsque l’on rajoute une section , ou une section interne , automatiquement Elementor va créer une (ou plusieurs) colonnes à l’intérieur. Ces colonnes sont symbolisées par cette petite icône de carré blanc sur fond gris/noir (voir sur l’image ci-dessus). En clair votre bloc quel qu’il soit sera forcément placé dans un colonne (elle même placée dans une section/ section interne). En fonction de vos paramètres de page, on peut déjà voir apparaître le sujet problèmatique de ce tuto : l’espèce de cadre blanc autour de notre widget (ici un bloc Image).
Etape 2 : Passer notre affichage en plein écran
Pour bien voir le soucis , passons notre section (ou notre section interne) en Pleine Largeur (après avoir sélectionné la section, onglet Mise en page > Largeur du contenu > Pleine largeur). Nous voilà désormais face à face avec cette gouttière blanche, qui va tous faire pour t’empêcher d’afficher ton site correctement en plein écran !
Malgré tout la haine que l’on peut avoir envers cet affichage, il est normal et permet notamment d’éviter que nos blocs se touchent lorsqu’il sont côte à côte ou l’un au dessus de l’autre. Il s’agit d’un réglage par défaut d’Elementor.
Etape 3 : Supprimer les marges internes de la colonne
Et pour modifier ce réglage par défaut sur les colonnes désirées , rien de plus simple : sélectionne ta colonne (survol puis clique sur l’icône blanche sur fond noire) puis dans l’onglet AVANCÉ > Marge interne indique 0 dans les 4 zones de saisies. Concrètement on lui dit que la colonne doit avoir des marges internes d’une largeur de 0px. En effet, lorsque l’on arrive pour la première fois sur cet affichage , les champs sont vides. Mais cela n’indique pas qu’il n y a pas de marge internes , mais que ce sont les marges internes par défaut.
Une marge interne (ou padding) peut-être vu comme une marge “inversée”. Une marge va créer un écart entre les bords du bloc et l’extérieur, tandis qu’une marge interne va créer cet écart entre les bords du bloc et le bloc en lui-même , créant un écart vers l’intérieur.
CONCLUSION : on résume tout !
Arborescence de structures
Encore un rappel pour bien comprendre la structure de base d’une page Elementor :
- Le premier niveau c'est ta Section, celle que tu ajoute en cliquant sur le bouton "+" sur fond rouge dans l'éditeur Elementor
- Dans chacune de ces section il y'a une ou plusieurs colonnes (découpage verticale du contenu) qui sont symbolisées par une icône carrée blanche sur fond noir
- Dans chacune des colonnes d'une Section on peut placer une section interne , qui permet de re découper encore en une ou plusieurs colonne notre contenu.
Marge & Marge interne
En CSS il existe deux propriétés importantes qui sont la marge (margin) et la marge interne (padding) . Ces deux propriétés sont importantes a distinguées car visuellement on peut difficilement les différencier.
Elle ont un bon nombre de régles à connaître pour parfaitement s’en servir, mais nous nous arrêterons sur la plus basique : le padding va créer un écart vers l’intérieur (du bord vers le contenu). La marge va créer un écart vers l’extérieur (du bord vers le contenu du conteneur parent).
