Conteneur ou Grille ? Comment votre mise en page CSS se transpose dans Elementor

Elementor propose deux modes de mise en page pour un conteneur : Flexbox et Grille. Celui que vous obtenez est déterminé par la valeur display réellement calculée par le navigateur pour votre élément — et non par les noms de classe.

display:flex → conteneur Flexbox

Le convertisseur reprend les propriétés qui comptent : la direction (row/column), le retour à la ligne, justify-content, align-items et l’espacement (gap). Ainsi, une rangée de cartes horizontale construite en flexbox devient un conteneur avec Direction = Ligne et le même espacement que celui défini en CSS.

display:grid → conteneur Grille

Les mises en page en grille deviennent un conteneur Grille, et l’éditeur les étiquette Grille dans le panneau Structure, avec l’icône de grille. Les colonnes, les lignes, les espacements et les options d’alignement des éléments sont repris.

Les colonnes égales restent en fr

Ce point mérite d’être compris. Le navigateur résout grid-template-columns: repeat(5, minmax(0, 1fr)) en pixels concrets — quelque chose comme 241.597px 241.597px 241.604px …. Remarquez les infimes différences sous-pixel. Si un convertisseur comparait ces chaînes naïvement, il conclurait que les colonnes sont inégales et écrirait des largeurs fixes en pixels, ce qui empêcherait votre grille d’être responsive.

Au lieu de cela, les colonnes sont comparées numériquement avec une tolérance, de sorte que les pistes presque identiques sont reconnues comme égales et écrites sous la forme N fr — une vraie grille responsive qui se réorganise lorsque le conteneur est redimensionné. Les pistes réellement inégales (par exemple 2fr 1fr) sont conservées sous forme de modèle de grille personnalisé.

Les lignes s’ajustent au contenu

Les lignes sont définies sur auto plutôt que sur les lignes de hauteur égale qu’Elementor applique par défaut, afin que les cartes dont les textes ont des longueurs différentes conservent leur hauteur naturelle au lieu d’être étirées pour s’aligner sur la plus haute.

Largeurs, marges intérieures et le piège du centrage

Un motif très courant est une colonne de contenu centrée : max-width: 760px; margin: 0 auto;. Ici, le navigateur résout auto en une valeur réelle en pixels qui dépend de la fenêtre d’affichage actuelle — à une certaine largeur, il peut indiquer 260px de chaque côté.

Écrire ces pixels dans Elementor casserait le centrage dès que la taille de l’écran changerait. Un bloc doté d’une max-width et de marges auto symétriques est donc détecté comme centré automatiquement et exprimé à la manière d’Elementor : Largeur du contenu = Encadré avec votre largeur maximale, ce qui centre nativement quelle que soit la taille de l’écran. Les marges latérales calculées sont abandonnées.

Le nombre de colonnes est mesuré à chaque point de rupture, pas deviné

Une grille qui affiche quatre colonnes sur ordinateur et deux sur tablette n’est pas une seule mise en page qui rétrécit — ce sont des valeurs différentes à des largeurs différentes, et un convertisseur qui ne regarde que le rendu sur ordinateur passera à côté du reste.

La page est donc mesurée plus d’une fois. La mise en page est relue à la largeur de chaque point de rupture et le nombre de colonnes correspondant est écrit dans le champ responsive d’Elementor prévu pour cet appareil. Avec le réglage par défaut, cela représente deux passes supplémentaires, à 820px et 390px — une tablette typique en portrait et un téléphone typique — et les résultats sont placés dans les champs standard d’Elementor pour tablette (jusqu’à 1024px) et mobile (jusqu’à 767px). Mesurer à une largeur d’appareil réelle plutôt qu’en haut de chaque plage est important : une media query écrite à la main à 760px ou 640px ne se déclenche pas à 767px, si bien qu’une passe à cette largeur manquerait la plupart des mises en page mobiles.

Activez les points de rupture étendus et l’outil en mesure cinq : ordinateur portable à 1280px, tablette extra à 1100px, tablette à 960px, mobile extra à 820px et mobile à 390px. N’utilisez cette option que si ces points de rupture sont activés dans les paramètres de votre site Elementor — écrire des valeurs pour des appareils désactivés ne fait qu’ajouter du bruit que vous devrez faire défiler plus tard.

Les éléments masqués sont masqués, pas supprimés

Les éléments dont la valeur calculée est display: none ou visibility: hidden constituent un petit piège. Ils sont invisibles, il est donc tentant de supposer qu’un convertisseur devrait les ignorer — mais un menu réservé au mobile, un panneau hors canevas ou une fenêtre modale fermée par défaut est invisible au moment de la conversion tout en faisant partie du design.

Ils sont convertis et reçoivent l’option responsive Masquer sur ordinateur d’Elementor au lieu d’être supprimés. Le contenu est préservé ; c’est à vous de décider ensuite s’il a sa place. Si un élément que vous attendiez est absent du canevas, vérifiez les options de visibilité responsive avant de supposer qu’il a été perdu.

Mises en page sans aucune correspondance

Trois motifs source n’ont pas d’équivalent dans Elementor, et il vaut mieux le savoir avant de convertir qu’après :

• Mises en page à base de flottants. Rien ne lit les flottants, car les conteneurs Elementor n’ont pas cette notion. Une ancienne mise en page à deux colonnes construite avec float: left est convertie en blocs empilés. C’est le signe le plus clair que le balisage est antérieur à flexbox et qu’il vaut la peine de le moderniser à la source.
• Mises en page en tableaux. Même chose — un tableau de mise en page relève de la structure, pas du design, et il arrive sous forme de blocs imbriqués plutôt que de colonnes.
• Zones de grille nommées. grid-template-columns est converti ; grid-template-areas ne l’est pas, car la Grille d’Elementor n’a pas d’équivalent aux zones nommées. Les enfants reprennent l’ordre de la source.

Choisir le bon mode après l’importation

Rien dans la conversion n’est définitif. Le mode de mise en page d’un conteneur est un menu déroulant dans Elementor, et le changer conserve les enfants — si une section a été convertie en Flexbox et que vous préférez la gérer comme une Grille, changez-le et définissez les colonnes. Deux règles de base :

• Grille lorsque les enfants doivent s’aligner dans les deux directions — séries de cartes, tableaux de fonctionnalités, galeries d’images, partout où il importe que la deuxième ligne s’aligne sur la première.
• Flexbox lorsque les enfants se succèdent dans une seule direction et que les tailles dépendent du contenu — barres de navigation, groupes de boutons, un titre à côté d’un badge, rangées de type media object.

Le convertisseur choisit le mode qui correspond à la source, ce qui est le bon comportement par défaut. Mais le balisage source est souvent le fruit d’une habitude plutôt que d’une décision, et une mise en page construite en flexbox parce que l’auteur utilise toujours flexbox pourrait très bien être une grille.

Conseils pratiques

• Préférez gap aux marges entre les enfants d’une grille ou d’un conteneur flex — les espacements sont repris proprement, les marges par enfant ne le sont pas.
• Utilisez max-width + margin:0 auto pour les sections centrées ; cela est correctement converti en conteneur Encadré.
• Évitez de mélanger les flottants avec flex/grid. Les flottants n’ont pas d’équivalent dans Elementor et nécessiteront un travail manuel.
• Si une rangée ne doit pas passer à la ligne sur mobile, réglez-le dans Elementor après l’importation — le retour à la ligne responsive y est plus facile à ajuster.
• Alignez votre réglage de points de rupture étendus sur ce qui est réellement activé dans Elementor, sinon vous obtiendrez des valeurs responsive pour des appareils que votre site n’utilise pas.