英雄形象设计技巧以及如何在整个 Divi 中使用它们

在今天的教程中，我们将分享一些关于如何设计一个好的英雄图片/部分的技巧。 将分享的技巧可以帮助您为自己的网站或客户的网站创建有效的英雄部分。

一般来说，有很多不同的方式来设计英雄形象，你的风格通常取决于网站的内容。 这就是为什么我们将处理一些适用于各种网站并且每个人都应该知道的通用设计技巧。

在看看不同的技巧后，我们也将共享一个例子英雄节，不辜负提示，我们会告诉你如何重建具有迪维本例中为您的网站建设者。

我们将逐步向您展示如何制作的示例如下所示：

选择正确的图像

在设计网站时，特别是设计英雄形象时，一切都是为了回归基础。 您应该考虑到，当人们访问您的网站时，英雄部分将是他们首先看到和体验的内容。 它会影响他们的行为并决定他们链接到您网站的感受。

关联

首先，找到与您的网站内容一致的图像。 这是他们在您的网站上看到的第一件事，并将您的网站与之相关联。

要找到相关性，请问自己两个问题：

• 我的产品/服务/网站提供什么主要附加值？
• 什么样的形象反映了这种附加价值？

它始终归结为您的访问者希望看到的内容以及他们了解整个画面的难易程度。 人们倾向于把一切都形象化； 即使是公司或企业。 这就是为什么你应该从他们逗留之初就给他们一个相关的英雄形象。

一些最常见的英雄图像样式基于以下一项（或多项）：

• 产品（以图片形式展示产品）
• 上下文（展示讲述故事的图像以及提供的内容）
• 情绪（使用情绪触发器，例如微笑的人）
• 动作（使用表示与您的网站内容相关联的特定动作的图像）

选择这些焦点之一，并尝试以最佳和最具创意的方式传达信息。 看看您是否可以找到足够相关的免费图片，如果没有，请购买库存照片或尝试制作自己的图片。

你的英雄形象与公司越相关越好。 这就是为什么以专业的方式制作自己的图像通常是最值得推荐的。 但在资源缺乏的情况下，库存图片或免费图片也足够了。

高质量

为英雄形象做出正确选择的另一个非常重要的因素是质量。 这是不言而喻的，但您会惊讶地发现有多少网站不符合它的要求。

您希望它看起来尽可能专业，因为您希望这种质量与您在网站上代表的服务或产品相关联。

我们建议使用最小宽度为 1920 像素的图像，如我们在 Divi 中使用图像的最终指南中所述。

考虑全屏模式

在全屏模式下的英雄部分中使用英雄图像也经常使用。 通过让英雄部分全屏显示，您有机会在更深层次上与观众互动。 你将更多的注意力放在英雄部分提供的内容上，所以它应该真的值得。

如果您正在考虑制作全屏英雄部分，请确保它是您网站上最好的部分，因为它将成为您网站上互动最多的部分。 通过在他们访问的早期阶段与他们互动，您可以增加在整个网站其余部分与他们互动的机会。 同样，如果全屏英雄部分不值得，它会阻止人们继续留在您的网站上。

居中或不居中

大多数人都同意对称非常吸引眼球这一事实。 然而，我们在网络上看到它太多了，以至于我们可能不再认为它很特别。 即使你不居中，你也可以做很多美好的事情。

但是，如果您不想冒险，您始终可以将您为英雄部分创建的所有内容置于中心位置，包括使英雄图像对称。

创建对比

英雄形象通常包含三件事：形象本身、内容和 CTA。 您希望他们每个人在每位访客的体验中发挥自己的作用，因此他们需要在他们之间建立一种和谐感。 这就是为什么在颜色的使用中创造某种平衡很重要的原因。 向图像添加颜色或渐变叠加通常可以完成这项工作。

由于新的背景设计选项可用于 Divi builder，创建对比变得非常容易。 您可以使用背景图像中使用的颜色来为您的英雄部分创建最佳颜色和对比度组合，但当我们重新创建下面的英雄部分时，我们会回到这一点。

尝试使用视频背景代替

如果您想为您的网站增添更多活力，您还可以考虑使用视频而不是图像。 为英雄部分选择视频时，适用与图像相同的提示。

您可以在网上找到可能与您正在创建的网站相匹配的不同视频，也可以创建自己的视频。 Coverr 是一个提供可用于特别是英雄部分的视频的网站。 他们为观众提供不同类型的短视频，这些短视频非常适合在没有大量资源的情况下构建网站。

他们每周一上传 7 个新视频，他们分享的视频可以免费使用——甚至用于商业目的。

与众不同的 CTA

一个伟大的英雄形象和部分最终总是有目的的。 该目的最常见的是访问者与网站背后的个人或公司之间的互动。 您想了解您的访客，并且希望如此； 将他们变成忠实的访客或潜在客户。

为了确保您真正达到目标并实现目标，一个好的 CTA 可能会派上用场。 在设计 CTA 时，还需要考虑一些事项。 您希望提高 CTA 的有效性，并确保主图提供预期的结果。

在设计 CTA 时，请考虑以下事项：

• 确保 CTA 是人们首先注意到的东西之一（通过颜色和对比度）
• 仔细考虑您正在使用的 CTA 副本。 你想让它有说服力
• 确保点击 CTA 后接下来的内容是值得的（给予附加值以获得结果）

让我们开始创建（桌面）

现在我们已经了解了有关英雄图像的一般提示，是时候将其付诸实践了。 我们制作的示例是面向产品的，但我们也包含了其他因素（例如上下文）。

我们确保有足够的对比度、良好的 CTA、高质量的图像，尽管我们使用标准部分而不是全角部分，但我们手动调整了间距子类别以确保英雄部分在桌面上显示为全屏。

选择一个部分

在全角部分或常规部分之间进行选择。 因为标准版块更灵活，所以我们要选择标准版块，把它变成符合我们需求的英雄版块。

背景选项

将在我们的英雄部分呈现的图像是一种产品，但我们也利用了上下文和情感。 可以看到拍摄的环境可能与冒险有关。 我们还通过英雄图像中提供的内容使用情感。

你告诉人们在过着冒险的生活方式的同时“慢慢来”。 您还告诉他们可以追求他们生活中最想要的东西，而这款腕表是此次旅程的理想点睛之笔。

本例中使用的图像来自 Unsplash。 选择您想要用作背景图像的任何图像，然后打开您正在处理的部分的设置。 在内容选项卡中，您将找到背景子类别。 首先添加背景图像。

接下来，我们要在我们正在使用的图像上放置一个颜色叠加层。 这可以追溯到我们上面讨论的“创建对比度”技巧。 我们将为图像添加一定的暗度，以与我们将使用的文本模块和按钮模块形成更好的平衡。

在大多数情况下，使用灰色叠加颜色。 这是用作叠加层的最标准颜色，不会对图像的颜色产生太大影响。 我们使用的颜色代码是“#BFBFBF”。

接下来，返回背景图像并应用背景图像混合。 在这种情况下，我们将使用“乘法”。 将背景图像位置也更改为“左上角”。

行设置

继续，我们将向我们创建的部分添加一个全角行。 打开设置并将“10%”添加到“设计”选项卡的“间距”子类别中的顶部填充。

接下来，转到“高级”选项卡并禁用“可见性”子类别中的手机和平板电脑行。

第一个文本模块

之后，我们将添加第一个文本模块。 打开设置并在“内容”选项卡的内容框中键入要使用的标题。 转到“设计”选项卡并对“文本”子类别进行以下修改：

• 文字方向：右
• 文字字体：龙虾
• 文字字体大小：80
• 文字字体颜色：#FFFFFF
• 文本行高：1.7em

向下滚动同一选项卡，将“25%”添加到“间距”子类别中的“顶部边距”和“-12%”到右侧边距。

第二个文本模块

添加另一个文本模块，在内容框中键入文本并转到“设计”选项卡。 在文本子类别中，应用以下更改：

• 文字方向：右
• 文字字体：蒙特塞拉特
• 文字字体大小：15
• 文字字体颜色：#FFFFFF
• 文本行高：1.7em

向下滚动相同的选项卡，并将“4%”添加到“间距”子类别中的“顶部边距”和“-12%”到右侧边距。

按钮模块

继续添加按钮模块并键入按钮文本。 接下来，转到“设计”选项卡并将“按钮对齐”更改为“右”。

向下滚动相同的选项卡并对 Button 子类别进行以下修改：

• 为按钮使用自定义样式：是
• 按钮文字大小：20
• 按钮文字颜色：#FFFFFF
• 按钮背景颜色：#E02B20
• 按钮边框宽度：2
• 按钮边框颜色：#E02B20
• 按钮边框半径：3
• 按钮字体：蒙特塞拉特
• 按钮字体样式：大写

手机及平板版本

在为桌面屏幕创建英雄图像时，有更多的可能性。 另一方面，对于手机和平板电脑，您必须以某种方式找到一种方法，以简单的方式让一切看起来都很好。

当有人使用手机或平板电脑访问您的网站时，我们会将所有内容集中起来。 继续克隆我们为桌面制作的行并将其放在同一部分。

部分设置

打开您的分区设置并在高级选项卡的可见性子类别中禁用桌面分区。

第一个文本模块

转到“设计”选项卡并对“文本”子类别进行以下更改：

• 文字方向：居中
• 字体大小：50

向下滚动相同的选项卡，擦除右边距并将上边距更改为“20%”。

第二个文本模块

在第二个文本模块的设计选项卡中，将文本方向更改为“居中”。

向下滚动相同的选项卡，擦除右边距并保留顶部边距。

按钮模块

最后但并非最不重要的一点是，打开按钮模块并将按钮对齐方式也更改为“居中”。

最后的想法

在这篇文章中，我们讨论了在创建英雄图像/部分时应该考虑的一些设计技巧。 我们还分享了一个遵循这些提示的英雄部分示例。 如果您对此话题有任何疑问或有任何建议，请务必在下方评论区留言！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！