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

Elementor 基础教程 12 - 图标框小工具的设置和使用方法

Elementor的图标框小工具是一个三合一小工具,集图标、标题、文本编辑于一体。

使用此工具,您可以轻松创建包含图标、标题、文本的页面展示效果,不仅可以突出重点,吸引用户注意,而且可以让用户更容易找到目标信息。

本教程将详细介绍图标框小工具的功能设置和使用方法。

Elementor 图标框小工具

首先,将图标框小工具拖放到编辑栏中。如下图所示:

将小工具拖放到编辑栏后,您将看到如下画面:

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

图标框小工具的内容标签主要包含以下几部分:

  1. 图标
  2. 查看
  3. 标题与描述
  4. 链接
  5. 图标的位置
  6. 标题HTML标签

1-1 图标

图标是自定义图标设置的选项。

1-2 查看

查看是指定图标边框的设置选项。

  • 默认:没有任何变化
  • 堆叠:去掉图标形状的模具形态表示
  • 框架:给图标添加边框的形态表示

当选择堆叠和框架时,下方会出现形状选项。形状有《圆形》,《正方形》两种,默认为圆形。

上图中可以看出,不同的组合可实现不同的图标形状。

关于图标和查看的设置和使用方法,请阅读《Elementor 基础教程 – 图标小工具的设置使用方法》。

1-3 标题与描述

标题与描述是添加标题和描述文本的设置选项。如下图:

在标题和描述文本框中输入文字时,图标框小工具的标题与描述内容也会发生变化。

1-4 链接

图标框小工具的链接是给图标和标题添加自定义链接的选项。

上图中可以看到,只要在链接框中输入自定义链接,图标和标题就会自动添加链接。

※描述文本内容不会添加任何链接。

然后,点击输入框旁边的齿轮按钮,可以进一步设置链接的打开方式和属性设置。

关于链接的详细说明,请阅读《Elementor 基础教程 – 图标小工具的设置使用方法》中的链接说明部分。

1-5 图标的位置

图标的位置是指定图像显示位置的设置选项。

图标的位置有左边,顶部,右边三个选项,如下图所示:

您可以根据设计需求,自定义图标的位置。

1-6 标题HTML标签

标题HTML标签是用于设置标题的HTML标签选项。

虽然你可以选择任何HTML标签,但要注意,如果在全局文字设置中自定义了颜色,那么根据HTML选择的颜色也会发生变化。因此,需要注意这一点。

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

图标框小工具的样式标签主要包括图标和内容设置选项。

2-1 图标

图标的设置项主要包括以下内容。

  1. 主要颜色和次要颜色
  2. 间距
  3. 尺寸
  4. 内距
  5. 旋转
  6. 边框宽度
  7. 边框半径
主要颜色和次要颜色

主要颜色和次要颜色的选择会根据内容标签的查看选项中的内容有所不同。

当查看选择《堆叠》时,主要颜色和次要颜色的设置如下。

  • 主要颜色:除图标外的边框以及填充内部的颜色。
  • 次要颜色:图标本身的颜色。如下图

当查看选择《框架》时,主要颜色和次要颜色的设置如下。

  • 主要颜色:图标及边框框架的颜色
  • 次要颜色:图标和边框之间的底色

颜色可以在标准状态和悬停状态下进行设置。

选择悬停按钮后,可以设置与标准状态不同的颜色配置。如下图

除了颜色设置外,还可以设置悬停动画。关于悬停动画效果,请参考下面的视频。

关于悬停效果,你可以尝试不同的设置。

间距

图标框小工具的间距是自定义图标与标题之间间距的设置选项。如下图

间距可以设置为最低0,最高100, 默认值为15,单位为Px。你可以根据设计需求调整间距。

尺寸

尺寸是自定义图标大小的设置选项。如下图

图标的大小可以设置为最低0,最高300, 默认值为50,单位为Px。

图标大小可以根据设计需求进行调整。

内距

内距是设置图标边框到图标之间的间隔距离的选项。如下图

内距可以设置为最低0,最高100,默认值为25,单位为Px。

旋转

旋转是自定义图标旋转角度的设置项。旋转角度可以在0到360度之间选择。旋转时,只有框内的图标会旋转,框体则不会跟随旋转。如下图

从上图中可以看出,随着设定数值的增大,图标会按顺时针方向进行旋转。

边框宽度

边框宽度是用来设定边框宽度的设置项。可以设置《顶部》《右边》《左边》《底部》四个方位。默认数值是3。

虽然设定的数值没有上下限,但建议在0到1000之内进行设置。如果设定为负数,将恢复到默认状态。

边框宽度设定数值越大,边框宽度也会越大。如下图。

边框半径

边框半径是用来给边框角添加弧度的设置项。可以设置《顶部》《右边》《左边》《底部》四个方位。默认数值是0。虽然设定的数值没有上下限,但建议在0到150之内进行设置。如果设定为负数,将恢复到默认状态。

边框半径设定的数值越大,边框弧度也会越大。如下图。

2-2 内容

样式标签的内容设置项主要包括以下选项:

  1. 对齐
  2. 垂直对齐
  3. 标题
  4. 描述
对齐

对齐是将图像框的图标,标题,描述内容在编辑栏中水平对齐的设置选项。

可以选择在左边,居中,右边对齐。两端对齐与左边的对齐效果相同,因此可以忽略。如下图。

垂直对齐

垂直对齐是将标题和描述内容向图标的垂直方向对齐的选项。

※垂直对齐只在图标在标题和描述的左边或者右边时才可进行设置。如果图片在顶部,此设置项将无效。

从上图中可以看到,标题和描述内容向图标的顶部,中间,底部对齐的效果。

标题

标题是自定义标题间距,颜色,字体,以及文本阴影等设置选项。

其设置选项如下:

  • 间距:调整和指定标题与描述内容之间的间距设置项
  • 颜色:选择和替换标题颜色选项
  • 排版:选择和替换字体,大小,粗细,装饰,行高等设置选项
  • TextStroke:给标题添加轮廓线的设置项
  • 文本阴影:给标题添加阴影文本的设置项
描述

描述是自定义描述文本的颜色,字体,以及文本阴影等设置选项。

其设置选项如下:

  • 颜色:选择和替换标题颜色选项
  • 排版:选择和替换字体,大小,粗细,装饰,行高等设置选项
  • 文本阴影:给标题添加阴影文本的设置项

关于标题和描述的功能设置以及使用方法,请阅读《Elementor 基础教程 – 标题小工具的设置和使用方法》。

3.图像框小工具的高级设置

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

以上就是图像框小工具的功能设置和使用方法的说明。希望本篇内容能在您使用Elementor时有所帮助。

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

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - Elementor 基础教程 20 - 标签小工具的设置和使用方法 - 特色图片
Elementor 基础教程 20 - 标签小工具的设置和使...
Wordpress插件与设计 - Elementor 专业教程 9 - Animated Headline小工具的设置和使用方法 - 特色图片
Elementor 专业教程 9 - Animated Headline小工...
Wordpress插件与设计 - WP教程 9 - 如何轻松添加文件下载功能以提升用户体验? - 特色图片
WP教程 9 - 如何轻松添加文件下载功能以提升用...
Wordpress插件与设计 - Elementor 专业教程 27 - Lottie小工具的设置和使用方法 - 特色图片
Elementor 专业教程 27 - Lottie小工具的设置和...
Wordpress插件与设计 - Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法 - 特色图片
Elementor 专业教程 20 - Share Buttons小工具...
Wordpress插件与设计 - WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性! - 特色图片
WP教程 28 - 如何有效使用WP评论功能,提高博客...
Wordpress插件与设计 - Elementor 基础教程 31 - Text Path小工具的设置和使用方法 - 特色图片
Elementor 基础教程 31 - Text Path小工具的设...
Wordpress插件与设计 - Elementor 基础教程 2 - 内部区段 小工具的使用方法 - 特色图片
Elementor 基础教程 2 - 内部区段 小工具的使用...
Wordpress插件与设计 - WP教程 12 - 如何使用分类和标签,帮助读者轻松找到他们感兴趣的内容 - 特色图片
WP教程 12 - 如何使用分类和标签,帮助读者轻松...
Wordpress插件与设计 - Elementor 基础教程 21 - 手风琴小工具的设置和使用方法 - 特色图片
Elementor 基础教程 21 - 手风琴小工具的设置和...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

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

WP教程 与设计
Wordpress插件与设计 - Elementor 专业教程 14 - Call To Action小工具的设置和使用方法 - 特色图片

Elementor 专业教程 14 - Call To Acti...

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

Elementor 基础教程 24 - 警告小工具的...

Wordpress插件与设计 - WP教程 21 - WordPress插件!打造个性化网站的必备工具 - 特色图片

WP教程 21 - WordPress插件!打造个性...

Wordpress插件与设计 - WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片

WP教程 5 - 古腾堡编辑器使用指南!逐...

Wordpress插件与设计 - Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法 - 特色图片

Elementor 基础教程 23 - 社交媒体小工...

Wordpress插件与设计 - WP教程 32 - 一文搞定WP设置功能!让设置不再是你的难题 - 特色图片

WP教程 32 - 一文搞定WP设置功能!让设...

AI工具 与服务
AI工具与服务推荐 - ChatBotKit - 聊天机器人开发平台 - 特色图片

ChatBotKit - 无代码聊天机器人开发,...

AI工具与服务推荐 - Boomy - 在线音乐创作平台 - 特色图片

Boomy - AI音乐创作平台,零基础也能快...

AI工具与服务推荐 - V0 - UI自动生成工具 - 特色图片

V0 - 简单文字提示生成UI,复制粘贴即...

AI工具与服务推荐 - RocketScrape - Web Scraping API - 特色图片

RocketScrape - 快速可靠的Web数据抓取...

AI工具与服务推荐 - YtubeBooster - YouTube频道优化工具 - 特色图片

YtubeBooster - 一站式YouTube优化工具...

YYP-2024-07-04-12-32-32

Glasp - 标记PDF和网页内容,与志同道...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片

Canva新手指南6 - 无需专业软件!用Can...

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

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

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

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

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

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

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

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

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

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

社媒运营 与营销
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片

缩略图设计终极指南,打造吸睛的视频门...

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

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

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

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

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

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

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

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

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

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

AI工具 分类筛选
AI Main Category checkbox