古騰堡編輯器教程:如何使用WordPress預格式區塊

How to Use the WordPress Preformatted Block-1

預格式區塊顯示您鍵入的文字。這意味著您可以在文字中包含空格和換行符。瞭解如何使用預格式區塊可為您提供多種優勢,例如將文字的各個部分分開並建立突出的元素。幸運的是,此區塊包含多個樣式選項,並且易於使用。

在本教程中,我們將介紹WordPress預格式區塊。我們將瞭解如何將其新增到文章和頁面,並檢視其選項和設定。我們還將看到一些使用它的最佳實踐,以及最常見的問題。

如何將預先格式區塊新增到文章或頁面

How to Use the WordPress Preformatted Block-1

通過單擊區塊插入器工具將預格式化區塊新增到您的內容中。您會在左上角和內容區域中找到它。搜尋預格式並單擊Enter

How to Use the WordPress Preformatted Block-1

您還可以通過鍵入/preformatted並在您希望它出現的內容區域中按 Enter來新增區塊。在您鍵入時,WordPress會根據您輸入的字母提供建議,因此您只需在看到該區塊時單擊它即可。

How to Use the WordPress Preformatted Block-1

預格式區塊現在已新增到文章或頁面。預格式區塊類似於段落區塊詩篇區塊和程式碼區塊。這是它們之間的一種交叉,但它也簡化了它們。它顯示您鍵入的文字,但不會更改格式,而是保留它。這包括所有空格和換行符。它以等寬字型顯示。

預格式區塊設定和選項

與大多數WordPress區塊一樣,該區塊包含一個設定工具欄和側邊欄中的選項。這是兩者的近距離觀察。

預格式區塊工具欄設定

How to Use the WordPress Preformatted Block-1

工具欄位於區塊上方,包含大多數標準工具。

更改區塊型別或樣式

How to Use the WordPress Preformatted Block-1

此區塊可以轉換為其他幾個區塊,包括段落區塊、組區塊、欄目區塊和程式碼區塊。突出顯示選項會顯示您的內容的外觀預覽。

拖動和移動

How to Use the WordPress Preformatted Block-1

拖動工具顯示為6個點。抓住這個區域,您可以將區塊拖放到內容中的任何位置。每次單擊箭頭時,向上和向下移動箭頭都會在內容中向上或向下移動一個區塊。

粗體、斜體和連結

How to Use the WordPress Preformatted Block-1

粗體、斜體和連結設定控制單擊按鈕時突出顯示的文字。您可以單獨或一起使用它們。您可以通過在連結彈出視窗底部啟用連結來在新選項卡中開啟連結。

How to Use the WordPress Preformatted Block-1

帶有連結的文字帶有下劃線以表明它是可點選的。單擊編輯器中的文字會開啟連結編輯器,您可以在其中更改連結。

下拉選擇

How to Use the WordPress Preformatted Block-1

“更多”下拉按鈕包括多個格式選項,這些選項適用於您單擊該選項時突出顯示的文字。選項包括:

  • 內聯程式碼– 這使您的文字看起來像程式碼,並防止區塊中的任何程式碼執行。預格式這個詞是上圖中的內聯程式碼。
  • 內嵌影象– 這使您可以將媒體庫中的影象放置在滑鼠游標所在的位置。
  • 鍵盤輸入– 使用鍵盤HTML格式設定文字樣式。文字文字在上圖中使用鍵盤輸入樣式進行樣式設定。
  • 刪除線– 這會在文字中放置一行。上圖中的等寬字有刪除線。
  • 下標– 這會將文字設定為比其他文字更低更小。上圖中的這個詞是一個下標。
  • 上標– 這將比其他設定更高和更小。上圖中的字是上標。
  • 文字顏色– 這讓您可以更改文字的顏色,就像我在上圖中對單詞Divisions所做的那樣。

更多選項

How to Use the WordPress Preformatted Block-1

預格式區塊選項包括:

  • 隱藏更多設定– 這將隱藏或顯示右側邊欄。
  • 複製– 這會複製預格式區塊,以便您可以將其貼上到內容中的其他位置。
  • 建立副本– 這會將預格式區塊的副本放在原始區塊下。
  • 在當前區塊前插入– 這會在區塊上方為另一個區塊新增一個空格。
  • 在當前區塊後插入– 這會在區塊下方為另一個區塊新增一個空格。
  • 移動至– 這會放置一條藍線,您可以使用箭頭向上或向下移動,並將您的區塊移動到您選擇的位置。
  • 編輯作為HTML編輯 – 這將開啟程式碼編輯器,以便您可以將內容編輯為HTML。
  • 新增至可重用區塊– 這會將您的預格式化區塊新增到您的可重用區塊中。
  • 組合– 這會將區塊新增到組中,以便您可以將它們作為單個區塊進行調整。
  • 移除區塊– 這將刪除區塊。

預格式區塊設定

How to Use the WordPress Preformatted Block-1

預格式區塊設定位於右側邊欄中。如果未顯示,請單擊右上角的齒輪。單擊區塊內的任意位置以檢視其側邊欄選項。

排版

How to Use the WordPress Preformatted Block-1

排版可讓您選擇整個區塊的字型大小。從下拉框中選擇尺寸或輸入自定義尺寸。單擊重置可恢復為預設設定。

顏色

How to Use the WordPress Preformatted Block-1

顏色選項可讓您設定文字和背景顏色的樣式。背景可以是純色或漸變色。您可以從多種預選顏色中進行選擇或選擇自定義顏色。如果顏色組合可能難以閱讀,您會在右下角看到一條訊息。在本例中,我將背景設定為橙色,將文字設定為白色。這表明它可能難以閱讀。

How to Use the WordPress Preformatted Block-1

漸變背景可以設定為線性或徑向。使用顏色選擇器選擇兩種顏色或輸入顏色為 RGB 或 HSL 程式碼。顏色可以包括不透明度。對於線性,您可以設定角度,就像我在上面的示例中所做的那樣。將它們靠近在一起以在它們之間建立一條清晰的線,就像我所做的那樣,或者進一步分開以控制它們的混合方式。

高階

How to Use the WordPress Preformatted Block-1

高階設定包括一個 HTML錨點選項,因此您可以直接連結到預格式區塊。它還包括一個用於新增CSS 類的欄位,以便您可以使用自定義CSS來設定區塊的樣式。

有效使用預格式區塊的技巧和最佳實踐

任何時候您想在您的內容中新增空格或分行時,都可以使用此區塊。段落區塊不保留該格式。

為文字和背景使用顏色以將其與其他內容區分開來。這也防止它看起來與程式碼區塊相同,這很重要,因為兩者都使用等寬型別。

用它來強調你的文字。由於它可以保留空格和行分割,因此可以用來將文字的一部分與其餘部分分開。

使用間距和分割以及字型和背景選項來建立獨特的標題來分隔您的內容。

關於預格式區塊的常見問題

預格式區塊的目的是什麼?

顯示帶有換行符和空格的文字,同時能夠更改字型大小、顏色和背景,並新增連結。

它與詩篇區塊有何不同?

詩篇區塊有點複雜。它包括對齊選項並且不以等寬顯示文字。它還包括一些間距功能併為連結新增顏色選項。

它與程式碼區塊有何不同?

它包括背景的樣式選項。雖然程式碼區塊在“更多選項”中有一個字型顏色選項,在側邊欄中有一個字型顏色選項,但它在側邊欄選項中不包括字型和顏色

它與段落區塊有什麼不同?

段落區塊不會保留您的換行符。在預格式化塊中,您可以通過單擊Enter向文字新增新行。對於段落區塊,這會將您帶到一個欄位以新增新區塊。段落區塊還包括更多文字設定。

它可以用來做什麼?

間距和分行顯示的文字與您的其餘內容不同。字型和背景顏色可以為服務、引用(儘管引用區塊和引文區塊可能是更好的選擇)、推薦、號召性用語等建立卡片。

小結

這就是我們對WordPress預格式區塊的看法。該區塊通過保留間距和線劃分為您提供了一些有趣的設計功能。與程式碼區塊不同,您仍然可以使用背景顏色工具。這個區塊是一個很好的選擇,可以幫助你的文字脫穎而出,它甚至可以用來建立設計元素來展示你的服務並引起人們對某些東西的注意。

評論留言