如何使用 WordPress 封面塊

WordPress Cover Block 很有趣。 它允許您在背景中放置圖像、視頻或純色，並將內容塊添加到前景。 這意味著您可以將塊放置在其他塊上。 它比大多數塊有更多的選擇。 了解如何使用 Cover Block 可以極大地增強您網站的設計。

在本文中，我們將了解 Cover Block 的功能並查看其設置和選項。 我們還將看到有關如何使用它的一些最佳實踐以及常見問題解答。

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

要將封面塊添加到您的頁面和帖子，請選擇您的內容內或頁面左上角的塊圖標，輸入塊的名稱，然後選擇它。

您也可以輸入/cover並按 Enter 鍵或選擇塊。

然後，您的內容中將有一個封面塊，您可以在其中添加圖像或視頻等媒體，或使用顏色作為背景，並將文本置於前景中。 從媒體文件夾或顏色中選擇內容後，文本選項會出現在前景中。

我從我的媒體庫中添加了一張圖片，並在圖片上添加了一個標題。 標題是一個段落塊。 您可以將其更改為其他類型的塊、嵌入視頻等。

您還可以通過按 Enter 鍵添加多個塊。 像往常一樣從塊中選擇。

您還可以從一種預選的背景顏色中進行選擇。

該顏色可用作圖像的疊加層。

封面塊設置和選項

Cover Block 有兩個帶有設置和選項的區域。 第一個是封面工具欄。 第二個是右側欄中的 Cover Block 選項。

覆蓋塊工具欄

單擊 Cover Block 中的任意位置可打開其工具欄。

更改封面塊類型或樣式

第一個設置更改列數，讓您分組、更改圖像，以及從默認樣式或邊框中選擇樣式。 懸停顯示預覽。 我將鼠標懸停在圖像上。 圖像刪除您在疊加層中的內容塊。

拖動或移動

抓住拖動工具（6 個點）將塊拖動到您想要的任何位置。 移動工具允許單擊箭頭向上移動塊或內容中的文本。

結盟

對齊選項包括左、中、右、寬和全寬。 左右包裹塊和它下面的段落。

這是全寬圖像。 這可用於創建標題、劃分部分等。

更改內容位置

這將選擇內容位置。 它打開一個帶點的 3×3 網格。 選擇一個點會將內容移動到圖像中的那個位置。

切換全高

這會將圖像設置為其全高，而不是調整其大小。

應用雙色調濾鏡

從預先選擇的選項中選擇雙色調。 一種適用於陰影，另一種適用於高光。

在滑塊上選擇一種顏色進行調整。

在滑塊下選擇一種顏色以選擇預選的顏色。

代替

這將打開媒體選項，以便您可以上傳或從庫中選擇其他圖像。

選項

蓋板選項包括：

隱藏更多設置 - 隱藏右側邊欄。

複製- 複製封面塊，以便您可以將其粘貼到頁面或帖子中的任何位置。

複製- 創建封面塊的副本並將其放置在原件下方。

插入前- 在封面塊上方為另一個塊添加空間。

插入後- 在封面塊下方為另一個塊添加空間。

移動到- 讓您通過使用箭頭鍵向上或向下移動藍線來移動塊。 按回車鍵，你的方塊就會移動到藍線的位置。

添加到可重用塊- 將塊添加到可重用塊中，以便您可以在任何頁面或帖子中使用它。

組- 將塊添加到組中，以便您可以將它們作為一個單元進行調整。

刪除塊– 刪除塊。

覆蓋塊內容

選擇內容會打開另一組僅用於內容的工具。 默認是一個段落塊，包括工具欄和側邊欄設置的所有標準選項。 您可以對其進行轉換或添加任何塊。 這為您提供了許多內容選擇。

選擇封面

這將關閉內容工具欄並打開封面塊工具欄。

覆蓋塊調整大小

通過拖動圖像底部的圓圈來調整圖像大小。

封面塊設置

Cover Block 設置位於右側邊欄中。 單擊塊或齒輪以顯示側邊欄。 如果您選擇塊內容中的塊，則會顯示其側邊欄設置。

樣式

顯示帶或不帶邊框的塊。 您還可以設置默認值以顯示邊框。 它包括一個預覽，因此您可以在選擇它之前查看它的外觀。

間距

為所有側面或特定側面增加空間。 單獨選擇每一面或將它們鏈接在一起以一次調整它們。

媒體設置

選擇塊內顯示的圖像部分。 您可以選擇一個固定的背景（視差），如果背景對於該區域來說太小，則可以重複該背景，並通過移動一個圓圈或指定左側和頂部位置來指定焦點。 您也可以從這裡清除媒體。 只有焦點選擇器可用於視頻。

此示例顯示固定背景。 當文本滾動時，圖像保持原位，從而產生視差效果。

這是重複的背景。 它非常適合用小圖像創建有趣的圖案。

方面

通過在字段中輸入高度以像素為單位指定高度。 這與圖像底部的拖動工具相同。

覆蓋

Cover Block 有很多覆蓋選項。 選擇一種預製顏色並選擇其不透明度。 從純色或漸變中選擇。 您將實時看到變化。 如果您選擇顯示顏色而不是圖像，您可以在此處更改顏色。 此示例顯示純色。

您還可以選擇自定義顏色。 這將打開一個顏色選擇器，您可以在其中使用窗口中的顏色、使用滑塊選擇色階或輸入十六進制、RGB 或 HSL 代碼。

漸變選項可讓您選擇將顯示的兩種顏色。 在線性或徑向之間進行選擇。 您還可以設置顏色的不透明度。 我在這個例子中選擇了徑向。

先進的

高級包括兩個字段。 第一個是 HTML 錨點的選項。 這為 Cover Block 提供了一個特殊的網址。 第二個是添加額外 CSS 類的字段。 這允許您創建自定義 CSS 來設置塊的樣式。 您選擇的樣式也會出現在此字段中。

有效使用蓋板的提示和最佳實踐

對於圖像，請使用邊欄中的媒體設置來顯示要顯示的圖像部分。

使用帶有全角選項的大圖像來創建部分標題。

將前景更改為多列並添加圖像、文本和按鈕以創建號召性用語。

使用易於在背景圖像或顏色上閱讀的疊加和文本顏色。

如果要控制邊框顏色，請將塊轉換為組。

使用對齊選項將封面塊設置到您的內容中或將其分開。

設置內容定位設置以創建一些有趣的視覺效果並引導讀者的注意力。

使用固定背景創建視差效果。

使用帶有重複背景的小圖像來創建有趣的背景圖案。

關於蓋板的常見問題

什麼是蓋塊？

這是一個塊，可讓您將媒體或顏色添加到背景中，並將其他塊添加到前景中。

是什麼讓它與其他塊不同？

它可以包含其他塊。 您可以將其他塊添加到前台。 它會產生視差、圖案等。

可以轉換成其他方塊嗎？

是的。 它可以轉換為圖像塊。 它會刪除您添加到其內容區域的任何其他塊。

它可以用來做什麼？

您可以使用 Cover Block 創建帶有號召性用語的背景，使用它在部分上方創建標題，創建海報、英雄部分或任何您想要在背景中包含圖像或視頻的內容。

結論

這就是我們對 Cover Block 的看法。 此塊具有一些最有趣的功能，是創建標題、標題、CTA、視差背景等的絕佳選擇。 它易於使用，可以使您的網站比大多數塊更突出。 它創造有趣視覺效果的能力使其成為我最喜歡的 WordPress 塊之一。

我們希望聽到您的意見。 你使用蓋板嗎？ 請在評論中告訴我們您的體驗。

精選圖片來自fourSage/shutterstock.com