主页-博客-英雄图片简易指南:如何看起来好并获得点击
我要坦白:我爱上了标题党。当我浏览社交媒体时，我陷入了愚蠢文章的兔子洞——“你见过出生一天的水獭宝宝吗?”没有，但我正准备这样做——这总是会带来更多关于深夜喜剧演员、小动物或美味食物的文章和视频。但我有我的底线!当我点击一篇文章时，我一打开页面就能知道我是否进入了无人地带。看着图片和页面顶部的复制，我可以知道这是否是我真正想要的，如果它看起来可疑，我会立即导航离开。带有副本或行动号召的英雄形象的重要性是如此重要!在这里，我整理了一些关于如何使你的英雄形象漂亮并吸引你的观众的最佳实践和例子。什么是英雄形象?
好,咄。英雄的形象。
可能不是我们想要的英雄类型。而是我们需要的英雄。但说真的，英雄形象是你在网页或电子邮件顶部看到的第一张主要照片或图形。英雄形象的目标是立即吸引访问者，向他们展示你的网站和内容是关于什么的。由您选择高质量的照片或图形来代表整个页面的主题。最近，英雄图片在网页设计中变得非常流行，因为它们华丽、漂亮，能够吸引访问者。英雄有各种不同的形状和大小，从大标题到全屏横幅到特色内容。随着网站从HTML发展到JavaScript、Flash和CSS，网站设计利用这些工具使网站更加可视化。现在，我们谈论的是登陆页面体验;这已经超越了实用性，现在正在深入到流和风格。有了这些进步，像Facebook、Twitter和WordPress这样的网站在页面顶部设置了特色图片。零售网站开始不再把分类页面作为他们的主页内容，而是转向一个通向真实内容的光鲜门户。因此，英雄形象的奇迹诞生了，并蓬勃发展。英雄形象最佳实践当我在电子邮件营销中工作的时候，一切都是关于英雄形象的——创意上的主要形象(希望)能获得最多的点击率。一个伟大的销售可能失败，因为图像和拷贝没有解释折扣或销售选择。英雄形象通常是你的第一“真实”印象;有些人被迫打开邮件或网页，看看你能提供什么。这是相亲——外表很重要!这可能不需要说，但要确保它看起来清晰!现在的电脑和手机屏幕都是如此的大而清晰，你的客户完全能够分辨出你是否拥有一个模糊的，低分辨率的英雄图像。为了不被毛缠住?你可以随意调整图片的大小，但不要向上调整。就实际像素的宽度和高度而言，图像的大小取决于你想要描绘的内容。如果你想让你的英雄占据整个页面的宽度，确保你的图像是100%的容器标签通过VW或VH(更多代码知识在这里)。
自定义您的库存图片(下面有更多信息)!一般的经验法则是，确保你放置文本的背景不要太吵，并寻找颜色对比。注意我在图像上放置白字的地方产生的模糊。对比是好!对于大的、高质量的图像需要记住的一点是:加载时间。谷歌的研究表明，加载时间从0.4秒增加到0.9秒可以减少20%的流量。自己调整图片的大小(而不是让浏览器调整它的大小)在Photoshop中压缩图片，一个在线压缩工具，甚至在Paint中使用不同的图片文件类型(PNG和JPG)进行实验，以优化质量，而不牺牲加载时间，如果你关心你的页面，尽可能利用页面缓存
e的速度，GTmetrix是一个很好的起点!这可能不需要说，但你的英雄形象应该准确地代表你想要销售的东西。销售专业雨伞吗?如果有一张下雨天用雨伞让人们保持干燥的漂亮照片就太好了!但可能不是阳光明媚的海滩，带着鸡尾酒伞。图片也可以为销售或口号做广告——但文字要尽量少!一张图片抵得上1000个单词，所以确保任何额外的单词都是直接切题的。请记住，图片下的标题的阅读量平均比正文多300%。这是疯了!确保标题是准确的，有针对性的，匹配英雄形象是非常重要的!
英雄横幅真的很受欢迎——就像下面这个来自Dollar Shave Club的。它的高质量图像配上简单的文字和行动号召。但英雄图像绝对不需要成为横幅!Michael Soriano在他的文章“令人惊叹的英雄图像终极指南”中有一些关于如何欺骗拷贝、图像和CTA的好建议。就像任何你添加到你的营销曲目一样，记得测试和优化!在WordStream，团队一直在测试，以确保网站运行正常，包括运行主页测试。
B
,我们测试了一个版本的主页,一个英雄形象,我们称为“火箭孩子。”我们喜欢这个新的英雄形象的想法，希望它能产生立竿见影的效果。可是，我们错了!上面的主页英雄形象测试持续了15天，其中主页B显示出更强的转化率。我们大多数人都很惊讶，看看首页A上那张和可爱孩子的高质量照片吧!这只是我们运行的许多测试中的一个例子。在测试之前，你不会知道什么最适合你的特定用户!不是每个人都有能力拍摄自己的照片或设计信息图——幸运的是，你不必这样做!有很多网站提供免费(或非常便宜)的库存照片，可以把它们切成你自己的英雄形象。我刚开始使用Canva，它太棒了!有很多现成的图片供你选择，你可以用文字编辑它们，或者你也可以上传自己的照片。他们自称有7500万张图片可供选择;所有这些都是可以搜索和分类的。Canva可能不是一个理想的网页英雄，但绝对可以帮助设计一个电子邮件英雄!沿着同样的路线，Creative Market和Stocksy提供了大量的库存照片、模板、图形和字体。其中大多数都需要购买，但这并不太疯狂——花20美元购买一个网站品牌捆绑包对我来说是值得的。通过Unsplash
。还有人饿了吗?如果你正在寻找高质量的照片作为英雄图像，查看Unsplash或peexels。这两家公司都在CC0 (Creative Commons Zero，允许免费发布受版权保护的作品)许可下提供库存照片。你可能会发现它们之间的重叠，因为它们都是由摄影师经营的——但有这么大的摄影图书馆，我怀疑你会!如果你想要一些真正真实的东西，但又不能向摄影师承诺，不要低估你的手机相机的力量，一个镜头配件和一个快速的网络教程。
英雄形象例子:我在网上找到的最好的英雄形象
寻找英雄形象的灵感?看看下面我最喜欢的一些例子。因为谁不喜欢Spotify呢?他们在颜色对比上做得很好，让他们的报价从页面上跳出来。你也可以选择滚动多个英雄图像!
TaskRabbit也有多个英雄图片，每一个都有一个不同的“我们会帮助…”的标题下面的搜索栏。因为大多数访问者可能不知道TaskRabbit是什么，他们还包括静态的子标题，这些子标题足够小，不会影响主英雄。
Grain &砂浆是一个创意工作室，生产一系列英雄形象，实际上是短视频。这些视频没有足够的动作来完全分散人们对文本的注意力，但却足以吸引访问者。我建议你访问他们的网站，看看他们页面上更多的英雄图片，他们在高质量的摄影方面做得很好!
迷恋(“吃货”餐厅评论)有一个迷人的英雄形象，突出了关键的优惠，也很容易导航离开主页。这是大!有时，英雄形象是如此的包罗万象，我不知道点击哪里才能摆脱它!我只是迷失在摄影中，忘记我为什么在那里，然后导航回到安全的地方。
飞轮简单的蓝色图形和白色文本用一句话解释了它们的确切功能，同时还提供了两个cta。有任何其他伟大的英雄形象的例子，或关于如何使用他们的问题?让我们知道!玛丽是星空公司的一名内容作者/战略师，也是一名互联网爱好者。当她不为工作写文字时，你会发现她在计划下一次旅行时吃着额外的芝士披萨。查看Mary Lister的其他帖子
更多像这样的文章如何用6个步骤创建小型企业预算(+模板)
是一个简化的商业预算指南，这样你就可以实现你的目标，发展你的业务，并保持财务(和精神)平静。
如何创建一个客户旅程地图(+免费模板和示例)
八个步骤、一个完整的示例和七个免费模板。大奖。
67+自由创意十月营销创意(+例子!)
以创造性和有意义的方式与客户建立联系，并从竞争对手中脱颖而出。
评论
评论前请阅读我们的评论政策。
