Lorsque vous créez et organisez des colonnes sur votre site web, elles doivent avoir la même hauteur pour que l'ensemble du design soit plus net. Ceci peut être réalisé avec le bon HTML Le code met cela en ?uvre, mais c'est un véritable défi pour les utilisateurs non techniques qui ne savent pas coder.

Cet article vous montrera comment faire Elementor Les colonnes sont de même hauteur et comprennent Flexbox Conteneur. Veuillez poursuivre votre lecture jusqu'à la fin.

La fonction isométrique est-elle vraiment nécessaire ?

Lors de la conception d'un site web, vous pouvez remarquer que certaines colonnes ou certains widgets n'ont pas la même hauteur. La hauteur dépend généralement du contenu qu'ils contiennent. Regardez de plus près l'image ci-dessus.

Au premier coup d'?il, l'image de gauche vous pla?t-elle ? Nous pouvons prédire que vous ne l'aimerez pas ! Tout comme vous, la plupart des gens la trouveront décousue. L'image de droite est plus belle et plus ordonnée.

Comment utiliser HappyAddons isometrics

Cette fonctionnalité fonctionne de manière transparente avec tous les widgets d'Elementor. Vous pouvez également appliquer cette fonctionnalité aux widgets d'autres plugins tiers. Assurez-vous que les plugins suivants sont installés et activés :

• Elementor
• HappyAddons(plug-in Elementor)

Une fois ces étapes franchies, l'étape suivante consiste à suivre la méthode ci-dessous.

Méthode 1 : Utiliser Isometrics sur les widgets Elementor

Pour expliquer cette approche, nous avons choisi Elementor du widget de la liste de prix et en a rempli le contenu.

• Sélectionner le widget de liste de prix Configurez les widgets pour ajouter du texte, des prix, des bandes étiquetées et d'autres détails en fonction de vos besoins. Les informations contenues dans chaque section peuvent ne pas correspondre, de sorte que vous pouvez constater des hauteurs inégales dans le widget de la liste de prix.

• Widgets personnalisés Ensuite, cliquez sur l'option "Modifier la section" dans la barre de menu.

• Accéder à la section d'édition Ensuite, allez dans la section avancée et vous verrez l'option contour, activez-la et vous verrez la magie.

• Activer l'option de contour Sélectionnez ensuite le widget que vous souhaitez ajuster. Ici, vous pouvez désactiver les modes tablette et téléphone.

• Désactiver le mode tablette et le mode téléphone portable Enfin, choisissez les marges appropriées et vous verrez que la hauteur de tous les widgets est maintenant la même.

• Vérification de la hauteur des widgets Regardez bien, même si nous avons ajouté différents niveaux de contenu à chaque colonne de la liste de prix, en utilisant la fonction isométrique de HappyAddons, toutes les colonnes ont la même hauteur et l'aspect général est plus net.

Méthode 2 : Utiliser Isometrics sur les widgets HappyAddons

Appliquons cette fonctionnalité au widget HappyAddons. Sélectionnez l'un des widgets dans la barre de menu, et nous avons choisi le widget carte pour montrer l'ensemble du processus d'ajustement de la hauteur.

• Sélectionner un widget selon les besoinsWidgets personnalisés. Vous pouvez ajouter des images, du texte et d'autres motifs. Comme les données de chaque section peuvent ne pas correspondre, vous remarquerez que les widgets ont des hauteurs différentes.

• Personnaliser le widget sélectionné Fixons maintenant la hauteur de chaque section. Cliquez sur "Editer la section" dans la barre de menu.

• Corriger la hauteur de la barre de menu Allez ensuite dans la section Avancé et vous trouverez l'option Isométrique. Activez-la.

• Activer l'option de contour Comme indiqué ci-dessus, vous avez la possibilité de désactiver le mode tablette et le mode téléphone.

• Désactiver le mode tablette et le mode téléphone portable Choisissez la bonne hauteur et voyez le résultat !

Méthode 3 : Utiliser cette fonction pour donner la même hauteur au conteneur Elementor

Auparavant, la fonction de contour n'était disponible que pour les dessins à base de colonnes. Désormais, vous pouvez utiliser cette fonction pour créer plusieurs dessins alignés verticalement. Flexbox Les hauteurs des conteneurs sont égales. Comme indiqué ci-dessous, nous avons deux conteneurs dans la même section, l'un plus haut que l'autre.

• Sélectionner toute la section Cliquez sur l'ic?ne à six points pour sélectionner l'ensemble de la section et accéder aux paramètres avancés.
• Activer l'option de contour Recherchez l'option Hauteur égale dans les paramètres avancés et activez-la. Sélectionnez les widgets correspondants et vous verrez que les hauteurs des conteneurs deviennent égales.

résumés

HappyAddons fournit une fonctionnalité isométrique qui permet aux concepteurs de résoudre rapidement et efficacement le problème de l'incohérence de la hauteur des colonnes, ce qui donne à l'ensemble de la page un aspect plus soigné et plus professionnel sans avoir à écrire un code complexe.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.