使用 Elementor 的最新 Container （容器）元素相比于早期版本中的 Inner Section 元素有几个显著的优势。Container （容器）元素是 Elementor 团队为了提升灵活性、性能和设计能力而引入的，这些改进意味着更加强大和灵活的布局选项，对设计者和开发者来说是一个重要的进步。
一、Container （容器）的好处
- 更灵活的布局控制:
- 容器元素提供了更多的布局选项，如 Flexbox 和 Grid，允许更复杂和精细的布局控制。
- 它可以在一个容器内部管理多个子元素，而不仅仅是列。
- 改进的响应式设计:
- 容器元素允许对不同的屏幕大小进行更精细的调整，提供了更好的响应式设计控制。
- 它支持更复杂的响应式布局，例如在不同设备上显示或隐藏特定元素。
- 减少DOM元素数量:
- 与 Inner Section 相比，容器元素可以减少生成的 DOM (文档对象模型) 元素的数量，这有助于提高页面加载速度和性能。
- 更少的 DOM 元素也意味着更简洁的代码和更好的SEO优化。
- 更好的边距和填充控制:
- 容器提供了更灵活的边距和填充设置，允许对子元素进行更精细的空间控制。
- 这有助于创建更精确的设计，特别是对于复杂的布局结构。
- 更多的设计选项:
- 容器元素提供了更广泛的设计选项，如背景、边框、形状分割器等，使设计更具创造性和多样性。
嵌套标签是 Elementor 中创建良好组织、层次化内容结构的强大工具，如果要做出以下以下效果务必先学会使用容器，再去学习嵌套标签的使用👉🏻
下面我将教大家如何使用 Grid 和 Flexbox Container
二、 Elementor 设置
从设置上，Elementor 和 Elementor Pro 最新版默认 Grid Container 和 Flexbox Container 是开启的，如果是旧版本的可以自行开启下。
进入 Elementor 编辑页面进行实操
和列中行不同，每次新增行，都会先选择框架，有 Flexbox Container 和 Grid Container 两种选择，因为我的 Elementor 已经汉化，建议汉化后查看教程，汉化教程👉🏻
2.1 Inner Section 如何转换为Grid Container 和 Flexbox Container
Grid Container 和 Flexbox Container 这么好用，Inner Section 转化过去很简单，选中 Inner Section 点击转化按钮，在这行下面就会出现一模一样已经转换好的行。
2.2 Flexbox
Flexbox 是一种布局模式，Flexbox 像积木一样拼接组成了一整个网站，把一个网站页面一行一行来切分，每行几乎都可以使用 Flebox 的结构做出来，非常实用。
2.2.1 Flexbox 的功能
这里有现成的左右布局（现成布局实操实例1，选不到布局实操实例 2），还有上下两行的布局，先以第一个为例子来说下基础功能。
选择了方向向下的 Flexbox ，添加的所有组件，自动向下堆叠
Flexbox 可以嵌套 Flexbox，而 Grid 不能，Flexbox 可以做更加复杂的结构。对比之前的 Inner Section 有可飞跃的布局效果。
务必注意保持页面简洁
减少嵌套层级：层级过深，难以维护。应保持在3-5个容器，确保结构简洁，有利于手机端自适应的调整
选择了方向向右的 Flexbox ，使用 Elementor 的复制容器里面的嵌套的容器时，复制出来的容器自动向右堆叠
Flexbox 的宽度非常有用，可以更好的设计布局，例子：从上面 2 行下面 1 行，通过把上面第 1行的宽度设置为 100 px，上面第2 行和下面第 1 行设置为 50px，就可以变为上面 1 行下面 2 行
上面的例子是第1 行设置为 100px，那么中间某个 Flexbox 设置 100px 就可以单独成为一行，而且其他的 Flexbox 布局不变
Flexbox 嵌套的 Flexbox 可以单独设置方向
对 Flexbox 嵌套的 Flexbox 一次性对齐设置内间距
2.2.2 对齐方式
主轴（Main Axis）
主轴定义：容器中子元素的排列方向。这个方向可以是水平的或垂直的，具体取决于你选择的排列方式（即 Flex 方向）。在 Elementor 中，你可以通过设置“Flex Direction”属性来控制这一点：
row：主轴水平，元素从左到右排列。column：主轴垂直，元素从上到下排列。
副轴（Cross Axis）
副轴垂直于主轴。它的方向也取决于“Flex Direction”的设置：
- 如果主轴是水平的（row），副轴就是垂直的。
- 如果主轴是垂直的（column），副轴就是水平的。
实操例子
容器方向为下时，主轴就是垂直的，副轴就是横着的
容器方向为右时，主轴就是水平的，副轴就是垂直的
2.2.3 容器的换行功能
在 Elementor 中，容器的换行功能允许你控制容器中子元素的排列方式，特别是当子元素的数量超过容器宽度时。这个功能可以帮助你创建更灵活的布局，适应不同屏幕尺寸和设备。
换行功能可以实现的一些效果：
1. 响应式布局：当容器中的子元素在一行上放不下时，可以选择让它们自动换行到下一行，以适应不同的屏幕尺寸和设备类型。这样可以确保你的网页在各种设备上都能够良好地显示。
2. 创建多列布局：通过设置容器的换行方式，你可以轻松地创建多列布局。例如，你可以将容器设置为水平排列（Flex Direction 设置为 row），并根据需要设置子元素的宽度，当子元素数量超过容器宽度时，它们会自动换行到下一行。
3. 实现网格布局：将容器设置为网格布局，使得子元素按照网格的方式排列。你可以通过控制容器的列数和子元素的宽度来创建不同的网格布局效果。
4. 创建瀑布流布局：瀑布流布局是一种流式布局，子元素按照一定规则依次排列，当一行放不下时自动换行到下一行。通过在 Elementor 中设置容器的换行方式，你可以轻松地实现瀑布流布局效果。
实操例子：
1. 设置容器为换行
2. 设置容器中的组件→高级设置→自定义→选择百分比（平均等分时减少 3%，因为组件和组件间隙也占用）
放四个自定义宽度为 47%的图像框组件效果
自适应手机可单独把自定义宽度调为 100%
2.2.4 Flexbox Container 实操例子👉🏻选择现成布局
想做嵌套的 Flexbox 的内不同方向的叠放，比如下图非常典型的 Banner 该怎么办呢
只要学会这个结构，就可以掌握 Flexbox 的基础用法
首先是左右结构，选择第三个
依次把标题、文本编辑器、容器（容器中放入 2 个按钮组件）放入左边，图片组件放在右边
因为第一步我们选择容器方向向下，所以按钮所在的容器方向自动向下，我们把按钮所在的容器方向调为水平即可
调完里面的细节，点击最外面的容器，调节最小高度600 左右即可，设置副轴为居中，典型排版的 banner 就做好了，有了外部的基础框架我们才好去润色。
现在从外到内调整，选择最外面的 Container ，点击样式→标准→小画笔→上传图片
选择图片组件，上传图片，如果想要透明背景，一定要抠图
上传之后我们发现特别的空，没有展示完整的背景，继续进行调整，如图的位置、Display Size 是常见的调整。
最外面的 Container 调整之后，再往里面调节细节，选中标题，在内容里面复制粘贴文案
选中文本编辑器，在内容里面复制粘贴
最后把按钮文案修改下
最后调整的结果
2.2.5 Flexbox Container 实操例子👉🏻选不到的布局
实际实操中，一般是选不到完美的布局的，比如如下布局，Flexbox Container 给出的结构没办法做到，继续要进行一些操作。
首先，分析布局结构
需要3 个Container ，1 个在上面，2 个在下面，必须选择有上下结构的结构
选择第一个 Container ，设置宽度为 100，剩下2 个为 50 即可
填入对应组件，再修改从内到外修改细节即可。
2.2.6 Flexbox 总结
1. 根据结构，外层的 Flexbox 布局要先选好，有上下布局必须选择有必须选择有上下布局的结构
2. Flexbox 可以包含 Flexbox 、Grid
3. 每个 Flexbox 都可以单独设定方向插入组件
2.3 Grid
Grid 是网格式设计的，它允许你在两个方向上👉🏻纵向和横向上面控制元素的布局，特别适合简单网格的设计和对齐。
2.3.1 什么时候选择使用 Grid
当你需要在行和列上对齐元素时，展示图片等行列宽度一样的元素，布局比 Flexbox 更简单，网格式分布
2.3.2 Grid 的使用和功能
- 添加一个新的部分：点击 “+” 按钮添加一个新的部分。
- 选择列结构：调整列行的个数
Grid 对齐方式
Grid 间距
调整行中 Grid Container 的宽度
组件的排列顺序，选择行为横向，列为纵向
2.3.3 Flexbox 和 Grid 的关系
相互包含，根据对齐方式和布局，组合嵌套使用。
也可以相互转换
