所有關於 WordPress 英雄形像從想法到實施

已發表: 2020-10-09

當今網頁設計中最重要的趨勢之一是 WordPress 英雄形象設計。 這些特殊的標題通常被稱為英雄圖像、英雄滑塊、橫幅、視頻標題或輪播。 留下良好的第一印象非常重要。 您只能獲得第一印象的一次拍攝,並且您只有幾秒鐘的時間來吸引訪問者的注意力

在本文中,我將向您介紹一些最佳實踐、英雄形象示例,並提供令人難以置信的資源來幫助您為您的網站創建有效的 WordPress 英雄形象

使用 Smart Slider 3 創建 WordPress 英雄形象
Smart Slider 3 是創建英雄版塊的完美工具

你可以用英雄形像做什麼?

當你在網上瀏覽時,你會遇到很多不同目標的英雄形象。 我收集了一些可以使用英雄形象的案例。 讓我們看看他們。

  • 突出您的產品。 突出產品的最佳方式是在您的頁面上展示一個好的英雄形象。 訪問者首先會看到此圖像,並且可以閱讀有關您的產品的小信息。 在您的“立即購買”頁面上放置一個鏈接,您的訪問者可以立即購買。
  • 分享信息。 您可以使用英雄形像以其他方式分享有關您的產品或服務的信息。 您可以在圖像上添加文本,也可以添加向訪問者提供信息的視頻。
  • 精選最新消息。 您想向訪問者展示您的最新帖子或重要帖子嗎? 在圖片上加上標題和一個小描述,一個帶有帖子鏈接的按鈕,我敢肯定,如果它很有趣,訪問者會點擊它來閱讀更多內容。
  • 設計元素。 英雄形象可以成為您頁面的一個很好的設計元素,它是焦點,使您的頁面振作起來,並且通常會與訪問者互動。
  • 創造一種情感。 情緒可能是一個重要因素。 喚起正確的情緒可以立即與訪問者建立信任。

如何選擇 WordPress 英雄形象?

當你選擇一個主圖時,重要的是要記住你的主圖不僅需要好看,它的風格也需要適合你的整個網站。 如果您使用情感英雄圖像,請考慮頁面的情緒。 圖像可以是整頁,但較小的圖像也可以在導航欄下方顯示。 這些大橫幅圖像是網頁設計的趨勢,並且在您的業務概述之前,因此您應該為您的頁面選擇合適的圖像。

在哪裡可以找到英雄形象的最佳免費資源?

好的圖像是偉大英雄圖像的關鍵部分,但找到圖像可能很困難。 這是我收集的最好的網站,可以找到免費的照片和視頻。

  • Unsplash – 高分辨率照片
  • Pexels – 一個地方最好的免費圖片素材
  • Picjumbo – 完全免費的圖片素材
  • Kaboompics – 為商業或個人項目獲取令人驚嘆的免費圖片的好地方
  • 庫存照片的死亡 - 每個月通過電子郵件發送免費照片
  • Coverr – 為您的主頁提供精美的免費視頻
  • Pikwizard – 滿足您所有創意需求的免費圖片素材

一個好的英雄形象應該包含什麼?

WordPress 主圖展示了您的服務或產品的概覽。 它可以是一個簡單的圖像,但如果你使用上面的內容,它會更成功,比如 CTA。 讓我們看看英雄形象應該包含的 4 個重要部分。

呼籲採取行動

CTA 按鈕是您希望訪問者執行的操作,因此您使用英雄形象的目標是說服訪問者執行此操作。 無論您的目標是增加銷售額還是產生電子郵件潛在客戶,都沒有關係。 但不要忘記,您必須清楚您希望訪問者採取什麼行動,並使其盡可能簡單。 好的,但是如何開始呢? 從 CTA 開始,然後返回。 如果您確切地知道自己的目標,那就容易多了。

好文案

訪問者看到的第一個標題是您將在網站上寫的最重要的副本。 編寫一個好的網絡副本並不容易,它需要技巧才能把它做好。 一些最好的撰稿人會花費數週時間來製作標題。 您的目標是傳達您的價值並讓訪問者在您的網站上進行互動

品質背景

大概意像是英雄形像中最重要的部分。 它是一個強大的工具,可幫助您溝通和區分您的網站。 您的英雄形象應包含能吸引觀眾眼球並吸引觀眾的圖像、視頻或圖形。 大多數上下文圖像更有效地傳達您的信息,非上下文圖像不會用任何附加信息來補充信息。

冰島英雄塊

實時預覽

影響

這一切都是為了創造那個令人驚嘆的時刻。 最好的英雄圖像在吸引讀者註意力和提供足夠數量的有用信息之間取得平衡

例如,動畫非常適合讓網站設計令人難忘並吸引訪問者的注意力。 動畫作為設計工具的關鍵是適度。 在 Smart Slider 3 中使用動畫改善用戶體驗的方法有很多:圖層動畫、拆分文本動畫或令人難忘的交互。

如何輕鬆創建 WordPress 英雄形象?

現在可能你想在你的頁面上放一個英雄形象,但你不知道怎麼做。 如果您搜索一個插件,您可以在其中輕鬆地為您的網站創建一個英雄部分,那是最好的。 在理想情況下使用插件,您可以在圖像上放置文本或按鈕,然後可以將其發佈到您想要的位置。 Smart Slider 是一個很棒的插件來創建英雄圖像。

什麼是智能滑塊 3?

Smart Slider 3 是一個免費的滑塊插件,無需編碼知識即可輕鬆創建滑塊、英雄圖像和塊。 使用拖放編輯器,您可以構建所需的塊,並使用標題或按鈕等圖層。 它是完全響應的,當您準備好時,您可以使用簡單的簡碼、Gutenberg 或頁面構建器來發布它。

因為 Smart Slider 3 不僅僅是一個滑塊插件,您將能夠輕鬆地為您的網站創建完美的 WordPress 英雄形象。 無論您需要什麼類型,它們通常都位於網站的頂部,這些是人們首先看到的內容

創建一個英雄塊

塊類型是 Smart Slider 的一種特殊滑塊類型。 該塊僅顯示一張幻燈片,這是創建英雄圖像的完美選擇。 使用 Smart Slider 創建英雄塊非常簡單。 只需單擊綠色的新項目按鈕,然後創建一個新項目或從一個現成的模板開始。

使用 Smart Slider 3 創建項目
使用 Smart Slider 3 創建項目

然後,您可以在可視化編輯器中編輯您的塊。 Smart Slider 免費版有 7 個圖層可供選擇,Pro 版有 24 種圖層。 您可以將圖層放置在您想要的位置,更改其顏色、大小或在其上放置鏈接。 此外,您可以選擇為圖層設置動畫,這可以引起訪問者的注意。

智能滑塊中的幻燈片編輯器
智能滑塊中的幻燈片編輯器

為什麼選擇 Smart Slider 來創建英雄形象?

  • 拖放可視化編輯器。 使用 Smart Slider,您可以按照您的想像編輯您的 WordPress 主圖。 拖放編輯器可幫助您在幾分鐘內創建英雄塊。 使用響應式設置,您可以使其在任何設備上看起來都不錯。
  • 動畫和效果。 在 Smart Slider 3 的 Pro 版本中,您可以使用動畫和效果來為您的英雄形象加油並引起訪問者的注意。 如果您想為您的英雄添加動作,請使用 Ken Burns 效果,或使用圖層動畫突出顯示內容。
  • 動態來源。 動態更改英雄塊上的內容? 使用 Smart Slider 3 是可能的,只需創建一個動態滑塊並使用變量。
  • 易於發布。 您可以輕鬆地將英雄放在您的主頁上,只需使用您的頁面構建器、Smart Slider Gutenberg 塊或滑塊的簡碼。 作為替代方案,您可以使用滑塊的 PHP 代碼並將其放在您的子主題上。
  • 搜索引擎優化友好。 SEO對於讓人們找到您的網站至關重要。 在 Smart Slider 中,您可以填寫 alt 標籤,並且可以添加搜索引擎可以讀取的文本。