如何在WordPress區塊編輯器(Gutenberg)中添加和對齊圖像


通過使圖像更具吸引力,圖像使您的WordPress帖子和頁面栩栩如生。 但是,許多初學者都難以按照自己喜歡的方式對齊圖像。

新的WordPress區塊編輯器(Gutenberg)通過使其更易於在WordPress中添加和對齊圖像來解決此問題。

在本文中,我們將向您展示如何輕鬆地在WordPress中添加和對齊圖像以創建漂亮的內容佈局。

在WordPress中添加並正確對齊圖像

WordPress編輯器中的圖像對齊

以前,WordPress使用帶有編輯按鈕的文本區域作為其默認編輯器。 舊編輯器中的一個特殊問題是圖像對齊。

即使有將圖像左,右或居中對齊的選項,它們也不總是看起來不錯。 有時圖像無法對齊,大小不正確或看起來很奇怪。

WordPress 5.0引入了一個新的WordPress帖子編輯器,稱為Gutenberg塊編輯器。 它修復了舊編輯器的一些問題,包括圖像對齊問題。

讓我們看一下如何在新的編輯器中輕鬆添加和對齊圖像,以為帖子和頁面創建漂亮的佈局。

在WordPress中添加和對齊圖像

新的編輯器帶有以下塊,您可以使用這些塊將圖像添加到WordPress帖子和頁面中。

  • 圖片
  • 內嵌圖片
  • 畫廊
  • 媒體與文字

讓我們首先從一個簡單的圖像塊開始。

點擊“添加新塊”按鈕或輸入 /圖片 在帖子編輯器中插入一個圖像塊。

在WordPress帖子編輯器中添加新的圖像塊

您將在空白圖像塊內看到三個按鈕。

您可以從計算機上載圖像,從媒體庫中選擇一個已經上載的圖像,或者通過提供圖像文件URL插入圖像。

接下來,單擊“上傳”按鈕,然後從計算機中選擇要上傳的圖像。

一旦選擇了圖像,WordPress就會將其上傳到您的媒體庫並將其插入圖像塊。

WordPress帖子編輯器中的圖像選項

現在,您會注意到圖像頂部的工具欄以及右列中的某些圖像塊設置。 要對齊圖像,您將使用顯示在圖像頂部的工具欄。

WordPress帖子編輯器中的圖像對齊按鈕

圖像塊為您提供以下圖像對齊選項,作為工具欄中的按鈕。

  • 左對齊
  • 居中對齊
  • 右對齊
  • 寬幅
  • 全屏寬度

如果圖像的寬度較小,則將其向左或向右對齊將在圖像旁邊顯示文本。 將其與中心對齊將在其自己的行上顯示圖像,而在每一行上都沒有文本。

在WordPress中居中對齊圖像

選擇“寬寬度”選項將使您的圖像比文本區域寬,而“全角”選項會將其推到瀏覽器屏幕的左右邊緣。

在WordPress中製作全角圖片

如何完美對齊文本旁邊的圖像

很多時候,您可能需要使圖像與某些文本完美對齊。 WordPress塊編輯器通過添加Media&Text塊使此操作變得容易。

該塊基本上增加了一個兩列的區域。 一欄用於圖像(媒體),第二欄用於文本內容。

WordPress帖子編輯器中的媒體和文本塊

只需上傳您的圖像,然後在其旁邊添加要顯示的文本。

圖像和文本塊設置

添加圖像和文本後,您將注意到該塊的更多選項。 您可以使整個塊變寬或變寬,也可以切換圖像和文本的側面。

圖像的對齊方式將自動調整為下一列中文本的高度。

圖像尺寸調整為垂直對齊

如何在WordPress中對齊圖庫圖像

WordPress帖子編輯器還附帶一個用於添加圖像庫的塊。 這使您可以輕鬆地在行和列的網格中顯示圖像。

Gallery塊在工具欄中帶有類似的對齊選項。

您可以使整個圖庫塊與左側,中央或右側對齊。 您也可以使其變寬或將其更改為全角行。

在WordPress帖子編輯器中對齊圖庫圖像

WordPress中的默認圖庫功能非常好。 但是,如果您定期將圖片庫添加到WordPress帖子和頁面中,請考慮使用像Envira Gallery這樣的圖片庫插件。

這些插件將為您提供更多選擇,以使照片圖庫中的圖像對齊,在彈出窗口中顯示它們以及以不同的方式設置它們的樣式。

如何在WordPress中並排添加兩個圖像

在WordPress帖子中並排顯示兩個圖像的最簡單方法是在Gallery塊中添加兩個圖像。

在WordPress帖子和頁面中並排顯示兩個圖像

只需為圖庫塊選擇2列佈局即可將兩個圖像彼此相鄰顯示。 您還可以選中“裁剪縮略圖”選項,以確保兩個圖像的尺寸相同。

在WordPress中添加和對齊圖像的更多方法

除了圖像,媒體和文本以及圖庫塊之外,您還可以使用Cover塊添加封面圖像。

在現代網頁設計中,封面圖像用於創建高度引人入勝的內容佈局。 這些圖像用於突出顯示頁面的不同部分。

封面圖像塊具有與圖像塊相同的對齊選項。 您可以在圖像上添加文本,然後從塊設置中選擇覆蓋顏色。 最好的部分是您可以選中“固定背景”選項,以創建視差背景效果。

在WordPress帖子中添加封面圖片

要了解有關使用封面圖像的更多信息,請查看我們有關WordPress中精選圖像和封面圖像之間區別的文章。

到目前為止,我們已經討論過將圖像直接添加到您的帖子和頁面上。 第三方網站的圖片呢?

塊編輯器也使此操作變得容易。 它帶有嵌入塊,可用於流行的社交共享網站,包括Instagram,Flickr,Imgur,Photobucket等。

例如,如果要添加Instagram照片,則只需將Instagram塊添加到帖子編輯器中,然後輸入要共享的帖子的URL。

在WordPress帖子和頁面中添加Instagram圖片

WordPress將自動獲取Instagram帖子並為您嵌入。 之後,您將能夠使用工具欄中的對齊選項。

Instagram嵌入WordPress

嵌入塊還使您可以輕鬆地將視頻嵌入WordPress。 之後,您可以在工具欄中使​​用相同的選項來對齊WordPress中的視頻。

我們希望本文能幫助您學習如何在WordPress塊編輯器中輕鬆添加和對齊圖像。 您可能還想查看我們的指南,以了解如何優化圖像以加快WordPress的速度。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。