如何使用 WordPress 預格式化塊

已發表: 2021-08-13

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

在本文中,我們將介紹 WordPress 預格式化塊。 我們將了解如何將其添加到您的帖子和頁面,並查看其選項和設置。 我們還將看到一些使用它的最佳實踐,以及最常見的問題。

如何將預先格式化的塊添加到您的帖子或頁面

如何將預先格式化的塊添加到您的帖子或頁面

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

如何將預先格式化的塊添加到您的帖子或頁面

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

如何將預先格式化的塊添加到您的帖子或頁面

預格式化塊現在已添加到您的帖子或頁面。 Preformatted Block 類似於 Paragraph Block、Verse Block 和 Code Block。 這是它們之間的一種交叉,但它也簡化了它們。 它顯示您鍵入的文本,但不會更改格式,而是保留它。 這包括所有空格和換行符。 它以等寬字體顯示。

預格式化塊設置和選項

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

預格式化塊工具欄設置

預格式化塊工具欄設置

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

更改塊類型或樣式

更改塊類型或樣式

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

拖動和移動

拖動和移動

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

粗體、斜體和鏈接

粗體、斜體和鏈接

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

粗體、斜體和鏈接

帶有鏈接的文本帶有下劃線以表明它是可點擊的。 單擊編輯器中的文本會打開鏈接編輯器,您可以在其中更改鏈接。

更多選擇

更多選擇

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

內聯代碼- 這使您的文本看起來像代碼,並防止塊中的任何代碼執行。 Preformatted這個詞是上圖中的內聯代碼。

內嵌圖像- 這使您可以將媒體庫中的圖像放置在鼠標光標所在的位置。

鍵盤輸入– 使用鍵盤 HTML 格式設置文本樣式。 文字文字在上圖中使用鍵盤輸入樣式進行樣式設置。

刪除線- 這會在文本中放置一行。 上圖中的等寬字有刪除線。

下標- 這會將文本設置為比其他文本更低更小。 上圖中的這個詞是一個下標。

上標- 這將比其他設置更高和更小。 上圖中的字是上標。

文本顏色- 這讓您可以更改文本的顏色,就像我在上圖中對單詞Divisions所做的那樣。

選項

選項

預格式化塊選項包括:

隱藏更多設置- 這將隱藏或顯示右側邊欄。

複製- 這會復制預格式化塊,以便您可以將其粘貼到內容中的其他位置。

複製- 這會將預格式化塊的副本放在原始塊下。

在之前插入- 這會在塊上方為另一個塊添加一個空格。

插入之後- 這會在塊下方為另一個塊添加一個空格。

移動到- 這會放置一條藍線,您可以使用箭頭向上或向下移動,並將您的方塊移動到您選擇的位置。

編輯為 HTML - 這將打開代碼編輯器,以便您可以將內容編輯為 HTML。

添加到可重用塊- 這會將您的預格式化塊添加到您的可重用塊中。

- 這會將塊添加到組中,以便您可以將它們作為單個塊進行調整。

刪除塊- 這將刪除塊。

預格式化塊設置

預格式化塊設置

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

排版

排版

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

顏色

顏色

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

顏色

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

先進的

先進的

高級設置包括一個 HTML 錨點選項,因此您可以直接鏈接到預格式化塊。 它還包括一個用於添加 CSS 類的字段,以便您可以使用自定義 CSS 來設置塊的樣式。

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

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

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

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

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

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

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

顯示帶有換行符和空格的文本,同時能夠更改字體大小、顏色和背景,並添加鏈接。

它與 Verse Block 有何不同?

Verse Block 有點複雜。 它包括對齊選項並且不以等寬顯示文本。 它還包括一些間距功能並為鏈接添加顏色選項。

它與代碼塊有何不同?

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

它與段落塊有什麼不同?

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

它可以用來做什麼?

間距和分行顯示的文本與您的其餘內容不同。 字體和背景顏色可以為服務、報價(儘管 Quote Block 和 Pullquote Block 可能是更好的選擇)、推薦、號召性用語等創建卡片。

結論

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

我們希望聽到您的意見。 你使用預格式化塊嗎? 請在評論中告訴我們您的體驗。

精選圖片來自 MicroOne/shutterstock.com