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教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片
WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家
Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Wordpress插件与设计 - JetEngine 通用教程 2 - Labels和Advance Setting的设置方法 - 特色图片
JetEngine 通用教程 2 - Labels和Advance Setting的设置方法
Wordpress插件与设计 - Elementor 专业教程 26 - Template小工具的设置和使用方法 - 特色图片
Elementor 专业教程 26 - Template小工具的设置和使用方法
Wordpress插件与设计 - Elementor 通用教程 6 - Elementor Kit Library的使用方法 - 特色图片
Elementor 通用教程 6 - Elementor Kit Library的使用方法
Wordpress插件与设计 - Elementor 基础教程 22 - 切换小工具的设置和使用方法 - 特色图片
Elementor 基础教程 22 - 切换小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法 - 特色图片
Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法
Wordpress插件与设计 - WP教程 7 - 掌握添加、编辑图片以及常规设置的技巧 - 特色图片
WP教程 7 - 掌握添加、编辑图片以及常规设置的技巧
Wordpress插件与设计 - Elementor 专业教程 12 - Price Table小工具的设置和使用方法 - 特色图片
Elementor 专业教程 12 - Price Table小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 12 - 图标框小工具的设置和使用方法 - 特色图片
Elementor 基础教程 12 - 图标框小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - ZelinAI - AI应用构建和运营平台 - 特色图片
ZelinAI - 解放双手,AI助力,零代码轻松实现!
AI工具与服务推荐 - Suno - AI音乐创作平台 - 特色图片
Suno - AI音乐创作平台,点燃您的音乐梦想
AI工具与服务推荐 - 米啫喱AI绘画 - 图像生成与创意辅助工具 - 特色图片
米啫喱AI绘画 - 满足多种绘画需求,一站式激发创意灵感
AI工具与服务推荐 - DoubleYard - RPA手写识别技术公司 - 特色图片
DoubleYard - 手写字符精准识别,RPA流程自动化全面升级
AI工具与服务推荐 - Simbian - 自主安全平台 - 特色图片
Simbian - 释放生成式AI潜能,为企业量身打造安全智能防线
AI工具与服务推荐 - 有道写作 - 智能英文写作辅助工具 - 特色图片
YouDao Writing - 英文写作助手,助你写得更好,更流畅!
Canva Post
Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片
Canva新手指南8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片
Canva新手指南3 - 无需编程!用Canva创建专业一页式网站的指南
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Smm Post
社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片
将爱好转为事业!通过YouTube频道赚钱的秘诀
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片
如何正确选择一款适合自己的视频编辑软件?
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片
一文读懂YouTube Premium会员权益!让你不再犹豫
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
AI工具 分类筛选
AI Main Category checkbox