如何在 WordPress 中的圖像上添加文本疊加？

帶有文本疊加層的圖像看起來很棒，可以傳達信息，對於標題尤其有用。 但是，讓我們面對現實，沒有人想將此功能編碼到編輯器中，也沒有人有時間將文本設計到圖像本身中。 幸運的是，有一些非常簡單的過程需要零自定義編碼，並且可以使用 WordPress 的內置內容編輯器 Gutenberg 塊編輯器輕鬆實現。 在本教程中，我們將介紹其中的一些方法，最後，您將能夠在整個 WordPress 網站的圖像上添加覆蓋文本。

圖像上的文本疊加

首先，什麼是文字疊加？ 文本覆蓋是任何類型的書面內容，它覆蓋了視覺內容（例如視頻和圖像）的表面。 文本疊加主要用於網站英雄部分的標題和橫幅。 不僅僅是將簡單的文本作為標題，包括帶有文本和疊加層的圖像，從專業和美學的角度來看，網站看起來會更好。 此外，您可以將覆蓋文本鏈接到您網站上的相應產品或頁面以增加流量。

如何在 WordPress 中的圖像上添加文本疊加？

在 5.0 版本之前，WordPress 使用一個簡單的經典編輯器來創建帖子和頁面。 無法使用經典編輯器添加按鈕、表格或裝飾，如文本覆蓋。 因此，您必須使用來自第三方開發人員的自定義或頁面構建器插件。 但是，您可以使用 Gutenberg 塊編輯器做很多事情，而無需任何額外的插件。 例如，使用 Gutenberg 塊編輯器在 WordPress 中的圖像上添加文本覆蓋的方法不止一種。 這篇文章將指導您完成在 WordPress 網站中的圖像上添加文本疊加所需遵循的所有步驟和方法。

那麼，我們還在等什麼？ 讓我們開始吧！！

注意：正如我們對 Gutenberg 的解釋，請確保您在站點中使用默認的 Gutenberg 塊編輯器，而不是帶有 Classic Editor 插件的舊編輯器。

1. 通過圖片塊添加文字疊加

• 當您在帖子或頁面編輯器中時，單擊塊插入器 (+) 圖標並選擇圖像塊以添加新圖像。 另一種選擇是輸入/image並按回車鍵。
• 您有多種選擇來插入圖像。 如果您想選擇 WordPress 網站上的現有圖像，請選擇上傳以從您的計算機添加圖像或使用媒體庫選項。 或者，如果您想直接從鏈接添加圖像，也可以使用從 URL 插入。
• 單擊要添加文本覆蓋的圖像。
• 在頂部工具欄中，單擊“在圖像上添加文本”按鈕，如下面的屏幕截圖所示。

• 單擊後，您會注意到頁面右側的塊編輯器（稱為文檔面板）發生了一些變化。 在面板上向下滾動，直到到達“疊加”部分，如下圖所示。 在這裡，您可以選擇執行以下任一操作：
  • 添加純疊加顏色或漸變作為背景，以確保文本更加突出。 對於這兩個選項，您可以選擇從菜單中選擇一種預設顏色，從調色板中選擇自定義顏色，或添加您選擇的特定顏色代碼。 您也可以對漸變顏色選項執行相同操作。 漸變基本上是由至少兩種顏色組合組成的配色方案。 換句話說，覆蓋層的顏色將逐漸並分別從第一個變為第二個和更多（如果適用）。
  • 根據您想要看到的底層圖像的多少來更改不透明度級別。 我們建議不透明度級別在 30% 到 60% 之間，因為低於 30% 的任何內容都會使您的疊加層幾乎無法區分，而超過 60% 會使疊加層太暗，從而難以清楚地看到背景圖像。

• 要添加文本，請單擊覆蓋在圖像上的“類型/以選擇塊”部分。 現在，這將更改塊編輯器以顯示特定於覆蓋文本的編輯設置。
• 鍵入要在圖像上顯示的文本，如下面的屏幕截圖所示。

• 要更改文本的顏色，請轉到塊編輯器的“顏色”部分。 在這裡，您可以選擇對覆蓋文本進行以下顏色更改。
  • 更改文本顏色。 我們建議您選擇與疊加顏色和所選不透明度級別相匹配的文本顏色。
  • 如果您已通過超鏈接將文本鏈接到另一個頁面，請添加背景顏色和/或鏈接顏色。
• 要更改覆蓋文本的排版，請向下滾動塊編輯器，直到到達“排版”設置。 在這裡，您可以從下拉列表中選擇一種預設文本大小，或通過單擊“自定義大小”按鈕手動輸入特定大小。 我們將文字大小選擇為“超大” ，這是可用的預設文字大小之一。 隨意選擇最適合您的文本大小。

• 如果您想更改覆蓋文本的對齊方式、使其加粗或添加鏈接，您可以通過選擇頂部工具欄中的選項輕鬆實現，如下圖所示。
• 最後，在塊編輯器上，您會找到高級選項卡，它允許您將 CSS 類添加到塊中，讓您有機會編寫自定義 CSS 並設置圖像樣式，並根據您的特定需求覆蓋在圖像塊上。 但是，如果您沒有足夠的前端開發知識和訣竅，那麼使用塊編輯器提供的預設功能應該足以按照您認為合適的方式設置圖像塊的樣式。

注意：漸變色為您的圖像、內容和網站整體增添了充滿活力和藝術感的外觀。 因此，為了充分利用 WordPress 塊編輯器上的這種疊加顏色功能，我們建議您學習混合和匹配不同顏色組合的藝術，以了解什麼最適合您的品牌和您網站上已有的內容。 另一種選擇是與設計師合作，因為他們將能夠提供特定於您希望網站努力實現的視覺佈局的藝術建議。

相關：了解如何在 Weebly 站點中添加圖像疊加？

2. 通過封面塊添加文字疊加

使用圖像塊添加文本疊加時，您可以注意到文檔麵包屑（顯示在編輯器底部狀態欄）更改為“封面”塊。 由於 WordPress 還提供了一個封面塊，您可以使用它來添加文本覆蓋。 事實上，我們建議使用適合創建全角標題部分的“Cover”塊。

• 單擊 (+)“添加塊”圖標並選擇封面以添加封面塊，開始工作。 您也可以輸入/cover並按回車鍵。

• 如果您想選擇 WordPress 網站上的現有圖像，請選擇上傳以從您的計算機或媒體庫中添加圖像。
• 鍵入要覆蓋在圖像頂部的文本，如下面的屏幕截圖所示。 您可以從前面方法中提到的顏色和版式設置更改文本顏色和大小。

注意： WordPress 還為標題部分提供了一些預定義的模式。 您可以單擊編輯器左上角顯示的“Toggle block inserter +”圖標，然後選擇“Patterns”。 從下拉列表中選擇“標題”並插入具有預定義設置的封面塊圖案。 這非常有用，因為您可以編輯內容并快速更新，而不是從頭開始創建。

3. 在圖庫圖片上添加文字疊加

使用默認的“畫廊”塊在 WordPress 畫廊中的圖像上添加文本覆蓋也很容易。

• 單擊塊插入器 (+) 按鈕將新塊添加到您的頁面。
• 這一次，選擇畫廊塊。 或者，您也可以輸入/gallery並按 Enter。

• 您將有兩個選項來添加圖像，上傳和媒體庫。 與前面提到的方法一樣，如果要從設備添加圖像，請選擇“上傳”，如果要包含在圖庫部分中的圖像已存在於您的網站上，請選擇“媒體庫”。
• 上傳圖像或從媒體庫中選擇圖像後，您現在可以為每張圖像添加標題，這些標題將在圖庫圖像上顯示為文本疊加層。

注意：要注意的一件重要事情是，如果您在添加圖庫塊之前已經為媒體庫中的圖像添加了標題，則標題將顯示為所述圖庫塊上的文本疊加。 相反，如果您在創建圖庫區塊後為圖像添加標題，則它們不會出現在圖庫區塊中。 在這種情況下，您必須在創建圖庫塊後手動添加字幕，或者刪除圖庫塊並再次添加塊，以便使用添加的字幕。

添加文本疊加的其他選項

內置的文本覆蓋選項是基本的，在發布的網站上看起來很簡單。 您也可以使用以下類型的插件之一來創建疊加層。

• 滑塊插件，如 Slider Revolution 或 Kreatura Slider。
• 畫廊插件
• 頁面構建器插件

但是，這些插件很重，很容易降低您的網站速度。 您還可以嘗試自定義 CSS 來創建圖像疊加，如本演示頁面所示。 但是，您需要了解編碼技能並花費大量時間進行開發。 因此，我們建議使用上面解釋的默認方法之一在 WordPress 中的圖像上添加文本覆蓋。

最後的話

你有它。 使用內置的古騰堡塊編輯器在 WordPress 中的圖像上添加文本疊加是非常簡單易行的任務。 最終，向圖像添加文本疊加可以改善網站的呈現、設計、佈局和整體美感，從而給訪問者留下積極的第一印象。 與往常一樣，如果您對在 WordPress 上的圖像上添加文本有任何問題或疑慮，請隨時在下面發表評論，我們將盡力提供幫助。