如何让 Elementor 列等高（也包括 Flexbox 容器）

当你在网站中创建并排列的列时，它们必须具有相同的高度，以便整个设计看起来更整齐。可以通过正确的 HTML 代码实现这一点，但对于不懂编码的非技术用户来说，这确实很具挑战性。

本文将向你展示如何使 Elementor 列等高，包括 Flexbox 容器。请继续阅读，直到最后。

等高功能真的很有必要吗？

在设计网站时，你可能会注意到一些列或小部件的高度不一致。高度通常取决于它们包含的内容。仔细看看上面的图片。

从第一眼来看，你喜欢左边的图片吗？我们可以预测你不会喜欢！就像你一样，大多数人也会觉得不协调。而右边的图片看起来更好，更整洁。

如何使用 HappyAddons 等高功能

这个功能可以与所有 Elementor 小部件无缝兼容。你还可以将此功能应用于其他第三方插件的小部件。确保你已安装并激活以下插件：

• Elementor
• HappyAddons（Elementor 插件）

完成这些步骤后，接下来就可以按照下面的方法进行操作了。

方法一：在 Elementor 小部件上使用等高功能

为了解释这个方法，我们选择了 Elementor 的价格表小部件，并为其填写了一些内容。

• 选择价格表小部件 根据你的需求配置小部件，添加文本、价格、标带和其他详细信息。每个部分中的信息可能不匹配，因此你会发现价格表小部件的高度不均。

• 自定义小部件 接下来，点击菜单栏中的“编辑部分”选项。

• 进入编辑部分 之后，进入高级部分，你会看到等高选项，启用它，然后你会看到神奇的效果。

• 启用等高选项 然后，选择你要调整的小部件。在这里，你可以禁用平板和手机模式。

• 禁用平板和手机模式 最后，选择合适的边距，你会看到所有小部件的高度现在已经一样了。

• 检查小部件的高度 仔细看，尽管我们在每一列的价格表中加入了不同层次的内容，但使用 HappyAddons 的等高功能后，所有列的高度变得相同，整体看起来更整齐了。

方法二：在 HappyAddons 小部件上使用等高功能

让我们把这个功能应用到 HappyAddons 的小部件上。选择菜单栏中的某个小部件，我们选择了卡片小部件，来展示调整高度的整个过程。

• 选择一个小部件 根据需要自定义小部件。你可以添加图片、文本等设计。由于每一部分的数据可能不匹配，你会发现这些小部件的高度不同。

• 自定义所选小部件 现在，我们来修复每个部分的高度。在菜单栏中点击“编辑部分”。

• 修复菜单栏中的高度 然后进入高级部分，你会找到等高选项。启用它。

• 启用等高选项 如上所示，你可以选择禁用平板和手机模式。

• 禁用平板和手机模式 选择合适的高度，看看最终效果！

方法三：使用该功能使 Elementor 容器等高

早期，等高功能仅适用于基于列的设计。但是现在，你可以使用这个功能来使多个垂直排列的 Flexbox 容器的高度相等。如下所示，我们有两个容器在同一部分中，一个比另一个高。

• 选择整个部分 点击六点图标选择整个部分，进入高级设置。
• 启用等高选项 在高级设置中找到等高选项，启用它。选择相应的小部件，你会看到容器的高度变得相等。

总结

通过以上方式，你可以将该功能应用到任何使用 Flexbox 容器的小部件和内容上。HappyAddons 提供的等高功能使得设计师能够快速且高效地解决列高度不一致的问题，使得整个页面看起来更加整齐和专业，无需编写任何复杂代码。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息