如何在WordPress上添加圖片文字(3種方法)

WPressize Me

05/10/2024

如何在WordPress上添加圖片文字(3種方法)

什麼時候在WordPress圖片上添加文字

圖片可以讓你的WordPress網站看起來更有趣,並幫助分解大段文字。然而,有時你的圖片可能需要更多解說。例如,你可能會在圖片上添加文字來解釋圖片顯示的內容以及你為什麼將其添加到文章中。許多WordPress博客也會在圖片上添加文字,以創建吸睛且資訊豐富的橫幅和標題。

在這篇文章中,我們有三種適合初學者的方法來在WordPress上添加圖片文字。若你想直接跳到某個特定方法,可以使用以下鏈接:

方法1:使用封面區塊添加圖片文字

使用封面區塊是其中一種在WordPress上添加圖片文字的方法。你可以使用此區塊來展示任意圖片,然後在圖片上打字。這使得封面區塊成為創建橫幅、標題和廣告的理想選擇。

要將封面區塊添加到頁面或文章中,只需在Gutenberg區塊編輯器中點擊加號“+添加區塊”按鈕。然後輸入‘Cover’並選擇正確的區塊。

默認情況下,封面區塊有一個佔位圖片和一些佔位文字。要更換默認圖片,只需點擊選擇圖片。完成後,點擊“更換”按鈕。

如果你希望使用已在WordPress媒體庫中的圖片,只需點擊“打開媒體庫”。然後選擇現有圖片。如果你希望上傳新圖片,則點擊“上傳”。這將打開一個窗口,你可以從電腦中選擇任意文件。

選擇圖片後,你可以使用區塊設置來創建一些有趣且吸睛的效果。例如,你可以將圖片固定在訪問者滾動頁面時,或者在圖片上添加顏色疊加。

如果使用疊加,你可以使用‘不透明度’滑塊來改變其不透明度。不透明度設定控制背景圖片的透明度。

當你對圖片的外觀滿意後,可以開始添加文字。默認情況下,封面區塊有一個標題和一個段落區塊,你可以在圖片上添加文字。

若要添加文字,只需點擊選擇標題或段落區塊。接著,輸入你想要的文字。

當你在圖片上添加文字時,那些文字有時可能很難閱讀。這對於那些視覺有障礙的訪客尤其如此。要了解更多,請參閱我們的指南“如何提高WordPress網站的可訪問性”。

因此,你可能需要設計你的文字使其更易於閱讀。如果你正在使用標題區塊,可以嘗試不同的標題樣式,看看哪一個最容易閱讀。

你還可以使用對比色來使你的文字更突出。選擇不同顏色,請從右側菜單中選擇‘區塊’選項卡。然後點擊‘顏色’來展開此部分。

接下來,點擊‘文字’。這會打開一個彈窗,你可以在其中選擇區塊中所有文字的新顏色。一般來說,較大的文字更易於閱讀。要使文字變大,請單擊‘大小’旁邊的字段,然後在此字段中輸入較大的數字。

當你對封面區塊的外觀滿意後,可以像往常一樣發布或更新你的頁面。現在,若你訪問你的WordPress網站,你將看到圖片上的文字。

方法2:使用圖片區塊添加圖片文字

封面區塊適合創建橫幅和標題。不過,你也可以在標準的WordPress圖片區塊上添加文字。首先,你需要在頁面或文章中添加一個圖片區塊。只需在WordPress區塊編輯器中點擊加號“+添加區塊”按鈕,然後輸入‘Image’並選擇正確的區塊。

然後你可以從電腦上傳一張圖片,或者點擊‘媒體庫’從WordPress媒體庫中選擇一張圖片。

選擇圖像後,你可以按照上述過程更改其焦點點、添加疊加層以及更改不透明度。

你還可以嘗試不同的‘固定背景’和‘重複背景’滑塊,以查看哪個最適合你的圖片區塊。

當你對圖片的外觀滿意後,只需點擊‘在圖片上添加文字’按鈕。這會添加一個你可以輸入文字的區域。

根據圖片的不同,訪客可能難以閱讀疊加文字。在這裡,可以通過加粗文字或更改顏色來幫助閱讀。

你還可以使文字更大。要做到這一點,在右側菜單中的‘大小’部分找到你希望設置的大小。當你對文字和圖片的外觀滿意後,查看你的網站,然後單擊“保存草稿”、“更新”或“發布”來保存你的更改。

如果你使用的是區塊WordPress主題,那麼你可以使用方法1和方法2在你的主題的任何部分中使用WordPress全站編輯器(FSE)添加圖片文字。你可以在我們的“WordPress全核編輯入門指南”中了解更多關於FSE的信息。

方法3:使用頁面構建插件創建具有圖片文字的自訂頁面佈局

內建的WordPress區塊是一種快速簡便的方法來在WordPress上添加圖片文字。不過,若你希望完全自訂頁面設計,那麼你將需要一個頁面構建插件。SeedProd是市場上最好的WordPress頁面構建器插件。它允許你在整個網站上任何圖片上添加文字。

注意:有免費版的SeedProd,但是本文我們使用的是專業版,因其功能更多。你可以閱讀我們的完整SeedProd評價來了解更多細節。

首先,你需要安裝並啟用SeedProd插件。詳細信息請參閱我們的分步指南“如何安裝WordPress插件”。啟用後,你需要輸入你的SeedProd許可密鑰。你可以通過登錄到你的SeedProd賬戶並點擊‘下載’選項卡來獲取此密鑰。然後,複製‘許可密鑰’部分中的密鑰。

現在進入WordPress管理後台,導航到SeedProd » 設置頁面,並將密鑰粘貼到‘許可密鑰’字段中。然後只需單擊‘驗證密鑰’。

之後,導航到SeedProd » 登陸頁面並點擊‘新增登陸頁面’。

你的下一個任務是選擇一個模板,這將是你頁面的起點。不論選擇什麼SeedProd模板,你都可以自訂模板的每個部分,使其完美適合你的網站和品牌。如果你更喜歡從空白畫布開始,那麼可以點擊‘空白模板’。

在我們所有的圖片中,我們使用的是Tasty Squeeze Page模板,這對於獲取更多訂閱者活動非常有用。一旦找到你可能想使用的模板,將滑鼠懸停在上面。然後可以點擊‘預覽’圖標。這會顯示模板的預覽。

如果你對模板的外觀感到滿意,那麼可以點擊‘選擇此模板’按鈕。在‘頁面名稱’字段中,輸入頁面的名稱。默認情況下,SeedProd會使用此名稱作為頁面的URL。如果你希望更改自動生成的URL,只需編輯‘頁面URL’字段中的文本即可。

當你對輸入的信息滿意後,點擊‘保存並開始編輯頁面’按鈕。這會在SeedProd的拖放編輯器中打開模板。在左側側邊欄,你會看到可以拖放到頁面上的所有區塊和部分。

除非你使用空白模板,否則你的SeedProd頁面將已經有一些區塊和部分。若要編輯這些內容,只需點擊選擇區塊或部分。SeedProd的左側選單將顯示所有設置,你可以使用這些設置來自訂該區塊或部分。如下面的圖像所示,如果點擊標題區塊,你可以更改此區塊中顯示的文本。

添加文字到圖片上最簡單的方法是使用SeedProd的現成英雄部首節。這些部分有一個佔位、全寬背景圖像,並在上面添加了一些佔位文字。你可以簡單地用自己的內容替換默認背景圖像和文字。要開始,點擊SeedProd左側選單中的‘部分’標籤。然後點擊‘英雄’來查看所有現成英雄部首節,你可以添加到頁面中。

要預覽任何這些部分模板,只需將滑鼠懸停在模板上,然後點擊放大鏡圖標。若要將此英雄部首節添加到設計中,只需點擊‘選擇此部分’。

接下來,將模板的庫存圖片換成自己的圖片。為此,只需點擊選擇庫存圖片。接著在SeedProd左側選單中,將滑鼠懸停在‘背景圖片’預覽上直到出現垃圾桶圖標。然後點擊此圖標來刪除佔位圖像。

接著,點擊‘使用自己的圖片’。然後可以從WordPress媒體庫中選擇圖片或使用庫存圖片。SeedProd使你可以輕鬆訪問成千上萬的免版稅庫存圖片。若要瀏覽SeedProd的庫存圖片庫,點擊‘使用庫存圖片’。在搜索欄中,輸入描述你所尋找圖像的單詞或短語,然後點擊‘搜索’按鈕。

SeedProd現在將顯示所有符合你的搜索術語的庫存圖片。當找到希望添加到設計中的圖片時,只需點擊它。一旦添加圖片,可以準備替換佔位文字。為此,點擊選擇文字區塊。然後在‘文本’區域中,輸入希望使用的文字。

一些SeedProd的英雄模板有額外內容,例如號召性用語按鈕。希望更改此內容?只需點擊選擇區塊,然後在SeedProd左側選單中進行更改。

另一個選項是從英雄模板中刪除區塊。為此,只需點擊選擇區塊然後點擊垃圾桶圖標。

當你對頁面設計感到滿意後,點擊‘保存’按鈕。從這裡,你可以選擇發布頁面或將其保存為模板。若要了解更多有關使用SeedProd創建自訂頁面佈局的細節,請參閱我們的指南“如何在WordPress中創建登陸頁面”。

我們希望這篇文章幫助你了解如何在WordPress中添加圖片文字。你可能還想查看我們的指南“如何批量編輯特色圖片”以及我們專家挑選的“最佳網頁設計軟件”。如果你喜歡這篇文章,請訂閱我們的YouTube頻道以獲取WordPress視頻教程。你也可以在Twitter和Facebook上找到我們。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>