如何创建一个惊人的网站英雄形象

website-hero-images

浏览一些在线商店,你可能会注意到它们都有一个共欧宝体育官网入口首页同的主要组成部分:主页上突出显示的一个大的、有特色的图像(或一系列图像)。

这些图像可以被称为英雄、横幅或旋转木马图像。不管你怎么称呼他们,网站英雄形象对电子商务企业来说都扮演着非常重要的角色。

在这篇文章中,我们将看看英雄图像的重要性,向你介绍一些使用它们的最佳实践,并提供一些令人难以置信的工具和图形资源,帮助你为你的在线商店创建美丽而有说服力的英雄图像。欧宝体育官网入口首页

让我们深入研究一下。

什么是英雄形象?

英雄图像是出现在网页顶部的大图像。英雄图片可以出现在整个网站的不同页面上,但它们最常出现在网站的主页上,位于标题和导航栏的下方。

英雄形象占据了首页最大的空间。在某些方面,它执行与登录页面相同的功能。你的英雄形象是你的品牌的第一印象,这意味着如果使用得当,他们可以成为你的业务非常有价值的资产。

moss-botanicals-website-hero-image-example
通过 苔藓植物

英雄图像是出现在网页顶部的大图像。英雄图片可以出现在整个网站的不同页面上,但它们最常出现在网站的主页上,位于标题和导航栏的下方。

英雄形象占据了首页最大的空间。在某些方面,它执行与登录页面相同的功能。你的英雄形象是你的品牌的第一印象,这意味着如果使用得当,他们可以成为你的业务非常有价值的资产。

一个好的网站英雄形象应该包括什么?

大英雄形象一般由三个要素构成:

  • 引人注目的形象
  • 引人注目的副本
  • 强烈的行动号召(CTA)

这些元素经过深思熟虑的组合可以形成一个有说服力的英雄形象,迫使访问者采取你希望他们采取的行动,帮助提高转化率。您将在下面的英雄图像示例中看到这些元素是如何协同工作的。

让我们更深入地看看这三个基本要素:

scent-and-fire-website-hero-image-example
通过 气味与火

1.引人注目的形象

人类的眼睛喜欢大的、大胆的和明亮的图像。无论你使用图形、照片还是插图都取决于你的品牌,但最重要的是你的图像是高分辨率的和引人注目的。

英雄形象应该是最突出的显示项目在你的主页,这是要记住,当考虑你的主页设计

所有Shopify主题所有这些都包括一个大的英雄图像部分以及建议的分辨率,这样你就可以确切地知道如何大小你的英雄图像。有些主题甚至包括英雄幻灯片、横幅视频和页面动画的额外功能选项。

还没有决定你的Shopify商店的主题?参加我们的测试找出哪种主题最适合你的网上商店。欧宝体育官网入口首页
Nurilens-website-hero-image-example
通过 Nurilens

库存照片图像资源

如果你打算自己做的话产品摄影你要确保你已经做了足够的研究,知道如何拍摄专业的、高质量的照片。如果你想节省一些时间,你可能会考虑使用库存照片。

网上有很多地方可以为你的网站找到专业、高质量的图片。为了帮助你搜索,我们列出了一些最好的来源,让你找到你的下一张图片:

无成本,免版税的图像资源

如果你正在寻找免费的库存照片和图形,这里有几个选项可以考虑:

  • Shopify的爆款: Burst是由企业家创建并为企业家服务的库存照片网站。在Burst上,你可以找到高分辨率的产品照片和生活方式图片,非常适合营销活动和社交媒体。ob欧宝娱乐app下载地址如果你有一个Shopify商店,你就可以从Burst添加照片直接从您的主题编辑器。
  • Pexels: Pexels包含数千张由用户或免费图片网站来源上传的免费库存图片。
  • Unsplash: Unsplash提供了200多万张来自其摄影师社区的免费高分辨率图片。
  • Pixabay: Pixabay提供的图像可免费用于商业和非商业目的,但需要注意的是,某些图像仍受商标、宣传或隐私权的保护。
  • Stockvault: Stockvault提供免费的库存照片以及网页设计布局和标志模板。
  • 帆布: Canva是一个一体机网站设计工具,还包括免费和付费的股票照片用于商业用途的集合。
  • Stocksnap: Stocksnap为商业和非商业项目提供各种免费库存照片。
付费图片资源

如果你有足够的预算来制作你的英雄形象,可以考虑一些更高质量的图片和照片。

  • 在上面: Shutterstock拥有来自世界各地摄影师的超过3亿张图片的庞大图书馆,使其成为旅行摄影的完美资源。
  • Adobe的股票:专为使用Adobe的设计工具套件而设计,adobestock包含数千张库存照片、英雄图像设计模板、库存视频、矢量艺术和插图。
  • 盖蒂图片社:虽然价格较高,但盖蒂图片社包含大量可供购买的当代和历史照片。
  • iStock: iStock属于Getty Images,所以你可能会看到在可用的照片方面有一些重叠。不过,iStock允许摄影师在其他平台上出售他们的照片,所以你会发现一个比Getty更广泛、更现代的收藏。
  • Dreamstime: dreamtime提供了各种各样的库存照片、视频、矢量和插图——有免费的也有付费的——并有不同的授权选项。
雇佣一名自由摄影师

当然,库存照片永远只是库存照片。如果你有时间,预算也比较充裕,你可以考虑雇一个专业摄影师,自己拍照片。

这里有一些其他的自由摄影师的选择:

  • 雇佣一个Shopify专家:使用Shopify专家浏览自由职业者和机构专门从事特定学科,如照片编辑和产品摄影。你甚至可以根据行业经验雇佣自由职业者,所以如果你需要一个美食摄影师,你可以浏览美食摄影师
  • Fiverr: Fiverr提供各种各样的自由职业者,他们专门从事从产品摄影到网页设计的各种工作。
  • 自由职业者: Freelancer的数据库中有很多创意领域的专家,比如摄影和插画。
  • UpworkUpwork允许企业家发布工作,并与有经验和技能可以帮助他们的自由职业者联系。
  • 大师: Guru为自由摄影师提供各种类型的摄影专业知识,如时尚摄影、街头摄影、风景摄影等等。
totem-design-house-website-hero-image-example
通过 图腾设计工作室

2.引人注目的副本

在广告和营销领域,ob欧宝娱乐app下载地址复制描述一种媒体的书面材料。对于企业家,文案是一项非常有用的技能。

用户只会看你的英雄形象一会儿,然后就会继续浏览,所以你最多只有几秒钟的时间来吸引用户的注意力。好的文案应该以一种容易理解的方式满足客户的需求。

下面是一些快速写出引人注目的文案的技巧:

  • 是简洁:长格式的副本有它的位置,但横幅图像不是。横幅文案应该是有力的和重点。
  • 避免难以阅读的字体:很少使用的字体需要更多的时间来阅读。虽然额外的时间可能是最少的,但当涉及到横幅图像复制时,每一毫秒都很重要。
  • 复制客户的语气:用户往往更容易接受他们感到熟悉的语言。考虑你学习的语言目标受众在社交媒体上使用,并使用它来指导你的写作风格。
  • 关注好处,而不是特性不要说:“我们的客户支持团队全天候待命,随时解答任何问题”,而要说:“我们有全天候的客户支持,可以快速得到答案。”
  • 不要害怕测试不同的副本英雄形象是主要的候选人A / B测试因为不同的文字选择有可能极大地改变你的访问者与你的英雄形象设计的互动方式。
  • 避免使用营销ob欧宝娱乐app下载地址流行语和陈词滥调:“动作快”、“省大钱”、“保证满意”等常用广告口号容易被用户的眼睛所掩盖。
royalty-soaps-website-hero-image-example
通过 皇室肥皂

3.强大的文字-动作

最后,所有英雄形象都应该突出一个行动号召(CTA)。CTA是告诉读者您希望他们采取的操作的文本,通常伴随着执行该操作的按钮。例如“现在就购物”、“签署请愿书”或“了解更多”。

你如何写你的行动呼吁取决于你的哪个部分ob欧宝娱乐app下载地址营销漏斗你解决。如果你针对的是漏斗顶部用户,你可能会让他们“了解更多”,而对于漏斗底部用户,CTA可能会更直接地“在这里购买”。

alivia-website-hero-image-example
通过 Alivia

理解你的英雄形象的目的

您可以根据您的业务和目标将这块宝贵的不动产用于以下几个用途。让我们来看看下面一些最常见的使用英雄图像的方法:

1.帮助建立你的品牌,讲述你的故事

你网站英雄形象的一个潜在用途可能是品牌故事.品牌讲故事是用叙事的方式进行沟通独特的销售主张你的品牌。讲故事是建立品牌的一种非常有效的方法,因为一个好的故事往往令人难忘。

girls-chronically-rock-website-hero-image-example
通过 习惯性摇滚的女孩

2.回答客户问题

另一种常见的方法是为常见问题提供特色答案。你可以解决一个常见的客户痛点,或者利用空间来回答访问者可能遇到的对时间敏感的问题。

quartz-and-rainbows-website-hero-image-example
通过 石英和彩虹

3.突出你的价值主张

品牌故事并不是展示你独特销售主张的唯一方式。如果访问者了解你的品牌与竞争对手的不同之处,他们会更容易记住你的品牌。还有什么地方比在你的主页上更好地告诉你的客户你的价值主张呢,大多数访问者都会登陆。

partake-foods-website-hero-image-example
通过 分享食物

4.发表声明

你的主页横幅是促进销售、活动、产品发布和其他重要公告的关键部分。横幅图片会吸引大部分网站访问者的注意力,所以任何你想要被广泛看到的公告都是横幅图片内容的一个很好的候选。

allbirds-website-hero-image-example
通过 Allbirds

用一个令人惊叹的英雄形象优化你的网站

现在你知道了主页上英雄形象的原因、目的和用途。经常改变这些图像可以让你的商店对重复访问者保持新鲜感,保持它的活力,并推动访问者采取与你的转换目标最一致的行动。

如何为你的网上商店创建一个英雄形象欧宝体育官网入口首页

创建一个精心设计和引人注目的英雄形象有助于吸引新的网站访问者,让他们探索更多的产品。看看这一步一步的指南,如何为你的网上商店创建一个英雄形象。欧宝体育官网入口首页

1.使用高质量的产品形象

用你的产品或实体店的漂亮照片吸引新顾客。在这里你总是可以使用专业的库存照片,如果你能雇一个摄影师为你的特定产品拍摄高质量的照片是最好的。

这里有一个来自在线植物商店的很好的例子。任何访问这个网站的人都可能对植物感兴趣,很容易就会被他们英雄形象中令人惊叹的绿色植物所吸引。

布恩小姐主页的截图,上面有一个充满植物的英雄形象
恩小姐

2.使用在线设计工具创建图形

你可以为你的产品照片增添情趣,或者使用图形元素来创建一个英雄形象。找一个像Canva, Visme或Adobe Cloud这样的在线设计工具,把一个引人注目的图形组合在一起。

这里有一个很好的例子来说明这可能是什么样子的——detour Coffee创建了一个他们产品的剪纸,并把它放在一个带有大胆颜色和形状的图形上,以吸引注意力。

Detour咖啡的主页截图,展示了一款来自哥伦比亚圣塞巴斯蒂安的新发布咖啡
绕道

3.添加最相关的行动号召

没有行动号召(CTA)的英雄图像是不完整的,所以添加一个特定于你所包含的图像或图形的按钮。

你还想确保你的按钮与整体设计相匹配,这样它就会弹出,但不会看起来不合适。下面是一个很好的例子:

Horne主页的截图,上面写着“现在就购物”
霍恩

4.使用视频作为英雄形象的一部分

另一个吸引注意力的好方法是为你的英雄形象创建一个循环的、无声的视频或GIF。例如,Nomz网站有许多视频剪辑,吸引网站访问者,让他们在观看完整场景时停留在页面上的时间更长。

Nomz主页的屏幕截图
Nomz

5.定期更新你的英雄形象

你的英雄形象不是一劳永逸的过程。虽然你可能很喜欢现有的产品,但你需要经常更新它,以便向回头客介绍更多的产品和服务。

你甚至可以考虑创建一个英雄图像滑块,这样你就可以一次共享多个行动号召。当你想要宣传即将到来的节日时,这是一个好主意,就像我们在下面的例子中看到的,同时还在推广其他产品线。

稀有设备主页的截图
罕见的设备

网站英雄形象常见问题解答

我如何添加一个英雄形象到我的网站?

如果你用的是Shopify主题,你可以在你的主题编辑器中添加你的英雄形象。登录到你的Shopify商店然后进入在线商店>主欧宝体育官网入口首页题,选择当前主题旁边的“自定义”。

默认情况下,大多数主题都有用于横幅的空间,但如果您需要添加它,请选择右侧菜单底部的“添加节”,然后选择英雄节元素。这个元素可以被标记英雄的形象横幅图像,或幻灯片——这取决于你使用的主题。

还要注意的是,网站英雄图像不会像产品图像和内联博客图像那样在主题之间转换。英雄图像必须分别直接添加到每个主题中,并且只有当您将其添加到当前主题时才会显示在页面上。

网站上的英雄形象应该是多大的?

您可以添加最大20 MB的PNG和JPEG文件,但保持文件大小较小是一个好主意,以确保合理的页面加载时间。确切的图像大小将取决于你使用的主题,但通常情况下,英雄图像应该至少2048像素宽显示在锐利的分辨率时,在全屏观看。

记住主题是响应,这意味着为英雄图像保留的空间会根据浏览网站的屏幕大小而变化。确保在你的图像的框架周围留下空间,以考虑可能被切断的部分。

您还需要避免将副本和CTA直接放入图像中。相反,使用主题编辑器覆盖将浮动的复制和CTA按钮在前面你的图像,并调整独立于你的图像。

网站英雄形象的目的是什么?

网站英雄图片有广泛的用途,但一般来说,对于你想要向尽可能多的访问者发布的任何公告来说,它们都是很棒的。常见的目的包括宣布销售,突出你的品牌价值,或宣布新产品。

英雄形象应该包含什么?

一个网站英雄形象应该包含一个大的,引人注目的图像,以及简洁,引人注目的副本和强烈的行动呼吁。
主题: