Elementor基础：Container（容器）和Layout（布局）详解

Elementor的容器（Container）不仅简化了网页设计的过程，而且提供了强大的布局自定义能力，让创建专业级别的网站变得手到擒来。

我们使用Elementor制作页面都是从容器开始的。新版的Elementor容器有两种：Flexbox Container和Grid Container。如果你有一定的前端知识并且熟悉flex布局的话，那么这个章节对你来说就很简单，因为现在这两个容器里面使用的都是flex布局。

但是如果你没有相应的知识也不要紧，因为背后的原理非常简单，而且也不需要我们去学习对应的前端知识，只需要知道怎么去应用就好了。

Elementor的容器介绍

容器是Elementor最近更新后新增的一个功能，它比原来的部分（Sections）提供更多的灵活性和控制能力。容器里面可以包含其他容器（叫嵌套容器）或直接添加小部件：例如文本、标题、图片、表单、滑块、标签页、社交媒体图标等，这些都是增强用户体验和互动性的重要部件。

使用容器，我们能够在没有前端技术人员的支持下，轻松地控制每个元素的位置和大小，优化页面的响应性和用户体验。

Elementor容器有两种：Flexbox Container和Grid Container。我们来逐一介绍。

Flexbox Container（弹性盒子模型）

上面的就是Flexbox的这个容器的默认布局，我们可以根据自己想要的效果来选择。

Flexbox 非常适合于元素大小不定的情况，能够提供更好的控制来分配额外的空间或缩放元素。非常适合用于小尺寸组件的布局，如导航栏、列表、表单字段等。

Grid Container（网格模型）

Grid容器的默认布局如上图。Grid容器可以创建复杂的布局结构，如杂志和报纸的布局，以及其他需要精细控制行和列大小的界面。它支持在行和列上定义区域，可以精确地放置元素，同时支持对元素进行重叠。

适用于大型的网页组件布局，如整个页面的布局、图片画廊或其他复杂的用户界面。

使用Elementor的容器来搭建Intel官网模块

好了，我们介绍了容器的基本概念，已经学会1+1了，现在我们来学线性代数吧。

我们现在来搭建一个页面模块，然后我们会在搭建这个页面模块的过程中熟悉Elementor容器的各种设置和使用方法。

这个是Intel官网首页靠近底部的一部分页面模块，我们将使用Elementor的容器来实现这部分效果。（网址：https://www.intel.com/content/www/us/en/homepage.html）

我用一个新的主机来逐步带你们实现这个效果，这个新的主机是在做Siteground教程的时候搭建的。

这个主机中的网站中是没有安装Elementor Pro的，但是也同样能实现这样的效果，这样更能体现Elementor的功能强大。

Elementor Pro的功能更加体现在页面模板和主题构造器（Template、Theme Builder）、以及小部件的多样化上，我们将在下一个章节Elementor Pro vs. Elementor中去详解。

好了，现在我们新建一个页面，点击“Edit with Elementor”进入到可视化编辑页面。

我们刚开始默认的容器只有这么一点，这是因为我们的Page使用的是默认的布局，我们得先将页面布局更改成“Full Width”

点击上方顶部栏的“齿轮”图标进入到Page Settings界面。

选择Page Layout中，选择Elementor Full Width。

然后Elementor会自动帮我们切换成Full Width布局——页面大小占据全屏幕宽度的布局。如下图：

好，回到Intel的这个页面，现在我们先分析一下Intel官网的这部分页面的容器框架是怎么样的：

最外层需要有一层容器（用红色框框起来）
然后里面的内容分为上下两部分，用两个容器装起来（用黄色框框起来的）
上面这部分的内容需要两个容器来装载，所以我们规划在黄色容器里面放两个蓝色容器将这些内容放入其中；下面的这部分内容也是用两个蓝色容器来装载。

我们遇到其他的页面也一样，可以根据页面的内容先对容器进行一个简单的规划分类，这个布局规划不一定需要十分准确。因为我们后面可以新增并拖动这些容器进行容器布局上的更改，十分简单高效。

我们记住这些容器框的颜色，Elementor中真实的容器是没有颜色的，只是我为了我们方便讲这个教程，私自给他们上了个色。

新建红色框的容器

我们先新建一个容器，对应红色容器。因为红色容器内的内容是上下排列的，所以我们选择Flexbox容器的上下布局结构。

把红色容器制作出来后，我们可以点击红色容器上方这6个点的图标调出左侧的“容器设置”选项卡。

“容器设置”这边的“Item”选项可以设置容器内元素的排列方式。如果懂一点前端flex布局会很容易理解，如果想深入了解Flex布局方式的原理，可以看这篇文章。

但是不懂也没关系，一个个试就知道是怎么样的了。

而且我们平常用的就固定那几个选项，我们下面会讲到的。

然后我们点击Elementor顶部栏的“层叠”图标，调出右侧的页面结构布局框。这个页面结构布局对于我们做这种复杂的页面是相当有必要的。

在红色容器中嵌套两个黄色容器

点击红色容器中的+号，新建一个黄色容器。

此时已经新建好一个黄色容器（嵌套在红色容器内），但是如果没有右侧的页面结构，我们肉眼能看到的只有一个容器。（知道为什么这个层级结构是必须调出来了的吧，后面容器多了更难顶。）

我们再新建一个黄色容器，这个时候就不能再点击里面页面容器中的“+”号了，如果再通过这个方式添加容器，就会变成在黄色容器里面添加一个新的嵌套容器（蓝色容器）了。

我们想在想要的是第二个同层级的黄色容器。

通过层级结构选中黄色容器，右键，点击“Duplicate”复制同样的容器，或者使用快捷键Ctrl+D复制。

这样我们就能够获得第二个同层级的黄色容器。

在两个黄色容器嵌套蓝色容器

跟在红色容器里面嵌套黄色容器一样的操作，我们在两个黄色容器中嵌套蓝色容器。

容器嵌套完毕以后我们通过右侧的层级结构给蓝色容器宽度设置布局方式和宽度的比例。

我们需要明确的是：

蓝色容器的布局方式是需要通过黄色容器来控制的
蓝色容器宽度的比例是通过蓝色容器本身来进行设置的

我们看到黄色容器是上下排列，所以刚开始我们创建的红色容器是上下排列的，以此来控制黄色容器的布局方式。

那蓝色容器是左右排列，我们需要通过调整黄色容器来设置蓝色容器的布局方式。

通过层级结构选中黄色容器，先后调整两个黄色容器内部元素（内部元素就是蓝色容器）的排列方式，设置为“从左到右”排列。

得到以下布局。

先后通过层级结构点击这4个蓝色容器，调出这4个蓝色容器的设置选项卡。

然后根据Intel的页面元素占比来调整蓝色容器的比例。

这里的比例只是看页面估算个大概，并不准确。

准确的比例需要有设计图，或者回到原页面按F12打开开发者模式来查看。

我们给第一个黄色容器内的两个蓝色容器分别设置宽度为：35%、25%；

给第二个黄色容器内的两个蓝色容器分别设置宽度为：35%、65%；

这样子的话，我们蓝色宽度就设置完了。

可是布局方式还没有达到我们的效果，怎么办呢？我们可以通过调整黄色容器的元素排列方式来控制蓝色容器的布局方式。

通过右侧层级结构选中第一个黄色容器。在左侧黄色容器的设置中的“Justify Content”选中“Space Between”，即可得到下面的效果。

我们这边不详细讲解这些Flex布局设置（Directions、Justify Content、Align Items）的实现方式是怎么样的了，如果想深入了解Flex布局，再次推荐这篇文章。

第二个黄色容器内的元素（蓝色容器）排列方式跟我们想要实现的页面样式差别不大，先保留不动。

向蓝色容器填充内容（小部件）

现在向蓝色容器填充小部件：

选中蓝色容器。
点击顶部栏的+号，往容器添加小部件，
通过观察右侧层级结构，确保小部件是加在蓝色容器里面，而不是其他红色、黄色容器里。

给第一个蓝色容器添加三个小部件：Text Editor、Heading、Text Editor，确保将小部件放置在第一个蓝色容器内。

这几个小部件是块级元素，放进容器内默认从上往下排列。

给第二个蓝色容器添加元素，我们分析原Intel官网页面这模块的结构看一下。

诶，这不又是一个嵌套容器吗，跟我们红黄蓝嵌套容器一样的，现在又有了一个蓝绿黑的嵌套容器。（放心，里面不会再有嵌套容器的了，微信截图颜色都快用完了。）

那我们跟制作红黄蓝嵌套容器一样，再按照上面的方法来制作这部分蓝绿黑的嵌套容器。

制作完成后，Elementor页面的效果如下：

好，第二个嵌套容器制作完成。

我们继续给第二个蓝色容器添加小部件：Image、Button、Text Editor

给第三个蓝色容器添加两个小部件：Image Box、Button。

分析原页面内容，将第四个蓝色容器更改成Grid容器会更适合我们。

选中第四个容器，更改成Grid容器，然后设置行列数，设置为2行4列。

往第一个栅格中添加小部件Image Box。点击选中Image Box小部件，打开小部件的编辑选项卡。然后删掉Description。

点击“Style”，编辑Image Box的Image Spacing（设置为0）、Title的大小和颜色（14px、#ffffff）。

点击“Advanced”，编辑Image Box的Background，设置为#262626，这个颜色代码是通过开发者模式查看原网页找到的。

还是在Image Box的“Advanced”选项卡中，我们现在编辑Layout设置。

Align Self设置为Stretch。

设置Padding为45px /15px /0px /15px。（目测估算的，不准的）

然后我们去阿里巴巴图标库里面下载一个PNG格式的小图标到本地电脑，然后上传到WordPress中，（SVG格式最好，但是可能你的WordPress中上传不了，需要额外设置。）

在Image Box的“Content”选项卡中，设置Image和Title。

然后复制7个Image Box。

我们看到每个Image Box元素跟Grid容器都有一点间距，这是因为Elementor的容器默认有一定像素的Padding，在此处设置为0即可去掉。

我们把Grid容器的Padding设置为0以后，打开Grid容器的Layout标签，设置每个Image Box小部件之间的空隙为6px。

调整后页面效果如下：

然后我们往第一、二、三个蓝色容器里面填充小部件，并对小部件进行样式的调整，这边会略过部分内容，但是基本所有的设置方式在这边我们上面都有讲过的。

第三个蓝色容器中的左对齐布局方式没讲，可以在Image Box小部件的“Style”选项卡中的Alignment中设置成“Left”即可。

我们通过添加小部件和调整小部件的样式实现如上图的效果后，再来讲解如何实现以下效果：

Developer resources这个Heading如果想往上面一点移动应该怎么设置？右侧第二个蓝色容器底部的文字想往上移动应该怎么设置？
Join按钮的样式怎么设置，并且左边的图片如何设置成与Join按钮等高？
Explore按钮的样式怎么设置？
把左侧标签卡收起来后，左边Image Box会比右边高一点，怎么办？

首先针对我们的第一个问题，点击Heading小部件的“Advanced”选项卡，然后进入到“Layout”设置，调整Margin属性。调整的时候我们先点击右边的“链接”图标取消值联动，单独设置Margin-Top为负值即可将这个小部件。我们可以通过键盘的↑↓键来调整数值，进行细微调整。

右侧的Official Resources的内容也是同样的原理：

首先将两个绿色容器的Padding设置为0
然后将小部件的Margin-Top设置为负值，其他方向的Margin值保持为0

现在我们来解决第二个问题。

点击Image小部件，在“Content”选项卡中设置你想放的图片，然后在“Style”设置图片的高度，我这里设置“74px”
点击Button小部件，在“Style”选项卡中设置Border Radius为0px；Text Color设置为#0054AE；Background Type选择Classic，Background Color设置为#f7f7f7；Border选择Solid，Border Width设置为1px，Border Color设置为#0054AE；Padding设置为一个合适的值，使之跟左侧Image等高。