Wordpress插件与设计 - Elementor 通用教程 2 - 编辑段,编辑栏,内部区段是什么? - 特色图片

Elementor 通用教程 2 - 编辑段,编辑栏,内部区段是什么?

在使用 Elementor 前,你需要先了解 Elementor 编辑区域的组件名称以及使用方式。

Elementor 的编辑区域的组件包括编辑段,编辑栏,内部区段,小工具。

本教程将说明编辑区域中编辑段,编辑栏,内部区段的区别以及使用方法。

Elementor编辑区域

Elementor 主要有两个区域:功能区,其中包含小工具,以及编辑区域,用于编辑搭建网页。如下图所示:

功能区主要包含可设置的小工具,编辑区域则主要是组合设计要素的区域,包含编辑段,编辑栏,内部区段等组件要素。

1. 编辑段和编辑栏

编辑段和编辑栏是编辑区域内的框体要素,编辑段在外,编辑栏在内是最基本的结构。

1-1 编辑段

首先,我们来说明编辑段。简单地说,编辑段就是容纳小工具的容器。

上图中红框内就是 Elementor 的编辑段。为了方便理解,我们可以将编辑段看作是一个房子。

如果要添加一个段,我们可以点击上方的加号按钮,如下图所示:

点击加号后,可以看到有很多种编辑段的选项。如下图所示:

在这里选择编辑段的结构,决定了编辑栏的数量。换句话说,就是选择给房子分多少个房间的选项。

选择分3段后,可以看到如下图的画面。

上图中,我们可以看到一个编辑段内出现了三个编辑栏。也就是说,给一个房子弄了3间屋子。

1-2 编辑栏

接下来我们要讨论编辑栏。编辑栏是用来存放设计元素(小工具)的容器,也就是人们住的房间。

在前面的编辑段说明中,我们把编辑段比作房子。那么,编辑栏就是房子内的房间。

因此,一个编辑段内可以有多个编辑栏,可以是3个,也可以是5个。可以根据设计需求进行设置。

总结一下,编辑段内有编辑栏编辑栏内可放置各种小工具

下面我们给每个编辑栏添加一个小工具。如下图。

第一个编辑栏中放入了图片,第二个编辑栏中放入了标题,第三个编辑栏中放入了按钮小工具。

如果想要添加一个编辑栏,只需点击途中某一个编辑栏右上方的四格按钮并点击右键,选择【新建列表】即可添加空白的编辑栏。如下图

按照上面的操作,你可以看到编辑段中添加了一个新的编辑栏。

如果你想改变添加的编辑栏的显示位置,可以用以下两种方法进行左右移动。参考如下视频

编辑栏内可以放置多个小工具,但所有的小工具都是从上到下排列(按照放置的顺序),如下图

虽然编辑栏内可以放置多个小工具,但只能垂直排列。

那么如何在一个编辑栏内水平并排小工具呢?

其实,Elementor的小工具中,就有解决此问题的小工具,那就是区段小工具

2.内部区段小工具

内部区段小工具就是将编辑段功能添加到编辑栏内的小工具。

简单地说,就是在一个房间内再划分出几个空间区域。如下图

上图中可以看到,一个编辑栏内横向排列了图片小工具和按钮小工具。

因为是内部的编辑段,所以可以添加多个内部编辑栏。

内部区段内的编辑栏设置方法与一般编辑栏的设置方法是一样的。具体添加多少个内部编辑栏,可根据设计需求添加。

3.总结

以上就是编辑段,编辑栏,内部区段的关系以及使用方法。

总结一下,

  • 编辑段:房子
  • 编辑栏:房子内的房间
  • 内部区段:在房间里再划分出几个空间区域
  • 小工具:住在房子里的人

编辑段,编辑栏,内部区段的关系其实非常简单。

关于内部区段的详细设置可参考《Elementor 基础教程 – 内部区段 小工具的使用方法

希望本篇内容能帮助你更好地使用Elementor

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - Elementor 专业教程 13 - Flip Box小工具的设置和使用方法 - 特色图片
Elementor 专业教程 13 - Flip Box小工具的设置...
Wordpress插件与设计 - Elementor 专业教程 12 - Price Table小工具的设置和使用方法 - 特色图片
Elementor 专业教程 12 - Price Table小工具的...
Wordpress插件与设计 - Elementor 专业教程 7 - Slides小工具的设置和使用方法 - 特色图片
Elementor 专业教程 7 - Slides小工具的设置和...
Wordpress插件与设计 - Elementor 基础教程 12 - 图标框小工具的设置和使用方法 - 特色图片
Elementor 基础教程 12 - 图标框小工具的设置和...
Wordpress插件与设计 - Elementor 基础教程 3 - 标题小工具的设置和使用方法 - 特色图片
Elementor 基础教程 3 - 标题小工具的设置和使...
Wordpress插件与设计 - WP教程 26 - 使用区块样板,可让网页设计变得轻松又有趣! - 特色图片
WP教程 26 - 使用区块样板,可让网页设计变得轻...
Wordpress插件与设计 - Elementor 专业教程 17 - Review小工具的设置和使用方法 - 特色图片
Elementor 专业教程 17 - Review小工具的设置和...
Wordpress插件与设计 - Elementor 专业教程 11 - Price List小工具的设置和使用方法 - 特色图片
Elementor 专业教程 11 - Price List小工具的设...
Wordpress插件与设计 - Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法 - 特色图片
Elementor 专业教程 20 - Share Buttons小工具...
Wordpress插件与设计 - Elementor 专业教程 27 - Lottie小工具的设置和使用方法 - 特色图片
Elementor 专业教程 27 - Lottie小工具的设置和...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - Elementor 基础教程 11 - 图像框小工具的设置和使用方法 - 特色图片

Elementor 基础教程 11 - 图像框小工具...

Wordpress插件与设计 - Elementor 专业教程 15 - Media Caroucel小工具的设置和使用方法 - 特色图片

Elementor 专业教程 15 - Media Carouc...

Wordpress插件与设计 - Elementor 专业教程 13 - Flip Box小工具的设置和使用方法 - 特色图片

Elementor 专业教程 13 - Flip Box小工...

Wordpress插件与设计 - Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法 - 特色图片

Elementor 专业教程 33 - 制作MegaMenu...

google-sheets-to-wordpress-table-sync-plugin tumnail

告别手动更新?如何用Google Sheets打...

Wordpress插件与设计 - WP教程 31 - 不可不知的WP工具功能,让站点管理和维护更高效! - 特色图片

WP教程 31 - 不可不知的WP工具功能,让...

AI工具 与服务
YYP-2024-07-14-08-22-57

ShortlistIQ - AI招聘僚机,瞬间发现隐...

AI工具与服务推荐 - Grok - 高级AI语言模型 - 特色图片

Grok - 高性能开源语言模型,领跑AI领...

AI工具与服务推荐 - Raycast - AI效率工具 - 特色图片

Alfred - 可扩展的启动器,快速、符合...

AI工具与服务推荐 - AISEO - AI写作助手 - 特色图片

AISEO - AI写作助手,快速生成SEO优化...

YYP-2024-06-29-07-58-39

AI Storyboard Generator - 高效规划视...

AI工具与服务推荐 - RODIN Diffusion - AI 3D数字人像生成器 - 特色图片

RODIN Diffusion - 雕塑栩栩如生3D数字...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片

Canva新手指南7 - 掌握Canva Mockup功...

Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片

Canva新手指南8 - 提升设计效率!使用...

Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片

Canva 相关教程 3 - 设计初体验!用Can...

Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片

Canva 使用教程 9 - 如何巧妙地利用建...

Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片

Canva 相关教程 1 - 未来的设计在这里...

社媒运营 与营销
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片

YouTube Shorts!解析短视频创作和收益...

社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片

新手必看!解锁YouTube视频广告投放优...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片

一文读懂YouTube Premium会员权益!让...

社媒运营推广 - Youtube - 从0到10万!12个实用技巧快速提升YouTube频道的订阅量 - 特色图片

从0到10万!12个实用技巧快速提升YouTu...

社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

AI工具 分类筛选
AI Main Category checkbox