Comment aligner des sections et des colonnes Elementor

Pendant que vous travaillez avec Elementor , vous remarquerez qu'il est un peu difficile de positionner vos sections et colonnes de manière personnalisée. 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 pourront pas s'ajuster à l'écran.

• Pourquoi devons-nous nous aligner?
• Comment les colonnes ou les sections fonctionnent-elles pour une conception réactive?
• Comment aligner des sections et des colonnes Elementor?
• Pour résoudre les problèmes de largeur réactive, utilisez le débordement masqué
• Prendre soin du positionnement
• Unités relatives
• Contrôlez la profondeur de chaque élément à l'aide de l'indice Z
• L'astuce sur la fonctionnalité en double
• Décalages
• 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 de notes. Pour un look assemblé, il est recommandé que l'apparence du contenu soit uniforme. Il ne devrait pas être simplement jeté là-bas - juste pour le plaisir.

Avec un bon alignement, vous pouvez donner au site Web une apparence plus soignée et élégante, 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 les colonnes ou les sections fonctionnent-elles pour une conception réactive?

Elementor 2.5 vous permet de personnaliser le positionnement de votre conception et de 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 causer un problème dans la réactivité de la conception.

Supposons que vous ayez une disposition à trois colonnes. Avec l'aide d'un positionnement personnalisé, vous pouvez glisser-déposer un widget de la colonne de droite dans la colonne centrale, ou comme vous l'aimez.

Mais cela ne profitera qu'aux utilisateurs de bureau car cela leur ira bien. Cependant, cela entraînera un problème si le site Web est accessible depuis un mobile, car Elementor empile les colonnes verticalement sur un mobile.

Ainsi, au lieu d'avoir trois colonnes côte à côte, vous pouvez rencontrer 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 bureaux.

Bien que vous puissiez modifier intelligemment la vue mobile avec un paramètre caché, mais il n'y a aucune garantie que la majorité des gens puissent la trouver. Alors, pourquoi frustrer les utilisateurs? Rendre le design réactif et adaptable est la bonne solution. Pour qu'il ne se bloque nulle part.

Pour cette question, vous devez faire attention à la relation du widget avec la colonne à l'intérieur.

Comment aligner des sections et des colonnes Elementor?

Pour chaque section / colonne, atterrissez sur 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 parmi les suivants. Mais une chose que vous devez garder à l'esprit est que le contenu d'une colonne ne peut pas être aligné avec les trois premières options verticales de la colonne, c'est-à-dire en haut, au milieu et en bas.
• Haut
• Milieu
• Bas

D'ailleurs, il existe ^* trois nouvelles options qui permettent d'aligner le contenu à votre guise.

• ^*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 représentent la moitié de la taille de l'espace entre les widgets.
• ^*Espace également - 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 les widgets en ligne, qui se trouvent dans la même ligne, horizontalement. 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 - définit 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
• Espace 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 réactive, utilisez le débordement masqué

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éborde de la largeur d'une colonne.  

Cela provoque une situation vraiment frustrante pour les visiteurs mobiles, où ils peuvent faire défiler horizontalement. Et ce n'est pas quelque chose que vous vouliez 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 prendre soin de la position 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 un 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'é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, il est judicieux d'utiliser des unités relatives, car cela rendra la conception réactive plus fonctionnelle lorsqu'il s'agit de 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 aux sections de se redimensionner et d'un meilleur design réactif. 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 de l'indice Z

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

L'astuce sur la fonctionnalité en double

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 voici. 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é 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 dupliquer la colonne chaque fois que nécessaire. Assurez-vous également que les colonnes que vous créez n'utilisent pas de positionnement personnalisé. Si tel est le cas, la duplication ne fonctionnera pas avec l'option de clic droit. Cependant, vous pouvez utiliser la fonction de duplication 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 là. De plus, lorsque vous dupliquez une colonne, elle se superposera à l'ancienne. Vous pouvez être confus. Mais ne vous inquiétez pas, vous pouvez simplement le faire glisser puis l'utiliser dans la conception de votre page Web.

Décalages

Dans certains cas, vous devez définir des compensations pour 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 pixels à partir de la gauche, un espace sera laissé autour du contenu en fonction de votre entrée. De même, vous pouvez également définir le décalage sur le côté droit. Il est recommandé de définir les décalages gauche et droit sur une valeur similaire, car le contenu sera correctement aligné sur l'écran.

Dans certains cas, vous devez définir des compensations pour 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 pixels à partir de la gauche, un espace sera laissé autour du contenu en fonction de votre entrée. De même, vous pouvez également définir le décalage sur le côté droit. Il est recommandé 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 être délicat lorsque le site Web est accessible à partir d'une plate-forme différente. L'utilisation d'unités relatives pour la conception de vos sections se traduira par 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 comme le pourcentage ou la largeur de vue (VW), plutôt que des unités de fixation comme les pixels.

Conclusion

Elementor est un constructeur de sites Web très convivial. Parfois, cela peut poser des problèmes d'affichage du site Web si le site Web est accessible à partir d'un mobile ou d'une tablette. Grâce à l'alignement des sections et des colonnes, vous pouvez rendre vos sites Web parfaits avec une réelle facilité.