掉 图片旋转木马小部件 进入页面,从媒体库中选择图像,为每个设备设置每视图幻灯片,然后打开自动播放。四个步骤,大约两分钟,然后 无需许可证.
That’s the short version。this recover the settings that separate a carousel that works with one that looks mightly wrong on the phone, playingflow layout, the lightbox, and the two image merross that make an otherly fine carous 完整的旋转木马小部件阵容 比较一个地方的每种类型,并且 旋转木马与滑块故障 确定命名。
你需要什么
Elementor free和Master Addons free。Elementor自己的图像旋转木马涵盖了基础知识(每个设备都有字幕、一个灯箱和幻灯片),但它没有覆盖流布局、行或进度式导航,因此本次演练使用 主插件图像旋转木马的,它也是免费的,并添加了字幕,一个灯箱和一个覆盖流布局。
1步:添加小部件
Elementor中打开页面,在小部件面板中搜索“图像转盘”将其拖入容器中。
Placeholder 图像渲染,因此您可以在提交任何内容之前看到形状。暂时保留它们。与一致的 placeholder 相比,设置布局比与真实照片相比更容易,真实照片的大小都不同。
2步:添加您的图像
单击图库字段并从媒体库中进行选择,或上传。订购事宜和拖放重新订购的作品,因此请将最强的图像放在第一位,因为在移动设备上,它可能是唯一有人看到的。
在内容设置下,您将找到图像大小、标题源和链接行为。
图像大小是人们在《Full and retrate》中留下的设置。 Full表示原始上传:4000px摄像头导出服务到400px幻灯片中,WordPress已经生成了更小的版本; pick medium_large 或 large 您将减少旋转木马的大部分重量,而不会产生任何明显的差异。
标题 pull from媒体库的标题或描述字段,因此如果幻灯片需要文本,请将其写在那里,而不是在小部件中查找每幻灯片文本框。
3步:导航
Arrows, 点,分数, 或者一个滚动条。根据你有多少张幻灯片来选择:
- 8张幻灯片下: dots。人们可以一眼看到整套, 跳来跳去。
- 8到20: 箭头只有。二十个点是一个涂片,而不是一个对照。
- 20岁以上: arrows加分数(“04 / 32”),数字是唯一告诉某人他们在哪里的东西。
Mobile上,查看箭头大小,桌面默认经常是30px的目标,轻点可访问的最小值是44px,在移动断点上碰一下或者完全掉落箭头,依靠刷。
第 4 步:轮播行为
这是决定旋转木马感觉是否正确的面板。
每视图幻灯片:设置三次。 击设置顶部的设备图标,给桌面、平板和移动设备自己的价值,四、二、一是安全默认值,这个单步是手机上工作的转盘和显示四个压扁缩略图的转盘的区别。
滑动滚动。 1设置为连续浏览感觉,或者匹配每视图幻灯片进行页面式分页,当幻灯片形成组时匹配更好;1对于长无差别集更好。
自动播放。 为装饰画廊打开它,如果幻灯片可点击,则将其关闭,因为有人会伸手去获取图像并点击替换它的图像悬停在悬停覆盖桌面但触摸时没有悬停。
无限循环需要足够的幻灯片。 Swiper 克隆滑动来伪造包装,它至少需要将您的每视图滑动次数增加一倍,每视图三次的四个图像将明显跳转。添加图像或关闭循环。
速度。 300到500ms,200以下看起来像是剪切而不是过渡;800以上的人开始点击两次。
覆盖流布局
将布局从标准切换到 Coverflow,侧滑片以 3D 形式旋转、变暗且后退,使中心滑片成为唯一可读的滑片。
它适合作品集和案例研究,任何一次一个图像是重点的东西。人们需要比较的任何东西都是错误的,因为整个设计的存在是为了阻止你看着邻居。
两种设置可以正确:在 30 到 40 度之间旋转(过去 50 度,侧滑片变成不可读的条),然后进行居中滑动,或者活动图像与左齐平,构图崩溃。
Coverflow是四种深度风格之一,翻转、弧线和轨道是另外三种,而 Elementor 3D 转盘指南 涵盖每个人的优点。
幻灯片的造型
样式选项卡处理幻灯片、边框半径、阴影和悬停状态之间的间距。
值得再思考的设定是 差距.零间隙使转盘读作一个连续的图像条,这对于全景图是正确的,对于不同的项目是错误的,16 到 24px 是幻灯片读作单独的卡片而行看起来不稀疏的范围。
Hover 效果(比例、叠加、说明文字)适用于整套,而不是每张幻灯片。将比例保持在 1.05 以下。在 hover 上增长 15% 的幻灯片会推入其邻居,看起来像一个布局错误。
灯箱和字幕
打开灯箱,单击幻灯片,在页面上打开全尺寸图像,其自己的下一个和之前的控件将步入整个转盘。
这是使用转盘而不是网格进行摄影的原因。转盘是索引;灯箱是查看器。标题和字幕将内容带入灯箱,因此标题一次即可在两个地方都有效。如果您希望页面上的索引作为缩略图条可见,而不是隐藏在点击后面,那就是 画廊滑块 相反,它需要 Pro。
1个注意事项:灯箱是服务全尺寸图像,而不是缩略图,如果您将图像尺寸设置为 medium_large 8MB的相机文件,转盘和你的原件,灯箱还是会拿8MB的版本,上传压缩原件,不只是显示屏大小。
如果您想要缩略图导航
Image Carousel 是单行,没有缩略图条带驱动一个大的预览,如果那两部分布局是你所追求的,导入 维特琳板画廊 相反,这是免费设计之一 滑块模板集合:缩略图条下方的单板,带有标题面板,其中包含可编辑的帧数据表,适用于地点、时间、镜头、光圈、快门和 ISO。它是为摄影而构建的。相同的预览加缩略图形状是大多数人要求视频转盘时所指的,并且 视频转盘和画廊滑块指南 涵盖该版本。
要导入它:主插件 → Widget Builder → 导入 Widget,将 JSON 拖入,它出现在 Elementor 收藏夹下。它在免费插件上运行,无需 Pro 许可证。相同的集合有 基座英雄滑块、每滑动链接的全血英雄滑块,同样可以免费导入。 总共二十个命名设计其中八个免费。
箭头造型
尺寸、颜色、背景、边框半径和位置:旋转木马内部、外部或与边缘重叠。
(carousel)外定位的箭头需要水平房间,而全宽容器上则没有,它们会夹住,要么保持容器比视口窄,要么将箭头定位在里面。
的结果
Call it done之前,先通过蜂窝加载实际手机上的页面,而不是浏览器的设备模拟器,它调整了视口大小,但保留了桌面的连接和GPU。大多数转盘问题只出现在真实网络上的真实硬件上。
两个错误使旋转木马变慢
提供全尺寸图像。 Covered over,而且是大,摄影现场十滑转盘全尺寸可以20MB,同一个转盘在 large 2MB以下,没有人能分辨。
将其放在折叠上方并自动播放。 轮播成为您最大的内容丰富油漆,自动播放意味着浏览器在页面加载中对性能最敏感的第二秒内正在动画化。如果轮播必须在顶部,请关闭自动播放并静置,直到页面沉降为止。
标志与照片是不同的工作。它们以不匹配的形状和颜色出现,需要晚上才能坐成一排,这是 标志旋转木马演练 穿过。
常见问题
Elementor 有免费的图像转盘吗?
Yes。Elementor的免费插件包括一个图像旋转木马小部件,带有箭头,点,标题,灯箱和自动播放。Master Addons图像旋转木马也是免费的,添加了覆盖流布局,多行,进度,分数和滚动条导航,以及正常,悬停和活动幻灯片的样式。每个设置都列在 图片旋转木马文档.
如何使 Elementor 图像转盘响应?
使用设置顶部的设备图标在每个断点上单独设置每张幻灯片,而不是为所有屏幕留下一个值。桌面上的四个、平板电脑上的两个、移动设备上的一个也适用于大多数图库。在移动设备上检查箭头大小,因为默认值通常低于 44px 可访问的点击目标。
如何向 Elementor 图像转盘添加标题?
Captions来自媒体库的Caption或Description字段,而不是来自小部件中的文本框,在小部件的内容设置中设置标题源,然后编辑媒体库中每个图像上的文本,它们会自动传送到灯箱。
我可以将转盘中的每个图像链接到不同的 URL 吗?
是在内容设置中将链接行为设置为自定义URL,并且每张幻灯片从媒体项目的链接字段中获取自己的目的地,这就是人们搜索具有多个自定义URL的图像转盘时所追求的。
为什么我的图像转盘在循环时会跳转?
圈(loop)的幻灯片不够,滑动器克隆(Swiper clones)的幻灯片可以创建环绕式,并且需要至少两倍的每视图幻灯片数,每次显示三个图像的四个图像会跳转每个周期,添加更多图像或关闭无限循环。
为什么我启用缓存后我的图像转盘没有显示?
JavaScript 组合或推迟在 init 代码运行之前停止 Swiper 加载。排除 swiper, elementor-frontend 並 jquery-core 从缓存插件中的 JS 优化,以及在 LiteSpeed 上将它们添加到访客模式排除字段。完整演练: Elementor 滑块滑块故障排除.
