Elementor中 section/column/elements都是什么？如何使用？

Elementor中常见的基本组成部分：section（段），column（列），elements（元素）。这三个部分是 elementor页面编辑器中基础的组成。很多新手学习 elementor建站时都对这三个概念比较模糊，没有一个清晰的分辨。魏艾斯笔记在本文中对这三个部分进行详细讲解。

Elementor 插件是十分受欢迎的 WordPress 页面构建器之一，可以把你的内容按照不同样式布局在页面中。想要学习建站，了解和熟悉这三个基本组成部分是十分必要的。

1、 Section column elements 三者关系

Section，column， elements 这三个部分之间是不同层级的关系，与 photoshop的层概念类似，最底层section，中间 column，最上层 elements（元素）。

elements（元素）是访客能到的内容。
section（段）和 column（列）是访客看不到，在后台编辑区域才能看到的部分，用于页面布局。

它们三者之间的关系要搞清楚了，编辑页面时经常需要更改属性，我们要弄明白属性影响范围，和在页面的效果，对于新手来说很容易搞混了。

2、section（段）

section是 elementor编辑区域中最大的组成部分。

section 是虚拟的盒子，一个 section 占一行，用户在网页看不到，你在后台编辑页面时才能看到。

当我们在 page中添加一个页面，使用 elementor编辑时，在页面编辑区域看到如下图所示的图标，点击红色背景+号的就可以添加 section（段） 和 column（列） 。

如下图所示，可选择添加的 section（段）中包含了几个 column（列）。

老魏选择添加 2列。

如下图所示，蓝色边框（下图的①）就是已添加的 section（段），而下面带 + 号的两个灰色边框小格子（下图的②和③）就是列。

当我们修改 section参数时，会影响到该 section 本身及内部的 column 和 elements。

如下图所示点击 section 的 edit section（三上三下共六个小原点）按钮时，在页面左侧能看到 edit section 字样的属性设置区域，一共包括下面三项：

• Content内容：设置 section 内容显示方式、对齐方式、上下位置、布局结构等。
• Style样式：背景布局方式、叠加方式、边界、分隔线、排版等。
• advanced高级：内间距、外间距、运动效果、响应式、自定义属性、自定义CSS等。

3、column列

column 是一个虚拟的格子，用于页面布局和存放网页内容（elements）。

一个 section 能划分成1~6列，更细化的布局页面内容，而 column 里面可以再嵌套 column。

你可以这么理解：页面中有很多个盒子（section），一个盒子占据一行。盒子中可以划分出多个格子（ column，像不像出租屋中的格子间？），格子中可以再划分（嵌套）很多格子。格子里面存放 elements（元素）。访客能看到elements，看不到盒子和格子。

你使用 section 和 column 布局页面，再放入元素内容，就设计出了漂亮且功能全面的网站。

鼠标放到列上面时，能看到 edit column按钮，右键看到很多功能，这一点和 section是一样的。

点击 edit column按钮看到左侧三个自定义选项卡：布局、样式和高级选项，与 section类似，但功能不同。

布局

• Column Width：修改列宽度，百分比格式。
• vertical align垂直对齐方式：顶部、中间、底部、周围间距、均匀间距，方便把内容放到一列的预定位置。
• horizontal align：水平对齐可以在同一行中水平对齐小部件。选择不同定位包括开始、居中、结束、间距、周围间距和均匀间距。
• Widget 小工具选项：设置你添加的小部件之间的空间。
• HTML 标签：为列设置 html标签。

样式

• 背景类型：经典、渐变或幻灯片背景。经典背景可以设置背景颜色或图像；渐变背景设置颜色渐变背景；幻灯片背景创建幻灯片类型的背景。此外，您可以设置背景叠加、混合模式或使用 CSS 过滤器进行播放——在模糊、亮度、对比度和饱和度之间进行选择。
• 列边框样式：设置边框类型和边框半径。添加边框阴影。
• 排版：标题颜色、文本颜色、链接颜色、链接悬停颜色、文本对齐方式。

高级

• 外边距：控制元素边框外有多大空间。
• 内边距：控制边框内有多少空间以及正在编辑的元素内容。
• Z轴的数值
• CSS ID 和 CSS类
• 动作效果：滚动效果、鼠标效果、动画效果选择等。
• 响应：响应式可见性仅在预览或实时页面上生效，而不是在Elementor中进行编辑时生效。
• 属性：为包装元素设置自定义属性。每个属性在一个单独的行中。使用|字符将属性键与值分开。
• 自定义CSS：为当前页面添加自定义CSS属性。

4、elements（元素）

元素包括了很多种类：常见的有 text文本，heading标题，button按钮，img图形等，每个元素的属性也都不一样。

元素放在 column 列中，一列包含多个元素。

Elementor 免费版和专业版中提供了近百种元素组件，完全能够搭建常见 B2B、B2C网站了。

如果以上元素无法满足需要，可以去 WordPress插件中搜索“elementor addon”能找到很多 Elementor插件，提供多种多样的页面元素。

老魏建议你优先使用 Elementor 自带的元素。

插件越多，网站速度越慢。

我们以添加“标题元素”为例，简单讲解如何使用。

如下图所示，鼠标左键拖拽基本的标题元素到右侧的 column（列）中。

在“标题元素”右侧点击“铅笔”图标，从左侧开始修改、设置相关的属性参数。

比如添加标题文本、链接、尺寸、HTML标签、对齐方式等。

所有元素都有三个属性选项如下：

• Content内容：元素内容，比如文字，图片。
• Style样式：元素样式，比如字体，图片透明度等，类似 word 中对字体的一系列设置项。
• Advanced高级：控制元素外边距、内边距、背景、边框、屏蔽、定位、响应式、属性、自定义CSS等。

其他元素的添加、设置方式都是一样的，区别就是元素功能、属性参数不同。

后续老魏会对 elementor元素分享具体情况和属性设置。

5、总结

Elementor是由 section（段），column（列），elements（元素）组成的。section和column用来布局页面，可以灵活组织并规划页面布局方式，而元素才是访客能看到的具体内容，修改元素的属性参数，会影响访客看到的内容效果。

所谓的设计网页，就是通过以上三个组成部分的搭配组合，像搭积木一样一层层的加码，累积出我们想要的网站样式。你越熟悉，运用起来就越自如。

希望大家都重视这三个部分，了解、熟悉和多多实践操作，一边看老魏的教程一边操作，加深记忆。

通过分享教程，老魏发现 Elementor页面编辑器使用起来非常直观，当你了解和熟悉了这三个基本组成部分后，即使不懂代码也能快速创建网页内容。