如何為您的網站設計英雄部分（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，您可以通過第一次點擊捕獲觀眾。