Wordpress插件与设计 - Elementor 基础教程 20 - 标签小工具的设置和使用方法 - 特色图片

Elementor 基础教程 20 - 标签小工具的设置和使用方法

Elementor标签小工具是一种高效简便的创建标签内容的工具。

使用这个小工具,你不仅可以轻松创建多个标签,还可以在每个标签内设定不同的内容。这大大方便了大量信息的组织和展示,而且不会占用过多页面空间。

每个标签的颜色、排版、元素等都可以自定义,可以设计出非常有感觉的标签。

本文将说明标签小工具的功能设置和使用方法。

Elementor 标签小工具

首先,把标签小工具拖放到编辑栏内,如下图所示。

拖放小工具到编辑栏后,可以看到如下界面。

1.标签小工具的内容标签

标签小工具的内容标签只有标签设置项。其主要设置选项如下:

  1. 标签项目
  2. 位置
  3. 对齐

1-1 标签项目

标签项目是添加或删除标签的设置选项。默认的标签只有两个项目,如下图所示。

在标签项目中可以添加,复制,删除项目,如下图所示。

上图中,点击复制按钮即可复制指定的项目到下方,点击删除时可删除指定的项目。点击《+新增项目》时,则会在下方添加一个新的项目,如下图所示。

接下来将详细介绍每个项目的设置内容。点击某一个项目,就会弹出设置区域,如下图所示。

可以看到项目的编辑区域有标题与描述设置选项。 在标题和描述中输入内容时,编辑区域的标签小工具也会发生相应的变化,如下图所示。

上图中自定义了标题与描述内容,还在描述中放入了一张图片。可以看到,项目中编辑的内容已同步到标签小工具的项目中。

关于如何编辑描述内容的详细功能设置和使用方法,请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法

1-2 位置

位置是指定标签排列位置的设置选项。可以在”水平”和”垂直”中选择。

选择水平时,标签标题在描述的上方位置,选择垂直时,标签标题在描述的左边位置。

1-3 对齐

对齐是指定标签项目标题在水平或垂直方向的对齐设置选项。

选择水平方向时,对齐选项是”左对齐”,”居中对齐”,”右对齐”,”两端对齐”,如下图所示。

选择垂直方向时,对齐选项是开始对齐,中部对齐,结束对齐,两端对齐,如下图所示。

2.标签小工具的样式标签

样式标签的主要设置选项如下:

  1. 标签
  2. 标题
  3. 内容

2-1 标签

标签是自定义项目标签边框以及背景颜色的设置项,如下图所示:

  • 边框宽度:自定义项目边框宽度的设置选项,可在数值0-20之间进行设置。数值越大,边框宽度越大。
  • 边框颜色:自定义项目边框颜色的设置选项,可用颜色选择器或全局颜色进行设置。
  • 背景颜色:自定义项目背景的设置选项,可用颜色选择器或全局颜色进行设置。

2-2 标题

标题是自定义项目标题颜色、排版和装饰效果等设置选项,如下图所示:

  1. 颜色:自定义选择或替换项目标题颜色的设置选项。上图中为浅红色。
  2. 当前颜色:自定义指定或替换当前被选项目的标题颜色设置选项。上图中为黑色。
  3. 排版:自定义排版项目标题的字体、大小、粗细、行高等设置选项。
  4. Text Stroke:给项目标题文字添加轮廓线效果的设置选项。上图中为黄色轮廓线。
  5. 文本阴影:给项目标题添加阴影效果的设置选项。上图中可以看到右下方的阴影效果。

2-3 内容

内容是自定义项目标题颜色、排版、添加文本阴影效果等设置选项,如下图所示:

  1. 颜色:自定义选择或替换项目标题颜色的设置选项。上图中为粉色。
  2. 排版:自定义排版项目标题的字体、大小、粗细、行高等设置选项。
  3. 文本阴影:给项目标题添加阴影效果的设置选项。上图中可以看到右下方的阴影效果。

标题和内容都属于文本类设置选项。具体功能设置和使用方法,请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法》。

3.标签小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法,请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以下是实战案例样本。

以上就是标签小工具的功能设置和使用方法,希望本篇内容对您使用Elementor有所帮助。

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

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - WP教程 9 - 如何轻松添加文件下载功能以提升用户体验? - 特色图片
WP教程 9 - 如何轻松添加文件下载功能以提升用...
Wordpress插件与设计 - Elementor 专业教程 7 - Slides小工具的设置和使用方法 - 特色图片
Elementor 专业教程 7 - Slides小工具的设置和...
Wordpress插件与设计 - Crocoblock 通用教程 1 - 购买或订阅Jet插件和在WP中激活插件的方法 - 特色图片
Crocoblock 通用教程 1 - 购买或订阅Jet插件和...
Wordpress插件与设计 - Elementor 专业教程 12 - Price Table小工具的设置和使用方法 - 特色图片
Elementor 专业教程 12 - Price Table小工具的...
Wordpress插件与设计 - Elementor 基础教程 10 - 图标小工具的设置使用方法 - 特色图片
Elementor 基础教程 10 - 图标小工具的设置使用...
Wordpress插件与设计 - Elementor 通用教程 4 - 高级标签的设置和使用方法 - 特色图片
Elementor 通用教程 4 - 高级标签的设置和使用...
Wordpress插件与设计 - Elementor 基础教程 6 - 按钮小工具的设置和使用方法 - 特色图片
Elementor 基础教程 6 - 按钮小工具的设置和使...
Wordpress插件与设计 - Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法 - 特色图片
Elementor 专业教程 25 - Facebook Page小工具...
Wordpress插件与设计 - Elementor 基础教程 5 - 视频小工具的设置和使用方法 - 特色图片
Elementor 基础教程 5 - 视频小工具的设置和使...
Wordpress插件与设计 - Elementor 基础教程 17 - 计数器小工具的设置和使用方法 - 特色图片
Elementor 基础教程 17 - 计数器小工具的设置和...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

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

WP教程 与设计
Wordpress插件与设计 - WP教程 9 - 如何轻松添加文件下载功能以提升用户体验? - 特色图片

WP教程 9 - 如何轻松添加文件下载功能...

Wordpress插件与设计 - Elementor 基础教程 8 - 间隔小工具的设置和使用方法 - 特色图片

Elementor 基础教程 8 - 间隔小工具的...

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

Elementor 专业教程 32 - Progress Tra...

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

Elementor 专业教程 12 - Price Table...

Wordpress插件与设计 - Elementor 基础教程 5 - 视频小工具的设置和使用方法 - 特色图片

Elementor 基础教程 5 - 视频小工具的...

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

Elementor 专业教程 30 - Paypal Butto...

AI工具 与服务
AI工具与服务推荐 - 我来(wolai) - 云端协作和个人笔记应用 - 特色图片

wolai - 为你的灵感、想法和知识提供一...

YYP-2024-06-28-14-01-07

Supermanage AI - AI赋能,让你的一对...

YYP-2024-06-29-07-45-56

Syncly - 实时监控客户反馈,洞悉真实...

AI工具与服务推荐 - 绘蛙 - AI图文生成平台 - 特色图片

HuiWa - AI一键生成,商品瞬间引人瞩目

AI工具与服务推荐 - Sweephy - 金融科技AI集成解决方案 - 特色图片

Sweephy - 金融科技AI平台,简化数据分...

YYP-2024-06-28-14-00-38

WTF DOES THIS COMPANY DO - 一语解惑...

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

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

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

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

Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片

Canva新手指南3 - 无需编程!用Canva创...

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

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

Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片

Canva新手指南2 – 告别PS!全面解析Can...

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

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

社媒运营 与营销
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片

如何正确选择一款适合自己的视频编辑软...

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

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

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

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

社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片

YouTube运营全攻略:从零到一打造你的油...

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

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

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

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

AI工具 分类筛选
AI Main Category checkbox