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

2023-11-26
Elementor 基础教程
喜欢(0)
Elementor basic 10 tubiao.webp

Elementor的图标小工具是网页设计中的一个重要视觉元素。

使用图标小工具,你可以简单地在页面或文章中添加有趣的视觉效果,如流行的社交媒体图标,付款方式等。

此外,你还可以完全自定义图标的颜色、大小和动画效果,使网站看起来更加华丽迷人。

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

图标小工具

Elementor 图标小工具

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

拖放图标小工具后,你将看到如下界面。

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

图标小工具的内容标签主要包含以下设置选项。

  1. 图标
  2. 查看
  3. 链接
  4. 对齐

1-1 图标

图标是选择图标或者替换图标的设置选项,如下图所示。

首先,点击图标库,你将看到如下界面。

选择任意图标后,点击插入即可替换现有的图标,如下图所示。

你可以看到图标已经被替换为新的图标。接下来,我们将介绍如何替换图标。

首先,我们需要访问下载图标的网站。知名的下载图标网站有 fontawesome。以下是实操视频。

1-2 查看

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

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

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

上图显示了不同组合可以创建出不同的图标形状。

1-3 链接

链接是给图标设置链接的设置项。你可以添加页面内链接,站内链接,特定文章链接,外部网站链接等。

点击输入框旁边的齿轮按钮,你可以设置链接的打开方式,添加附属属性,自定义属性等高级设置,如下图所示。

如果你希望点击图标时在新窗口打开链接内容,只需勾选《在新窗口中打开》选项即可。添加链接属性和自定义链接一般很少使用,除非有特定的需要,否则可以忽略。

1-4 对齐

对齐是一种设置选项,可以将图标对齐到编辑栏内的特定位置。选项包括左对齐居中对齐右对齐。如下图:

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

图标小工具的样式标签会根据内容标签中的查看选项有所不同。

为了方便说明,我们选择内容标签的查看选项中的堆叠来说明。选择堆叠后的样式设置选项如下:

可以看到,图标小工具的样式标签只有图标设置项。

主要包含的设置内容如下:

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

2-1 主要颜色和次要颜色

当查看选择为堆叠时,主要颜色和次要颜色的分配如下:

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

当查看选择为框架时,主要颜色和次要颜色的分配如下:

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

关于颜色,可以设置标准状态和悬停状态的两种设置。

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

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

关于更多的悬停动画效果,可进行选择和尝试。

2-2 尺寸

尺寸是自定义图像大小的设置项。可设置的最小值是0,最大值是300,默认值是50。计量单位可以在Px,%,EM,REM中选择。设定数值越大,图标也会变大。如下图:

如上图所示,随着设定数值的增加,黄色框内的图标也随之变大。

2-3 内距

内距是指图标边框到图标的距离设置项。可设置的数值范围为0到100,其默认数值为50。计量单位为px。内距的设定数值越大,图标到边框的距离也越大。如下图所示:

如上图所示,随着设定数值的增大,绿色内距线也随之增长。

2-4 旋转

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

如上图所示,随着设定数值的增大,图标会按顺时针方向进行旋转。

2-5 边框宽度

边框宽度是设置边框宽度的设置项。可设置《顶部》《右边》《左边》《底部》这4个方位。默认数值为3

虽然可设定的数值没有上下限,但是最好在0到1000之间设置。当设置为负数时,将恢复到默认状态。

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

2-6 边框半径

边框半径是给边框边角添加弧度的设置项。可设置《顶部》《右边》《左边》《底部》这4个方位。默认数值是0。虽然可设定的数值没有上下限,但最好在0到150之间设置。当设置为负数时,将恢复到默认状态。

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

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

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

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

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
elementor wp-post kaobei he zhantie wangzhan shejiyuansu
Elementor 通用教程 - 如何拷贝和粘贴不同网站的设计元素
Elementor basic 31 Text Path 小工具
Elementor 基础教程 31 – Text Path小工具的设置和使用方法
Elementor basic 11 tuxiangkuang.webp
Elementor 基础教程 11 - 图像框小工具的设置和使用方法
Elementor pro Portfolio widget
Elementor 专业教程 3 – Portfolio小工具的设置和使用方法
Elementor basic 18 jindutiao.webp
Elementor 基础教程 18 - 进度条小工具的设置和使用方法
Elementor25-SoundCloud
Elementor 基础教程 25 – SoundCloud小工具的设置和使用方法
Elementor pro Progress Tracker widget.webp
Elementor 专业教程 32 – Progress Tracker小工具的设置和使用方法
Elementor basic 9 gugeditu.webp
Elementor 基础教程 9 - 谷歌地图小工具的设置使用方法
Elementor basic 26 jianma.webp
Elementor 基础教程 26 – 简码小工具的设置和使用方法
Elementor basic 22 qiehuan.webp
Elementor 基础教程 22 - 切换小工具的设置和使用方法