WordPress封面區塊很有趣。它允許您在背景中放置影象、視訊或純色,並將內容區塊新增到前景。這意味著您可以將區塊放置在其他塊上。它比大多數塊有更多的選擇。瞭解如何使用封面區塊可以極大地增強您網站的設計。
在本教程中,我們將瞭解封面區塊的功能並檢視其設定和選項。我們還將看到有關如何使用它的一些最佳實踐以及常見問題解答。
如何將封面區塊新增至文章或頁面
要將封面區塊新增到您的頁面和文章,請選擇您的內容中或頁面左上角的區塊圖示,輸入區塊的名稱,然後選擇它。
您也可以輸入/cover並按 Enter 鍵或選擇區塊。
然後,您的內容中將有一個封面區塊,您可以在其中新增影象或視訊等媒體,或使用顏色作為背景,並將文字置於前景中。從媒體資料夾或顏色中選擇內容後,文字選項會出現在前景中。
我從我的媒體庫中新增了一張圖片,並在圖片上新增了一個標題。標題是一個段落區塊。您可以將其更改為其他型別的區塊、嵌入視訊等。
您還可以通過按 Enter 鍵新增多個區塊。像往常一樣從區塊中選擇。
您還可以從一種預選的背景顏色中進行選擇。
該顏色可用作影象的疊加層。
封面區塊設定和選項
封面區塊有兩個帶有設定和選項的區域。第一個是封面區塊工具欄。第二個是右側欄中的封面區塊選項。
封面區塊工具欄
單擊封面區塊中的任意位置可開啟其工具欄。
更改封面區塊型別或樣式
第一個設定更改欄目,讓您分組、更改影象,以及從預設樣式或邊框中選擇樣式。懸停顯示預覽。我將滑鼠懸停在影象上。影象刪除您在疊加層中的內容區塊。
拖動或移動
抓住拖動工具(6 個點)將塊拖動到您想要的任何位置。移動工具允許單擊箭頭向上移動區塊或內容中的文字。
對齊方式
對齊選項包括左、中、右、寬幅和全幅。左右包裹區塊和它下面的段落。
這是全幅影象。這可用於建立標題、劃分部分等。
更改內容位置
這將選擇內容位置。它開啟一個帶點的 3×3 網格。選擇一個點會將內容移動到影象中的那個位置。
切換全屏
這會將影象設定為其全屏,而不是調整其大小。
應用雙色調濾鏡
從預先選擇的選項中選擇雙色調。一種適用於陰影,另一種適用於高光。
在滑塊上選擇一種顏色進行調整。
在滑塊下選擇一種顏色以選擇預選的顏色。
代替
這將開啟媒體選項,以便您可以上傳或從庫中選擇其他影象。
更多選項
更多選項包括:
- 隱藏更多設定 – 隱藏右側邊欄。
- 複製– 複製封面區塊,以便您可以將其貼上到頁面或文章中的任何位置。
- 建立副本– 建立封面區塊的副本並將其放置在原件下方。
- 在區塊前插入– 在封面去塊上方為另一個區塊新增空間。
- 在區塊後插入– 在封面區塊下方為另一個區塊新增空間。
- 移動到– 讓您通過使用箭頭鍵向上或向下移動藍線來移動區塊。按回車鍵,你的方塊就會移動到藍線的位置。
- 新增至可重用區塊– 將區塊新增到您的可重用區塊中,以便您可以在任何頁面或文章中使用它。
- 組合– 將區塊新增到組中,以便您可以將它們作為一個單元進行調整。
- 刪除區塊– 刪除區塊。
封面區塊內容
選擇內容會開啟另一組僅用於內容的工具。預設是一個段落區塊,包括工具欄和側邊欄設定的所有標準選項。您可以對其進行轉換或新增任何區塊。這為您提供了許多內容選擇。
選擇封面
這將關閉內容工具欄並開啟封面區塊工具欄。
封面區塊調整大小
通過拖動影象底部的圓圈來調整影象大小。
封面區塊設定
封面區塊設定位於右側邊欄中。單擊區塊或齒輪以顯示側邊欄。如果您選擇塊內容中的區塊,則會顯示其側邊欄設定。
樣式設定
顯示帶或不帶邊框的區塊。您還可以設定預設值以顯示邊框。它包括一個預覽,因此您可以在選擇它之前檢視它的外觀。
間距
為所有側面或特定側面增加空間。單獨選擇每一面或將它們連結在一起以一次調整它們。
媒體設定
選擇區塊內顯示的影象部分。您可以選擇一個固定的背景(視差),如果背景對於該區域來說太小,則可以重複該背景,並通過移動一個圓圈或指定左側和頂部位置來指定焦點。您也可以從這裡清除媒體。只有焦點選擇器可用於視訊。
此示例顯示固定背景。當文字滾動時,影象保持原位,從而產生視差效果。
這是重複的背景。它非常適合用小影象建立有趣的圖案。
解析度
通過在欄位中輸入高度以畫素為單位指定高度。這與影象底部的拖動工具相同。
覆蓋
封面區塊有很多覆蓋選項。選擇一種預製顏色並選擇其不透明度。從純色或漸變中選擇。您將實時看到變化。如果您選擇顯示顏色而不是影象,您可以在此處更改顏色。此示例顯示純色。
您還可以選擇自定義顏色。這將開啟一個顏色選擇器,您可以在其中使用視窗中的顏色、使用滑塊選擇色階或輸入十六進位制、RGB或HSL程式碼。
漸變選項可讓您選擇將顯示的兩種顏色。線上性或徑向之間進行選擇。您還可以設定顏色的不透明度。我在這個例子中選擇了徑向。
高階
高階包括兩個欄位。第一個是HTML錨點的選項。這為封面區提供了一個特殊的網址。第二個是新增額外CSS類的欄位。這允許您建立自定義CSS來設定區塊的樣式。您選擇的樣式也會出現在此欄位中。
有效使用封面區塊的提示和最佳實踐
對於影象,請使用邊欄中的媒體設定來顯示要顯示的影象部分。
使用帶有全幅選項的大影象來建立部分標題。
將前景更改為多列並新增影象、文字和按鈕以建立號召性用語。
使用易於在背景影象或顏色上閱讀的疊加和文字顏色。
如果要控制邊框顏色,請將區塊轉換為組。
使用對齊選項將封面塊設定到您的內容中或將其分開。
設定內容定位設定以建立一些有趣的視覺效果並引導讀者的注意力。
使用固定背景建立視差效果。
使用帶有重複背景的小影象來建立有趣的背景圖案。
關於封面區塊的常見問題
什麼是封面區塊?
這是一個區塊,可讓您將媒體或顏色新增到背景中,並將其他區塊新增到前景中。
封面區塊與其他區塊有何不同?
它可以包含其他區塊。您可以將其他區塊新增到前面。它會產生視差、圖案等。
可以轉換成其他區塊嗎?
是的。它可以轉換為圖片區塊。它會刪除您新增到其內容區域的任何其他區塊。
它可以用來做什麼?
您可以使用封面區塊建立帶有號召性用語的背景,使用它在部分上方建立標題,建立海報、英雄部分或任何您想要在背景中包含影象或視訊的內容。
小結
這就是我們對封面區塊的看法。此塊具有一些最有趣的功能,是建立標題、標題、CTA、視差背景等的絕佳選擇。它易於使用,可以使您的網站比大多數區塊更突出。它創造有趣視覺效果的能力使其成為我最喜歡的WordPress區塊之一。
評論留言