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 专业教程 10 - HotsPost小工具的设置和使用方法 - 特色图片
Elementor 专业教程 10 - HotsPost小工具的设置和使用方法
Wordpress插件与设计 - WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性! - 特色图片
WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性!
Wordpress插件与设计 - Elementor 专业教程 33 - Query的设置和使用方法 - 特色图片
Elementor 专业教程 33 - Query的设置和使用方法
Wordpress插件与设计 - WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力! - 特色图片
WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力!
Wordpress插件与设计 - Elementor 基础教程 5 - 视频小工具的设置和使用方法 - 特色图片
Elementor 基础教程 5 - 视频小工具的设置和使用方法
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 16 - 一步步教你如何创建诱人的导航菜单
Wordpress插件与设计 - WP教程 32 - 一文搞定WP设置功能!让设置不再是你的难题 - 特色图片
WP教程 32 - 一文搞定WP设置功能!让设置不再是你的难题
Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法 - 特色图片
Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法
Wordpress插件与设计 - Elementor 基础教程 8 - 间隔小工具的设置和使用方法 - 特色图片
Elementor 基础教程 8 - 间隔小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - 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工具与服务推荐 - Whismer - 智能AI问答助理工具 - 特色图片
Whismer - 更专业、更贴心的AI个人助理!
AI工具与服务推荐 - Analyzz - 网站性能分析工具 - 特色图片
Analyzz - 强大的网站性能分析工具,优化用户体验,助力提高转化率
AI工具与服务推荐 - Literally Anything - AI应用构建工具 - 特色图片
Literally Anything - 浏览器AI创作利器,激发您的无限想象力
AI工具与服务推荐 - Creatie - AI辅助设计工具 - 特色图片
Creatie - 创意与AI的完美结合,激发无限设计灵感之光!
AI工具与服务推荐 - Artbreeder - AI艺术创作平台 - 特色图片
Aiiimgbooth - 多种AI工具创作角色艺术作品,开启前所未有的创作之旅
AI工具与服务推荐 - 悟智写作 - AI写作辅助工具 - 特色图片
悟智写作 - AI启迪写作,灵感顿悟而生
Canva Post
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片
Canva新手指南8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级
Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片
Canva新手指南1 - 全面解析Canva文本框的基本功能!
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Smm Post
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片
将爱好转为事业!通过YouTube频道赚钱的秘诀
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片
YouTube运营全攻略:从零到一打造你的油管频道
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片
YouTube Shorts!解析短视频创作和收益的秘密
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片
从零到一!创建YouTube频道并上传视频的全流程
AI工具 分类筛选
AI Main Category checkbox