如果你想让新访客继续看你的网站，你就需要迅速吸引他们的注意力。如果在折叠上方没有吸引人的内容，用户在查看你的产品或阅读你的博客文章之前就可能会感到厌烦。 幸运的是，你可以使用一个Hero图像（又称巨无霸图片）作为你网站上的第一个视觉元素。当你包括一张高质量的照片或图形设计时，你可以给访问者留下一个积极的第一印象。 在这篇文章中，我们将解释什么是巨无霸图像，以及你如何为你的网站设计一个Hero图像。然后，我们将向你展示25个例子以提供一些灵感。 什么是Hero图像? Hero图像是一个较大的横幅，显示在网站顶部的折叠上方。这是访问者在折叠上方看到的第一个元素。它通常具有照片、视频、图形或插图，以及一个声明或CTA，以立即吸引访问者。 Hero图像是抓住注意力的一个好方法。在访问你的网站的头几秒钟里，用户希望被高质量的网页设计所吸引。Hero形象可以立即给你的企业或博客留下一个积极的印象。 由于它们出现在主页的顶部，Hero部分可以对你的网站产生巨大的影响。如果使用得当，它们能够传达给访问者关于你的品牌所需要知道的一切。这可以避免新访客马上就被太多的信息所淹没。 在Hero部分，你可以包括一个行动呼吁（CTA），以激励用户访问你网站上的另一个页面。互动式的Hero图片也可以有旋转木马、滑块和其他动画。归根结底，巨无霸图片的目的是要有吸引力，吸引人，并吸引人的注意力。 如何设计一个吸引人的主页巨无霸Banner 现在你知道了什么是巨无霸横幅图像，让我们来讨论一些创建巨无霸图像的最佳做法。这样，你就能设计出能吸引用户进入你的网站的Head标题。 1. 寻找高质量的图片 巨无霸图像将是访问者在你的主页上看到的第一件事，所以你需要找到一张高质量的照片。如果图片的颗粒感太强或没有经过压缩以实现快速加载，可能会损害你网站的用户体验（UX）。 为了获取图片，你可以使用Unsplash等网站上的图库。这个平台提供没有版权保护的免费高分辨率照片： 请记住，你也可以使用图形设计和视频，而不是静态照片。这可以帮助你的网站从你的竞争对手中脱颖而出。 除了图片库，Pexels还有许多免费视频，你可以浏览。与图片一样，你能够在下载前定制尺寸： 对于图形设计，我们建议使用一个灵活的工具，如Canva。这里面有成千上万的Hero横幅的启动模板： 最后，WordPress在其区块样板库中提供了预先设计好的标题。在设计你的主页时，你可以很容易地插入这些全宽的巨无霸横幅部分。如果你决定手动创建这些，你将不得不使用HTML容器来代替： 请记住，在你搜索图片时，你要记住你的网站的品牌形象。即使你找到一张高质量的照片，也要确保它与你的利基市场相关。 此外，考虑你是否想唤起一种情感，推广一种产品，或实现其他具体目标。当然，如果合适，而且你的预算允许，你可以考虑聘请专业摄影师为你的产品或服务制作图片。 2. 添加有说服力的信息性文本 许多网站不只是在Hero部分有一个图像。为了产生新的线索和转化率，他们通常会添加一个文本叠加。通过包括产品促销和行动呼吁，Hero可以实现与登陆页面相同的目标。 尽管你的Hero文本应该根据你的目标而变化，但在编写你的文本时，有一些事情需要考虑。 保持简短：在巨无霸部分，你不希望让读者的信息量过大。 使用可读字体：尽管你可能想使用一种独特的字体，但要确保它易于阅读。 考虑你的目标受众：最好评估一下新的访问者会在你的网站上寻找什么。 不要使用太多的流行语：如果你包括像 “快速行动 “这样的广告陈词滥调，可能会降低你的可信度，使访问者离开。 添加一个行动呼吁也是一个好主意。与CTA按钮和线索生成表格搭配，你可以使用你的巨无霸形象来增加转化率。 3. 优化你的巨无霸图像 在你下载了你想要的巨无霸图像后，为你的网站优化它是一个好主意。像你网站上的每张图片一样，你需要对它进行压缩。否则，照片可能太重，导致加载时间差。 一般来说，你的图片应该小于1MB。为了在不损失图像质量的情况下使它们变小，你可以使用像TinyPNG这样的图像压缩工具。这将通过智能有损压缩减少你的WebP、PNG或JPEG文件的大小： 尺寸是优化巨无霸Banner图像的另一个重要因素。通常情况下，图像最好至少有1200像素，长宽比为16：9。Hero横幅图像应该是1600 x 500像素，对于大屏幕，你可以提高到1800像素。 25个主页创意巨无霸案例 如果你仍然需要帮助设计你的第一个Hero形象，不要担心。我们已经汇编了一些最好的网站巨无霸图像，以给你一些灵感! 1. Tesla 巨无霸Banner特色： 特斯拉的主页以其Y型电动车的光滑、专业的Hero图像为特色。 有清晰的CTA按钮，使访问者能够创建订单，查看库存，或安排试驾。 由于这个主页巨无霸横幅有一个极简的设计，它不会用不必要的信息压倒访问者。 2. The Better Fish 巨无霸Banner特色： The Better Fish更好的鱼的Hero横幅部分将食物图片和主要文字分开。这使得它非常容易阅读。 橙色的按钮吸引了人们对CTA的注意，告诉访问者 “Try Barramundi”。 […]
