如何在 WordPress 中添加多列(2 種方法)
已發表: 2021-10-15將內容排列成列的做法可以追溯到印刷機的早期。 這種格式可以是一種組織文本、圖像等的通用方式。 但是,在 WordPress 中添加多個列並正確放置它們可能有點棘手。
幸運的是,不必如此。 您現在可以使用塊編輯器通過幾個簡短的步驟輕鬆地將多個列添加到您的 WordPress 帖子和頁面。
您還可以使用經典編輯器和頁面構建器插件來實現此佈局。
在本教程中,我們將研究如何在 WordPress 中添加多個列。
讓我們開始吧!
為什麼使用多列佈局
從選擇正確的主題到添加自定義字體,個性化網站設計對於建立品牌至關重要。 您的帖子和頁面佈局也是這個難題的一部分。 嘗試不同的格式選項可能是為您的內容添加結構多樣性的有趣方式。
由於沒有最適合可讀性的單一格式,因此您可以發揮創意並找到適合您的外觀。 您可以將它從一個頁面切換到另一個頁面以適應各種內容,並創建一個由具有不同佈局的頁面組成的 WordPress 站點,例如在此演示中:

列是一種特別通用的格式。 如果您希望經濟地使用您的空間,它們是一種分割文本的簡單方法。
您還可以使用列將不同的小部件以一種有凝聚力的方式配對在一起,如 BuddyBoss 主題所示:

或者,您可能只是對使用可以根據您的需要刪除或重新調整的靈活格式感興趣。 無論您的推理如何,專欄都可以為您的網站增添一些多樣性和組織性。
如何在 WordPress 中添加多列(2 種簡單方法)
在 WordPress 的早期,用戶需要具備 HTML 的應用知識,並且能夠自信地編輯他們的代碼以將列添加到他們的帖子中。 那時,內容編寫和編輯並不是最人性化的體驗。
幸運的是,現在有兩種簡單的方法可以在 WordPress 中添加列——不需要 HTML。
塊編輯器帶有直觀的內置列功能,喜歡經典編輯器的人會很高興聽到您仍然可以在插件的幫助下避免手動編碼列。
現在,讓我們看看這兩種方法。
方法一:使用塊編輯器的原生功能
我們將從使用塊編輯器 (Gutenberg) 添加多個列開始。 新的默認 WordPress 內容創建界面提供了一整套有用的功能,所有功能都專注於易於移動的內容塊。
這些功能之一是恰當命名的 Columns 塊,它可以幫助您創建任意數量的列。

首先,在塊編輯器的搜索框中輸入“列” ,您可以通過單擊 + 按鈕打開該搜索框。 或者,您可以簡單地單擊屏幕並開始輸入“/columns”以顯示相同的選項。
這將調出一個窗口,您可以在其中選擇列佈局:

從默認的兩列開始並稍後調整設置也是一種選擇。
一旦您指定了所需的部分以及如何劃分它們,您可以將塊拖放到您想要的任何位置。
接下來,您可以在 Columns 塊中嵌套其他塊。 它們都可以是文本塊,或者您可以對其進行調整。 嘗試通過將文本列放置在圖像或日曆列旁邊以使其突出來增強文本列:

不要害怕通過混合和匹配元素來利用編輯器的靈活性。
之後,您可以返回 Columns 塊設置並調整寬度比以滿足您的需要。 每個單獨的列都可以根據您要拍攝的外觀進行調整。
由於塊編輯器的可視化界面,您在後端的工作將直接轉化為前端。 作為參考,這是我們的示例發布後的樣子:

掌握了基礎知識後,還有更多內容可以通過專欄進行探索。
如果您正在尋找塊編輯器的更多功能,您可能需要考慮下載功能增強塊插件並嘗試新的內容組合。
方法二:使用 SiteOrigin 的 Classic Editor 和 Page Builder
如果您更像是一個傳統主義者並且仍然使用經典編輯器,您還可以在您的帖子和頁面中添加多個列而無需代碼。 您只需要一個插件。 有很多選項可以完成工作,所以你需要做的第一件事就是選擇一個。

由於我是 SiteOrigin 插件的 Page Builder 的忠實粉絲,我將使用這個插件在經典編輯器中創建多列佈局:

Page Builder 是一個可靠的免費選項,它利用直觀的拖放界面,並擁有超過 100 萬個活動安裝。
在您的站點上安裝並激活插件後,通過單擊左側邊欄中的設置 > 頁面構建器菜單轉到其設置頁面。
在這裡,選擇General選項卡並選中Use Classic Editor for New Posts選項:

請注意,您還需要在您的站點上安裝並激活經典編輯器插件才能使用此選項。
現在,您可以通過打開現有帖子或創建新帖子並導航到右上角的Page Builder選項卡來添加列:

在這裡,單擊Add Row按鈕,該按鈕將創建一個新行,您可以在其中添加列:

這將打開一個界面,您可以在其中調整一些初始設置,包括列的數量、比率和方向:

指定列數並確定它們的比率。 然後,單擊插入將它們放入您的帖子中。
與塊編輯器類似,SiteOrigin 插件的 Page Builder 使您能夠將不同的小部件插入到列結構中。
選擇您要添加小部件的列,然後單擊添加小部件按鈕,這將顯示以下面板:

選擇您要合併的元素並用您的內容填充它。
您的帖子的後端現在應該如下所示:

完成您的更改。
這將轉化為前端的結果,如下所示:

嘗試使用不同的小部件配對來實現您網站的獨特外觀。 這是一個簡單的過程,您可以隨時逆轉,所以不要害怕打破常規並發揮創意。
結論
向您的 WordPress 網站添加欄目可以幫助您保持佈局的新鮮感和吸引力。 雖然這樣做的過程有時會有點挑戰性,但您可以使用一些簡單的方法來簡化它。
在本教程中,我們介紹了在 WordPress 中添加多列的兩種分步方法:
- 使用塊編輯器的內置 Columns 塊
- 安裝諸如 Page Builder 之類的插件以將其與經典編輯器一起使用
您最喜歡在 WordPress 中添加列的方式是什麼? 在下面的評論部分讓我們知道!