如何在WordPress中添加多列內容(無需HTML)


您是否要在WordPress帖子中添加多列內容? 列可用於為您的帖子和頁面創建引人入勝的佈局。

自印刷之初,傳統的印刷媒體,例如報紙和雜誌,就一直使用多列佈局。 他們的目標是使用戶更容易閱讀較小的文本,同時經濟地利用可用空間。

單列佈局在網絡上更常用。 但是,多列網格對於突出顯示內容並使其更易於掃描和閱讀仍然很有用。

在本文中,我們將向您展示如何輕鬆地在WordPress帖子中添加多列內容,而無需編寫任何HTML代碼。

在WordPress帖子和頁面中添加多列內容

在WordPress中添加多列內容–簡單的方法

現在,在WordPress中創建多列內容或網格列內容非常容易,因為它是默認功能。 新的WordPress區塊編輯器Gutenberg包含一個專欄區塊。

要添加多列佈局,您需要創建一個新帖子或編輯一個現有的帖子。 進入帖子編輯區域後,單擊頂部的“添加”圖標以添加一個塊。

接下來,您需要選擇“佈局元素”選項卡下的“列”塊。

在您的WordPress帖子中添加列塊

現在,您將看到鼠標光標跳到左列,而文本佔位符將出現在右列。

WordPress中的列阻止WordPress添加到帖子中

如您在上面的屏幕截圖中所見,“列”塊起初似乎只是一個空白區域。 如果將鼠標懸停在左側,則可以看到突出顯示的塊邊框。

您還可以在帖子編輯屏幕的右列上查看屏蔽設置。

列阻止WordPress-2列

默認情況下,columns塊將添加兩列。 您可以從右側的塊設置中增加要添加的列數。 它允許您在一行中最多添加六列。

將更多列添加到您的列

只需單擊一列並開始輸入內容即可。 您可以使用鍵盤上的Tab鍵切換到下一列。

在您的WordPress列中添加文本

在列中添加媒體和其他內容

除了文本內容之外,您還可以在WordPress列中添加圖像和嵌入視頻。

列塊允許您在每列內部添加塊。 只需將鼠標移到一列,您會注意到其中的“添加新塊”圖標。 您還可以通過鍵入/,然後輸入塊名稱來添加塊。

在WordPress列中添加新塊

您選擇的塊現在將出現在該列內。 現在,您可以繼續向其中添加內容。

圖像塊已添加到WordPress

這是新列在默認的“二十十九”主題中的顯示方式。 在此示例中,我們使用三列,最後一列包含圖像。

WordPress帖子中的3列-預覽

如果只想在圖像旁邊添加圖像和一些文本,則也可以使用“媒體和文本”塊而不是列。 專門製作此特定塊是為了在某些文本旁邊顯示諸如圖像和視頻之類的媒體。

在WordPress中添加媒體和文本塊

在舊的WordPress經典編輯器中添加多個列

如果您尚未將WordPress升級到古騰堡,而仍然使用經典編輯器,那麼您需要安裝一個單獨的插件來創建網格列佈局。

首先,安裝並激活“輕量級網格列”插件。 有關詳細說明,請按照我們的逐步指南進行操作,以了解如何在WordPress中安裝插件。

激活後,您可以創建新帖子或打開舊帖子進行編輯。 接下來,從視覺編輯器工具欄中單擊“添加列”按鈕。

添加列圖標輕型網格列插件

現在,您將看到一個彈出窗口以添加第一列。 您可以選擇在台式機,平板電腦和移動設備中以不同的方式覆蓋列的範圍。

例如,如果將桌面網格百分比設置為50%,則您的列將覆蓋一半的行。

網格寬度百分比-輕型網格列

有很多選項可以設置列寬,以5的間隔從5%到100%。您可以通過單擊下拉列表來選擇一個。

列寬選項-網格百分比

之後,您需要在“內容”框中添加列內容,然後單擊“確定”按鈕將其插入到您的帖子中。

將內容添加到您的列-輕型網格列插件

插件現在將使用您的內容生成所需的簡碼,並將其添加到帖子編輯器中。

簡碼和內容已添加到WordPress專欄

現在已經添加了第一列,您可以重複此過程以添加更多列。 對於行中的最後一列,請不要忘記選中“行中的最後一列”框。

WordPress中2列的簡碼和內容

之後,您可以保存您的帖子並預覽。 這是使用“二十十七歲”主題在我們測試站點上的外觀。

二十七個主題中的兩個WordPresss專欄

我們希望本文能幫助您學習如何在WordPress帖子和頁面中添加列。 您可能還想查看有關如何輕鬆對齊WordPress帖子中圖像的簡單指南。

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