Wordpress插件与设计 - Elementor 专业教程 5 - Carousel小工具的设置和使用方法 - 特色图片

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

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

本教程将简要介绍如何创建和使用Carousel小工具。

1. 更改Elementor设置

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

进入Elementor特性标签一览页面后,需要启用以下两个功能。

  1. Flexbox Container(Grid容器)
  2. Nested Elements(嵌套元素)

2. 添加Carousel小工具

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

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

3. 在Carousel中编辑内容

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

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

按照上述步骤,你大致可以了解Carousel小工具的最基本的创建方法。

接下来,我将解释如何使用Carousel小工具的内容和样式标签。

4. Carousel的内容标签。

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

  1. Slides
  2. Settings
  3. Navigation
  4. Pagination
4-1 Slides

Slides是用于为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单元格滚动效果的设置。

设置内容如下:

  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的前进或后退箭头图标的设置。

此设置项主要包含3个设置内容。

  1. Arrows:选择是否开启导航箭头图标的设置。开启后,用户可以通过点击箭头来指定显示内容。
  2. Previous Arrow:设置前进箭头图标的样式和显示位置。
  3. Next Arrow:设置后退箭头图标的样式和显示位置。

Previous Arrow和 Next Arrow 的设置内容相同,所以我将一起说明。

  1. Icon:选择和替换箭头图标。可以选择不显示,上传图标或从预设图标中选择。
  2. Orientation:指定导航箭头在Carousel内的水平或垂直对齐方式。Position:指定导航箭头在Carousel内的水平或垂直方向的具体位置。

关于向导箭头的定位,您可以先选择对齐方式,然后再调整其在水平或垂直方向的具体位置。

4-4 Pagination

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

至于使用哪种显示方式,可以根据设计需求自行选择。

5. Carousel的样式标签

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

1.Slides
2.Navigation
3.Pagination

5-1 Slides

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

设置内容包括:

  1. Gap Between Slides:指定单元格之间间距的设置。可以设置0-400的数值。数值越大,间距越大。
  2. 背景类型:指定背景类型。可以在经典和渐变中选择。
  3. 背景色:给背景添加颜色的设置。可以选择或替换任意颜色。
  4. 边框类型:指定单元格边框类型的设置。
  5. Border Width:指定单元格边框宽度的设置。数值越大,边框宽度也越大。
  6. Border Color:指定单元格边框颜色的设置。可以选择或替换任意颜色。
  7. Border Radius:指定单元格边框四角弧度的设置。数值越大,边角弧度越大,越接近圆形。
  8. Padding:指定单元格边框和内容之间的间距。数值越大,间距越大。

关于样式标签的Navigation和Pagination的设置方法,请参考《Elementor 基础教程 14 – 图像幻灯器小工具的设置和使用方法》。

6. Carousel的高级标签

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

7. 要点总结

Carousel小工具与图像幻灯器小工具相似。

不同的是,Carousel小工具提供了更多的内容展示方式和更高的设计自由度。

每个单元格内不仅可以容纳多个小工具,还可以对多个单元格进行详细的排版操作。

至于设计,希望您可以多做尝试,解锁更多的内容展示形式。

希望本篇教程对您使用Elementor有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - Elementor 专业教程 18 - Table Of Content小工具的设置和使用方法 - 特色图片
Elementor 专业教程 18 - Table Of Content小工...
Wordpress插件与设计 - Elementor 通用教程 6 - Elementor Kit Library的使用方法 - 特色图片
Elementor 通用教程 6 - Elementor Kit Library...
Wordpress插件与设计 - WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义 - 特色图片
WP教程 20 - 三分钟搞定!快速学会WordPress主...
Wordpress插件与设计 - WP教程 32 - 一文搞定WP设置功能!让设置不再是你的难题 - 特色图片
WP教程 32 - 一文搞定WP设置功能!让设置不再是...
Wordpress插件与设计 - Elementor 专业教程 4 - Gallery小工具的设置和使用方法 - 特色图片
Elementor 专业教程 4 - Gallery小工具的设置和...
Wordpress插件与设计 - Elementor 基础教程 8 - 间隔小工具的设置和使用方法 - 特色图片
Elementor 基础教程 8 - 间隔小工具的设置和使...
Wordpress插件与设计 - WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别 - 特色图片
WP教程 2 - 别再傻傻分不清了!一文读懂WordPre...
Wordpress插件与设计 - WP教程 23 - 使用媒体区块,创建出色的多媒体页面!以提高网站的互动性 - 特色图片
WP教程 23 - 使用媒体区块,创建出色的多媒体页...
Wordpress插件与设计 - Elementor 专业教程 33 - Query的设置和使用方法 - 特色图片
Elementor 专业教程 33 - Query的设置和使用方...
Wordpress插件与设计 - Elementor 基础教程 15 - 基本图库小工具的设置使用方法 - 特色图片
Elementor 基础教程 15 - 基本图库小工具的设置...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别 - 特色图片

WP教程 2 - 别再傻傻分不清了!一文读...

Wordpress插件与设计 - WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义 - 特色图片

WP教程 20 - 三分钟搞定!快速学会Word...

Wordpress插件与设计 - Elementor 专业教程 15 - Media Caroucel小工具的设置和使用方法 - 特色图片

Elementor 专业教程 15 - Media Carouc...

Wordpress插件与设计 - WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性! - 特色图片

WP教程 28 - 如何有效使用WP评论功能,...

Wordpress插件与设计 - Elementor 专业教程 22 - Facebook Button小工具的设置和使用方法 - 特色图片

Elementor 专业教程 22 - Facebook But...

Wordpress插件与设计 - Elementor 基础教程 7 - 分割线小工具的设置和使用方法 - 特色图片

Elementor 基础教程 7 - 分割线小工具...

AI工具 与服务
AI工具与服务推荐 - Sonauto - AI音乐创作工具 - 特色图片

Sonauto - AI音乐创作利器,轻松制作热...

AI工具与服务推荐 - SUPERLALA AI - AI艺术应用 - 特色图片

SUPERLALA AI - 创意AI艺术生成,激发...

AI工具与服务推荐 - Clipping Magic - 免费AI智能抠图工具 - 特色图片

Clipping Magic - AI抠图惊艳,背景瞬...

AI工具与服务推荐 - aiXcoder - 智能化软件开发工具 - 特色图片

aiXcoder - 码农变身AI战士,编程如虎...

YYP-2024-07-13-12-40-35

Cassidy - 创建个性化AI助手,简化工作...

AI工具与服务推荐 - EmbedAI - AI聊天机器人构建工具 - 特色图片

EmbedAI - ChatGPT定制化聊天机器人,...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片

Canva新手指南2 – 告别PS!全面解析Can...

Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片

Canva 使用教程 9 - 如何巧妙地利用建...

Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片

Canva新手指南4 – 告别平庸!用Canva打...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片

Canva新手指南1 - 全面解析Canva文本框...

社媒运营 与营销
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片

解密YouTube用户互动策略!掌握频道人...

社媒运营推广 - Youtube - 从0到10万!12个实用技巧快速提升YouTube频道的订阅量 - 特色图片

从0到10万!12个实用技巧快速提升YouTu...

社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片

一文带你解析海外版小红书Lemon8!Z世...

社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片

一文读懂YouTube Premium会员权益!让...

社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片

新手必看!解锁YouTube视频广告投放优...

AI工具 分类筛选
AI Main Category checkbox