Elementor 专业教程 15 – Media Caroucel小工具的设置和使用方法

2023-11-26
Elementor 专业教程
喜欢(0)
Elementor pro Media Caroucel widget

Elementor Media Carousel 小工具能在页面中展示各种媒体内容,如图片,视频或音频等。

Media Carousel小工具提供了许多自定义选项,如改变图像大小,设定轮播速度,添加动画效果等样式和排列方式。你可以轻松地添加,删除,重新排列媒体,并制作各种图库,多媒体展示页面。

使用Media Carousel小工具,你可以轻松创建出色的页面来展示内容,吸引用户的关注,提高用户体验。

本篇教程将详细说明Media Carousel小工具的功能设置和使用方法。

Elementor Media Carousel 小工具

首先,将Media Carousel 小工具拖放到编辑栏内,如下图所示。

拖放小工具到编辑栏后,你会看到如下画面。

1. Media Carousel 小工具的内容标签

Media Carousel小工具的内容标签主要有“Slides”和“Additional Options”

1-1 Slides

● Skin

Skin是选择展示方式的设置选项。你可以在以下3种预设中选择:

  • Carousel(默认)
  • Slideshow
  • Coverflow

根据你选择的Skin,内容标签中的设置选项会有所变化。所以,我们需要根据不同的Skin选择来进行说明。

但是,下方的Slides是所有Skin共同的设置选项。所以我们首先来说明Slides内容。

● Slides

Slides是指定Media Carousel内需要展示的图像或视频内容的设置选项。

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

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

如果你想“复制”或“删除”特定的项目,只需点击每个项目名称旁边的“复制”或“删除”按钮即可。

点击单个项目,你可以看到里面有以下3个设置选项:

  • Type
  • Image
  • Link

→ Type

Type是选择显示内容格式的设置选项。你可以在“图像”和“视频”中选择。

◆如果你选择Type为 Image

Image

Image是选择和替换要展示的媒体文件的设置选项。你可以在媒体库中选择已上传的图像文件,或上传新的图像文件并选择。

Link

Link是指定点击图像时的链接设置选项。你可以在以下3个预设中选择:

  • None(默认)
  • Media File
  • Custom URL

如果你将Link选择为“Media File”,点击图像的话图像将以灯箱的形式显示在页面中,如下图所示。

如果你将Link选择为“Custom URL”,你需要给图像添加自定义链接,如下图所示。

设置自定义链接后,用户只需点击对应的图像,就会跳转到指定的链接页面,网站,或者第三方服务。

◆如果你选择Type为 Video

当你选择Type为“Video”时,需要添加自定义Video链接,如Youtube,Vimeo等视频链接。

点击图片上的播放按钮,就会自动弹窗播放指定的视频内容。

关于视频的封面图像,以上图中使用了洋梨的图像。但是如果设置视频时,最好设置一个封面图片为好。

● 选择Skin为Carousel时的 Effect

当选择Skin为Carousel时,包含的设置选项如下:

  • Effect
  • Slides Per View
  • Slides to Scroll
  • Height
  • Width

效果(Effect)

“效果” 是用来设置媒体内容切换动画效果的选项。可以从预设的 “幻灯片(Slide)”, “淡入淡出(Fade)”, “立方体(Cube)” 中选择。

每次展示内容个数(Slides Per View)

“每次展示内容个数” 是用来设置轮播中每次展示内容个数的选项。默认是展示3个内容。可以选择0到10个内容。如果设置为4,效果如下图所示。

※注意:当效果设置为 “淡入淡出” 或 “立方体” 时,此项设置将失效。另外,设置的展示数量不能超过项目总数,如果超过也将失效。

每次滚动项目数量(Slides to Scroll)

“每次滚动项目数量” 是设置每次轮播滚动多少个项目内容的选项。默认是1个。可以选择0到10个。

注意:当效果设置为 “淡入淡出” 或 “立方体” 时,此项设置将失效。另外,设置的展示数量不能超过项目总数,如果超过也将失效。当项目数量较少时,建议使用默认设置。

高度(Height)

“高度” 是用来设置轮播框架高度的选项。可以设置0到1000之间的数值。默认高度为230。

上图是将高度设置为500像素时的效果。可以根据设计需要进行自定义设置。

※注意:如果设置的高度超过图像的原始像素高度,图像会被放大显示。如果图像的原始像素不高,最好不要设置过高的高度,以免图像变模糊,影响用户体验。

宽度(Width)

“宽度” 是用来设置轮播容器宽度的选项。默认是100%的宽度。

这里的百分比是相对于编辑栏宽度的百分比,所以设置的百分比是以编辑栏宽度为标准的。可以设置0到100之间的数值。

当然,也可以使用像素单位来设置轮播框架的宽度。关于单位设置,将在其他课程中详细介绍。

● 当选择Skin为Slideshow时的 Effect

当选择Skin为Slideshow时,轮播Box的布局会变化,同时会扩大显示轮播Box的最左边图像。如下图所示:

Effect

Slideshow的Effect与Carousel的Effect的说明相同,请参考Carousel的说明。

Height

Slideshow的Height是指定扩大显示图像内容部分的高度设置选项。可设置0到1000之间的数值。默认数值约为450。上图是将数值设置为300时的效果。根据添加的内容原始大小来调整显示大小即可。

Slides Per View

Slideshow的Slides per View是指定下方滑动图像每次展示内容数量的设置选项。 默认是5。可根据项目数量进行选择。

Ratio

Ratio是指定下方滑动图像显示纵横比的设置选项。可在以下预设中选择:

  • 1:1
  • 4:3
  • 16:9
  • 21:9(默认)

上图是将纵横比设置为1比1时的效果。

Centered Slides

Centered Slides选项用于选择是否启用轮播Box中间图像的扩大显示。默认是关闭。

关闭状态时,默认扩大显示轮播Box最左边的图像。开启此项后,可以将轮播Box中间的图像扩大显示。

●当选择Skin为Coverflow时的 Effect

当选择Skin为Coverflow时,设置内容与Carousel的设置相同。所以请参考Carousel的设置。

1-2 Additional Options

●Arrows

Arrows选项用于选择是否显示左右切换箭头。默认是显示,也可选择关闭。

●Pagination

Pagination选项用于选择分页导航的显示方式。分页器可让用户快速确认整体页面数量以及正在阅读的页面信息,因此建议显示分页导航。分页导航可在以下4个预设中选择:

  • None:不显示分页导航
  • Dots(默认):圆点分页导航
  • Fraction:数字分页导航
  • Progress:进度条分页导航

点数和数字分页导航比进度条分页导航更直观地显示页面总数,但设计感不如进度条。可根据页面设计进行选择。

●切换持续时间

切换持续时间(Transition Duration)是指定轮播动画从开始到结束的持续时间的设置。默认预设500毫秒,即0.5秒。

●自动播放

自动播放(Autoplay)是选择是否开启自动轮播的设置选项,默认是开启。关闭自动轮播时,需要用户点击箭头或者分页器才能滑动内容。

●自动播放速度

自动播放速度(Autoplay Speed)是指定自动轮播速度的设置选项。默认是5000毫秒,即每5秒轮播一次幻灯片内容。

●无限循环

无限循环(Infinite Loop)是选择是否无限循环播放媒体内容的设置选项,默认是开启。开启无限循环时,图像将从左到右无限循环播放媒体内容。选择关闭时,媒体内容从左到右播放一次后,在最后的媒体内容暂停播放。

●悬停时暂停

悬停时暂停(Pause on Hover)是选择鼠标悬停时是否暂停轮播的设置选项,默认是开启。开启后,当鼠标悬停于媒体内容上方时,轮播将自动暂停。

●交互时暂停

交互时暂停(Pause on Interaction)是选择是否在用户操作时暂停轮播的设置,默认是开启。此项功能是当“悬停时暂停”选择关闭时才发挥效果的。当“悬停时暂停”选择关闭时,用户的鼠标悬停于媒体上边图像也会自动播放。这时如果用户操作轮播媒体内容时,媒体还在轮播的话,用户的操作就变得没有意义了。因此这时需要开启“交互时暂停”功能,在用户操作时,暂停自动轮播。等用户不再操作时,再开启自动轮播。

●覆盖层

覆盖层(Overlay)是选择是否显示媒体内容覆盖层选择是否显示媒体项目的覆盖内容。可在“Text”和“Icon”中选择。

  • 选择Text时

选择Text时可在以下选项中选择文本内容。

  • Title:图像标题
  • Caption:说明文字
  • Description:说明

上述文本可在媒体库对每个媒体文件进行设置。

关于图像的详细说明请参考《Elementor 基础教程 – 图像小工具的设置和使用方法

● Animation

Animation是选择鼠标悬停时覆盖内容显示动画效果的设置选项。可在以下预设动画中选择。

  • Fade(默认)
  • Slide Up
  • Slide Down
  • Slide Right
  • Slide Left
  • Zoom In

具体效果请看以下视频。

选择Icon时

选择Icon时,可在预设的4个Icon中选择显示在覆盖内容中的图标。如下图

根据喜好或者设计需要进行选择即可。

● 图像尺寸

图像尺寸是指定加载显示图像大小的设置选项。

更多关于图像尺寸的详细说明,请参考Elementor图像小工具的说明。

● Image Fit

Image Fit是指定媒体内容显示适应方式的设置选项。可在以下预设中选择:

  • Cover(默认):所有的图像将以相同的大小显示
  • Contain:所有的图像会根据原有的大小全部显示
  • Auto:和Cover相同,但是会受到图像尺寸的影响。

选择任意一个方式,媒体内容的显示方式会发生变化。如下图:

在选择显示方式时,需要考虑图像原有的大小,以及轮播Box的高度等因素综合判断后选择。

● LazyLoad

Lazy Load是选择是否延迟加载媒体内容的设置选项。开启后可加快页面的加载显示速度。

如果不是特别大的图像,区别不是很大。默认关闭即可。

2. Media Caroucel 小工具的样式标签

Media Caroucel的样式标签主要包含以下4个设置项:

  1. Slides
  2. Navigation
  3. Overlay
  4. Lightbox

2-1 Slides

Slides是自定义Media Carousel外观样式的设置选项。包含以下设置选项:

  • Space Between:指定媒体内容之间的间距大小。
  • Background Color:指定轮播Box的背景颜色。
  • Border Size:指定轮播Box的边框大小。
  • Border Radius:指定轮播Box的边框半径大小。
  • Border Color:指定轮播Box的边框颜色。
  • Padding:指定轮播容器的内边距大小。

更多关于图像的详细设置说明,请参考Elementor图像小工具的说明。

2-2 Navigation

Navigation是自定义导航标识外观样式的设置选项。包含以下设置选项:

Arrows

  • Size:指定箭头导航大小的设置。
  • Color:指定箭头导航颜色的设置。

-Pagination

  • Position:指定圆点导航的显示位置。可在“Inside”和“OutSide”中选择。
  • Size:指定圆点导航图标大小的设置。
  • Color:选择和替换圆点导航默认颜色。
  • Active Color:选择和替换圆点导航当前页面的颜色

-Play Icon

  • Color:选择和替换视频播放按钮的颜色
  • Size:指定视频播放按钮的图标大小
  • Shadow:给视频播放按钮添加阴影效果。

2-3 Overlay

Overlay是自定义覆盖图层样式的设置选项。包含以下设置选项:

  • Background Color:选择和替换覆盖图层背景颜色
  • Text Color:选择和替换文本或图标颜色
  • Icon Size:指定图标大小的设置。

※在内容标签的Overlay中选择“Text”时,样式标签的Overlay的Icon将变成排版设置。

2-4 Lightbox

LightBox是设置灯箱外观样式的设置项。包含以下设置选项:

  • Color:选择和替换灯箱背景颜色。
  • UI Color:选择和替换灯箱箭头和关闭按钮的默认状态颜色
  • UI Hover Color:选择和替换灯箱箭头和关闭按钮的悬停状态颜色。
  • Video Width:指定媒体内容显示宽度的设置。以画面宽度为准的百分比。

更多关于样式的颜色,排版,阴影,动画效果等详细设置可参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法

3. Media Carousel小工具的高级设置

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

以上就是Media Carousel小工具的功能和使用方法的说明。

希望本编内容能对您使用Elementor有帮助。

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

Elementor pro Post widget content.webp
Elementor 专业教程 1 – Post小工具的设置和使用方法 内容标签篇
Elementor basic 8 jiange.webp
Elementor 基础教程 8 - 间隔小工具的设置和使用方法
Elementor basic 19 zhengming.webp
Elementor 基础教程 19 - 证明小工具的设置和使用方法
Elementor basic 13 xingji.webp
Elementor 基础教程 13 – 星级小工具的设置和使用方法
Elementor21-shoufengqin
Elementor 基础教程 21 - 手风琴小工具的设置和使用方法
Elementor pro Blockquote widget
Elementor 专业教程 21 – Blockquote小工具的设置和使用方法
Elementor pro Review widget
Elementor 专业教程 17 – Review小工具的设置和使用方法
Elementor basic 30 yuedugengduo.webp
Elementor 基础教程 30 – 阅读更多小工具的设置和使用方法
Elementor basic 26 jianma.webp
Elementor 基础教程 26 – 简码小工具的设置和使用方法
Elementor pro Paypal Button widget.webp
Elementor 专业教程 30 – Paypal Button小工具的设置和使用方法