建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的木壘哈薩克網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
wordpress封面區(qū)塊很有趣。它允許您在背景中放置圖像、視頻或純色，并將內(nèi)容區(qū)塊添加到前景。這意味著您可以將區(qū)塊放置在其他塊上。它比大多數(shù)塊有更多的選擇。了解如何使用封面區(qū)塊可以極大地增強(qiáng)您網(wǎng)站的設(shè)計(jì)。
在本教程中，我們將了解封面區(qū)塊的功能并查看其設(shè)置和選項(xiàng)。我們還將看到有關(guān)如何使用它的一些最佳實(shí)踐以及常見問(wèn)題解答。
如何將封面區(qū)塊添加至文章或頁(yè)面
要將封面區(qū)塊添加到您的頁(yè)面和文章，請(qǐng)選擇您的內(nèi)容中或頁(yè)面左上角的區(qū)塊圖標(biāo)，輸入?yún)^(qū)塊的名稱，然后選擇它。
您也可以輸入/cover并按 Enter 鍵或選擇區(qū)塊。
然后，您的內(nèi)容中將有一個(gè)封面區(qū)塊，您可以在其中添加圖像或視頻等媒體，或使用顏色作為背景，并將文本置于前景中。從媒體文件夾或顏色中選擇內(nèi)容后，文本選項(xiàng)會(huì)出現(xiàn)在前景中。
我從我的媒體庫(kù)中添加了一張圖片，并在圖片上添加了一個(gè)標(biāo)題。標(biāo)題是一個(gè)段落區(qū)塊。您可以將其更改為其他類型的區(qū)塊、嵌入視頻等。
您還可以通過(guò)按 Enter 鍵添加多個(gè)區(qū)塊。像往常一樣從區(qū)塊中選擇。
您還可以從一種預(yù)選的背景顏色中進(jìn)行選擇。
該顏色可用作圖像的疊加層。
封面區(qū)塊設(shè)置和選項(xiàng)
封面區(qū)塊有兩個(gè)帶有設(shè)置和選項(xiàng)的區(qū)域。第一個(gè)是封面區(qū)塊工具欄。第二個(gè)是右側(cè)欄中的封面區(qū)塊選項(xiàng)。
封面區(qū)塊工具欄
單擊封面區(qū)塊中的任意位置可打開其工具欄。
更改封面區(qū)塊類型或樣式
第一個(gè)設(shè)置更改欄目，讓您分組、更改圖像，以及從默認(rèn)樣式或邊框中選擇樣式。懸停顯示預(yù)覽。我將鼠標(biāo)懸停在圖像上。圖像刪除您在疊加層中的內(nèi)容區(qū)塊。
拖動(dòng)或移動(dòng)
抓住拖動(dòng)工具（6 個(gè)點(diǎn)）將塊拖動(dòng)到您想要的任何位置。移動(dòng)工具允許單擊箭頭向上移動(dòng)區(qū)塊或內(nèi)容中的文本。
對(duì)齊方式
對(duì)齊選項(xiàng)包括左、中、右、寬幅和全幅。左右包裹區(qū)塊和它下面的段落。
這是全幅圖像。這可用于創(chuàng)建標(biāo)題、劃分部分等。
更改內(nèi)容位置
這將選擇內(nèi)容位置。它打開一個(gè)帶點(diǎn)的 3×3 網(wǎng)格。選擇一個(gè)點(diǎn)會(huì)將內(nèi)容移動(dòng)到圖像中的那個(gè)位置。
切換全屏
這會(huì)將圖像設(shè)置為其全屏，而不是調(diào)整其大小。
應(yīng)用雙色調(diào)濾鏡
從預(yù)先選擇的選項(xiàng)中選擇雙色調(diào)。一種適用于陰影，另一種適用于高光。
在滑塊上選擇一種顏色進(jìn)行調(diào)整。
在滑塊下選擇一種顏色以選擇預(yù)選的顏色。
代替
這將打開媒體選項(xiàng)，以便您可以上傳或從庫(kù)中選擇其他圖像。
更多選項(xiàng)
更多選項(xiàng)包括：
- 隱藏更多設(shè)置 – 隱藏右側(cè)邊欄。
- 復(fù)制– 復(fù)制封面區(qū)塊，以便您可以將其粘貼到頁(yè)面或文章中的任何位置。
- 創(chuàng)建副本– 創(chuàng)建封面區(qū)塊的副本并將其放置在原件下方。
- 在區(qū)塊前插入– 在封面去塊上方為另一個(gè)區(qū)塊添加空間。
- 在區(qū)塊后插入– 在封面區(qū)塊下方為另一個(gè)區(qū)塊添加空間。
- 移動(dòng)到– 讓您通過(guò)使用箭頭鍵向上或向下移動(dòng)藍(lán)線來(lái)移動(dòng)區(qū)塊。按回車鍵，你的方塊就會(huì)移動(dòng)到藍(lán)線的位置。
- 添加至可重用區(qū)塊– 將區(qū)塊添加到您的可重用區(qū)塊中，以便您可以在任何頁(yè)面或文章中使用它。
- 組合– 將區(qū)塊添加到組中，以便您可以將它們作為一個(gè)單元進(jìn)行調(diào)整。
- 刪除區(qū)塊– 刪除區(qū)塊。
封面區(qū)塊內(nèi)容
選擇內(nèi)容會(huì)打開另一組僅用于內(nèi)容的工具。默認(rèn)是一個(gè)段落區(qū)塊，包括工具欄和側(cè)邊欄設(shè)置的所有標(biāo)準(zhǔn)選項(xiàng)。您可以對(duì)其進(jìn)行轉(zhuǎn)換或添加任何區(qū)塊。這為您提供了許多內(nèi)容選擇。
選擇封面
這將關(guān)閉內(nèi)容工具欄并打開封面區(qū)塊工具欄。
封面區(qū)塊調(diào)整大小
通過(guò)拖動(dòng)圖像底部的圓圈來(lái)調(diào)整圖像大小。
封面區(qū)塊設(shè)置
封面區(qū)塊設(shè)置位于右側(cè)邊欄中。單擊區(qū)塊或齒輪以顯示側(cè)邊欄。如果您選擇塊內(nèi)容中的區(qū)塊，則會(huì)顯示其側(cè)邊欄設(shè)置。
樣式設(shè)置
顯示帶或不帶邊框的區(qū)塊。您還可以設(shè)置默認(rèn)值以顯示邊框。它包括一個(gè)預(yù)覽，因此您可以在選擇它之前查看它的外觀。
間距
為所有側(cè)面或特定側(cè)面增加空間。單獨(dú)選擇每一面或?qū)⑺鼈冩溄釉谝黄鹨砸淮握{(diào)整它們。
媒體設(shè)置
選擇區(qū)塊內(nèi)顯示的圖像部分。您可以選擇一個(gè)固定的背景（視差），如果背景對(duì)于該區(qū)域來(lái)說(shuō)太小，則可以重復(fù)該背景，并通過(guò)移動(dòng)一個(gè)圓圈或指定左側(cè)和頂部位置來(lái)指定焦點(diǎn)。您也可以從這里清除媒體。只有焦點(diǎn)選擇器可用于視頻。
此示例顯示固定背景。當(dāng)文本滾動(dòng)時(shí)，圖像保持原位，從而產(chǎn)生視差效果。
這是重復(fù)的背景。它非常適合用小圖像創(chuàng)建有趣的圖案。
分辨率
通過(guò)在字段中輸入高度以像素為單位指定高度。這與圖像底部的拖動(dòng)工具相同。
覆蓋
封面區(qū)塊有很多覆蓋選項(xiàng)。選擇一種預(yù)制顏色并選擇其不透明度。從純色或漸變中選擇。您將實(shí)時(shí)看到變化。如果您選擇顯示顏色而不是圖像，您可以在此處更改顏色。此示例顯示純色。
您還可以選擇自定義顏色。這將打開一個(gè)顏色選擇器，您可以在其中使用窗口中的顏色、使用滑塊選擇色階或輸入十六進(jìn)制、RGB或HSL代碼。
漸變選項(xiàng)可讓您選擇將顯示的兩種顏色。在線性或徑向之間進(jìn)行選擇。您還可以設(shè)置顏色的不透明度。我在這個(gè)例子中選擇了徑向。
高級(jí)
高級(jí)包括兩個(gè)字段。第一個(gè)是HTML錨點(diǎn)的選項(xiàng)。這為封面區(qū)提供了一個(gè)特殊的網(wǎng)址。第二個(gè)是添加額外CSS類的字段。這允許您創(chuàng)建自定義CSS來(lái)設(shè)置區(qū)塊的樣式。您選擇的樣式也會(huì)出現(xiàn)在此字段中。
有效使用封面區(qū)塊的提示和最佳實(shí)踐
對(duì)于圖像，請(qǐng)使用邊欄中的媒體設(shè)置來(lái)顯示要顯示的圖像部分。
使用帶有全幅選項(xiàng)的大圖像來(lái)創(chuàng)建部分標(biāo)題。
將前景更改為多列并添加圖像、文本和按鈕以創(chuàng)建號(hào)召性用語(yǔ)。
使用易于在背景圖像或顏色上閱讀的疊加和文本顏色。
如果要控制邊框顏色，請(qǐng)將區(qū)塊轉(zhuǎn)換為組。
使用對(duì)齊選項(xiàng)將封面塊設(shè)置到您的內(nèi)容中或?qū)⑵浞珠_。
設(shè)置內(nèi)容定位設(shè)置以創(chuàng)建一些有趣的視覺(jué)效果并引導(dǎo)讀者的注意力。
使用固定背景創(chuàng)建視差效果。
使用帶有重復(fù)背景的小圖像來(lái)創(chuàng)建有趣的背景圖案。
關(guān)于封面區(qū)塊的常見問(wèn)題
什么是封面區(qū)塊？
這是一個(gè)區(qū)塊，可讓您將媒體或顏色添加到背景中，并將其他區(qū)塊添加到前景中。
封面區(qū)塊與其他區(qū)塊有何不同？
它可以包含其他區(qū)塊。您可以將其他區(qū)塊添加到前面。它會(huì)產(chǎn)生視差、圖案等。
可以轉(zhuǎn)換成其他區(qū)塊嗎？
是的。它可以轉(zhuǎn)換為圖片區(qū)塊。它會(huì)刪除您添加到其內(nèi)容區(qū)域的任何其他區(qū)塊。
它可以用來(lái)做什么？
您可以使用封面區(qū)塊創(chuàng)建帶有號(hào)召性用語(yǔ)的背景，使用它在部分上方創(chuàng)建標(biāo)題，創(chuàng)建海報(bào)、英雄部分或任何您想要在背景中包含圖像或視頻的內(nèi)容。
小結(jié)
這就是我們對(duì)封面區(qū)塊的看法。此塊具有一些最有趣的功能，是創(chuàng)建標(biāo)題、標(biāo)題、CTA、視差背景等的絕佳選擇。它易于使用，可以使您的網(wǎng)站比大多數(shù)區(qū)塊更突出。它創(chuàng)造有趣視覺(jué)效果的能力使其成為我最喜歡的WordPress區(qū)塊之一。
文章標(biāo)題：古騰堡編輯器教程：如何使用WordPress封面區(qū)塊
分享路徑：http://m.fisionsoft.com.cn/article/cdssgig.html
