本文介绍最新Elementor Container如何使用，是一篇超级详细的Container使用教程，涉及到每一个配置项的功能介绍，Elementor Container提供Flexbox和Grid两种布局模式，在布局上相对Section更加灵活。之前Section无法满足的布局需求，都能在Container下轻松实现。
我自己在使用了一段时间之后，发现Container确实提升了我工作效率。但是对于新手来说Container在设置上相对Seciton会为复杂一点，所以我单独出了这篇教程，希望可以帮助大家理解和使用Elementor Container。Container
本文会收录在本站的《Elementor教程（2023最全最详细的Elementor使用及建站教程）》中。
1 如何启用Elementor Container？
首先你需要将你的Elementor Page Builder插件和Elementor Pro插件升级到最新版本。
升级插件到最新版本之后，进入Elementor设置页面的Features标签下
将Flexbox Container和Grid Container设为Active。
如果你需要使用Elementor原生的Mega Menu也可以将Nested Elements和Menu设为Active。
设置完成之后将页面拖拽到最下方点击保存按钮。
2 如何将页面中的Section转换成Container？
进入页面编辑之后选中你要转换成Container的Section，并点击其转换按钮。
转换之后，会在转换的Section模块下方自动复制生成一个一模一样的Container模块。
确认Container模块没有问题之后，直接删除上方的Section模块即可完成Section到Container的转换。
目前Elementor不支持一键整站转换为Container，需要手动去转换。另外，一旦转换之后将不可逆。
3 Elementor Container相对Section的一些优势
3.1 响应能力更强
Container可以充分利用布局中的控件，自动做响应式调整，这意味着大多数情况下，你不需要再做过多的设置，就可以实现内容的自动响应式布局。
Seciton则需要切换到不同终端去配置修改才可以完美实现响应式的效果。
当然Container也允许你自定义不同终端的响应式布局。
3.2 布局控制更强
Container不再像Section那么受限制，它可以实现非常自由的布局和控制。并且可以嵌套更多层。
Elementor Container允许自定义它们的宽度和高度，并且您可以将一个容器嵌套在另一个容器中。这样可以快速创建功能丰富的复杂模板。简而言之，与传统布局相比，使用容器可为您提供更大的灵活性，传统的Section布局仅允许您将小部件划分为部分和列。
刚开始你可能会不喜欢，一旦掌握了使用技巧你一定会爱上它！
3.3 页面速度的提升
一直会有人问我Elementor慢吗？
Seciton布局或许会让你觉得有点慢，但是Container不会了！
Elementor Container通过最小化使用的分隔符数量来提高页面速度。而Section则通常包含更多列和内部部分。后端代码中的分隔符越少意味着文档对象模型 (DOM) 越小，从而减少了页面加载时间。这是因为在浏览器中构建网页的数据请求较少。
3.4 可以直接为Container添加链接
这个功能我做Loop Item的时候非常喜欢用，这样我可以直接为为Item添加链接，还不是为Loop Item中的每一个元素添加链接。
只需要将Container的HTML Tag改a标签就可以为整个Container添加链接。
4 Elementor Container的基本设置
4.1 Elementor Container的FlexBox 和Grid
FlexBox 和Grid是2中布局模式，FlexBox适合高度自由的布局方式，Grid则是按照网格进行布局，不同的布局方式适用不同的场景，你可以根据自己的需求选择对应的布局方式。
a、什么是FlexBox Container？
FlexBox Container是一个弹性的布局方式吗，可以为你的网站提供一种非常自由的布局的方式。
b、什么是Grid Container？
Grid是一种网格布局方式，他可以通过行列的设置来控制网格的排列，所有的网格可以保持高度的一致性，如果你的页面中有网格的布局需求，直接用它会更加方便。
4.2 如何在页面中添加Container？
a、通过画布添加
在Elementor画布中需要添加Container的地方，点击下方的模块的+号，在弹出区域点击+号。
然后在弹出的布局中点击Flexbox或者Grid，添加对应的Container添加到页面中。
如果选择Flexbox，则选择一个预设好的FlexBox，让后点击添加到页面中。
如果你点击的是Grid。
则选择一个预设好的Grid布局添加到页面中。
这种方法适合添加页面中顶级的Containnr（容器），也就是页面中最外部的布局容器。所有顶级Container的外部就是页面画布了，不会嵌套别的Container。
一个页面中可以有多个Container容器，也可以是一个Container容器，然后内部嵌套布局Container，这取决于你对页面布局的规划。
在容器内添加嵌套的内部容器则通过拖拽布局元素的方法实现如下：
b、通拖拽布局元素添加
在Elementor画布左边的Elementor元素库中，找到Layout下面的Container元素，拖拽到对应的区域。
拖拽之后可以你还可以通过导航器观察到这个拖拽的Container，嵌套到一个Container内部。
这里添加的Container默认都是Flexbox模式，你可以在Layout设置中根据你的需要修改成Grid模式。
4.3 Container的布局设置
1）Container通用设置
鼠标选中Container，在左侧的窗口中切换到Layout标签，可以对Container进行布局设置。
Container Layout用于切换Container的布局方式，有Flexbox和Grid两个选项，默认的选项是Flexbox。
Content Width用于设置Container的宽度，可以用Boxed或者Full Width。默认设置是Boxed代表内容的宽度基于一个固定宽度，这个宽度你可以在下面的width里面设置，默认值是1140px，你可以在Elementor Site setting中设置一个全局的内容宽度。
Boxed默认宽度是你在Site Setting全局中设置好的内容宽度（Elementor默认的全局内容宽度是1140px）。你可以通过滑动条修改宽度。
Full Width设置代表全款，它的默认宽度会基于包裹的Container铺满，如果是画布中顶级的最外部的Container，则宽度默认基于浏览器窗口铺满。你可以通过滑动条调整宽度。
MIn Height用来设置Container的最小高度，当Container中没有内容或者内容较少时，则以最小高度显示，如果Container中的内容较多，则默认以匹配内容的高度显示。你可以通过滑动条或者输入数值的方式修改高度。
Container Layout可以将Flexbox切换为Grid，Flexbox和Grid的Item设置有所区别。
Flexbox和Grid的Item设置项目有所不同，这里我分2个标题介绍：
2）Flexbox的Item设置
当你将Container Layout设为Flexbox的时候，你可以看到Item设置如下：
Direction代表显示方向，有4个选项，按照箭头指示风别为：从左到右，从上到下，从右到左，从下到上。
使用Direction可以改变你在Container中排放元素的方向和顺序，举一个列子：
我在一个Container中放了2个元素标题和文本，默认情况下如果Container的Item Direction设置为从左到右，那么显示则按照1一张，切换不同的Direction之后就会有不同的显示方法和顺序。
Justify Content的设置是在和Direction方向垂直的方向上，设置Container内部的元素对其效果。
如果Direction设置为水平的从左到右边或者从右到左边，则Justify Content的设置就是基于垂直方向的对其方式。
如果Direction设置为从上到下或者从下到上，则Justify Content的设置就是基于水平方向的对其方式。
简单来说就是Justify Content是基于Direction方向垂直方向上的Container内部元素的对齐设置。
Justify Content有五个设置选项：
- Start（开始）：从Container布局方向最开始的地方开始排列Container内部的元素
- Center（中间）：基于Container布局方向的垂直方向居中排列Container内部的元素
- End（结束）：从Container布局方向末尾结束的地方开始排列Container内部的元素
- Space Between（间距）：首个元素放置于起点，末尾元素放置于终点均匀排列每个Container内部的元素
- Space Around（周围空间）：为每个元素分配相同的空间，然后排列在Container中
- Space Evenly（空间均匀）：每个元素之间的距离相同，然后排列在Container中
具体每一个选项设置的效果如何，建议自己在网站中进行设置并观察，我这里就不做举例。
Align Items就是和Direction方向一致的Container内部元素对其的设置。
Align Items包含四个选项：
- Center（中间）：基于Direction布局方向居中排列Container内部的元素
- End（结束）：基于Direction布局方向结束的地方排列Container内部的元素
- Stretch（拉伸）：基于以上三种任意一种对其方式拉伸布局Container内部的元素（‘auto’-sized 的元素会被拉伸以适应容器的大小 ，如果设置了固定的大小则不会自动拉伸。）
对比上图和下图，观察标题和文本的背景颜色可以看到Stretch拉伸的布局效果。
Gap between elements设置Container内部元素之间的间距。
默认是20px，你可以根据自己的需求修改。
Wrap用于设置Container内部的元素是否换行。
默认是No Wrap不换行的，如果你Container是从左到右排列方向的话，你想Container中添加6个元素，这些元素都排列在一行中。
如果你希望Flexbox Container中的元素换行，则设为Wrap即可。
3）Grid的Item设置
当你将Container Layout设为grid的时候，你可以看到Item设置如下：
在Item设置的第一个项目是Grid Outline，也就是轮廓。
Grid Outline是用来控制显示或者隐藏网格线的，注意这个线也是一个虚线，只在画布中显示，用于展示Grid的网格布局排列，实际上是不存在的。
如果你关闭Grid Outline，则不显示网格线，但是Grid Container的布局还是按照你设置的进行布局，所以你可以理解为它是一个辅助线。
然后是Columns和Rows，行和列数设置。
设置Grid为3列2行。
Gaps用于设置Items之前的间距，你可以取消🔗，单独设置行的间距和列的间距。
默认情况下，Grid Container中的Items之间会有一个默认的间距，大概10px，如果你想Items之间的间距为0像素，则需要手动设置Gaps为0.
Auto Flow用于控制Grid Items自动流动的方向，默认情况下是Row自动流动，也就是说行数根据Items的数量会自动增加。
比如你设置Grid的Items布局为3列2行，并默认Row自动流动的话，默认是6个元素排列，但是如果你添加的元素超过6个，那么Grid就是自动添加一个行就继续排列。
如果设置Auto Flow为Column的时候，那么列就是会根据Items数量自动增加。
Justify Items和Align Items用于设置Grid Container内部的Items的对其方式的，每个Items的对其的参照为Grid Outline的虚线。
比如下面的示例，Grid中的每个Items参照Outline的左边和上面进行对其。
4）Additional Options其他选项设置
在Container的Additional Options中有2个选项。
Overflow溢出设置
控制Container的内容是否不适合浏览器器窗口，溢出的内容是否应该隐藏或可见，从而导致水平滚动。
Overflow有三个选项：
- Default 允许容器外的项目溢出。
- Hidden 隐藏溢出的项目，无法访问溢出的项目。
- Auto 在内容溢出时创建滚动条以保持项目可访问，此设置允许在移动视图中滑动内容。
Hidden状态下，如果内容溢出了，是看不到溢出的内容的如下：
Default和Auto状态下可以通过左右滑动看到溢出的内容
HTML Tag HTML标签设置
你可以通过此选项修改Container的HTML标签，比如讲Container设为a标签之后可以给Container添加链接。
4.4 Container的风格设置
切换到Container的Style选项卡可以设置Container的风格。
1）Background(背景)
你可以通过背景为Container设置背景颜色。比如下图，我设置Container的背景颜色为绿色。
当然你还可以为Container的设置背景图。
设置Container背景为渐变。
为Container设置一个视频背景。
为Container设置一个轮播相册背景，
这些不同的背景设置模式下还有一些细节的设置项目我就不展开说了，建议自己设置之后看效果。
另外你还可以切换到Hover属性标签下面设置Container背景在鼠标移动上去的效果。比如设置Hover的背景颜色为黑色，或者设置一张Hover背景图片（鼠标移动到Container之后将会切换到Hover设置的背景图片）。
2）Background Overlay（背景覆盖）
背景覆盖可以实现给你设置的背景叠加一层颜色或者图片蒙板，你可以设置颜色或者图片的透明度来匹配你想要实现的效果。
比如我给Container添加了黑色覆盖，透明度为20%
在Hover标签中设置覆盖颜色为黑色，透明度为60%，那么用户将鼠标移动到Container时，背景会变暗，这样Container中浅色的文字内容将会更加凸显。
3）Border（边框设置）
Border用于设置Container的边框和投影效果。
一般情况下我不会设置最外面嵌套的Container的边框和投影。
在是当Container嵌套在内部的时候，通过边框和投影的设置可以凸显出Container的内容，如果是并列排列的局部，可以让布局看上去更加整齐。
比如下图，我给内部的三个Container都设置了投影和圆角，让他们看起整齐，并且凸显内部的内容。
4）Shape Divider（形状分割线）
形状分割线可以用来做一些Container之间的分割效果，这是UAE插件提供的功能，本站读者可以免费领取一个终身授权，通过页脚二维码联系即可。
你可以通过切换Top和Bottom来选择设置Container顶部还是底部的分割形状，在Type中你可以选择一个你喜欢的形状（只能选择提供的）
比如我在下图的Container顶部设置了一个山峦的形状分割，当然它还有针对形状的宽度，高度等设置，这里就不细说了，自己亲自尝试这些设置选项。
4.5 Container的高级设置
在高级设置中你可以设置当前元素的布局，运动效果，转换响应式，属性以及自定义CSS等等内容。在Elementor中所有元素都有高级设置，元素不同设置项目会有所不同。
下面的内容可以作为你学习其他元素的高级设置项目的参考。
1）Layout（布局）
这里是布局是针对Container元素本身的布局，和前面的布局有所不同，前面的提到的布局是针对Container内部的元素的布局设置。
Margin：用于设置元素和外部元素之间的距离。
Padding：用于设置元素和内部元素的间距。
Align Self：用于设置元素基于自身的对齐。
Order：用于设置元素自身在同级元素中的排列顺序，可以通过自定义设置元素排列在第几的位置，排列顺序从0开始。
下图中我将内部的2个Container一个设为0一个设为2，他们就会排列在相应的位置，而1的位置会空着。
Size：设置元素本身的伸展（Grow）和收缩（Shrink）效果，伸展设置即元素撑满布局，收缩设置即元素收缩到内容的宽度或高度。
Position：设置元素的位置有三个选项：
- Default 默认（根据容器布局和元素设置自然排列）
- Absolute 绝对（将元素设置在浏览器中的一个固定位置，不会跟随页面滑动而滑动会固定在浏览器窗口中的某个位置）
- Fixed固定的（将元素设置在页面中的一个固定位置，元素可以跟随页面滑动而滑动）
以上三条在我在制作页面时经常会用到，理解和掌握之后对制作丰富的页面内容布局非常有帮助。
Z-index：用于设置元素的在页面中处于显示层级，数值越大，越在最上层，数值越小越在最底层，底层的元素可以被上层的元素覆盖。
CSS Classes：用于设置元素的自定义CSS类，设置自定义类之后你可以通过程序代码控制这个元素。
2）Motion Effects（运动效果）
Scrolling Effects（滚动效果）：设置元素滚动特效。它包括垂直滚动、水平滚动、透明度、模糊、旋转、规模等内容，还可以设置在哪些终端生效，以及这些效果是基于整个页面还是基于当前窗口的。具体的参数设置你可以自己设置之后看效果，然后理解。
Mouse Effects（鼠标效果）：用于设置鼠标移动到元素的动态效果，它包含鼠标轨迹和3D倾斜2种效果。
Sticky（粘性固定）：用于设置元素粘性固定，可以黏在顶部，也可以设置黏在底部。同时可以设置它在哪些终端有效。
其中offset用于设置元素按照多少像素向下或向上移动（如果你设置为向下滚动时固定，并不希望它遮挡你的固定页眉时，可以设置其像素为一个大于页眉高度的像素）；Effect Offset用设置在粘性效果开始之前用户必须滚动的像素数（通常设为0或者1即代表一旦向下或向上滚动即发生粘性效果）。
下图中我设置该元素黏在顶部，Offset设为120像素，这样它黏在页眉的下方，不会覆盖住页眉。
如果你希望元素在一个固定的内容区间粘性，那么开启Stay in Colum，代表这个元素只会在它的父级Container内部有粘性效果，一旦页面滑动离开该Container，则粘性效果不在生效。
Sticky功能还可以帮助你实现固定页眉和粘性侧边栏的效果。
Entrance Animation（进入动画）：用于设置改元素进入视觉范围的动画效果。默认是不设置的，如果你需要设置点击开下拉选择你要的进入动画效果即可。
4）Transform（转换）
注意：避免在粘性Container上应用转换属性。这样做可能会导致意想不到的结果。
转换属性可以设置Container的旋转、倾斜、翻转等效果，通过对应选项的设置你可以在编辑窗口直观的看到Container的变化。
你可以通过Normal和Hover来设置默认或者鼠标滑过的转换效果，只需要切换对应标签进行设置即可。
5）Responsive（响应式能见度）
Responsive 设置在不同终端的可见性，默认情况下Container元素在任何终端都是可见的，你可以通过开启隐藏在某一个终端来实现当前Container元素在对应终端对用户不可见。
我最常用的就是在制作页眉时，通过2个Container来制作2个不同的页眉，然后通过Responsive设置，让其中一个Container在移动端影藏，另外一个在PC段隐藏，这样就能实现PC端和移动端不同的Header效果。
5 Container的其他常用功能和操作
5.1 Elementor导航器中的Container
在Elementor导航器中你可以看到你的Container排列和嵌套。
同时你可以修改Container在导航器中名称，这样可以方便通过导航器快速定位到对应的内容。
5.2 Container的响应式设置
Elementor编辑器的所有元素都支持响应式设置，Container也不例外，Container的响应式比起老板版本的Section设置项目更多，更加灵活。
在编辑视图中你可以切换到响应式模式去调整Container的响应式效果。
在Container的所有设置项目中只要是带响应式标记的都是可以在不同终端设置不同的展示效果。并且你可以直接在对应设置项目的通过响应式标记来切换并修改参数。
由于设置项目较多，我这里介绍几个我常用的响应式设置。
1）修改Container在不同终端的内容的排列顺序
这个我在响应式中经常会使用到，尤其是做图片文章布局时候，在PC端为了美观，我会一个段图片在左边文字在右边，下一段图片在右边而文字在左边。
但是到了移动端之后图片和文字是上线显示的，如果还是按照默认的排序方式显示，那么就会出现图片、文字、文字、图片的顺序，这种方式对于用户来说并不是正确的阅读顺序。
所以我会在移动端通过Container的Direction设置项去修改内容的显示顺序。
比如说下面这样一个模块，一个Container中上下排列了2个Container，上面的Container左边是图片右边是文字，下面的Container左边的文字，右边是图片，在PC端显示如下：
但是到了移动端下面的Container文字就会默认在上面，图片在下面，显示就会不协调，情况如下：
那么我们可以通过Direction选项来设置下面的Container内容在手机端的显示顺序。
2）修改Container在不同终端隐藏
在Container元素的Avanced标签卡中的Visibility设置中你可以设置针对哪些终端显示和隐藏Container元素。
3）设置Container内的元素在响应式中的对齐方式
在Container的Layout标签卡下面的Items设置项目中，有Justify Content和Align Items可以设置在不同终端的Container内部的元素对其方式。
5.3 Container的复制与粘贴操作
1) 复制一个Container
在编辑窗口中选中你需要复制的Container元素，右击菜单中点击Copy，即可复制当前选中的Container。
复制是包含Container内的所有元素内容的。
2）粘贴Container元素
复制Container之后，编辑页面移动到你需要粘贴Container的位置。
如果需要粘贴到某一个Container的上方位置，可以点击下面的Container的+号。
在虚线内空白的地方右击，然后在下拉菜单中选择Past菜单。
如果要将复制的Container粘贴到某一个Container的内部，可以选中Container，然后右击，在下拉菜单中选中Past。
说明：原来的Section是不允许这样嵌套粘贴的，这也是Container灵活的地方。
3）创建Container副本
选中Container之后，可以右击点击下拉菜单中的Duplicate菜单，自动创建当前Container的副本在页面中，并且副本会直接添加在原Container的下方或者后面。
另外和其他元素一样Container也支持苦跨站点复制粘贴。在当前网站复制Container之后，在另外的站点的编辑页面需要粘贴的地方，右击菜单中选择Past Form Other Site。
5.4 Elementor嵌套元素中的Container
Elementor目前支持了嵌套元素功能，基于这个功能你可以使用Mega 菜单元素，可以在Tab元素Item内部编辑内容。
我们以Tab元素为例子，以前Tab元素的Item内容只能是文本编辑，如果你想用Elementor编辑需要做一个Elementor模版来动态调用。
而现在通过Container和嵌套元素功能，你可以直接在Tab元素Item内使用Elementor编辑内容，这给页面内容制作带来了很多便捷性。
Elementor原生的Mage Menu也是用相同功能和原理。
视频教程
1）B站视频
总结
Flexbox和Grid布局实现了Container更加灵活的布局效果，可能一开始使用会觉得设置项目相对Seciton来说更多，会不适应，但是用多了熟悉之后，你会更喜欢Container。
