2个相关的工作, 一个视频转盘在水平轨道上滑过视频 A. 画廊滑块 显示一个大预览,下面有一个缩略图条,这是人们说“视频旋转木马”时真正想要的布局,因为一排同等大小的视频缩略图是观看任何东西的更糟糕的方式。
下面两个小部件,加上使视频旋转木马成为您可以放在页面上最慢的小部件的嵌入问题以及它的一行修复。两个小部件都是其中的一部分 完整的旋转木马小部件集合.
从页面速度问题开始
YouTube 在一个页面上嵌入的六个大约是单个视频播放前 3MB 的第三方 JavaScript。每个 iframe 无论是否有人点击,都会加载 YouTube 播放器、其分析和 cookie 基础设施。
把这六个放在旋转木马中,情况会变得更糟,因为 旋转木马呈现其所有幻灯片(包括屏幕外的),因此所有六个 iframe 都会同时初始化。
修复的是a 立面:用播放按钮显示视频的海报图像,只有在有人点击时加载真正的嵌入。一个图像而不是六个播放器。大多数视频小部件都有一个“懒惰加载”或“点击播放”选项,可以做到这一点;打开它,页面在移动设备上会快几秒钟。
Widget 不提供,用带有灯箱的海报图片,而不是内嵌。相同的视觉结果,重量的一小部分。
方法 1:图库滑块、预览图和缩略图
的 画廊滑块小部件 give you the layout most video and photo galleries want: a large preview pane with a scrollable thumbnail strip。it's a Pro widget, and it's image widget, so it building the layout than the replaying。if your gallery is images only 维特琳板画廊 是免费进口设计,具有相同的盘加缩略图布局,但它不处理视频。
- 在画廊滑块中拖动 并打开内容选项卡。
- 创建您的画廊 from媒体库。for这里表示海报帧的视频集,播放由方法2或3处理。
- 打开缩略图 并将缩略图条设置为旋转木马模式,以便它独立于主预览滚动。
- 设置预览位置: 下方、上方、左侧或右侧的缩略图。下面是安全默认值;左侧或右侧适合肖像内容。
- 设置预览宽度 因此,主窗格不会将缩略图推离平板电脑屏幕。
小部件上的每个字段都列在 中 画廊滑块文档 如果您想要完整的参考而不是短路径。
缩略图旋转木马模式是制作这个比例的设置,没有它,二十个缩略图包裹成四行,吃掉整个视口,有了它,它们就停留在一条可滚动的线上。
在移动设备上,预览下方有三到四个可见的缩略图。左右位置会自动塌陷到下方,即右侧,因为 390px 屏幕上的侧条不会为预览留下任何内容。
方法 2:媒体旋转木马,在曲目中播放的视频
Elementor Pro的媒体旋转木马如果视频必须在旋转木马内部播放而不是在点击后方播放,那么它就是执行此操作的小部件。每张幻灯片都设置为图像或视频,并且视频幻灯片会自带一个YouTube、Vimeo或自托管URL,因此混合集在一个轨道上工作。
Elementor Pro 的视频播放列表如果套装真的是库而不是条带,就像课程、教程系列或频道存档,那么它的形状更好,播放器旁边列出的视频,每个视频都有一个标题和一个持续时间,播放器在没有页面加载的情况下交换的是列表而不是转盘,这就是它的论据:标题是人们如何决定观看的内容,一排缩略图让他们猜测。
回转盘,媒体转盘是这里唯一可以在线播放视频的小部件,而这也是它的成本,也就是下面的设置的用途。
- 打开灯箱模式。 Inline playing,就是每张幻灯片都带有一个播放器,Lightbox模式显示海报,点击加载播放器,也就是这个帖子顶部内置到小部件中的立面图案。
- 不要自动播放第一个视频。 音未提示的开火是失去一个人的最快方法,如果必须自动播放,请将其静音。
- 将运行时放入标题中。 “这是人们问的第一个关于视频的问题,并在点击提高完成率之前回答它。
方法 3:免费海报旋转木马,点击后有视频
没有许可证,你仍然想要一个视频转盘?两条免费路线,并且都保持页面快速,因为在有人要求之前没有任何内容加载。
- 导出每个视频的海报帧并将其作为图像上传。
- 将它们添加到免费的图像旋转木马画廊。
- 打开灯箱,点击即可打开页面上的框架,而不是导航离开。
- Style选项卡中添加播放按钮覆盖层,这样幻灯片就读作视频而不是照片没有它,没有人点击。
That get you the look。it does not get you is a different destination per slide, because a gallery-based carousel gives each slide the same link。if each video needs its own 博客小部件 相反,在轮播模式下:它会拉动缩略图、标题和视频所在帖子的链接。在专业版上, 环形旋转木马 从查询中执行相同的操作,因此无需编辑页面即可出现新视频。
这是从柱子顶部开始的立面图案,由手工构建。它是存在的最快版本的视频转盘,因为在有人要求之前没有任何负载。 图像转盘演练 完整覆盖该小部件。
纵横比,以及打破它的东西
16:9 设置,并将其设置在每张幻灯片上。视频转盘中的混合比例会产生不同高度的卡片,并且与网格不同,网格中可以原谅粗糙的底部边缘,水平条将每个不匹配直接放在邻居旁边。
产品卡出于同样的原因而遇到同样的事情,并且 WooCommerce 产品轮播指南 涵盖如何对它们进行升级。
通常的罪魁祸首是在其他景观集中设置一个垂直剪辑,要么给它自己的转盘,要么用匹配的背景将其装入 16:9 的信箱中,不要让一个 9:16 视频设置十一个景观的高度。
视频模式
如果视频是您自己的内容并且对于搜索很重要,请添加 VideoObject schema:名称、描述、缩略图网址、上传日期和持续时间,正是它使视频丰富的结果成为可能。
人们错过的两个条件:视频必须是页面的主要内容,而不是装饰,缩略图 URL 必须是可公开爬行的。关于页面上的六个嵌入视频的图库不符合视频丰富的结果,但您将其标记出来,因为页面的主要内容不是视频。
常见问题
Elementor 有视频转盘小部件吗?
Elementor Pro的媒体转盘在一个转盘中处理图像和视频,Elementor free不包含它,Master Addons在其Pro层中添加了一个Gallery Slider用于预览-加缩略图布局,并且它是一个图像小部件而不是视频播放器,免费的图像转盘可以使用带有灯箱的海报图像代替视频转盘。
如何在 Elementor 中添加 YouTube 旋转木马?
用海报图片而不是实时嵌入。将每个视频的缩略图添加到旋转木马中,将幻灯片链接到视频 URL,并启用灯箱,以便在页面上打开。一页上的六个实时 YouTube iframe 约为第三方 JavaScript 的 3MB;六个海报图片只是其中的一小部分。
为什么添加视频转盘后我的页面速度很慢?
转盘中的每个嵌入都会立即加载其播放器,包括屏幕外的幻灯片,因为转盘会渲染其所有幻灯片。打开小部件的懒惰加载或点击播放选项,这样只有海报图像加载,直到有人点击,或切换到带有灯箱的海报图像。
Gallery滑块和图像转盘有什么区别?
画廊滑块有两个链接部分:一个大型预览窗格加上一个导航它的缩略图条。图像转盘是一排大小相等的单排幻灯片。当物品值得一次正确观看时,请使用画廊滑块;当您展示一组时,请使用转盘。
如何将缩略图添加到 Elementor 滑块中?
Gallery Slider 小部件,在内容选项卡中启用缩略图,并将缩略图条切换到旋转木马模式,这样一长组就停留在一条可滚动的行上,而不是包裹成行。设置预览位置,在布局下方、上方、左侧或右侧。
我可以在一个 Elementor 旋转木马中混合图像和视频吗?
Yes。Elementor Pro的媒体旋转木马原生支持混合类型,通过免费的图像旋转木马,使用海报图像的视频,并将那些幻灯片链接到视频URL,因此图像和视频都表现为幻灯片,只有点击时加载视频。
建造哪一个
课程或教程系列:Elementor Pro 的视频播放列表,因为标题和持续时间会完成工作。必须在旋转木马轨道上播放的视频:媒体旋转木马,开启灯箱模式。产品组合卷轴或产品演示:带缩略图的图库滑块。营销页面上的一小部分视频,没有许可证:免费图像旋转木马,带有海报图像和灯箱,这也是三个视频中最快的。如果该视频只是英雄部分的背景纹理,则免费 背景滑块扩展 相反,旋转静态图像的重量只是循环视频的一小部分。
二十个都没有 小部件生成器 designs 处理视频,所以这是一项以库存小部件为答案的工作,对于集合中的其他所有内容, 定价页面 显示适用哪个层,以及 旋转木马与滑块 首先解决格式问题。
