标志滑块

一面客户端徽标墙将页面其余部分向下推,仍然只显示少数品牌。徽标滑块将整个列表放入一个自行旋转的紧凑条带中。 标志滑块 小部件在 Elementor 的主插件 从任何一组徽标图像构建该条带,然后添加悬停效果、工具提示、自动播放和导航箭头,而无需单独的滑块插件。

Logo,每个Logo都可以链接到客户的网站,在悬停上交换到第二个图像,或者透露品牌名称和简短的描述,本指南通过小部件从第一次拖动到画布上,再到现场页面上完成的旋转木马。

Logo 滑块小部件的作用 #

Widget 取出一个 logo 图像列表, 将其变成一个响应式、自动播放的旋转木马, 您可以控制一次显示多少个 logo, 它们旋转的速度有多快, 以及当访问者悬停在一个 Swiper 引擎上运行, 因此滑块从一开始就在手机和平板电脑上触摸友好。

它位于主插件的滑块小部件组中,旁边 图片旋转木马 並 画廊滑块 widgets。那两个是为照片和画廊而构建的。logo滑块是为品牌标记而构建的:徽标保持小,均匀间隔,并排列成单行。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 您的客户或合作伙伴徽标已准备好作为图像文件。相同尺寸的徽标看起来最好;透明或白色背景的 300 x 150 像素左右的效果很好。

如何添加徽标滑块小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 标志滑块的,或者滚动到主插件部分,将小部件拖到您的页面上,它加载了六个名为品牌名称的占位符项目,因此您立即看到滑块形状,并将占位符逐个替换。

在徽标项目部分添加您的徽标 #

在 内容 选项卡,打开 标志项目.列表中的每个条目都是一个标志,单击一项展开,或用复制删除每行右边的图标.The 添加项目 底部的按钮将列表扩展到您需要的尽可能多的徽标。

在项目列表下放置适用于整个滑块的三个设置:

• 图像分辨率: wordpress的大小为每个标志服务,从缩略图到full。logo都是小文件,所以full通常没问题。
• 标题 HTML 标签: hover 上包裹品牌名称的标题标签,默认情况下为 H5。选择适合您页面标题结构的标签。
• 选择事件: what触发悬停效果,如面板所注,这只会在客户端徽标上启用悬停类型时启动。

在每个项目内部,单击 客户标志 field 来打开 WordPress 媒体库,上传你的 logo 文件或挑选已经在那里的附件面板显示文件尺寸,方便检查所有 logo 共享相同的大小。

设置每个徽标的链接和悬停效果 #

每个徽标项目都有自己的 链接 field。paste客户端的url,logo在直播页面变得可点击,齿轮图标打开通常的elementor链接选项,例如在新选项卡中打开。

的 悬停? dropdown决定当访问者将鼠标移到徽标上时会发生什么, 它有三种模式:

• 没有: logo就坐在那里,干净简洁。
• 文: 标志褪色,a 品牌名称 加短 描述 出现在它的位置。
• 图片: logo 交换到您选择的第二张图像。

与 文本 selected,出现两个字段,键入品牌名称和一行描述,小部件在悬停的标志上显示它们,这适合那些想在不离开滑块的情况下为每个客户端说出自己做了什么的代理商。

与 图像 选定的,a 悬停标志图像 field 代替出现,常见绝招:使用灰度标志作为主图,全彩版作为悬停图,因此随着游客在条带上移动,标志会亮起。

Logo 中添加一个工具提示 #

每个项目还有一个 工具提示 toggle。switch it on,当访客悬停在该标志上时,会出现一个小气泡。The 设置 tab控制行为:

• 内容: 工具提示内的文本。
• 放置: 泡沫所在的位置,默认情况下为顶部。
• 关注光标: 让工具提示跟踪鼠标而不是保持固定。
• 动画和触发: 工具提示的显示方式,默认情况下在悬停上缩放。

的 风格 settings旁边的选项卡为气泡本身设计样式:颜色、排版和间距。工具提示对于像“partner since 2019”这样的短标签来说效果很好,不需要全文悬停模式。

设置导航箭头 #

打开 导航 控制访客如何手动移动滑块的部分。 导航 下拉设置控制类型,箭头作为标准选择。

• 显示滚动条?: 在滑块下方添加一个可拖动条。
• 箭头位置: Center在滑块的每一侧各放一个箭头,顶部Center或底部Center将两个箭头分组在其上方或下方。
• 放置: 将箭头保留在滑块盒内或将它们移到滑块盒外。
• 在手机上隐藏箭头?: 将箭头落在小屏幕上,滑动即可完成工作。
• 下一个图标和上一个图标: elementor 库中的任何图标交换默认 V 形。

调整旋转木马行为 #

的 旋转木马设置 section 驱动滑块的运动, 这是一排静态的 logo 成为游人期望的旋转条带的地方。

• 每列幻灯片: 1到6同时显示多少个徽标,四五个适合大多数桌面布局,响应式图标可以让你设置每个设备更小的计数。
• 布局: 旋转木马是标准的扁平滑块。
• 自动高度: 让滑块高度跟随徽标行。
• 自动播放和自动播放速度: logo自动旋转,速度是以毫秒为单位的延迟,所以5000表示每五秒就有一套新的。
• 暂停悬停: 当光标位于滑块上方时停止旋转,滑块与悬停效果和工具提示完美搭配。
• 滑动滚动: 每步前进多少个徽标。
• 中心幻灯片、抓取光标、无拖动模式: 将活动徽标居中,显示抓取光标,或让游客自由地抛掷条带。
• 循环: logo条无休止地运行,这几乎是logo条总想要的,要看的一件事:loop需要比slides per Column计数更多的logo,五列只有五个logo,没有什么额外的东西可以旋转进去。

为徽标滑块设计样式 #

切换到 风格 tab。4个部分涵盖了滑块的外观:旋转木马项目,旋转木马项目悬停,图标和导航。

旋转木马项目 #

本节用正常状态、悬停状态和活动状态框住每个徽标单元。

• 背景、边框类型、边框半径、框阴影: 为每个徽标提供一个卡片式框架,或者为干净的条带保留所有内容。
• 填充和项目间隙: logo之间的空间,每个单元格内部的空间和距离,间隙是让拥挤的条形呼吸的最快方式。
• 影子模式和不透明度: 徽标的柔和边缘阴影和透明度。

旋转木马物品悬停 #

此部分对您在内容选项卡中选择的悬停状态进行样式调整,包括文本覆盖。

• 背景、边框、盒子阴影、填充、边距: 围绕悬停标志的框架。
• 名称颜色、名称字体、间距: text 悬停模式中出现的品牌名称文本。

图标 #

图标部分对显示的小图标进行样式设计,并包含悬停内容:颜色、背景、边框、填充、边距和字体大小。

导航箭头 #

导航部分为箭头按钮设计样式,具有单独的正常状态和悬停状态。

• 颜色和背景: 箭头字形及其后面的按钮。
• 边框类型、边框半径、填充物、尺寸: 塑造按钮;完整的半径使您在大多数现代网站上看到的圆形按钮。
• 箭头之间的空间: 当两个按钮位于滑块上方或下方时,它们之间的间隙。

页面上的结果 #

Preview 或 publish,滑块就可实时运行:logo 在自动播放计时器上旋转,响应箭头,并发射其悬停效果和工具提示,这里是每个视图有五个 logo,每侧都有一个箭头的成品条带。

常见用例 #

• 客户标志条 在代理和自由职业者主页上,每个徽标都链接到案例研究。
• 合作伙伴和赞助商旋转木马 适用于活动、非营利组织和 SaaS 集成页面。
• “压条中的“As 出版物徽标与报道相关。
• 品牌展示 在分销商和零售商网站上列出他们所携带的标签。
• 技术堆栈 在投资组合网站上,使用工具提示来命名每个工具。

更好的徽标滑块提示 #

• 保持每个徽标的大小相同。 混合尺寸使行在滑动时跳跃。将所有徽标导出到相同的画布上,例如 300 x 150,可以保持条带稳定。
• 使用灰度到颜色的悬停。 将灰度主图像和颜色版本设置为悬停标志图像,条带保持安静,直到访客与其互动。
• 使用自动播放打开悬停。 没有人可以读取移动目标上的工具提示。
• 在手机上隐藏箭头。 刷卡取代了它们,条带在小屏幕上保持清洁。
• 将每列幻灯片与徽标宽度相匹配。 Wide wordmark logo比紧凑的图标标记需要更少的列,如果一个logo看起来被挤压,在触摸图像文件之前先将计数减少一个。

常见问题 #

包裹起来 #

Logo Slider 小部件涵盖了 Elementor 中客户端徽标转盘的整个工作:用于徽标、每个徽标链接和悬停效果的中继器、工具提示、带循环的自动播放以及向下到箭头按钮的造型。对于照片和图库滑块,请查看 图片旋转木马 並 画廊滑块 小部件。浏览全套 主插件小部件和扩展,并看到 定价页面 pro在上面添加的内容。