Elementor 基础教程 7 - 分割线小工具的设置和使用方法

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

Elementor的分割线小工具是美化页面结构的重要工具之一。它可以在网站的内容部分或设计要素之间创建视觉分割效果。

除了可以制作吸引人的分割线之外,你还可以向分割线添加标题或文字,增加强调效果,同时整理结构和层次。

本篇教程将说明分割线小工具的功能设置以及使用方法。

Elementor 分割线小工具

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

拖放分割线小工具后,你会看到如下画面。

1.分割线小工具的内容标签

分割线小工具的内容标签只有分割线设置选项。

主要设置项包括以下内容:

  1. 样式
  2. 宽度
  3. 对齐
  4. 添加元素

1-1 样式

H4

样式是选择分割线线型种类的设置选项,总共有26种线型。

其中线条有10种,Pattern(图案)有6种,Tribal有10种,如下图所示。

1-2 宽度

H4

宽度是指定分割线在编辑栏内的宽度设置项。默认是100%,也就是全宽度。如下图所示。

将宽度设置为50%时,分割线的宽度将缩小。如下图所示。

1-3 配置

H4

配置是指定分割线在编辑栏水平方向对齐的设置选项。你可以选择左边对齐,居中对齐,或者右边对齐。默认是左边对齐,如下图所示。

需要注意的是,如果分割线的宽度是100%,对齐选项将失效。

1-4 添加元素

H4

添加元素是给分割线添加文本或图标的设置选项。当选择文字时,下方文本内容将自动插入到分割线中央位置。如下图所示。

文本内容可以自己定义并更改。更改的内容将自动反映到分割线中央位置。

关于下方的HTML标签,你可以给分割线文本添加HTML标签。因此,分割线也可以用来设计标题。

接下来,当选择添加图标时,你可以看到默认的星星图标在分割线中央。如下图所示。

如果你想要更换图标,可以自定义上传图标或者从Elementor预设的图标库中选择。

2.分割线小工具的样式设置

分割线样式设置主要包括以下选项:

  1. 分割线
  2. 文本
  3. 图标

2-1 分割线

分割线设置包括颜色,粗细,和间距。

主要设置项包括:

  • 颜色
  • 尺寸
  • 间距

颜色

颜色选项用于设置分割线的颜色。可以通过颜色选择器选择颜色或从全局颜色中选择。

尺寸

尺寸选项用于设定分割线的粗细。可以点击滑动模块按钮选择或直接在输入框中输入数值进行设置。

数值范围是0到100, 默认数值为20。数值越大,分割线越粗。

间距

间距选项用于设置分割线到上下边框的距离。默认数值是15,单位是像素。

在上图中,间距设定为30,所以分割线到边框的距离是30像素。

2-2 文本

文本设置用于自定义分割线内文本的颜色,字体,大小以及间距。

在内容标签中选择文本元素时,会出现文本设置选项。

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

2-3 图标

图标设置用于自定义分割线内图标的颜色,字体,大小以及间距。

关于图标的详细设置和说明,请参考《Elementor 基础教程 – 图标小工具的设置使用方法》。

3.分割线小工具的高级设置

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

以上就是分割线小工具的功能设置和使用方法的说明,希望对你使用Elementor有所帮助。

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

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor pro Review widget
Elementor 专业教程 17 – Review小工具的设置和使用方法
Elementor pro Login widget
Elementor 专业教程 6 – Login小工具的设置和使用方法
Elementor basic 4 tuxiang.webp
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Elementor basic 13 xingji.webp
Elementor 基础教程 13 – 星级小工具的设置和使用方法
Elementor22-社交图标
Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法
Elementor pro Countdown widget .webp
Elementor 专业教程 19 – Countdown小工具的设置和使用方法
Elementor pro Template widget.webp
Elementor 专业教程 26 – Template小工具的设置和使用方法
Elementor pro Facebook Embed widget .webp
Elementor 专业教程 24 – Facebook Embed小工具的设置和使用方法
Elementor pro carousel widget tumnail
Elementor 专业教程 – Carousel小工具的设置和使用方法
Elementor pro Nav Menu widget
Elementor 专业教程 8 – Nav Menu小工具的设置和使用方法