如何为您的网站设计英雄部分（2025指南）

您的网站只有几秒钟的时间才能给人留下深刻的印象，因此拥有强大的英雄部分应该是重中之重。就像您在线业务的店面窗口一样，它需要迅速吸引他们的注意力并鼓励他们继续滚动。在这篇文章中，我们将深入研究“英雄”部分的细节，并向您展示如何使用其直观的拖放视觉构建器使用Divi设计一个。

什么是英雄部分，为什么需要一个？

您网站的英雄部分不仅是页面的顶部；这是您给人留下深刻印象的第一个机会。这是您引起注意的地方，显示您的核心信息，并立即向访客展示为什么他们应该坚持下去。一个伟大的英雄部分将它们挂在几秒钟内，通过清晰的行动呼吁将它们深入到您的网站，并为整个用户体验（UX）奠定基础。这就是为什么正确的事情如此重要。

以下是要记住的几件事：

第一印象很重要

我们生活在一个即时满足的世界中。降落在您网站上的用户将做出快照判断，因此英雄部分必须在几秒钟内引起注意。否则，他们可能会反弹，离开您的网站并去其他地方。但是，您的英雄部分不只是视觉效果。它为整个用户体验设定了基调。一个好的英雄部分设定了用户对您网站上发现的内容的期望。

当您知道只有几秒钟的时间来吸引人们的注意力时，就会计算它。利用视觉讲故事的力量快速传达信息。吸引人的图像（例如照片或视频）结合有影响力的标题，可以在几秒钟内传达更多的信息，而不是大的文字段落。使用可帮助用户立即了解您的报价以及为什么要关心的语言。

考虑此示例：您想开始有机食用，因此您要寻找当地的农贸市场。当您降落在现场时，美味的食物形象会引起您的注意。扫描标题，您会发现两个按钮鼓励您了解更多信息。

它传达了您的消息

访客不必猜测或滚动即可了解您提供的服务。避免您的目标受众可能无法掌握的行话或过度技术语言。取而代之的是，突出显示您与比赛不同的原因。从独特的产品或服务到专业知识的专业领域，它可能是任何东西。另外，该产品或服务如何使他们受益？根据用户需求或想要的内容来构建您的消息。

我们已经提到了视觉效果的重要性，但是您选择的文本同样至关重要。使头条简短，令人难忘和引人注目。跟进一个简短的子标题或介绍段落，以捕获用户的兴趣。

考虑此示例：您正在寻找祖母的艺术疗法。当您找到此网站时，您会被设计和鲜艳的色彩所吸引。您阅读了段落，并知道该业务为儿童，成人和老年人提供艺术疗法课程。

它可以推动转换

转换是人们建立网站的主要原因。企业主希望您购买某些东西或完成任务。如果正确设计，您的英雄部分可能是转换的磁铁。实现此目的的最关键因素之一是使用有效的呼吁（CTA）。每个优秀的英雄部分都会有一个按钮或表格，以鼓励您的访客迈出下一步。

推动转化的另一种有效方法是通过营造紧迫感。这可以通过针对特定产品，倒计时计时器的限时报价或报名的新闻通讯的好处来实现。小心不要太挑剔。而是使用激励用户采取行动的语言。

考虑一下这个例子：您是居住在加利福尼亚的Divi爱好者。您一直想参加与Web设计有关的会议，以建立联系并学习新技能。降落在网站上后，您立即知道该网站是8月在旧金山举行的Divi Meetup，您可以注册。

有效的英雄部分的核心要素是什么？

专注于一些关键要素，您可以创建一个看起来很棒的英雄部分，可以有效地吸引访问者，并鼓励他们进一步探索您的网站。您应该在英雄部分中包括什么？

引人注目的标题

您的标题应该简短，甜美且有影响力。思考大型，大胆且受益的驱动。不用说欢迎来到我们的网站，而是尝试一些更引人注目的东西，例如通过我们的30天跆拳道计划解锁潜力。 Divi的标题或全宽标头模块可让您完全控制标题的样式。播放不同的字体，颜色，尺寸和间距，以创建引人注目的外观。您可以使用字体样式来展示您的业务名称，从而从一开始就不可否认您的业务。

副标题或介绍段

当您的标题引起注意时，您的子标题或介绍段落提供了上下文。您有机会详细说明头条新闻的承诺并增加一些阴谋。保持简洁，让它与您的主要标题和谐合作。例如，如果您的标题在水疗中心度过了一天，则您的子标题可以详细说明并解释水疗中心提供的内容。

明确的行动呼吁

您的英雄需要明确的目的。您希望访客接下来做什么？无论您想吸引用户学习更多信息，进行购买还是注册新闻通讯，无论它是什么，您的CTA都应该清晰而突出。使用以动作为导向的语言，例如开始或加入。位置良好的CTA充当指导，导致游客采取所需的行动。

高质量的图像

坦白说：视觉效果胜于雄辩。高质量的图像或视频可以立即引起注意并为您的网站设置心情。 Divi在您的英雄部分中添加和样式的图像和视频非常容易。良好的视觉效果可以传达情感，讲述故事并给人留下持久的印象。

扭曲的背景

您的英雄部分的背景为您的内容设定了舞台。您可以使用图像，纯色或渐变来创建令人惊叹的背景。 Divi使您可以完全控制背景设置，因此您可以使您的独特和引人注目的外观。大多数高级主题为您提供了对背景设置的控制权，使您可以创建一个独特的英雄部分，以反映您的品牌并为您的其余网站设定基调。

英雄部分的例子（以及为什么它们工作）

准备了解强大的英雄部分如何改变您的网站？让我们探索一些Divi可用的有效示例，以分解它们的工作原因。使用Divi的几个布局包，我们将展示各种设计以激发您的灵感。请记住，这些只是起点 - 真实世界的成功取决于引人注目的内容（不是占位符文本）。但是，这些示例将为您清楚地了解可能性。

示例1：AI软件

我们的第一个示例是针对AI软件公司。它具有多种优势，包括：

1. 明确的标题和副标题： Divi的未来是一个简洁而有趣的标题，可以传达重点。副标题的人工智能提供了背景和现代，尖端的感觉。
2. 视觉吸引力：带有发光元素的抽象，未来派背景引人注目，并且与AI和未来的主题相关。
3. 强烈的对比：紫色背景的白色文字提供了出色的可读性，并使信息脱颖而出。
4. 明确的行动电话：今天加入Divi和免费演示是直接的，并且以动作为导向，告诉用户他们可以在单击时可以做什么以及他们将获得什么。拥有两个CTA提供了吸引用户感兴趣的选项。
5. 它是现代的：整体设计，配色方案和图像引起了创新和前瞻性的感觉，它与AI和未来趋势的主题相吻合。

示例2：宠物供应

此布局包是为宠物供应企业主设计的。这是使其英雄部分有效的几点：

1. 明确的标题：宠物用品和每月的盒子订阅传达了公司的作用，使标题直接且易于理解。
2. Direct CTA：在线购物是一个简洁的CTA，鼓励游客购买其产品。
3. 视觉上相关的图像：英雄的主要图像显示了宠物食品，从而增强了业务的本质。它还增加了颜色，吸引了用户的眼睛。
4. 干净的设计：布局整洁，现代和简单。白色背景和大胆文字提供了良好的对比度和可读性。

示例3：非营利性水

在此示例中，英雄描绘了一家非营利性业务。尽管很简单，但英雄很有效，因为：

1. 它具有清晰的品牌：业务名称和随附的标语可以传达组织的使命。
2. 它在视觉上吸引人：海洋的大背景图像创造了强烈的视觉效果，并立即连接到水主题。
3. 清晰的CTA：捐赠按钮是突出的，用户使用面向动作的文本来鼓励参与。
4. 统计数据的使用：强调筹集的资金提供了慈善机构影响的证据，并建立了对品牌的信任。
5. 和谐的布局：色块样式以结构化和美观的方式介绍了信息，并在慈善机构的不同方面具有清晰的部分。

示例4：房地产

在Divi的房地产布局包中，英雄使用Divi的网格系统为英雄添加了四列。这是有效的，原因有一些：

1. 简洁的标题：通过Divi吸引目标受众并提出价值，找到您梦想中的家。
2. 强大的视觉效果：单色背景图像与绿色CTA形成鲜明对比，使其脱颖而出。
3. Clear CTA：英雄部分有四个强大的CTA供用户与该网站互动。
4. 现代设计：简约的设计和深色方案创造了精致而现代的外观。

这些示例证明了优秀的英雄部分设计的多功能性。从光滑，现代到视觉引人入胜且内容丰富的可能性是无穷无尽的。现在，让我们深入研究Divi成为定制和创建完美英雄部分的理想工具的原因。

为什么Divi是设计英雄部分的绝佳选择

Divi在建立网站时是改变游戏规则的人，包括创建英雄部分。 Divi提供了一个拖放页面构建器，视觉构建器，因此您可以准确地看到网站在构建时的外观。

该主题装有200多个设计模块，为您提供了构建令人惊叹的英雄部分和网页的无限选择。借助主题构建器，您可以自定义网站的每个部分，从网站的标题到页面模板，创建真正独特的外观。

如果您需要灵感，Divi拥有大量的2600多个专业设计的布局。每个布局都包含一个精心设计的英雄部分，您可以轻松调整该部分以完美匹配您的品牌。因此，无论您是设计专业人士还是完整的新手，Divi都拥有创建一个脱颖而出的英雄部分所需的一切。

除了成千上万的布局外，Divi还提供了另一种简便的方法来构建一个完整的网站：Divi快速网站。您可以在不到两分钟的时间内使用入门网站或生成AI创建一个完整的网站，这要归功于Divi的载板设计助理Divi AI。 All Starter和生成的网站都配备了所有核心页面，主题构建器模板，全局样式以及为您配置的所有WordPress设置。

Divi快速站点是使您的创造力流动并快速建立网站的好方法。您可以轻松自定义全球样式（字体和颜色）以完美匹配您的品牌。您也不喜欢这种外观。可以对设计进行调整，但是您想自己制作。另外，您可以以每年89美元的低价构建尽可能多的网站（和英雄部分）。

得到Divi

如何与Divi一起设计英雄部分

使用Divi设计一个英雄部分可以通过几种方式完成。您可以从头开始创建一个，导入预制布局或使用Divi AI生成部分。在这篇文章中，我们将从Divi的预制布局之一开始，并更改设计以匹配我们的品牌。

选择一个布局包

在WordPress网站上创建一个新页面，安装Divi，然后选择新页面加载时选择预制布局。接下来，单击浏览布局以查看预制布局的选择。

Divi允许您通过类别进行搜索或过滤以找到要添加的布局。有多个类别可供选择，因此找到适合您需求的一个类别将很容易。对于这篇文章，我们将选择Realty Layout Pack（上面的示例4），然后为律师事务所更改它。

单击包装，然后选择“着陆页”布局。单击使用此布局按钮安装包装。

一个对话框询问您是否要导入设计预设。 Divi预设是主题的最佳功能之一，可让您在网站上保存和重复使用设计样式。因此，我们鼓励您检查一下tickbox。然后单击导入继续。

对英雄部分进行设计更改

现在您已经安装了布局，我们可以更改英雄以匹配我们的品牌。我们将首先交换我们英雄的背景图像。单击设置图标以启动部分设置。

单击背景下拉菜单，然后选择“背景图像”选项卡。

通过悬停在图像区域上并单击垃圾图标来删除现有的背景图像。

通过单击图像区域中的“添加背景图像”按钮添加新的背景图像。选择您想要的任何图像，但请确保它是1920年的宽度，以便在较大的桌面屏幕上正确显示。

用Divi AI重写文字

Divi有自己的AI设计助理直接建在视觉构建器中。它允许您使用文本提示生成品牌副本。但是首先，我们将改变英雄中的小标题。单击“设置”图标以提出模块的选项。将小标题的文字更改为伯明翰家庭律师事务所。

接下来，我们将替换英雄中的大趋势。这次，我们将使用Divi AI为我们的英雄部分制作引人注目的标题。要激活Divi AI，请单击标题字段中的AI按钮。

将出现一个带有多个选项的对话框。选择用AI写。

当出现设置时，将为您选择内容类型。告诉Divi AI您正在写的内容（在这种情况下为家庭律师事务所），并在附加的上下文字段中选择不选择上下文。当Divi AI了解您想要的内容时，效果最佳，因此在编写提示时，请描述。

在《指南我》部分下，您可以选择语音音调，添加所有必使用的关键字，定义内容长度并选择一种语言。最后，单击生成的文本按钮生成标题。可能需要一些尝试才能获得所需的标题，但好消息是Divi AI提供了无限的几代。

添加调用行动

完成我们的英雄部分的最后一步是添加一个呼吁行动（CTA）。首先，我们必须在前三列中更改内容。用与法律相关的内容替换模块中的图标和文本。 Divi拥有超过800个图标，因此找到适合您的利基市场的图标很快，很容易。

接下来，我们将在标题下方的第四列中替换图标。悬停在模块上以将其删除。

在第四列的标题模块中，使用Divi AI生成迷人的CTA。请记住，它应该鼓励您的访问者采取行动并链接到您网站上的相关页面。

如何与Divi AI一起设计英雄部分

现在，您可以看到使用Divi Layout Pack设计英雄部分是多么容易，让我们开始使用Divi AI创建一个。我们已经展示了Divi AI如何生成文本，但它还可以生成图像，代码，部分，网页和完整的网站（稍后再详细介绍）。

产生新的Divi英雄

首先为您的Divi网站创建新页面。当视觉构建器加载时，不用这次从头开始进行预制布局。

当视觉构建器加载时，Divi会自动允许您添加一行并提供各种布局。 Visual Builder使用网格系统来帮助您将内容整理和组织成行和列。 Divi提供了几种预设的列布局（单个，两个相等，三个列，宽度不同，等等）。

Divi AI使用相同的网格系统为您的网站生成部分。但是，只需要在打算从头开始构建布局时添加行。通过单击网格右上角的X来取消行对话框。

要生成带有AI的英雄部分，请在页面上悬停，然后单击蓝色 +图标。

出现对话框时，请选择使用AI的生成部分。

当出现Divi AI设置时，有一些字段要填写。就像生成文本一样，Divi AI需要有关您要创建的部分和业务的信息。您还可以指定要使用的图像类型（库存，AI生成或占位符）以及要使用的字体和颜色。一切准备就绪后，单击生成部分按钮以创建您的英雄。

整个过程需要几秒钟。完成后，您可以节省您的样式，以在您构建的每个部分或网页上应用。如果您选择库存图像，AI将提供所使用的图像列表（包括链接）。

Divi AI英雄例子

Divi AI具有通用性，可以在各个类别中创建美丽，有效的英雄部分。看看我们产生的一些提示。

为设计机构创建一个英雄部分。它应该有一个迷人的标题，支持文本和突出的行动呼吁。

为披萨餐厅设计一个英雄部分。给它鲜艳的颜色，大胆的标题和美味披萨的背景图像。

一个名为“ Dee的硬件”的五金店的英雄部分。它应包括工具的图像，大胆的标题和突出的行动呼吁。

为建筑公司创建一个英雄部分。它应该具有大胆，有影响力的标题，舒缓的颜色和清晰的行动呼吁。

获取Divi AI

体验最好的Divi必须提供的Divi Pro

使用Divi Pro，您可以访问整个Divi生态系统。这意味着您可以在一个地方管理所有插件和主题，存储并重用自己喜欢的设计在云中，轻松与团队合作，并在需要时获得专家支持。 Divi Pro确实使您能够将您的网站提升到一个新的水平。

Divi Pro随附：

• Divi AI：使用文本提示符生成无限的图像，文本，代码，部分，网页和完整网站。
• Divi Dash：管理您的所有插件和主题，跟踪所有客户，并获得有关您网站表现方式的宝贵见解 - 全部均为方便的仪表板。
• Divi Cloud：告别杂乱的JSON文件以及无尽的复制和粘贴！只需单击几下，您就可以在云中存储并重用自己喜欢的Divi布局。
• Divi团队：轻松与您的团队合作，并授予他们访问您拥有的所有令人惊叹的Divi工具。
• Divi VIP：每年365天，在30分钟或更短的时间内获得企业级别的支持。
• Divi Marketplace积分：获得50美元的学分来探索Divi Marketplace并找到令人惊叹的儿童主题，布局和扩展，以增强您的网站。

有了Divi Pro订阅，您可以将网站构建体验提升到一个新的水平。这就像拥有一支专家设计师，开发人员和支持专家团队，每年低成本277美元，每月仅23.08美元。

得到Divi

用Divi给人留下持久的第一印象

引人注目的英雄部分对于吸引用户的关注和推动参与至关重要。毕竟，您只有一个机会给人留下第一印象。 Divi提供了一个功能强大的平台来创建有影响力的英雄部分，从而使其比以往任何时候都更加容易。凭借其直观的视觉构建器和强大的设计助理Divi AI，您可以在几分钟内设计英雄部分。使用Divi和Divi AI，您可以通过第一次点击捕获观众。