如何使用 WordPress 行塊

已發表: 2023-02-11

WordPress 行塊是一個重要的設計塊,可讓您將內容組織成水平行。 這是一個多功能塊,可以在 WordPress 編輯器的任何地方使用,以組織模板、模板部分以及帖子和頁面中的內容。 在這篇文章中,我們將解釋它是什麼、如何使用它,並回答您關於它的緊迫問題。 讓我們開始吧。

目錄
  • 1什麼是 WordPress 行塊
  • 2如何將行塊添加到您的帖子或頁面
  • 3行塊設置和選項
    • 3.1工具欄設置
    • 3.2附加塊設置
  • 有效使用行塊的4 個技巧和最佳實踐
  • 關於行塊的5 個常見問題
    • 5.1行塊和列塊有什麼區別?
    • 5.2我可以在模板中使用行塊嗎?
    • 5.3我可以連續使用多少塊?
  • 6結論

什麼是 WordPress 行塊

WordPress 行塊

行塊的工作方式與堆棧塊非常相似。 但是,它不是垂直顯示項目,而是在父容器的可用空間內水平顯示塊。 默認情況下,該塊將均勻分佈其中包含的塊 - 並使用 flex CSS 屬性在較小的屏幕上以網格格式顯示內容。

行塊彈性

如果您使用的是頁面構建器,例如 Divi,則行塊不是必需的。 您可以使用 Divi Builder 添加具有更高級設計選項的行和其他元素。

如何將行塊添加到您的帖子或頁面

對於這篇文章,我們將使用二十二十三主題添加它,但您可以使用任何塊主題或完整的站點編輯主題來跟進。 首先登錄您的 WordPress 網站。 然後,添加一個新頁面。

有幾種方法可以將塊從塊目錄添加到您的站點。 第一種方法是使用塊插入器。 單擊頁面左上角的塊插入器圖標

單擊塊插入器

接下來,在搜索欄中鍵入行。 從搜索結果中找到它,然後單擊以添加它,或將其拖到頁面編輯器中。

插入行塊

添加塊的另一種方法是單擊頁面編輯器上的+ 圖標,或者直接開始鍵入/row以顯示塊結果。 單擊行塊以將其插入到頁面中。

在頁面編輯器中插入行塊

在頁面中添加一行後,您可以根據需要在行中插入任意數量的塊。 塊的顯示取決於您是否選擇堆疊它們。 我們將在下一節中對此進行更多介紹。 默認情況下,當您添加塊時,它們會在行中從左到右出現。

將塊添加到行

行塊設置和選項

可以使用工具欄設置和其他設置自定義 WordPress 行塊。 以下是可用設置的細分。

工具欄設置

工具欄設置組由下圖中概述的幾個設置組成:

行塊工具欄設置

  1. 轉化為
  2. 移動
  3. 理由
  4. 垂直對齊
  5. 寬度
  6. 更多的選擇

轉換為

列表中的第一個是轉換為。 您在這裡有幾個選擇。

轉換為控件

您可以將行轉換為引號、展開它、將其轉換為列或將其轉換為封面。 當您打開一行時,其中包含的每個塊將彼此堆疊,而不是從左到右顯示。 古騰堡將為您提供展開後行的外觀預覽。

展開選項

轉換為封面時,您可以添加背景圖像、背景疊加,並在其上設置內邊距。 選擇此選項會將您的行轉換為封面塊,但保留行本身內的塊。

封面選項

拖動和移動

拖動選項使您能夠將塊重新定位到頁面上的任何位置。 這對於包含多個內容部分的複雜頁面設計非常方便。 同樣,移動將允許您在頁面上向上或向下移動行而無需拖動。

理由

對齊設置允許您將行中的項目向左、居中、向右對齊,或者使行中的項目從左到右均勻分佈。

理由控制

結盟

使用對齊工具,您可以將行中包含的塊對齊到頂部、中間或底部。

行對齊

寬度控制

您可以將塊的寬度指定為最大 650 像素寬、1200 像素寬或全寬。 全寬行跨越頁面的整個寬度,這對於轉換為封面的行或號召性用語部分很有用。

寬度控制

更多的選擇

在“更多選項”下,您將能夠執行複制、複製、插入、移動、鎖定、分組、取消分組、刪除等操作,或從該行創建可重複使用的塊。

更多的選擇

額外的塊設置

您會在其他設置下找到多個選項。 要找到塊的其他設置,請單擊位於行塊側欄設置中的塊選項卡

訪問行附加設置

首先,您可以水平或垂直堆疊排列行中的塊。

行選項

接下來,您可以設置對齊和方向選項,以及設置塊以換行到多行。 對齊選項與工具欄設置中的相同。 您可以將塊設置為左對齊、中間對齊、右對齊或均勻對齊。 方向功能類似於排列選項,您可以選擇水平或垂直方向。

行對齊

在顏色選項下,您可以更改行塊中文本、背景和鏈接的顏色。 根據您使用的主題,可以選擇漸變背景色和純色。

顏色選項

可以為行中包含的任何文本設置排版選項。 您可以設置字體系列、字體大小、字體粗細(外觀)、行高、字母間距、文本裝飾和字母大小寫。

排版設置

尺寸設置控制填充以及塊間距。 塊間距控制塊之間的空間量。

行維度

最後一個設置控制邊框,以及行的邊框半徑。 單位包括像素、百分比、em、rem、vh 和 vw。

行邊框

有效使用行塊的技巧和最佳實踐

行塊是一個多功能塊,可讓您做很多很酷的事情,對您的塊應用漂亮的效果,並使您的內容井井有條。 為了有效地使用該塊,您應該考慮做一些事情。 使用它是向塊組添加不同效果的好方法。 例如,在為您的網站創建號召性用語部分時,您可以使用號召性用語塊,但其用途有限。 相反,請考慮使用一行,以便您可以添加任何類型的塊。

此外,使用行允許您為一組塊設置寬度、垂直對齊和背景選項。 當您試圖強調網站的某個部分(例如一組帖子)時,這會派上用場。

使用行時應考慮的另一個技巧是使用列表視圖。 列表視圖派上用場,尤其是當您在單個頁面上有很多塊時。 您可以輕鬆確定行的開始和結束位置,將塊拖動到行內的其他位置以進行排列,並準確地將新塊添加到您想要的位置。

列表顯示

關於行塊的常見問題

行塊是一個具有大量用途和特性的複雜塊,因此您一定會有一些疑問。 希望這些會有所幫助。

行塊和列塊有什麼區別?

行和列彼此非常相似。 行與列的作用相同,因為它允許您水平添加塊。 但是,有一個關鍵區別。 列塊要求您為每一列指定一個設置寬度,而行則不需要。 您可以輕鬆地在其中拖動塊以調整列寬的大小,而列則需要您輸入一個值才能調整它們的大小。

我可以在模板中使用行塊嗎?

絕對地! 如前所述,行塊適用於任何場景。 無論是在帖子、頁面、模板部分還是模板中,行塊對所有類型的內容都很有用。 使用它們是在模板以及帖子和頁面中組織和構建內容的好方法。

我可以連續使用多少塊?

它最酷的功能之一是能夠處理其中的無限塊。 與列塊不同,沒有可以使用的預定義數量的空格。 例如,如果您要開始向一行添加圖像塊,則無論您添加多少,您的圖像都將繼續從左到右顯示。 每個圖像都將縮放以適合分配的空間。

結論

行塊是為您的網站內容提供結構的關鍵設計元素。 它可以在模板、帖子和頁面中使用,並且可以在其中包含無限塊。 它在創建模板部分很有用,例如顯示多個塊的標題。 例如,標題行可能包含站點徽標、頁面列表、社交圖標以及號召性用語按鈕。 如果您正在使用塊創建網站,則此塊將是必不可少的。

您如何將行塊合併到您的 WordPress 網站中? 通過在下面的評論部分發出聲音讓我們知道。