container-vs-section-column

比较grid containers vs sections/columns

当谈到网页布局时，这里有三个常用的术语：

Grid Containers (网格容器) – 网格容器允许您将网页内容划分为有序的行和列。这种布局方式能够让您精确地控制每个元素的位置和大小，是创建响应式设计的理想选择。

Sections (部分/区段) – 在网页设计中，部分或区段通常指的是页面上的一个独立的区域或模块，可以包含文本、图像、小部件等内容。每个部分都是页面结构的一个组成部分，用于逻辑地组织信息。

Columns (列) – 列是在部分内进一步划分内容的方法。在一个部分中，您可以有多个列，这些列可以帮助您以结构化的方式排列页面元素。列通常与网格系统一起使用，以确保内容在不同设备上的一致显示。

Elementor 的新 Flexbox 容器迅速成为传统部分列的流行替代品。容器允许您快速创建网页布局并分组小部件。这使您能够控制内容的显示方式并简化您的网页构建工作流程。

通过使用 Flexbox 容器，您可以通过更精简的代码提高页面速度，更精细地控制响应性，并更容易创建复杂的布局。使用容器模板，您可以创建可用于网站其他部分的模板。

容器在新站点上默认激活，或者您可以从 WordPress 控制面板为现有站点激活容器。

在本文中，您将了解传统部分列布局和容器之间的主要区别。

首先，让我们看看容器如何提高网页的响应性。

响应性 在设计网页时，您需要考虑内容在用户浏览器中的加载情况以及内容针对不同屏幕尺寸和设备的优化程度。容器允许您对元素进行分组，从而更容易定义响应性。您还可以定义希望内容如何在不同设备、屏幕尺寸上显示以及显示顺序。使用容器可以避免在不同平台类型上堆叠隐藏元素，从而改善整体用户体验。

布局控制 使用容器时，您可以实现更好的设计优化并定义更复杂的布局。这是因为它们不受列和行的约束，这为您提供了更细致的布局控制。

容器允许您自定义其宽度和高度，并且您可以在另一个容器内嵌套一个容器。这样做可以让您快速创建功能丰富的复杂模板。这使您能够创建重复的设计特征并在您的网站上实现设计连贯性。简而言之，与传统布局相比，使用容器提供了更多的灵活性，传统布局只允许您将小部件分割成部分和列。

页面速度 通过使用容器进行页面设计，您可以提高页面的加载速度。容器通过最小化使用分隔符来提高页面速度。与容器不同，部分通常包含更多列和内部部分。后端代码中分隔符较少意味着较小的文档对象模型（DOM），这会减少页面加载时间。这是因为构建浏览器中的网页需要的数据请求更少。

要加快页面速度，请查看显示 DOM 的导航器，并移除不必要的容器。

超链接 您还可以使容器可点击。这样做可以添加超链接，使整个容器充当按钮。如果容器的内容是充当行动号召的图片，这会很有用。以前，链接整个列的唯一方法是使用自定义代码。另一方面，容器通过允许您使用“a” HTML 标签来创建链接，解决了这个问题。

未来展望 Elementor 不断开发新的强大功能，其中许多旨在利用 flexbox 容器设计。

注意事项 容器并不总是适合每个用例，您在将部分转换为容器时需要考虑这一点。一旦您将部分转换为容器，这是不可逆的。

接下来的步骤 现在您已经了解了容器相对于传统部分和列的好处，您可能希望探索它们如何进一步增强您的网站设计。

从部分过渡到容器

在 Elementor 中，默认的布局元素是容器。然而，在容器的开发之前，Elementor 使用部分和列进行布局，所以许多创作者习惯于使用部分创建。

从使用部分设计网页到使用容器设计时，有几点需要注意：

• 部分和列的工作方式是垂直的。 当您向部分添加元素时，该元素将被放置在现有元素的上方或下方。使用容器时，您可以选择元素是垂直排列还是水平排列。
• 容器允许您创建更复杂的设计，并具有更高级别的自定义。 例如，使用部分的设计师可以通过图标盒小部件将图标、标题和文本组合在一个包含区域内。使用容器的嵌套元素，创作者可以组合元素以创建他们自己的自定义小部件，例如将图标与标题和动画标题相结合。
• 使用部分和列时，列将始终占用部分宽度的 100%， 例如，两列各占总宽度的 50%。另一方面，嵌套在容器中的元素可以占用超过 100% 的容器宽度，或者不足 100% 的容器宽度。例如，两个嵌套容器各占父容器宽度的 60%。
• 容器相对于部分在响应式设计中的最大优势是其灵活性。 有关更多详情，请查看使用容器的响应式设计。要查看响应式设计的示例，请查看在容器中间距相同元素，以及在具有嵌套元素的容器中间距相同元素。
• 在创建部分时，您还可以为它们指定最小高度。 但部分内的单独列不能这样做。使用容器时，父容器和嵌套元素都可以设置最小高度。事实上，通常最好不要给父容器指定最小高度，而只为嵌套元素指定最小高度。