如何通过 6 个简单步骤使用 Elementor Flexbox 容器

您是否尝试过新的Elementor Flexbox 容器功能？

好吧，嗡嗡声是一个很好的补充，可以使您的网站针对所有设备进行更优化，并使您的网站加载速度更快。

如何？

好吧，新的 flex 容器的工作方式（前端和后端）与之前的部分/内部部分略有不同。 而这些新的和不同的工作方式正是神奇之处。

在本博客中，您将逐步了解 Elementor flexbox 容器为构建网站带来的新选项，以及如何使用 Elementor Flexbox 容器。

所以继续阅读……

什么是 Elementor Flexbox 容器？

Elementor Flexbox 容器将所有 CSS Flexbox 工具带到您的 Elementor 编辑器中。 通过新增功能，您可以轻松创建高级布局，以确保网页在所有设备上看起来都很棒，无论大小。

注意：顾名思义，CSS flexbox 容器为您提供了创建设备响应式设计的高级灵活性。 在引入 flexbox 之前，使用 Block、Inline、Table 和 Position 等多种布局模式创建响应式设计相当复杂。 但是使用 flexbox 容器，您不再需要多种布局模式。

当涉及到 Elementor flexbox 容器时，您将不再需要使用部分。 您可以在没有任何部分的容器中添加小部件。 您还可以在容器中添加无限数量的容器。

添加小部件和容器后，您可以控制容器内小部件的分布以及每个设备的布局。 此外，您还可以为每个容器（甚至是容器中的容器）获得单独的自定义设置。 这使您能够以最佳的灵活性使您的设计设备响应。

新的 Elementor Flex 容器和部分之间的区别

您一定想知道容器和部分之间有什么区别。 嗯，有很多不同之处。 这些是一些关键的区别：

• 您可以使用 flexbox 将小部件添加到容器中，而对于部分，您需要添加列，然后向其中添加小部件。
• 在flex 容器中，widget 宽度默认为 inline，而对于 column section 结构，widget 宽度默认为全宽。
• 之前，您只能在一个部分中添加一个内部部分，但使用最新的弹性容器，您可以添加任意数量的容器。
• 使用 column-section 结构，您可以使用 column 或 inline 定位来更改小部件的方向。 现在使用最新的 flex 容器，您可以使用 Column、Row、Column Reverse 或 Row Reverse 更改小部件方向。
• 在列部分结构中，使用反向列或重复部分来使网页具有响应性。 在最新的弹性容器方法中，您可以为每个设备使用小部件或容器的自定义顺序。
• 节/列结构中的对齐选项是左、中和右。 另一方面，使用 flex 容器，您可以获得对齐选项，例如 flex-start、flex-center 和 flex-End。

现在，您必须考虑这些变化如何使您受益。 要了解更多信息，请转到下一部分。

使用 Elementor Flexbox 容器的优势

在将新功能添加到插件之前进行了大量研究，以确保该功能对客户有用。 Elementor flex 容器也是如此。 添加此 Elementor 功能是因为它将在很大程度上使用户受益。

如果您使用 Elementor flexbox 容器，以下是您将享受到的一些优势：

• 由于 section 和 inner section 将替换为 flex 容器，您可以构建更优化的网站。
• Flexbox 将减少列和内部部分的数量。 因此，后端将产生更少的代码。 更少的 DOM 将为您的 WordPress 网站带来更快的速度。
• Flexbox 容器设置将使您能够比以前更灵活地构建设备响应网站。
• 现在您可以超链接一个完整的部分。 之前您只能超链接小部件。
• 如果你之前不满意，因为你只能在一个部分中添加一个内部部分，那么 flex 容器适合你。 使用 flex 容器，您可以无限期地在容器中添加容器。

如何通过 6 个步骤使用 Elementor Flexbox 容器

按照以下步骤使用 Elementor Flexbox Container 创建一个快速响应的 Elementor 网站。 该过程包括 6 个简单的步骤：

第 1 步：在 Elementor 实验中激活 Flexbox 容器

从 WordPress 仪表板，导航到 Elementor ⇒ 设置。 现在移动到 Experiments 选项卡并向下滚动以找到“Flexbox Container”选项。

找到选项后，从“状态”下拉列表中选择“活动”。 最后，向下滚动到底部并单击保存更改以保存状态。

第 2 步：创建一个新页面

激活 flex 容器后，是时候创建一个新页面，以便您可以使用此功能。 为此，导航到页面⇒所有页面，然后单击添加新的。 现在，提供一个标题，然后单击使用 Elementor 编辑

第三步：添加容器

现在，您需要添加一个容器，而不是一个部分。 为此，单击 + 图标，然后选择您喜欢的结构。

注意：如果您注意到导航器中的结构，您会发现该结构实际​​上是一个容器，其中包含其他容器而不是列。 您还可以从左侧的菜单中拖放单个容器。

您可以自定义容器的许多选项，例如

• 容器宽度：您可以选择容器宽度为盒装或全宽。
• 宽度：如果您选择 Boxed 作为容器宽度，则宽度将为 928Px。 另一方面，如果您选择全宽，则容器宽度将为视口宽度的 100%。 但是，您可以更改两个宽度值。
• 溢出：您可以选择溢出值作为默认、隐藏或自动。
• HTML 标记：您还可以更改容器的 HTML 标记。 您可以获得诸如 div、header、footer、main、article、section 等选项。新增了一个标签。 通过这种方式，您可以将整个容器变成带有标签的链接。

注意：您还可以在“项目”下获得许多选项（稍后会更多）。 此外，您还可以为每个内部容器自定义上述所有设置。

第 4 步：添加小部件

添加小部件的过程与列节结构相同。 您需要搜索小部件，然后拖放到每个容器的 + 图标上。 例如，我将添加一个标题、一个视频和一个社交分享图标。

第 5 步：自定义容器内容

现在是时候自定义容器小部件了。 为此，请编辑容器。 然后，转到左侧面板上的布局并展开项目选项。 以下是您可以使用的选项：

• 方向：默认方向是行。 但是，您会得到四个选项，例如行、列、反转行和反转列。 如果您选择列或反转列，则主容器中的所有容器都将显示为不同的列。

注意：如果您选择了列，则需要调整内部容器的宽度。

• 对齐容器：您可以将对齐方式设置为 Flex Start、center、flex-end 和 Scratch。 Flex 开始从起点放置您的容器元素，并且使用 Flex 中心值，您可以将项目放置在中心。 另一方面，使用 Flex 端，您可以在底部显示所有内部容器。 如果使用拉伸选项，内部容器将占用任何额外空间（如果已分配）。 如果您选择方向作为一行，所有这些都将适用。

另一方面，如果将方向选择为 column ，则 flex-start 和 center 值将与行相同。 但是使用flex-end，容器将向右移动，而使用 scratch ，它将占用左侧的任何空间。

• 对齐内容：您有六个选项来对齐内容： flex start、center、flex end、space between、space around 和 space evenly。 Space between 将在每个项目之间添加相同的空间。 但是，它不会在项目的顶部或底部添加任何空间。

space around 选项将在每个容器的顶部和底部添加空间。 空间均匀选项将在所有小部件和内部容器周围添加相同的空间。

• 元素间隙：您可以使用此选项在元素（小部件和内部部分）之间添加空间。

• Wrap ：选择No Wrap将所有项目放在一行中，选择Wrap 让内容在多行中流动。

第 6 步：发布和预览

您可以重复第 4 步来自定义所有容器设置。 完成自定义后，单击发布按钮以发布页面。 然后，您可以单击预览按钮以查看具有新 flex 容器结构的页面。

如何将基于部分的 Elementor 页面转换为 Flexbox 容器

将基于节/列的结构转换为新的 Elementor Flex 容器非常容易。 您可以按照如下所示的 4 个简单步骤执行此操作：

第 1 步：选择要转换的部分

您需要分别转换每个部分。 因此，首先，选择要转换的部分。 您可以单击六个点来选择一个部分或从导航器中选择一个部分（您可以在左下角找到该选项）。

第2步：点击转换进行转换

现在要转换，在左侧面板上，您会在布局下方找到转换为容器选项。 单击转换按钮。

第 3 步：删除上一部分

转换过程完成后，您会发现同一部分的两个版本。 一种是基于部分的，另一种是基于容器的。 顶部的版本是基于部分的。 删除以前的/原始版本。

第 4 步：更新和预览

您可以对页面的所有部分重复步骤 1 到步骤 3。 完成将所有部分转换为 Flexbox 容器布局后，单击更新按钮保存。 现在您可以单击预览按钮来查看相同的页面，但具有容器布局。

我可以在新的 Flexbox 容器中使用 Elementor 附加功能吗？

是的。 你绝对可以。

您可以使用 ElementsKit - Elementor 的终极插件向 Elementor 页面构建器添加其他小部件和其他功能。 这个 Elementor 插件与 Elementor 的新 Flexbox 容器 100% 兼容。

您可以使用将任何 Elementor 部分转换为容器布局（如上部分所示）的相同过程来转换 ElementsKit 部分/页面。

ElementsKit 带有500 多个就绪部分、35 多个就绪页面和 85 多个自定义插件功能，让您的生活更轻松。 您可以在几分钟内使用 ElementsKit Premade 模板轻松创建一个完整的网站。

这是一个示例，您可以看到 ElementsKit 预制页面如何顺利地转换为 Elementor Flexbox Container。

包起来

我相信您现在已经明白为什么 Elementor 的新增功能有这么多。 Elementor Flex 容器确实是所有 WordPress 网站建设者的福音，他们正在寻找使网站更优化、更快和响应更灵敏的方法，而不受设备大小的影响。

锦上添花的是，您可以立即将之前创建的网站变成基于容器的优化网站。 但是，flex 容器仍处于实验模式。 因此，在它作为活动功能发布之前，不建议在实时网站上使用它

在此之前，您可以随意在您的临时站点上使用 Elementor flex 容器。 并且一定要尝试 ElementsKit 以获得更大的灵活性来设计一个外观精美的网站，以吸引客户的注意力并提升您网站的成功率。