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

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

如果你有预算为你的英雄形象工作,考虑一些更高质量的图像和照片的更好的付费资源。

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

当然,库存照片永远只是库存照片。如果你有一些时间,也许更多的预算,你可能会考虑聘请一个专业摄影师和拍摄自己的照片。

这里有几个其他的选择来探索自由摄影师:

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

2.引人注目的副本

在广告和市场营销中,ob欧宝娱乐app下载地址复制描述一种媒体的书面材料。对于企业家,文案在你的武器库中是一个有用的技能。

用户在继续前进之前只会瞥一眼你的英雄形象,所以你只有几秒钟(最多)的时间来吸引用户的注意力。好的文案应该以一种容易理解的方式来满足客户的需求。

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

  • 是简洁:长篇文案有它的位置,但横幅图片不是。横幅文案应该简洁有力,切中要害。
  • 避免难以阅读的字体:很少使用的字体会花费更多的时间来阅读。虽然额外的时间可能是最小的,但当涉及到横幅图像复制时,每一毫秒都很重要。
  • 模仿客户的语气用户更容易接受他们熟悉的语言。把语言当成你的目标受众在社交媒体上使用,并用它来告知你的写作风格。
  • 关注好处,而不是功能不要说“我们的客户支持团队24小时待命,随时回答任何问题”,而要说“通过24小时客户支持快速获得答案”。
  • 不要害怕测试不同的副本英雄形象是最主要的候选人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)的英雄形象是不完整的,所以添加一个特定于你所包含的图像或图形的按钮。

您还需要确保您的按钮与整体设计相匹配,以便它弹出但不会显得不合适。下面是一个很好的例子:

霍恩主页的截图,上面有一个CTA,上面写着,现在购物
霍恩

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

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

视频的Nomz主页截图
Nomz

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

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

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

Rare Device主页的截图
罕见的设备

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

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

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

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

还要注意的是,网站的英雄形象不能在产品形象和内联博客形象等主题之间转换。英雄图像必须单独直接添加到每个主题中,并且只有当你将它们添加到当前主题中时才会出现在页面上。

网站上的英雄形象应该有多大尺寸?

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

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

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

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

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

英雄形象应该包含什么?

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