全面解析Elementor Container：从基础设置到高级应用的详细教程

什么是Elementor Container

Elementor Container是Elementor页面构建器中的一个新功能，用于创建高度灵活和响应式的网页布局。与传统的Section布局相比，Container提供了更强大的控制和更多的布局选项。它支持两种主要布局模式：Flexbox和Grid。

1. 如何启用Elementor Container？

首先你需要将你的Elementor Page Builder插件和Elementor Pro插件升级到最新版本。

升级插件到最新版本之后，导航至Elementor>设置页面的Features标签下

在Stable Features中将Grid Container激活：

激活Flexbox Container，如果你想使用Elementor自带的Mega Menu，还需要激活Nested Elements和Menu功能。

设置完成之后将页面拖拽到最下方点击保存按钮。

2. 如何将页面中的Section转换成Container？

进入页面编辑之后选中你要转换成Container的Section，拖动Container进入选择的滑块。

转换之后，会在转换的Section模块下方自动复制生成一个一模一样的Container模块。确认Container模块没有问题之后，直接删除上方的Section模块即可完成Section到Container的转换。

3. Elementor Container相对Section的一些优势

3.1 响应能力更强

Container可以充分利用布局中的控件，自动进行响应式调整。这意味着在大多数情况下，你不需要做过多的设置，就能实现内容的自动响应式布局。而Section需要你手动为不同设备进行配置和调整，才能完美实现响应式效果。

Container也允许你自定义不同设备的响应式布局，以满足特定需求。

3.2 布局控制更强

Container相比Section具有更大的自由度和灵活性。你可以嵌套多个层次的Container，并自定义它们的宽度和高度。这使得创建功能丰富且复杂的模板变得更加快捷简单。与传统布局相比，Container提供了更高的灵活性，而Section布局则只能将小部件分为部分和列。

3.3 页面速度的提升

Elementor会不会很慢？Section布局可能会让你觉得有些慢，但Container则不会！

Elementor Container通过减少使用的分隔符数量，提高了页面速度。而Section通常包含更多的列和内部部分，分隔符越多，文档对象模型 (DOM) 就越大，从而增加了页面加载时间。使用Container可以减少数据请求，缩小DOM，从而显著提升页面加载速度。

3.4 直接为Container添加链接

在做Loop Item时，你可以直接为整个Container添加链接，而不是为每个元素添加链接。只需将Container的HTML标签改为<a>标签，即可实现。这使得链接管理更加简单高效。

4 Elementor Container的基本设置

4.1 Elementor Container的FlexBox 和Grid

FlexBox和Grid是两种布局模式，适用于不同的设计需求。FlexBox适合高度自由的布局，而Grid则按照网格进行布局。你可以根据具体需求选择合适的布局方式。

a、什么是FlexBox Container？

FlexBox Container是一种灵活的布局方式，为你的网站提供高度自由的布局选项。

b、什么是Grid Container？

Grid Container是一种网格布局方式，通过设置行和列来控制元素的排列，使所有网格保持高度一致性。如果你的页面需要网格布局，使用Grid Container会更加方便和高效。

4.2 如何在页面中添加Container？

a、通过画布添加

在Elementor画布中需要添加Container的地方，点击下方的模块的+号，在弹出区域点击+号。

然后在弹出的布局中点击Flexbox或者Grid，添加对应的Container添加到页面中。

这种方法适用于添加页面中的顶级Container，即页面的最外层布局容器。顶级Container的外部是页面画布，不会嵌套其他Container。

你可以根据页面布局的需求，选择在一个页面中使用多个Container，或者使用一个Container并在其内部嵌套其他布局Container。这取决于你的布局规划。

b、通拖拽布局元素添加

在容器内添加嵌套的内部容器则通过拖拽布局元素的方法实现如下：在Elementor画布左边的Elementor元素库中，找到Layout下面的Container元素，拖拽到对应的区域。

拖拽之后可以你还可以通过导航器观察到这个拖拽的Container，嵌套到一个Container内部。

下面添加的Container默认都是Flexbox模式，你可以在Layout设置中根据你的需要修改成Grid模式。

4.3 Container的布局设置

1、Container通用设置

要设置Container的布局，请按照以下步骤操作：

1. 用鼠标选中你要设置的Container。
2. 在左侧的窗口中，切换到“Layout”标签。
3. 你可以在这个标签下对Container进行布局设置，如调整宽度、高度和对齐方式等。

Container Layout用于切换Container的布局方式，有Flexbox和Grid两个选项，默认的选项是Flexbox。

Content Width用于设置Container的宽度，你可以选择“Boxed”或“Full Width”。默认情况下，设置为“Boxed”，即内容宽度基于一个固定值。你可以在Elementor的站点设置中设定全局的内容宽度。

Boxed默认宽度是你在Site Setting全局中设置好的内容宽度，可以通过滑动条修改宽度。

Full Width它的默认宽度会基于包裹的Container铺满，如果是画布中顶级的最外部的Container，则宽度默认基于浏览器窗口铺满。你可以通过滑动条调整宽度。

Min Height用于设置Container的最小高度。当Container中没有内容或内容较少时，它会显示为最小高度；如果Container中的内容较多，则会根据内容的高度自动调整。你可以通过滑动条或输入数值的方式来修改高度。

Container Layout可以将Flexbox切换为Grid，Flexbox和Grid的Item设置有所区别。

2、Flexbox的Item设置

当你将Container Layout设为Flexbox的时候，你可以看到Item设置如下：

Direction代表显示方向，有4个选项，按照箭头指示风别为：从左到右，从上到下，从右到左，从下到上。

使用Direction可以改变你在Container中排放元素的方向和顺序

Justify Content用于设置Container内部元素在主轴上的对齐方式。如果Direction设置为水平（从左到右或从右到左），则Justify Content用于设置元素在水平方向上的对齐方式；如果Direction设置为垂直（从上到下或从下到上），则Justify Content用于设置元素在垂直方向上的对齐方式。

Justify Content用于设置Container内部元素在主轴上的对齐方式，有以下五个选项：

1. Start（开始）：从Container布局方向的起点开始排列元素。
2. Center（中间）：在Container中居中排列元素。
3. End（结束）：从Container布局方向的终点开始排列元素。
4. Space Between（间距）：第一个元素放在起点，最后一个元素放在终点，其余元素均匀分布。
5. Space Around（周围空间）：每个元素的周围空间相同。
6. Space Evenly（空间均匀）：每个元素之间的距离相等。

Align Items用于设置Container内部元素在与主轴方向一致的对齐方式。它包含以下四个选项：

1. Start（开始）：基于Direction布局方向的起点对齐Container内部的元素。
2. Center（中间）：基于Direction布局方向居中对齐Container内部的元素。
3. End（结束）：基于Direction布局方向的终点对齐Container内部的元素。
4. Stretch（拉伸）：拉伸元素以适应容器的大小。如果元素是‘auto’-sized，它们会被拉伸以适应容器的大小；如果设置了固定大小，则不会自动拉伸。

4、Additional Options其他选项设置

在Container的Additional Options中有2个选项。

Overflow溢出设置

控制Container的内容是否不适合浏览器器窗口，溢出的内容是否应该隐藏或可见，从而导致水平滚动。

Overflow有三个选项：

• Default 允许容器外的项目溢出。
• Hidden 隐藏溢出的项目，无法访问溢出的项目。
• Auto 在内容溢出时创建滚动条以保持项目可访问，此设置允许在移动视图中滑动内容。

Hidden状态下，如果内容溢出了，是看不到溢出的内容的。

4.4 Container的风格设置

切换到Container的Style选项卡可以设置Container的风格。

1）Background(背景)

你可以通过背景为Container设置背景颜色。

你还可以为Container的设置背景图。

2）Background Overlay（背景覆盖）

背景覆盖可以实现给你设置的背景叠加一层颜色或者图片蒙板，你可以设置颜色或者图片的透明度来匹配你想要实现的效果。

3）Border（边框设置）

Border用于设置Container的边框和投影效果。

4）Shape Divider（形状分割线）

形状分割线可以用来做一些Container之间的分割效果，这是UAE插件提供的功能。

你可以通过切换Top和Bottom来选择设置Container顶部还是底部的分割形状，在Type中你可以选择一个你喜欢的形状（只能选择提供的）

总结：

本文带你学习如何启用Elementor Container、将页面中的Section转换为Container，以及了解Container相较于Section的优势，如更强的响应能力、灵活的布局控制和提升页面速度。教程还涵盖了Container的布局设置，包括使用Flexbox和Grid布局模式，以及如何为Container添加链接和自定义样式。无论是初学者还是有经验的网页设计师，这篇教程都能帮助你充分利用Elementor Container的强大功能，提升网页设计效率和效果。