OB欧宝娱乐APP开始你的
今天的业务。
免费的。

注册Shopify的免费试用,以获得所有的工具和服务,你需要开始,运行和发展你的业务。OB欧宝娱乐APP

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

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: peexels包含数千张由用户或免费图片网站来源上传的免费库存图片。
  • Unsplash: Unsplash提供来自其摄影师社区的200多万张免费的高分辨率图片。
  • PixabayPixabay提供的图像可免费用于商业和非商业目的,但需要注意的是,一些图像仍受商标、宣传或隐私权的保护。
  • Stockvault: Stockvault提供免费的库存照片以及网页设计布局和logo模板。
  • 帆布: Canva是一体机网站设计该工具还包括用于商业用途的免费和付费库存照片的集合。
  • Stocksnap: Stocksnap提供各种各样的免费库存照片,供商业和非商业项目使用。
支付的图像资源

如果你有足够的预算来制作你的英雄图像,可以考虑一些更好的付费资源,以获得更高质量的图像和照片。

  • 在上面Shutterstock拥有来自世界各地摄影师的超过3亿张图片的庞大图书馆,使其成为旅行摄影的完美资源。
  • Adobe的股票:为配合Adobe的设计工具套件而设计,Adobe Stock包含了数千张库存照片、英雄形象设计模板、库存视频、矢量艺术和插图。
  • 盖蒂图片社虽然价格较贵,但盖蒂图片库有大量的当代和历史照片可供购买。
  • iStockiStock属于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.使用高质量的产品图像

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

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

Miss Boon主页的截图,以植物填充的英雄形象为特色
恩小姐

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

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

这里有一个很好的例子——detour Coffee制作了他们产品的剪影,并把它放在醒目的颜色和形状的图形上,以吸引注意力。

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

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

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

你还需要确保你的按钮与整体设计相匹配,这样它就不会显得不协调。下面是一个很好的例子:

Horne主页的截图,CTA上写着,现在开始购物
霍恩

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

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

Nomz主页的截图,其中有视频
Nomz

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

你的英雄形象不是一个一锤定音的过程。虽然你可能喜欢你现有的产品,但你需要时常更新它,向老客户介绍更多的产品和服务。

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

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

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

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

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

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

还要注意,网站英雄图像不会在产品图像和内联博客图像等主题之间转移。英雄图像必须直接添加到每个主题单独,并将只出现在页面上,如果你添加他们到你的当前主题。

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

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

记住主题是响应这意味着,保留给英雄图像的空间会随着浏览网站的屏幕大小而变化。一定要在图像的框架周围留出空间,以弥补可能被截断的部分。

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

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

网站英雄图片的用途非常广泛,但通常情况下,它们非常适合用于向尽可能多的访问者发布公告。常见的目的包括宣布销售情况,突出你的品牌价值,或宣布新产品。

英雄形象应该包含什么?

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