Comment aligner les sections et les colonnes Elementor

Pendant que vous travaillez avec Elementor , vous remarquerez qu'il est un peu délicat de positionner de manière personnalisée vos sections et colonnes. Vous devez aligner les colonnes et les sections verticalement et horizontalement pour obtenir une mise en page réactive « étirer pour remplir ». Sans cet alignement, les éléments des colonnes de différentes hauteurs ne parviendront pas à s'ajuster à l'écran.

• Pourquoi devons-nous nous aligner ?
• Comment fonctionnent les colonnes ou les sections pour un Responsive Design ?
• Comment aligner les sections et les colonnes Elementor ?
• Pour résoudre les problèmes de largeur de réponse, utilisez Overflow Hidden
• Prendre soin du positionnement
• Unités relatives
• Contrôlez la profondeur de chaque élément à l'aide du Z-Index
• L'astuce concernant la fonctionnalité de duplication
• Compensations
• La règle d'or
• Conclusion

Pourquoi devons-nous nous aligner ?

Dans chaque colonne ou section, le contenu peut être de différentes catégories. Cela peut prendre la forme d’images, de texte et d’évaluations. Pour une apparence globale, il est recommandé que l’apparence du contenu soit uniforme. Il ne faut pas simplement le jeter là-bas juste pour le plaisir.

Avec un bon alignement, vous pouvez rendre le site Web plus soigné et plus élégant, afin qu'il ne paraisse pas encombré. Avec l'option d'alignement, vous pouvez ajuster plusieurs widgets de différentes tailles les uns à côté des autres dans la même colonne.

Comment fonctionnent les colonnes ou les sections pour un Responsive Design ?

Elementor 2.5 vous permet de positionner de manière personnalisée votre conception et votre contenu. Avec la nouvelle fonctionnalité de positionnement personnalisé, vous pouvez déplacer les widgets vers n'importe quel emplacement. Mais vous ne pouvez pas vraiment le faire au-delà d’une certaine section. Ces widgets sont relatifs à la colonne dans laquelle ils se trouvent. Cela peut entraîner un problème de réactivité de la conception.

Supposons que vous disposiez d’une présentation à trois colonnes. À l'aide d'un positionnement personnalisé, vous pouvez glisser-déposer un widget de la colonne de droite vers la colonne centrale, ou comme bon vous semble.

Mais cela ne profitera qu’aux visiteurs du bureau, car cela leur semblera correct. Cependant, cela posera un problème si le site Web est accessible depuis un mobile, car Elementor empile les colonnes verticalement sur mobile.

Ainsi, au lieu d’avoir trois colonnes côte à côte, vous pourriez voir les trois colonnes empilées les unes sur les autres. L’élément n’apparaîtra plus dans la colonne du milieu comme sur les ordinateurs de bureau.

Bien que vous puissiez modifier intelligemment la vue mobile avec un paramètre masqué, rien ne garantit que la majorité des gens pourront la trouver. Alors pourquoi frustrer les utilisateurs ? Rendre le design réactif et adaptable est la bonne solution. Pour qu'il ne plante nulle part.

Pour cette raison, vous devez faire attention à la relation du widget avec la colonne dans laquelle il se trouve.

Comment aligner les sections et les colonnes Elementor ?

Pour chaque section/colonne, accédez à la section de mise en page et définissez les options d'alignement suivantes selon vos besoins :

• Alignement vertical : vous pouvez choisir les paramètres des widgets suivants. Mais une chose que vous devez garder à l'esprit est que le contenu d'une colonne ne peut pas être aligné sur les trois premières options verticales de la colonne, c'est-à-dire haut, milieu et bas.
• Haut
• Milieu
• Bas

D'ailleurs, il existe ^* trois nouvelles options qui permettent d'aligner le contenu selon vos préférences.

• ^*Espace entre – définit l'espace entre les widgets au début et à la fin au bord de la colonne. Les widgets sont équidistants, c'est-à-dire qu'il y a un espace égal entre eux.
• ^*Espace autour – l'espace entre les widgets est égal et les bords font la moitié de la taille de l'espace entre les widgets.
• ^*Espacer uniformément – ​​l'espace entre les widgets est uniforme – il est égal entre, avant et après eux.

• Alignement horizontal : avec cette option, vous pouvez effectuer un positionnement en ligne et aligner horizontalement les widgets en ligne, qui sont dans la même rangée. Vous pouvez aligner le contenu des colonnes horizontalement à l'aide de ces options :
• Démarrer- aligne toutes les icônes à gauche
• Centre : positionne les icônes au milieu de la colonne
• Fin- place toutes les icônes à droite
• Espace entre – l'espace entre les widgets au début et à la fin au bord de la colonne. Les widgets sont équidistants, c'est-à-dire qu'il y a un espace égal entre eux
• Espace autour – l'espace entre les widgets est égal et les bords font la moitié de la taille de l'espace entre les widgets
• Espacer uniformément – ​​l'espace entre les widgets est uniforme – il est égal entre, avant et après eux

Pour résoudre les problèmes de largeur de réponse, utilisez Overflow Hidden

En ce qui concerne l'apparence d'un site Web sur mobile, il est fort probable que vous rencontriez un problème où un widget avec un positionnement personnalisé dépasse la largeur d'une colonne.  

Cela crée une situation vraiment frustrante pour les visiteurs mobiles, où ils peuvent faire défiler horizontalement. Et ce n’est pas quelque chose que vous souhaitiez pour votre site Web. Cela peut être résolu par :

Paramètres de mise en page > Définissez l' option Débordement Masqué

En faisant cela, la zone excédentaire sera coupée et il ne sera pas nécessaire de faire défiler horizontalement

Prendre soin du positionnement

Vous devez également veiller au positionnement des colonnes. Vous pouvez définir un positionnement personnalisé avec Elementor 2.5 – absolu et fixe.

Le positionnement absolu est le positionnement de l'élément par rapport à la section ou à la colonne dans laquelle vous vous trouvez. Ainsi, si vous utilisez le positionnement absolu sur un élément ou une section, cette section ne se déplacera pas le long de la fenêtre du visiteur.

La position fixe est différente de l'absolue car elle permet à la section/élément de rester fixe au point de vue du visiteur. Ainsi, si l’utilisateur fait défiler la page, l’élément y restera.

Unités relatives

Lorsque vous concevez votre page Web, vous constaterez qu’il existe plusieurs façons de positionner les éléments. Pour un positionnement absolu, c'est une bonne idée d'utiliser des unités relatives car cela rendra la conception réactive plus fonctionnelle en ce qui concerne différentes tailles d'écran.

L'unité relative s'ajuste en fonction de la largeur et de la hauteur relatives de l'écran, permettant ainsi aux éléments ou sections de se redimensionner et d'obtenir une meilleure conception réactive. Si vous choisissez d'utiliser des pixels, vous devez créer plusieurs sections réactives pour différentes tailles d'écran.

Contrôlez la profondeur de chaque élément à l'aide du Z-Index

Si vous envisagez d'utiliser un positionnement « absolu » ou « fixe » pour les widgets, il y aura de nombreuses situations dans lesquelles deux widgets ou plus pourraient se chevaucher, c'est-à-dire qu'ils sont empilés « les uns sur les autres ». Vous pouvez éviter cela en utilisant le paramètre Z-index normal. Cela vous permettra de contrôler la profondeur et de choisir quels widgets apparaissent au premier plan.

L'astuce concernant la fonctionnalité de duplication

Si vous utilisez le clic droit pour dupliquer un élément avec un positionnement personnalisé, il peut sembler que le clic droit n'a pas fonctionné.

Mais voilà. Ce n'est pas vrai. La fonctionnalité de duplication a parfaitement fonctionné et a dupliqué l'élément. C'est juste que puisque chaque élément a exactement le même positionnement personnalisé, l'élément dupliqué est empilé EXACTEMENT au-dessus de l'autre élément (donnant l'impression qu'aucun doublon n'a été créé.).

En termes simples, si vous créez une colonne avec succès, vous pouvez la dupliquer chaque fois que nécessaire. Assurez-vous également que les colonnes que vous créez n'utilisent pas de positionnement personnalisé. Si c'est le cas, la duplication ne fonctionnera pas avec l'option du clic droit. Cependant, vous pouvez utiliser la fonction duplicate pour surmonter la limitation et copier la colonne.

Faites glisser un peu l’élément supérieur et il révélera l’autre. Les deux éléments sont bien présents. De plus, lorsque vous dupliquez une colonne, elle s'empilera sur l'ancienne. Vous pourriez être confus. Mais ne vous inquiétez pas, vous pouvez simplement le faire glisser puis l'utiliser dans la conception de votre page Web.

Compensations

Il existe des cas où vous devez définir des décalages dans le contenu de votre page Web. Avec Elementor, vous pouvez facilement définir le décalage. Ainsi, si vous définissez un décalage de 500 px à partir de la gauche, un espace sera laissé autour du contenu en fonction de votre saisie. De même, vous pouvez également définir le décalage sur le côté droit. C'est une bonne pratique de définir les décalages gauche et droit sur une valeur similaire, car le contenu sera correctement aligné sur l'écran.

Il existe des cas où vous devez définir des décalages dans le contenu de votre page Web. Avec Elementor, vous pouvez facilement définir le décalage. Ainsi, si vous définissez un décalage de 500 px à partir de la gauche, un espace sera laissé autour du contenu en fonction de votre saisie. De même, vous pouvez également définir le décalage sur le côté droit. C'est une bonne pratique de définir les décalages gauche et droit sur une valeur similaire, car le contenu sera correctement aligné sur l'écran.

La règle d'or

Pour une meilleure conception réactive, utilisez des unités relatives. En effet, le positionnement absolu peut s’avérer délicat lorsque le site Web est accessible à partir d’une autre plateforme. L'utilisation d'unités relatives pour la conception de vos sections entraînera une conception plus réactive. Le changement de largeur peut être parfaitement géré à l’aide d’unités relatives. Par « relatif », nous entendons des unités variables telles que le pourcentage ou la largeur d'affichage (VW), plutôt que des unités fixes telles que les pixels.

Conclusion

Elementor est un constructeur de sites Web très convivial. Parfois, l’affichage du site Web peut poser des problèmes si le site Web est accessible à partir d’un mobile ou d’une tablette. Avec l’aide de l’alignement des sections et des colonnes, vous pouvez rendre vos sites Web parfaits en toute simplicité.