古騰堡編輯器教程:如何使用WordPress封面區塊

如何使用WordPress封面區塊

WordPress封面區塊很有趣。它允許您在背景中放置影象、視訊或純色,並將內容區塊新增到前景。這意味著您可以將區塊放置在其他塊上。它比大多數塊有更多的選擇。瞭解如何使用封面區塊可以極大地增強您網站的設計。

在本教程中,我們將瞭解封面區塊的功能並檢視其設定和選項。我們還將看到有關如何使用它的一些最佳實踐以及常見問題解答。

如何將封面區塊新增至文章或頁面

如何將封面區塊新增至文章或頁面

要將封面區塊新增到您的頁面和文章,請選擇您的內容中或頁面左上角的區塊圖示,輸入區塊的名稱,然後選擇它。

新增WordPress封面區塊快捷方式

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

封面區塊上傳媒體

然後,您的內容中將有一個封面區塊,您可以在其中新增影象或視訊等媒體,或使用顏色作為背景,並將文字置於前景中。從媒體資料夾或顏色中選擇內容後,文字選項會出現在前景中。

封面區塊編輯器示例

我從我的媒體庫中新增了一張圖片,並在圖片上新增了一個標題。標題是一個段落區塊。您可以將其更改為其他型別的區塊、嵌入視訊等。

封面區塊與其他區塊組合

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

無圖封面區塊

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

封面區塊背景顏色

該顏色可用作影象的疊加層。

封面區塊設定和選項

封面區塊設定和選項

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

封面區塊工具欄

封面區塊工具欄

單擊封面區塊中的任意位置可開啟其工具欄。

更改封面區塊型別或樣式

更改封面區塊型別或樣式

第一個設定更改欄目,讓您分組、更改影象,以及從預設樣式或邊框中選擇樣式。懸停顯示預覽。我將滑鼠懸停在影象上。影象刪除您在疊加層中的內容區塊。

拖動或移動

拖動或移動封面區塊

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

對齊方式

封面區塊對齊方式

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

寬幅封面區塊示例

這是全幅影象。這可用於建立標題、劃分部分等。

更改內容位置

更改封面區塊內容位置

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

切換全屏

全屏顯示封面區塊

這會將影象設定為其全屏,而不是調整其大小。

應用雙色調濾鏡

封面區塊應用雙色調濾鏡

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

封面區塊雙色調設定

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

封面區塊顏色陰影設定

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

代替

WordPress封面區塊代替

這將開啟媒體選項,以便您可以上傳或從庫中選擇其他影象。

更多選項

封面區塊更多選項

更多選項包括:

  • 隱藏更多設定 – 隱藏右側邊欄。
  • 複製– 複製封面區塊,以便您可以將其貼上到頁面或文章中的任何位置。
  • 建立副本– 建立封面區塊的副本並將其放置在原件下方。
  • 在區塊前插入– 在封面去塊上方為另一個區塊新增空間。
  • 在區塊後插入– 在封面區塊下方為另一個區塊新增空間。
  • 移動到– 讓您通過使用箭頭鍵向上或向下移動藍線來移動區塊。按回車鍵,你的方塊就會移動到藍線的位置。
  • 新增至可重用區塊– 將區塊新增到您的可重用區塊中,以便您可以在任何頁面或文章中使用它。
  • 組合– 將區塊新增到組中,以便您可以將它們作為一個單元進行調整。
  • 刪除區塊– 刪除區塊。

封面區塊內容

封面區塊內容

選擇內容會開啟另一組僅用於內容的工具。預設是一個段落區塊,包括工具欄和側邊欄設定的所有標準選項。您可以對其進行轉換或新增任何區塊。這為您提供了許多內容選擇。

選擇封面

封面區塊選擇封面

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

封面區塊調整大小

封面區塊調整大小

通過拖動影象底部的圓圈來調整影象大小。

封面區塊設定

封面區塊設定

封面區塊設定位於右側邊欄中。單擊區塊或齒輪以顯示側邊欄。如果您選擇塊內容中的區塊,則會顯示其側邊欄設定。

樣式設定

封面區塊樣式設定

顯示帶或不帶邊框的區塊。您還可以設定預設值以顯示邊框。它包括一個預覽,因此您可以在選擇它之前檢視它的外觀。

間距

封面區塊間距設定

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

媒體設定

封面區塊媒體設定

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

封面區塊樣式設定

此示例顯示固定背景。當文字滾動時,影象保持原位,從而產生視差效果。

封面區塊視差效果

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

解析度

封面區塊解析度設定

通過在欄位中輸入高度以畫素為單位指定高度。這與影象底部的拖動工具相同。

覆蓋

封面區塊覆蓋設定

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

封面區塊純色或漸變色覆蓋

您還可以選擇自定義顏色。這將開啟一個顏色選擇器,您可以在其中使用視窗中的顏色、使用滑塊選擇色階或輸入十六進位制、RGB或HSL程式碼。

封面區塊覆蓋顏色設定

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

高階

封面區塊高階設定

高階包括兩個欄位。第一個是HTML錨點的選項。這為封面區提供了一個特殊的網址。第二個是新增額外CSS類的欄位。這允許您建立自定義CSS來設定區塊的樣式。您選擇的樣式也會出現在此欄位中。

有效使用封面區塊的提示和最佳實踐

對於影象,請使用邊欄中的媒體設定來顯示要顯示的影象部分。

使用帶有全幅選項的大影象來建立部分標題。

將前景更改為多列並新增影象、文字和按鈕以建立號召性用語。

使用易於在背景影象或顏色上閱讀的疊加和文字顏色。

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

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

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

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

使用帶有重複背景的小影象來建立有趣的背景圖案。

關於封面區塊的常見問題

什麼是封面區塊?

這是一個區塊,可讓您將媒體或顏色新增到背景中,並將其他區塊新增到前景中。

封面區塊與其他區塊有何不同?

它可以包含其他區塊。您可以將其他區塊新增到前面。它會產生視差、圖案等。

可以轉換成其他區塊嗎?

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

它可以用來做什麼?

您可以使用封面區塊建立帶有號召性用語的背景,使用它在部分上方建立標題,建立海報、英雄部分或任何您想要在背景中包含影象或視訊的內容。

小結

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

評論留言