拖进去 徽标滑块小部件、每个logo都添加为中继行、设置桌面、平板和移动的每视图幻灯片、循环开启自动播放,是一个免费的小部件,其中之一 一整个旋转木马小部件家族的,而且整个事情大约需要五分钟。
Setup 很简单,不容易的是让十二家不同公司的十二个 logo 看起来像是属于同一行,每个 logo 条都是实际问题,这下半部分就覆盖了。
步骤 1:添加徽标滑块小部件
Elementor面板上搜索“徽标滑块”并拖入。它是免费Master Addons插件的一部分,并且 自由对专业的崩溃 拥有该层中其他内容的完整列表。 徽标滑块文档 如果您想要参考版本,请涵盖每个控件。大多数插件插件都附带某种徽标小部件,并且 旋转木马插件比较 说哪些人把它放在许可证后面。
第 2 步:添加您的徽标
Logo都是一个中继器行:logo图像,一个可选链接,以及一个可选的悬停文本或悬停图像,alt文本来自于图像在媒体库中的Alt文本字段。
这里有两件事是大多数人跳过的:
写出真实的替代文本。 “Acme Corp logo,”而不是“logo-1.png.” 标志条是少数几个 alt 文本带有正版信息的地方之一,因为公司名称是内容。屏幕阅读器用户从十二张名为“image.”的图像中一无所获
链接每个徽标 目的地有用时才可以。将客户端徽标链接到客户端网站会将您的流量从正在转换的页面发送。而是将它们链接到您的案例研究,或者根本不链接。徽标条可以作为静态信任信号。
第 3 步:布局和行为
Logo条与图像转盘的默认值不同,因为工作不同,没有人研究logo,他们半秒钟注册。
- 每视图幻灯片: 6个在桌面上,4个在平板上,2个或3个在移动上。比照片转盘密度更高,因为标志很小,点就是数量。
- 自动播放: on。这是与见证规则相反的。没有什么可读的,所以连续移动不需要任何成本,并且显示的徽标比静态行更多。
- 速度: 比感觉正确慢。4000到6000ms。快速的标志条读作激动。
- 循环: on,并确保您的幻灯片至少有两次,每次浏览六次至少需要十二个徽标,否则包装将明显跳跃。
- 箭头和点: off。logo条并不是人们导航的东西。
将自动播放延迟设置为 0 and 转盘变成一个连续的跑马灯,而不是步步滑动,这是最现代的网站用于logo条的外观,并且 大帐篷指南 详细涵盖设置。
4步:使不匹配的徽标看起来一致
Logo真的是这里,你有十二个,四个是宽字标,三个是方形图标,两个是巨大的内部填充物烤入PNG,一个是高大的堆叠锁仓,把它们以相同的宽度放成一排,看起来像一张赎金纸币。
Sizing by width是错误的,一个宽字标设置为160px宽,视觉上很小;一个160px宽的方形图标是巨大的,它们是同一个数字,看起来一点也不像。
而是按光学面积划分的尺寸。 Export 同一画布上的每个标志,在最后的条带中给每个标记一个相似的视觉高度约 40 到 50px,并调整单个文件向上或向下直到它们看起来平衡,小部件以相同的图像分辨率显示每个标志,因此这种平衡发生在图像文件行斜视:任何跳出的标志都太大,任何消失的标志都太小,相信你的眼睛而不是数字,因为你的眼睛是访问者将使用的。
产品卡从另一个方向也遇到了同样的不匹配,其中一条条带中的肖像和方形照片构成了这一点 产品转盘 看起来很便宜。那里的固定装置是固定的长宽比,而不是固定的高度。
针对同一问题还有两个修复:
裁剪烤好的衬垫。 Logo从品牌套件导出,通常在图像文件内部带有宽敞的空白空间,那个填充是不可见的,它使logo渲染的大小比其邻居在相同高度上裁剪到可见的边界框中,然后再上传。
在可以的地方使用 SVG。 Logo是矢量艺术品。SVG在任何尺寸下都保持锋利,重量只有PNG的一小部分,而且,这是有用的部分,可以用CSS重新着色,这使得下面的灰度处理变得微不足道。
第 5 步:灰度悬停
Logo静止时去饱和,悬停时全彩这是默认处理,原因有:十二个品牌调色板中的十二个logo是视觉混乱,灰度将它们变成一种连贯的纹理。
Logo Slider 没有灰度开关,有两种方法可以做到,上传灰度文件为客户端 Logo,颜色版本为 Hover Logo Image,或者给自定义 CSS 的 Logo 添加 CSS 灰度滤波器,在 hover 上删除。Carousel 中的不透明度设置可以将 logo 静止时调暗到 0.6 左右,在 hover 上调暗到 1。如果使用 CSS,则保持过渡在 200 到 300ms 之间。比这更快,并且会闪烁;速度更慢,感觉很粘。
1个你不应该的案例:如果这些标志是新闻提及而不是客户,福布斯和TechCrunch那种条带,让他们保持彩色,那些标志通过它们的颜色来识别,而去饱和它们会让你失去你所购买的识别。
成品条
Where to put it: 紧邻英雄下方,或紧邻主要行动号召下方。两个位置都起作用,因为这两个位置都是访问者决定是否信任你的时刻。
Bu放的地方:页脚,页脚上一条标志条就是装饰,Bu有人滚动到页脚上去服气。
徽标条是为数不多的库存小部件优于设计小部件的部分之一,这就是为什么这二十个小部件都没有 小部件生成器 设计试图取代它。如果您确实想要其他部分的 Pro 设计, 定价页面 有层级。
有多少个标志?
八点到十六点。八点以下和滚动条引起人们对数量很少的关注,因为一排静态的六人看起来比骑自行车的六个标志更有信心。十六点以上,没有人看到后半部分,因此带名字的铅人们会认出。
And如果你只有四个客户:显示四个,在一个静态行,在一个体面的大小轮播是一种处理丰度的方式,用一个来隐藏稀缺性做你想要的相反的事情。
常见问题
Elementor 有徽标旋转木马小部件吗?
Not in core。Elementor free 和 Pro 均不包含专用徽标转盘,尽管核心 Image Carousel 可以显示一排简单的徽标。免费的 Master Addons 徽标滑块在自动播放速度设置为 0 时添加了每个徽标链接、悬停文本或悬停图像、工具提示和选框样式条带。
如何在 Elementor 中连续制作徽标旋转木马卷轴?
开自动播放和无限循环,然后将自动播放延迟设置为0,延迟为零可以消除每张幻灯片上的暂停,因此轨道连续移动而不是步进,将速度设置为4000到6000ms,因此读起来平静而不是疯狂。
如何在旋转木马中制作相同尺寸的徽标?
40到50px的固定容器高度,并让宽度自动运行,而不是固定宽度,然后用眼睛调整单个徽标,因为在同一测量值下,一个宽字标和一个方形图标看起来完全不同大小,首先从图像文件中裁剪出任何烘烤的填充物。
标志应该是灰度还是全彩?
灰度静止,悬停着客户和合作伙伴徽标的颜色,因为它将十几个冲突的调色板变成一个连贯的条带。保持新闻和媒体徽标为全彩,因为这些徽标通过颜色来识别,而去饱和它们会失去识别。
Logo转盘里应该有多少个logo?
8到十六。少于八看起来比移动条更像静止的行,因为滚动会引起人们的注意,有多少。超过十六意味着后半部分永远不会被看到,所以把可识别的名字放在第一位。
我可以将每个徽标链接到不同的页面吗?
是的,每个中继器行都有自己的链接字段。考虑您是否愿意,但是:将客户端徽标链接到客户端站点会发送转换流量。将它们链接到您自己的案例研究可以保留访问者并做更多的工作。
下一个
照片而不是徽标?不同的小部件, 不同的默认值: elementor 中如何创建图像转盘.还有一个集合 20种命名的滑块设计,其中8种是免费进口的尽管没有一个是徽标条,但对于徽标,徽标滑块仍然是工具。
如果缓存插件更新后条带停止移动,则这是 Swiper 初始化问题 修复就在这里.旋转木马形的一切都生活在 元素轮播小部件 页。
