英雄形象設計技巧以及如何在整個 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 免費贈品！