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

创建和使用Carousel小工具

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

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

1.更改Elementor设置

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

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

(插入相关设置页面的截图)

进入特性页面后,需要开启以下功能:

  1. Grid容器
如何在Elementor Pro中创建和优化Carousel小工具
  1. 嵌套元素
如何在Elementor Pro中创建和优化Carousel小工具

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

2.添加Carousel小工具

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

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

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

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

3.在Carousel中编辑内容

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

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

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

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

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

4.Carousel的内容标签

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

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

Carousel设置选项:

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

4.1 Slides

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

如何在Elementor Pro中创建和优化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单元格滚动效果的设置。

如何在Elementor Pro中创建和优化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的安全区域,可以参考下图。

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

4.3 Navigation

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

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

导航箭头设置

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

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

4.4 Pagination

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

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

5.Carousel的样式标签

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

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

  1. Slides
  2. Navigation
  3. Pagination

幻灯片样式设置

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

如何在Elementor Pro中创建和优化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小工具

总结:

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10555/

(1)
上一篇 2024年 5月 26日 下午1:17
下一篇 2024年 5月 27日 上午10:02

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!