如何在Elementor Pro中创建和优化Carousel小工具

创建和使用Carousel小工具

Carousel是Elementor Pro最新添加的小工具，它可以以幻灯片的形式展示多个内容。

1.更改Elementor设置

在使用Carousel小工具之前，需要调整以下Elementor的设置。

登录WordPress仪表板，导航至Elementor>设置页面，找到“特性”标签。如下图所示：

（插入相关设置页面的截图）

进入特性页面后，需要开启以下功能：

1. Grid容器

2. 嵌套元素

开启Grid容器和嵌套元素，就可以在Elementor中使用Carousel小工具了。

2.添加Carousel小工具

进入Elementor编辑页面后，将Carousel小工具拖放到编辑栏内。

拖放后，你将看到以下画面。

3.在Carousel中编辑内容

你可以在Carousel的每个单元格中拖放任意小工具。例如，如果将图片和标题拖放到单元格内，你将看到如下画面：

将视频小工具拖放到中间的单元格，将文本编辑器小工具拖放到右侧的单元格。

以上大致了解Carousel小工具的最基本的创建方法。接下来，将使用Carousel小工具的内容和样式标签。

4.Carousel的内容标签

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

Carousel设置选项：

1. Slides：配置每个幻灯片的内容和样式。
2. Settings：调整Carousel的全局设置，如自动播放和速度。
3. Navigation：设置导航按钮的样式和位置。
4. Pagination：配置分页指示器的样式和位置。

4.1 Slides

Slides是用于为Carousel小工具添加单元格的设置项。

Carousel设置内容：

1. Carousel Item：添加、复制或删除单元格，并为每个单元格设置标题。
2. Slides on Display：指定编辑栏中显示的单元格数量。选择3，则显示3个单元格；选择5，则显示5个单元格。
3. Slides on Scroll：指定Carousel滚动时一次滚动的单元格数量。可设置1到8之间的数值。数值越大，单次滚动的单元格数量也越多。
4. Equal Height：选择是否开启单元格高度一致的设置。开启后，所有单元格的高度将自动统一。

4.2 Settings

Settings是用来调整Carousel单元格滚动效果的设置。

Carousel设置内容

1. Autoplay：开启或关闭自动播放。开启后，Carousel会自动播放内容。
2. Scroll Speed (ms)：设置滚动速度，以毫秒为单位。默认值为5000毫秒（5秒），数值越小，滚动速度越快。
3. Pause on Hover：悬停暂停。开启后，当鼠标悬停在内容上时，滚动将暂停。
4. Pause on Interaction：交互暂停。开启后，用户操作内容时，滚动将暂停。
5. Infinite Scroll：无限滚动。开启后，Carousel将无限循环滚动内容。
6. Transition Duration (ms)：设置滚动效果的持续时间，以毫秒为单位。默认值为500毫秒（0.5秒），数值越大，滚动效果越慢。
7. Direction：选择滚动方向，可以选择向左或向右。
8. Offset Sides：设置Carousel两端的安全空间，可以选择两端（both）、左边或右边。
9. Offset Width：调整安全空间的宽度，数值越大，安全区域越宽。

如果你不理解Offset Sides的安全区域，可以参考下图。

4.3 Navigation

Navigation用于调整Carousel的前进或后退箭头图标的设置。

导航箭头设置

此设置项主要包含三个内容：

1. Arrows：选择是否开启导航箭头。开启后，用户可以点击箭头来切换内容。
2. Previous Arrow 和 Next Arrow：设置前进和后退箭头的样式和位置。这两项设置内容相同，具体说明如下：
   • Icon：选择或替换箭头图标。可以选择不显示、上传自定义图标或从预设图标中选择。
   • Orientation：指定箭头在Carousel中的对齐方式，可以是水平或垂直对齐。
   • Position：设置箭头在Carousel中的具体位置，可以在水平或垂直方向上进行调整。

4.4 Pagination

Pagination是指定底部单元格向导显示方式的设置。可以在圆点、数字、进度条之间进行选择。

5.Carousel的样式标签

Carousel小工具的样式标签主要包含以下三个设置项。

1. Slides
2. Navigation
3. Pagination

幻灯片样式设置

Slides：样式标签中的幻灯片设置用于调整Carousel单元格的外观样式。

设置内容：

1. Gap Between Slides：设置单元格之间的间距，范围为0-400。数值越大，间距越大。
2. Background Type：选择背景类型，可以是经典背景或渐变背景。
3. Background Color：设置背景颜色，可以选择或更改任意颜色。
4. Border Type：选择单元格的边框类型。
5. Border Width：设置单元格边框的宽度，数值越大，边框越宽。
6. Border Color：设置边框颜色，可以选择或更改任意颜色。
7. Border Radius：设置单元格边角的弧度，数值越大，弧度越大，边角越圆。
8. Padding：设置单元格边框与内容之间的间距，数值越大，间距越大。

总结：

本教程详细介绍了如何在Elementor Pro中创建和使用最新添加的Carousel小工具。内容包括如何开启Mega菜单功能、调整Carousel设置、添加和编辑单元格、设置自动播放和滚动速度、配置导航箭头和分页指示器，以及调整Carousel单元格的外观样式。通过这篇指南，你可以全面掌握Carousel小工具的使用方法，提升网站的互动性和视觉效果。