如何使用Web幻灯片映射新的网站访问者

8秒。这就是你需要在你的网站上吸引普通互联网用户的注意力的时间。你可以尽可能地调整你的内容和页面布局，但这是没有办法的:吸引网站访问者，特别是第一次访问的人，对在线企业来说是一个真正的挑战。

现在，当你听到这个词幻灯片，你的思想可能会立即跳到PowerPoint演示文稿，从那里，会议室和无聊的。

如果是这样，请尝试忘记PowerPoint片刻。事实证明，Web幻灯片是将视觉内容传达给游客的最受欢迎和有效的方法之一。

在本指南中，我们将了解Web幻灯片的常见用途，实现它们的最佳实践，以及如何在您的网站上放置一个。

具体来说，在线企业倾向于在他们的主页上使用滑块来传达他们的使命或展示新产品的cta。下面这个简单的例子微软的网站:

图片来源

这种演示风格有两种主要方式辅助浏览体验。首先，它通过将重要内容放在折叠之上，不需要滚动来绘制观众。此内容可以是新产品或优惠，公告或博客文章，或者其他任何访客应该知道的其他东西。

其次，Web幻灯片可以将视觉光彩添加到您的页面中。例如，骑自行车通过大型，充满活力的图像创造了令人难忘的经历，甚至可以唤起他们在读者中的某种积极情绪，然后他们与你的品牌联系起来。这对艺术家投资组合，媒体公司和其他组织特别有效，具有强烈强调美学。

何时使用Web幻灯片

你会在网上找到滑块，但是当他们特别好时，特别是某些情况。让我们快速达到最佳用途：

新产品/优惠

将一个滑块放在您的主页上，并用CTA填充它，展示您的最新业务必须提供，àla的Microsoft示例上面。CTA的新手？查看我们最喜欢的例子。

一般信息

许多组织使用滑块来传达他们的使命，战略或故事。您将在咨询机构，非营利组织和教育组织以及没有物理产品的特殊项目的网站上看到这一点。

产品展示

您可以专注于一个产品或产品线，而不是在多个产品中循环使用。使用这种方法，每张幻灯片都可以解释产品的不同方面、好处或迭代。

滑块而不是立即呈现一切，而不是将信息分解为可消化的内容。例如，从耐克看出这款时尚的设计，展示了15年的扣篮运动线。

图片来源

投资组合

媒体公司、创意组织和自由职业者经常使用滑块来突出他们最新或最好的作品。您可以呈现来自单个项目的多个图像，或者多个项目与站点上其专用页面的链接。

推荐文章

raybetapp经常更新的新闻网站和博客可以在幻灯片中为其最新或最受欢迎的内容添加cta。在这里避免纯文本的cta -相反，为每个帖子使用特色图片引导用户的眼睛到你的新内容。

现在我们看到了什么滑块可以做，让我们下次讨论如何实施它们。是的，有一种错误的方法来制作滑块。

从可用性的角度来看，滑块有点像一把双刃剑。由于幻灯片的受欢迎程度，登陆你的页面的大多数人都很熟悉它，他们应该不会对这一功能的目的有任何疑问。

然而，这也意味着设计糟糕的滑块很快就会让用户失去兴趣，特别是当它是他们第一眼看到的文字内容时。出于这个原因，仔细规划你的幻灯片元素并遵循以下六个最佳实践是必要的:

1.启用自动和手动转换。

如前所述，web幻灯片可以根据时间自动旋转内容，也可以在用户单击箭头按钮或滑动屏幕。

我们建议您的滑块允许两种方法。在页面加载中，滑块自动转换，为用户提供足够的时间拍摄每个图像。如果用户想要更改幻灯片，则它们也可以执行此操作，这可能会停用定时转换。这种方法使用户更好地控制他们想要查看的内容。此外，这是如何实现大多数Web滑块的方式，因此访问者这是直观的。

为了帮助用户，将箭头按钮放置在元素的两边(左边和右边，或顶部和底部)。这些按钮在默认情况下可以在元素中可见，或者当用户将鼠标悬停在幻灯片上时出现。这种风格的选择取决于你。

2.直观地表示幻灯片的数量。

它是一个好主意，信号滑块中有多少幻灯片，所以用户知道剩余的内容是多少。您可以使用悬停在悬停上的缩略图，数字（例如，1 / 5,2 / 5 ......）或类似于上面的Microsoft示例中的另一个微妙视觉暗示。

3.优化页面性能。

如果您的页面需要几秒钟才能加载，则访问者将开始丢失兴趣。许多人甚至不会看到你工作的完整滑块。

首先，考虑幻灯片中的图像数量。幻灯片越多，负载时间越长，只有包含所需的幻灯片。在页面上稍后保存其余内容。然后，优化滑块图像通过尽可能减少每个图像的文件大小。

最后，许多幻灯片建设者将实施懒惰的装载。只有当前幻灯片将首先加载，并且隐藏的幻灯片将不会加载，直到请求显示。此功能尽可能多地展开加载需求，因此请在搜索Slider Builder中查看它。

4.注意过渡效果。

过渡是一个看似小的滑块细节，即人们已经习惯了非常多的成长，并且在规范之外的任何东西都可能被剥削。

您可能会诱惑用溶解效果或明星擦拭，将滑动过渡撑起。我很佩服你的口味，但试图抵制这种兴奋，并保持你的过渡。您最好使用简单的淡化效果或水平/垂直平移。这个电话取决于你，但令人沮丧和翻译的令人沮丧，更好。

5.使它移动友好。

滑块是高度动态、图像重的元素。如果你的模块不是为小屏幕而设计的，那么它看起来可能是一个高度动态的，图像沉重的混乱。

他们弥补接近您的交通的一半，帮你的手机用户一个忙，赶紧申请吧响应式网页设计您的滑块原则（信誉良好的滑块构建器和插件可以执行此操作）。或者，考虑将滑块完全从您的移动网站中删除以减少杂乱。

6.使其可访问。

最后，所有的滑块都应该是可访问的你可以制作它们。这意味着移动响应性，图像alt文本对于每一张幻灯片(以及幻灯片本身的文本替代，如果可能的话)，启用手动幻灯片转换，并使用方向键触发这些转换(除了单击按钮外)。

如何为网页制作幻灯片

想给滑块拍摄吗？你有一些选择。让我们来查看可用的东西，从最小技术到最技术实施。

使用幻灯片制造商。

对于轻量级解决方案，请使用专门的Web幻灯片构建软件。雷竞技苹果下载官方版使用这些工具，只需选择滑块内容，调整设置，并将滑块元素嵌入到您的页面中。从一个免费的工具开始Bannersnack或者Cincopa.并看看你喜欢它，然后考虑升级到付费选项。

受欢迎的网站建设者还启用滑块功能，无论是本机或通过第三方插件。确保这些工具可以使您的幻灯片响应性和可访问的用户。

使用WordPress滑块主题/插件。

如果你的网站是建立在WordPress CMS上，许多主题自带内置滑块模块。也有很多免费和付费的游戏滑块插件这将在任何帖子或页面上为您的网站添加幻灯片功能。为您的Woocommerce商店，考虑一个Woocommerce Slider插件对于产品显示。

我们建议在主题上添加带有插件的滑块，因为改变主题并不会废弃你的幻灯片。也就是说，带有滑块的付费主题在这种情况下非常方便。

手动编程滑块。

如果你有足够的勇气，可以自己编写一个图像滑动器插件。要正常工作，滑块需要HTML，CSS和JavaScript，前端发展中的三种大语言。

两个都W3Schools.和freeCodeCamp提供构建图像滑块的教程。或者跟随我们的指南在Bootstrap CSS中构建一个映像旋转木马。将滑块编程，然后调整CSS以拟合您的新模块以适合您的其余部分。

附赠:创建一个视频幻灯片

作为手动编程的交互式图像滑块的替代方案，您可以选择显示相同信息的视频幻灯片。

如果您对时间或资源短暂，我们强烈推荐reybet雷竞技下载从Canva免费幻灯片制造商。此工具旨在快速，直观，容易使用，包括那些没有设计排骨的人。

使用Canva，您可以轻松地从模板上创建幻灯片，主题为不同的利基，如解释者，食物和时尚。使用您自己的图书馆的图像和视频以及Canva的股票媒体库填充幻灯片。然后，使用图标，插图，动画和音乐自定义幻灯片。最后，免费下载幻灯片（和不，没有水印）。

图片来源

不仅仅是幻灯片

网络幻灯片并不完全适合所有人。但是，如果你想在降低跳出率的同时强调视觉效果，我们建议你尝试一下。

添加滑块时，请记住最佳实践，并确保它为您的网站的整体使命而不是分散它。最后，一定要保持他们视觉上令人愉悦和吸引人。这不是一个明亮的会议室，这是您的业务！