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

Elementor 基础教程 24 - 警告小工具的设置和使用方法

Elementor警告小工具是用于在页面中添加提示或重要信息的工具。

使用该工具不仅可以方便地传递站内的通知、隐私政策或其他任何需要传递的信息,还可以自定义文本字体、颜色、图标等,以统一站内的设计。

虽然很多网站常用弹窗来显示重要信息,但静态的通知也是一个不错的选择。

本教程将说明警告小工具的功能设置和使用方法。

Elementor 警告小工具

首先,将警告小工具拖放到编辑栏内。如下图

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

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

警告小工具的内容标签只有内容设置项。其主要设置选项包括:

  1. 类型
  2. 标题与描述
  3. Dismiss Icon

1-1 类型

类型是指定或替换警告信息类型的设置选项。

  • 信息:蓝色
  • 成功:绿色
  • 警告:黄色
  • 危险:红色

根据要传递的内容,选择其中一个类型即可。默认是信息。

1-2 标题与描述

标题与描述是给警告小工具添加信息标题与内容文本的设置选项。

上图中的标题和描述是默认内容。

  • 标题:这是一个警报
  • 描述:我是一个描述。点击编辑按钮来改变这个文本。

根据传达的信息,自定义设置标题和描述。

1-3 Dismiss Icon

Dismiss Icon是显示或不显示关闭图标的设置选项。默认是显示

  • 显示(默认):警告小工具的右上方会显示关闭此信息的《×》按钮。
  • 隐藏:关闭信息的《×》按钮将不显示。选择隐藏时用户则无法关闭信息。

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

警告小工具的样式标签设置项如下:

  1. 警告
  2. 标题
  3. 描述
  4. Dismiss Icon

2-1 警告

警告是自定义信息窗口颜色和边框宽度的设置选项。

  • 背景颜色:背景颜色是自定义选择或替换标题和描述文本所在区域的背景颜色设置选项。
  • 边框颜色:是自定义选择或替换信息左边线颜色设置选项。
  • 左边线宽度:是指定信息左边线宽度设置选项。

左边线宽度可设定最低数值0,最高数值100,默认数值是5。选择0时,左边线将无法显示。

2-2 标题

标题是自定义信息标题字体,颜色,添加文本阴影等设置选项。

  • 文本颜色:自定义标题文本颜色设置选项。
  • 排版:自定义标题文本字体,大小,粗细,装饰,行高等设置选项。
  • 文本阴影:给标题文本添加阴影效果设置选项。

2-3 描述

描述是自定义信息描述字体,颜色,添加文本阴影等设置选项。

  • 文本颜色:自定义描述文本颜色设置选项。
  • 排版:自定义描述文本字体,大小,粗细,装饰,行高等设置选项。
  • 文本阴影:给描述文本添加阴影效果设置选项。

2-4 Dismiss Icon

Dismiss Icon是自定义关闭信息按钮大小,位置,颜色等设置选项。

尺寸

尺寸是指定关闭图标大小的设置选项。可在0-100之间进行设置。数值越大,图标也越大。

将数值设置为0时,图标将消失,切换到隐藏状态。

垂直位置

垂直位置是指定垂直方向位置的设置选项。可设定最低数值-100,最高数值100。

将数值往-100设置时,图标将向上移动。反之,将数值往100设置时,图标则会向下移动。

※数值超过一定范围时,图标会跳出信息栏外。可根据设计需求进行设置或调整。

水平位置

水平位置是指定水平方向位置的设置选项。可设定最低数值-100,最高数值100。

将数值往-100设置时,图标将向右边移动。反之,将数值往100设置时,图标则会向左边移动。

※数值超过一定范围时,图标会跳出信息栏外。可根据设计需求进行设置或调整。

关于标题与描述的详细设置可参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法》。

颜色

颜色是指定关闭图标颜色的设置选项。可设置标准(默认状态)和悬停(悬停状态)下的颜色设置。

上图中标准状态下的图标颜色为红色,而悬停状态下的颜色为蓝色。

选择好颜色后,可设置过渡时间。

过渡时间是图标颜色从标准状态颜色切换到悬停状态颜色时的过渡时长设置。

可在数值0-3之间进行设置。数值1为1秒,那么设置1.5的话也就是1.5秒的过渡时长。

关于图标颜色的详细设置可参考《Elementor 基础教程 – 图标小工具的设置使用方法

3.警告小工具的高级设置

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

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

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

做点副业,为生活加点料

相关 文章
Wordpress插件与设计 - Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法 - 特色图片
Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法
Wordpress插件与设计 - WP教程 8 - 掌握文本和按钮链接的设定及使用方法 - 特色图片
WP教程 8 - 掌握文本和按钮链接的设定及使用方法
Wordpress插件与设计 - WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别 - 特色图片
WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别
Wordpress插件与设计 - Elementor 基础教程 19 - 证明小工具的设置和使用方法 - 特色图片
Elementor 基础教程 19 - 证明小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 1 - 文本编辑器 小工具的设置和使用方法 - 特色图片
Elementor 基础教程 1 - 文本编辑器 小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 17 - 计数器小工具的设置和使用方法 - 特色图片
Elementor 基础教程 17 - 计数器小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Wordpress插件与设计 - Elementor 通用教程 6 - Elementor Kit Library的使用方法 - 特色图片
Elementor 通用教程 6 - Elementor Kit Library的使用方法
Wordpress插件与设计 - WP教程 9 - 如何轻松添加文件下载功能以提升用户体验? - 特色图片
WP教程 9 - 如何轻松添加文件下载功能以提升用户体验?
Wordpress插件与设计 - Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法 - 特色图片
Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - 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工具与服务推荐 - SpaceSerp - 搜索引擎结果API - 特色图片
SpaceSerp - 将原始搜索结果转化为有价值的商业数据,适用于品牌监控、竞争分析等多种场景。
AI工具与服务推荐 - AI0x0 - 桌面AI悬浮球工具 - 特色图片
AI0x0 - 多模态AI悬浮球工具,Mac用户的好帮手,提升工作效率
AI工具与服务推荐 - VEED - AI视频编辑器 - 特色图片
VEED.IO - 专业级视频创作,让每个人都能轻松上手
AI工具与服务推荐 - 改图鸭 - 在线图片处理工具 - 特色图片
Gaituya - 在线图片处理达人,多才多艺,让您的照片瞬间焕发高大上的光彩!
AI工具与服务推荐 - ChatNote - AI机器人PDF阅读助手 - 特色图片
ChatNote - AI智能读取PDF回答问题,高效管理利用知识资源
AI工具与服务推荐 - GTM Buddy - AI销售成功平台 - 特色图片
GTM Buddy - AI赋能销售平台,助您筑牢销售防线,无惧"漏水"
Canva Post
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片
Canva新手指南3 - 无需编程!用Canva创建专业一页式网站的指南
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片
Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择?
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Smm Post
社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片
解密YouTube用户互动策略!掌握频道人气的秘诀
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片
如何正确选择一款适合自己的视频编辑软件?
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片
一文读懂YouTube Premium会员权益!让你不再犹豫
社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片
将爱好转为事业!通过YouTube频道赚钱的秘诀
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
AI工具 分类筛选
AI Main Category checkbox