Elementor 专业教程 7 - Slides小工具的设置和使用方法

Elementor Slides 是一个非常实用的小工具，可以在页面中轻松创建具有过渡效果的幻灯片。

虽然该小工具有许多配置选项（指定幻灯片数量，图片，文本内容，设置幻灯片速度和过渡效果等），但是它可以给每张幻灯片添加标题，描述，CTA按钮等。通过精美的幻灯片展示产品或服务信息，不仅可以提高网站内容的吸引力，也能提高用户的使用体验。

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

首先，将Slides小工具拖放到编辑栏内。如下图

拖放小工具到编辑栏后，可以看到如下界面。

默认预设的Slides包含3张颜色背景图片，每隔几秒自动向左滑动。

Slides小工具包含Slides和Slides option设置项。

Slides是指定幻灯片中包含的所有内容，包括图片、文本、标题、描述和 CTA 按钮等设置

每个项目就是一张幻灯片。默认预设的幻灯片有3张，所以默认预设的项目也有3个。

如果想要添加幻灯片的数量，则需要点击下方的《+新增项目》按钮添加即可。

如果要“复制”和“删除”特定的项目，只需点击每个项目名称旁边的“复制”或“删除”即可复制和删除特定的项目。

点击单个项目可以看到内部有3个设置标签。

1. Background
2. Content
3. Style

Background标签是设置幻灯片颜色背景或图片背景的设置项。

颜色背景的话，可以使用颜色选择器或全局颜色自由选择和替换背景颜色。

使用图片做背景，可以在媒体库选择或上传图片进行设置。如下图

当使用图片做背景时，会优先显示图片背景，所以颜色背景中设置的颜色就不会显示。

指定图片做背景后，下方会出现3个设置内容。

• Size
• Ken Burns Effect
• Background Overlay

当选择Size为“Cover”时，幻灯片框架内会被图像填满。默认预设为Cover。

选择Size为“Contain”时，幻灯片框架内的图像将以原始大小显示，未覆盖部分会被背景色替代。

选择Size为“Auto”时，幻灯片框架内的图像将满屏显示，但相比Cover会显示得更大。

将“Ken Burns Effect”设置为“是”时，可为幻灯片框架内的图像添加扩大（镜头拉近）或缩小（镜头拉远）的动画效果。

在“Zoom Direction”中选择扩大（镜头拉近）或缩小（镜头拉远）。

• Zoom In：扩大（镜头拉近）
• Zoom Out：缩小（镜头拉远）

选择“背景覆盖”设置为“是”时，幻灯片框架内的图像上方会覆盖一层半透明的颜色层。

此外，下方会显示”Color”和 “Blend Mode”的背景覆盖设置。

背景覆盖的“颜色”可以使用颜色选择器自由选择和替换覆盖颜色层的颜色。

还可以更细致地设置色调和透明度。

背景覆盖的“混合”是选择颜色图层和下方图像混合模式的设置。

可选择以下模式：

• Normal
• Multiply
• Screen
• Overlay
• Darken
• Lighten
• Color Dodge
• Color Burn
• Hue
• Saturation
• Color
• Exclusion
• Luminosity

上图展示了选择“Color Burn”时的显示效果。对于其他效果，可以多尝试后选择。

需要注意的是，如果没有为颜色图层设置任何颜色，Blend Mode将失去其功能。因此，一定要在选择Blend Mode前设置图层颜色。

内容是自定义幻灯片显示内容部分的设置项。可设置的内容包括：

• Title(标题）：自定义编辑幻灯片标题
• Description(说明）：自定义编辑幻灯片内容文本
• Button Text(按钮文本）：自定义编辑按钮文本
• Link(链接）：自定义指定按钮链接地址

对于“标题”，“说明”，“按钮文本”，可以直接在输入框中输入文本编辑。“链接”则可以自定义设置链接地址。当用户点击按钮时，可以跳转到指定的页面或网站。

Slides的Style是用于自定义设置单个项目显示样式的设置。

如果需要对单个项目（幻灯片）进行单独设置，可以将下方“Custom”设置为“是”，即可自定义样式。可自定义的设置选项如下：

• 水平位置（Horizontal Position）
• 垂直位置（Vertical Position）
• 文本对齐（Text Align）
• 内容颜色（Content Color）
• 文本阴影（文本阴影）

水平位置是将幻灯片的标题、说明、按钮向“左边”、“中间”、“右边”对齐的设置选项。

默认为中间对齐。

垂直位置是将幻灯片的标题、说明、按钮向“顶部”、“中间”、“底部”对齐的设置选项。

默认为中间对齐。

文本对齐是将标题、说明、按钮向“左边”、“中间”、“右边”对齐的设置选项。

与水平位置不同，文本对齐只对齐文本，并不按照幻灯片的水平方向进行对齐。

默认为中间对齐。

内容颜色是选择和替换“标题”、“说明”、“按钮和边框”颜色的设置选项。

只需选择任意颜色，指定的颜色将反应到标题、说明、按钮和边框。

如果想要对标题、说明、按钮等单独设置颜色，只能在样式标签中进行设置。

文本阴影是给“标题”、“说明”、“按钮文本”添加阴影效果的设置选项。

可以调整阴影的模糊度、水平移动方向、垂直移动方向来调整阴影的位置和模糊度。

高度是设置幻灯片高度的选项。 可设置数值在100到1000之间的高度。默认高度是400。可以根据设计需要自定义设置高度。

Slide Options是一组用于控制幻灯片小工具的整体行为和外观的设置。它可以控制幻灯片的自动播放，动画效果，过渡效果，循环播放等。具体设置内容如下：

• Navigation（导航）：开启或关闭导航控件。
• Autoplay（自动播放）：启用或禁用幻灯片的自动播放功能。
• Pause on Hover（悬停暂停）：当鼠标悬停在幻灯片上时，暂停自动播放。
• Pause on Interaction（交互暂停）：当用户与幻灯片进行交互时，例如点击箭头或导航点时，暂停自动播放。
• Autoplay Speed（自动播放速度）：控制幻灯片自动播放的速度，以毫秒为单位。
• Infinite Loop（无限循环）：启用或禁用幻灯片的无限循环播放功能。
• Transition（过渡效果）：选择幻灯片的过渡效果，例如滑动、淡入淡出等。
• Transition Speed（过渡速度）：控制幻灯片过渡效果的速度，以毫秒为单位。
• Content Animation（内容动画）：选择幻灯片标题，说明，按钮的动画效果，例如淡入、从左到右滑动等。

导航是开启或关闭导航控件的设置选项。关于导航可选项如下：

• 箭头和点（Arrows and Dots）：显示箭头和点（默认）
• 箭头（Arrows）：只显示箭头
• 点（Dots）：只显示点
• 无（None）：箭头和点都不显示

自动播放是启用或禁用幻灯片的自动播放功能的设置选项。默认是启用。

如果想要手动点击导航来控制幻灯片的话，可以禁用此选项。

此外，启用自动播放时，会出现以下3个设置项：

• Pause on Hover（悬停暂停）：当鼠标悬停在幻灯片上时，暂停自动播放。
• Pause on Interaction（交互暂停）：当用户与幻灯片进行交互时，例如点击箭头或导航点时，暂停自动播放。
• Autoplay Speed（自动播放速度）：控制幻灯片自动播放的速度，以毫秒为单位。1000毫秒等于1秒。

无限循环是启用或禁用幻灯片的无限循环播放功能的设置选项。

• 启用无限循环：幻灯片将永久反复播放。（默认）
• 禁用无限循环：幻灯片只循环一次，到最后一个幻灯片时就停止播放。

过渡效果是选择幻灯片图片过渡效果的设置选项。

• 滑动（Slide）：图像以滑动方式过渡
• 淡入（Fade）：图像以淡入方式过渡

过渡速度是指定幻灯片过渡效果速度的设置选项，以毫秒为单位。

1000毫秒就是1秒。所以默认数值500的话，过渡效果速度就是0.5秒。

内容动画是选择幻灯片标题，说明，按钮动画效果的设置选项。

可在以下预设中选择：

• None
• Down
• Up
• Right
• Left
• Zoom

幻灯片的样式标签包含以下设置项：

1. 幻灯片（Slides）
2. 标题（Title）
3. 描述（Description）
4. 按钮（Button）
5. 导航（Navigation）

幻灯片是自定义幻灯片外观样式的设置项，主要包含以下设置选项：

• Content Width（内容宽度）：自定义幻灯片的内容宽度。可以使用像素值或百分比来设置内容宽度。
• Padding（内边距）：控制幻灯片内部内容与边框之间的距离。数值越大间距也越大。
• Horizontal Position（水平位置）：指定幻灯片内部内容的水平对齐位置。可以将内容放置在幻灯片的左边，中间，右边。
• Vertical Position（垂直位置）：指定幻灯片内部内容的垂直位置。可以将内容放置在幻灯片顶部、中央或底部。
• Text Align（文本对齐）：指定幻灯片内文本的对齐方式。可以将文本左边对齐、中间对齐或右边对齐。
• 文本阴影：自定义幻灯片内文本的阴影效果。

标题允许您自定义标题文本的样式，颜色，以及与说明文本之间的间距。设置选项如下：

• Spacing（间距）：设定幻灯片标题与说明文本之间的间距。
• TextColor（文本颜色）：选择并替换幻灯片标题的文本颜色。
• 排版：自定义幻灯片标题的字体、大小、粗细，行高等。

描述允许您自定义说明文本的样式，颜色，以及与按钮间的间距。 设置选项如下：

• Spacing（间距）：设定幻灯片说明文本与按钮之间的间距。
• TextColor（文本颜色）：选择并替换幻灯片说明文本的颜色。
• 排版：自定义幻灯片说明文本的字体、大小、粗细，行高等。

关于文本排版和字体颜色的具体设置方法，请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法》

• 按钮允许您自定义按钮样式。设置选项如下：
• Size（大小）：选择幻灯片按钮的预设大小。
• 排版：自定义幻灯片按钮的字体、大小、粗细，行高等。
• BorderWidth（边框宽度）：设定幻灯片按钮的边框宽度。
• Border Radius（边框半径）：设定幻灯片按钮的圆角半径大小。
• TextColor（文本颜色）：选择并替换幻灯片按钮的文本颜色。
• 背景类型：选择幻灯片按钮的背景类型。可以选择经典背景或渐变背景。
• 颜色（Color）：选择并替换幻灯片按钮的背景颜色。若选择渐变背景，则需要设定主次两个背景颜色。
• BorderColor（边框颜色）：选择并替换幻灯片按钮的边框颜色。

关于按钮的详细设置，可以参考《Elementor 基础教程 – 按钮小工具的设置和使用方法》

• 导航允许您自定义导航样式。设置选项如下：
• Arrows Position（箭头位置）：选择幻灯片导航箭头的位置。可以选择内侧或外侧。
• Arrows Size（箭头大小）：设定幻灯片箭头的大小。
• Arrows Color（箭头颜色）：选择并替换幻灯片箭头的颜色。
• Position（位置）：设定幻灯片导航点的位置。可以选择内侧或外侧。
• Size（大小）：设定幻灯片导航点的大小。
• Color（颜色）：选择并替换幻灯片导航点的颜色。
• Active Color（当前幻灯片导航点的颜色）：选择并替换当前幻灯片导航点的颜色。

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

以上就是Slides小工具的功能和使用方法的说明。希望本篇内容能对您使用Elementor有所帮助。