Elementor 通用教程 3 - 小工具样式标签的通用设置和使用方法

2023-11-26
Elementor 通用教程
喜欢(0)
Elementor General 80 yangshibiaoqian.webp

样式标签是 Elementor 大多数小工具的设置选项,用于对小工具的内容元素进行细致的自定义设置。

虽然不同小工具的设置内容会有差异,但可设置的内容基本相同。

本教程将使用内部区段小工具来介绍样式标签中的常见设置选项。

样式标签

小工具样式标签

样式标签中包含以下功能设置选项:

  1. 背景
  2. 背景覆盖
  3. 边框
  4. 形状分割线
  5. 排版

1.背景

背景是设置内部区段背景的选项。(适用于编辑段,编辑栏,小工具)

主要设置内容包括标准和悬停。

  • 标准:默认状态下显示的背景内容
  • 悬停:鼠标悬停在内部区段上时显示的背景内容

标准和悬停的设置项目相同,因此,此处以标准状态下的背景设置为例。

背景类型主要包括以下4种:

  1. 经典
  2. 渐变
  3. 视频
  4. 幻灯片

1-1 经典

经典是指为内部区段背景插入自定义颜色或图像的设置项。

首先,设置一个简单的背景颜色,如下图所示:

按照图中的顺序进行设置即可。关于颜色选择器的设置内容,请参考下图:

接下来是为背景添加图像背景。

首先选择一张图片,点击图像中央的+号按钮,如下图所示:

然后选择一张背景图,可从已上传的图片中选择,也可以上传新的图片。下图是在资源库设置的流程。

1-2 渐变

渐变是为内部区段设置颜色渐变效果的背景设置项。

为了方便说明,我们在单格编辑段中插入了内部区段小工具,如下图所示:

渐变背景的设置项包括:

  • 颜色
  • 位置(主颜色位置)
  • 次要颜色
  • 位置(次要线性位置)
  • 类型
  • 角度

具体操作和设置如下图所示:

主要颜色和次要颜色的位置可以在0到100之间自定义设置。

当主要颜色的位置数值为100时,内部区段的背景颜色会变成蓝色。当次要颜色的位置数值为0时,内部区段的背景颜色会变成红色。当主要颜色和次要颜色的设定数值为50时,背景会出现蓝红各半的效果。

蓝红的展现方式会根据角度的变化而变化,如下图所示:

上图中,主要颜色和次要颜色的位置数值为50,角度为135度。根据主次颜色的位置和角度的变化,可以创建出不同的背景样式。

关于类型

类型主要分为线性和径向。

  • 线性:主要颜色和次要颜色的对称方向展现类型
  • 径向:主要颜色和次要颜色的内外方向展现类型

首先,看一下类型选择线性时的背景画面效果,如下图所示:

上图中可以看出,当选择类型为线性时,主要颜色和次要颜色是对称的。

然后,看一下选择径向类型时的效果画面。

从上图中我们可以看出,主要颜色的位置在内,而次要颜色的位置在外。

当主要颜色的数值增大时,从内向外的面积会变大;反之,面积会变小。当次要颜色的数值减小时,从外向内的面积会变大;反之,面积会变小。

通过改变主要颜色、次要颜色,以及展现的位置,可以创建出不同的效果,如下图所示:

上图中,主要颜色的位置设置为30,次要颜色的位置设置为70,径向位置设置为顶部中心。

总的来说,通过指定主次颜色的数值和选择主次位置,渐变背景可以展现出非常丰富的颜色渐变效果。

1-3 视频背景

视频背景是使用视频素材作为背景的设置项。具体的设置内容和使用方法如下图所示。

  1. 输入Youtube或者Vimeo视频地址
  2. 设置Youtube或者Vimeo视频的开始播放时间(从几秒开始播放)
  3. 设置Youtube或者Vimeo视频的结束播放时间(在几秒结束播放)
  4. 默认循环播放,但也可以选择播放一次后停止
  5. 设置是否在手机上播放,默认是禁止
  6. 只有Youtube视频支持开启隐私模式
  7. 设置特色图片,作为视频无法播放时的备用表示

视频背景素材的播放开始和结束时间可以用秒单位进行设置。为了防止视频素材无法播放,最好设置一个特色图片。

1-4 幻灯片背景

幻灯片背景就是用幻灯片作为背景。

使用幻灯片作为背景,首先需要制作一个幻灯片。制作幻灯片需要选择图片或照片。

选择图像

按照上述图片的顺序,先点击幻灯片按钮,然后点击选择图像的加号按钮。

在弹出的媒体库中,选择用于幻灯片的图像,点击下方的创建新相册。如下图

点击创建新相册后,会弹出编辑相册页面。在这个页面中,你可以添加图片的说明以及排序图片。如下图

创建相册后,你可以在背景的幻灯片设置项中看到已添加的相册内容,如下图

接下来需要对幻灯片进行设置。幻灯片的设置项包括:

  • 无限循环
  • 时效
  • 过渡
  • 过渡时间
  • 背景尺寸
  • 背景位置

→ 无限循环

如果选择**】,幻灯片将无限循环播放

播放到最后一张图像后,会再次返回到第一张图像,如此循环。

→ 时效

时效是设置一张幻灯片展示的时长。

1000毫秒等于1秒,所以默认时效为5000毫秒,也就是5秒的展示时长。

→ 过度

过渡是设置图像过渡时动画效果的选项。

默认的设置为【Fade】,也可以选择【SlideRight】,【Slide left】,【Slide Up】,【Slide Down】等。你可以切换尝试,看看实际效果。

→ 过度时间

过渡时间是设置幻灯片切换时动画效果的展示时长。

默认过渡时间为500毫秒,也就是0.5秒。如果你希望加快或减慢切换速度,可以调整过渡时间的数值。

→ 背景尺寸

当图像的尺寸大于或者小于内部区段的尺寸时,需要设置图像在背景中的展现方式。

背景尺寸的选项包括:

  • 默认
  • 自动
  • 覆盖
  • 包含

→ 默认

选择默认时,用于背景的图像会按照原有的大小,居中展示。

不论图片大小,都会以图像原有的尺寸,居中展示。如下图

→ 自动

选择自动时,图像素材会根据背景的尺寸自动平铺。

如果图片较大,只会显示局部,如果图片较小,会排满背景画面。如下图

→ 覆盖

选择覆盖时,图像会根据背景宽幅自动进行全面覆盖。

如果图片的宽幅低于内部区段宽幅时,会拉伸覆盖。图片宽幅大于内部区段的宽幅时,会居中显示。如下图

→ 包含

选择包含时,不论图片大小,都会将图片内容全部显示。 如下图

Lazyload

Lazyload就是延迟加载背景幻灯片的设置项。

开启后,加载页面时,会延迟加载背景幻灯片(这有利于网页的开启速度)。

如果背景图不是特别大,选择默认即可。

平移缩放效果

平移缩放效果是给幻灯片背景添加前进,后退的特效设置项。

开启后,可以选择特效的展示方向。

平移缩放特效有两种方向可以选择。

  • 进入:选择进入方向时,背景画面会有靠近的视觉效果。
  • 退出:选择退出方向时,背景画面会有远离的视觉效果。

2.背景覆盖

背景覆盖是给内部区段背景添加叠加效果的设置项。

例如,给内部区段添加了一个图片背景。

然后,给这个背景添加一个背景覆盖,看看会有什么效果。

上图中可以看到,绿色覆盖在背景层上方。这就是背景覆盖的效果。

背景覆盖的主要作用在于对背景的修饰,但并不会影响背景内容的展示。

梳理一下背景,背景覆盖,小工具之间的层级关系,如下:

  • 最上层:各种小工具
  • 中间层:背景覆盖
  • 最底层:背景

接下来继续说明背景覆盖的设置。

背景覆盖的设置

背景覆盖的设置主要有以下设置项:

  1. 背景类型
  2. 颜色
  3. 图像
  4. 不透明度

2-1 背景类型

背景类型就是选择背景展示方式的选项。

  • 经典:以单一颜色为背景
  • 渐变:以主次颜色的渐变效果为背景

2-2 颜色

给背景选择和设置颜色。

2-3 图像

使用图像作为背景。

2-4 不透明度

不透明度是给背景设置透明度的选项,最低数值是0,最高数值是1,默认数值是0.5。

比如设定的数值为0.5,那么背景的透明度就是50%,也就是半透明。

数值越高,透明度越低。也就是说,数值为1时,就完全不透明。

如果想要给背景覆盖添加悬停效果,需要点击悬停按钮,添加与标准不同的覆盖效果设置。如下图。

上图中1到4的设置选项与标准的设置内容相同。

但是可以看到新增了CSS过滤器和过渡时间的设置选项。

2-5 CSS过滤器

CSS过滤器是给背景的颜色色调进行更细致优化的选项。

对用过Adobe Photoshop的用户来说并不陌生。

主要设置项如下:

  • 模糊
  • 亮度
  • 对比
  • 饱和度
  • 色调
● 2-5-1 模糊

模糊是给背景边缘做模糊处理的设置项。

最低数值0,最高数值10。数值越大,模糊度越高。如下图。

● 2-5-2 亮度

亮度就是调整背景亮度的设置项。

最低数值0,最高数值是200。 数值越大,亮度越高。

● 2-5-3 对比亮度

对比就是调整背景对比度的设置项。

最低数值0,最高数值是200。 数值越大,背景颜色的清晰度越高。

● 2-5-4 饱和度

饱和度就是调整背景颜色饱和度的设置项。

最低数值0,最高数值是200。 数值越大,背景颜色就越鲜艳。

● 2-5-5 色调

色调就是调整背景主色调的设置项。最低数值0,最高数值是360。

色调调整时最好先用鼠标左右滑动来选择主色调。

2-5-6 过渡时间

过渡时间是当鼠标滑动到背景上方时,从标准背景切换到悬停背景的过渡时长。

最低数值是0,最高数值是3,默认数值是0.3。数值1就是1秒,那么默认数值0.3就是0.3秒。

所以,设置的过渡时间数值越低,切换的速度就越快。

3.边框

边框是对背景添加边框的设置项。

主要设置项包括:

  1. 边框类型
  2. 边框半径
  3. 盒子阴影

3-1 边框类型

边框类型即设置边框类型的选择项。

边框类型包括:

  1. 默认
  2. 无边框
  3. 实线
  4. 双实线
  5. 圆点
  6. 虚线
  7. 沟槽

具体线的类型见下图。

边框类型主要有5种。默认和无边框是不显示边框的选项。

3-2 边框半径

边框半径是指定边框边角圆滑度的设置项。

上图中可以看到,边框半径数值越大,边框的弧度就越大,形状越接近圆形。

3-3 盒子阴影

盒子阴影是给边框添加阴影效果的设置选项

主要设置项如下:

  • 颜色
  • 水平
  • 垂直
  • 模糊
  • 扩散
  • 位置

颜色

颜色是选择和指定阴影颜色的设置项。

通过颜色选择器进行颜色的选择和指定。

→ 水平

水平是指定边框阴影在水平方向上移动位置的设置项。

数值范围是-100到100,默认值是0。数值为负时,边框阴影会向左移动。数值为正时,边框阴影会向右移动。如下图。

→ 垂直

垂直是指定边框阴影在垂直方向上移动位置的设置项。

数值范围是-100到100,默认值是0。数值为负时,边框阴影会向上移动。数值为正时,边框阴影会向下移动。如下图。

→ 模糊

模糊是指定边框阴影清晰度的设置项。

数值范围是0到100,默认值是10。数值越低,阴影越清晰,反之越模糊。

→ 扩散

扩散是指定阴影向外或者向内扩散的范围设置项。

数值范围是-100到100,默认值是0。数值越大,扩散的范围也就越大。如下图。

→ 位置

位置是指定阴影向外或者向内扩散的设置项。

  • 概述(翻译有误,应该是向外)
  • 插入(翻译有误,应该是向内)

调整扩散的范围数值后,改变阴影方向为向内的效果如下。

→ 过度时间

过渡时间是指阴影效果从标准切换到悬停时的过渡时长。

可设置的最低数值是0,最高为3,默认是0.3 。数值1代表1秒,那么默认0.3就是0.3秒。

4. 形状分割线

形状分割线是指添加各种形状分割线的设定选项。

类型有18种,如下图。

形状分割线包括顶部和底部,可以选择的类型相同。因此,根据设计的方向,你可以尝试使用不同的分割线。

5. 排版

内部区段的排版是指统一调整和设定编辑栏内所有小工具样式的设定选项。

内部区段的排版包含以下设定项:

  1. 标题颜色
  2. 文本颜色
  3. 链接颜色链接悬停颜色
  4. 文本对齐

5-1 标题颜色

内部区段的标题颜色是指统一调整内部区段内标题颜色的设定项。

在此处选择的标题颜色,会反映到所有内部区段内的标题中。如果已经为特定的标题设定了颜色,最好不要设置内部区段的标题颜色,因为内部区段的标题颜色设定优先于其他自定义颜色。

5-2 文本颜色

内部区段的文本颜色是指统一调整内部区段内文本颜色的设定项。

在此处选择的文本颜色,会反映到所有内部区段内的文本中。如果已经为特定的文本设定了颜色,最好不要设置内部区段的文本颜色,因为内部区段的文本颜色设定优先于其他自定义颜色。

5-3 链接颜色与链接悬停颜色

内部区段的链接颜色是指统一调整内部区段内链接颜色的设定项。

在此处选择的链接颜色,会反映到所有内部区段内的链接中。如果已经为特定的链接设定了颜色,最好不要设置内部区段的链接颜色,因为内部区段的链接颜色设定优先于其他自定义颜色。

5-4 文本对齐

内部区段的文本对齐是指统一调整内部区段内所有文本对齐方式的设定项。

在此处选择的对齐方式,会反映在所有内部区段内的文本对齐方式中。如果你希望对特定的文本进行对齐设置,最好不要设定内部区段的文本对齐,因为内部区段的对齐设定优先于其他自定义对齐方式。

以上就是样式标签设置方法的说明。

希望使用Elementor的朋友们能掌握并运用好这些样式标签的设定内容,从而设计出精美的网页。

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

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor25-SoundCloud
Elementor 基础教程 25 – SoundCloud小工具的设置和使用方法
Elementor pro Blockquote widget
Elementor 专业教程 21 – Blockquote小工具的设置和使用方法
Elementor basic 31 Text Path 小工具
Elementor 基础教程 31 – Text Path小工具的设置和使用方法
Elementor basic 14 tuxianghuandengqi.webp
Elementor 基础教程 14 – 图像幻灯器小工具的设置和使用方法
Elementor pro carousel widget tumnail
Elementor 专业教程 – Carousel小工具的设置和使用方法
elementor pro megamenu widget tumnail
Elementor Pro教程 - 制作MegaMenu的步骤以及使用方法
Elementor pro Gallery widget
Elementor 专业教程 4 – Gallery小工具的设置和使用方法
Elementor pro Facebook Embed widget .webp
Elementor 专业教程 24 – Facebook Embed小工具的设置和使用方法
Elementor basic 7 fengexian.webp
Elementor 基础教程 7 - 分割线小工具的设置和使用方法
Elementor pro Table Of Content widget .webp
Elementor 专业教程 18 – Table Of Content小工具的设置和使用方法