你想在WordPress中更改塊的高度和寬度嗎?默認(rèn)情況下,WordPress 可以輕松地使用塊為您的帖子和頁面創(chuàng)建漂亮的內(nèi)容布局。但是,有時您可能希望調(diào)整塊的大小以使其看起來更好。在本文中,我們將向您展示如何在WordPress中輕松更改塊的高度和寬度。

為什么要在WordPress中更改塊的高度和寬度?
塊編輯器使您能夠使用不同的塊向 WordPress 網(wǎng)站添加內(nèi)容,包括標(biāo)題、段落、圖像、視頻、音頻等。
但是,有時您可能希望更改特定塊的寬度或高度,以改善其外觀或整體內(nèi)容的布局。
調(diào)整塊大小還可以確保您的內(nèi)容響應(yīng)迅速,并在所有設(shè)備(包括手機(jī)、平板電腦和筆記本電腦)上正確顯示。
例如,您可能已在內(nèi)容編輯器中上傳了圖像,但它太大,使頁面看起來沒有吸引力。

或者,您可能希望更改標(biāo)題塊的大小,以使其更好地與內(nèi)容對齊。
通過調(diào)整塊的寬度和高度,您可以使您的帖子和頁面看起來更美觀。
方法 1:使用塊設(shè)置更改塊高度和寬度
對于這種方法,我們將向您展示如何使用WordPress提供的默認(rèn)設(shè)置更改塊的高度和寬度。
目前,WordPress沒有為所有塊提供相同的調(diào)整大小選項。但是,塊編輯器提供了許多方法來調(diào)整不同塊的高度和寬度。
讓我們從WordPress中的圖像塊開始。
首先,您可以通過單擊塊上方工具欄中的“對齊”按鈕來更改圖像塊的對齊方式。
在這里,選擇“寬寬度”選項將使塊與容器的寬度相同。
或者,“全寬”對齊選項將使塊成為頁面的整個寬度。

您還可以通過轉(zhuǎn)到右側(cè)的“塊設(shè)置”面板并向下滾動到“設(shè)置”部分來調(diào)整塊的大小。在這里,您可以從“圖像大小”下拉菜單中調(diào)整塊的大小。
您還可以通過在“圖片尺寸”部分的“寬度”和“高度”框中輸入首選像素大小來調(diào)整塊的寬度和高度。
在此之下,您還可以按百分比調(diào)整塊的大小。

調(diào)整圖像塊大小的另一種方法是單擊圖像本身以顯示帶有圓形錨點的藍(lán)色邊框。
然后,只需拖動這些錨點即可更改圖像塊的高度和寬度。

完成后,單擊“更新”或“發(fā)布”按鈕以存儲您的設(shè)置。
方法 2:使用列塊更改塊的高度和寬度
如果要調(diào)整大小的塊沒有附帶對齊按鈕或調(diào)整大小設(shè)置,則此方法適合您。
對于此方法,我們將塊放在列塊中。它充當(dāng)容器,您可以在其中添加每列中的塊。然后,您可以通過調(diào)整列的高度和寬度來調(diào)整這些塊的大小。
首先,您需要單擊屏幕左上角的“添加塊”(+)按鈕。
從這里,只需找到列塊并將其添加到內(nèi)容編輯器。然后,系統(tǒng)會要求您選擇一種變體。

之后,列布局將顯示在屏幕上,您現(xiàn)在可以通過單擊列內(nèi)的“添加塊(+)”按鈕來添加所需的塊。
添加塊后,您可以使用右側(cè)面板中的“列設(shè)置”調(diào)整其大小。

完成后,只需單擊“發(fā)布”按鈕即可存儲更改。
這是在兩列塊中調(diào)整和對齊兩個段落塊后內(nèi)容在我們的演示網(wǎng)站上的外觀。

方法 3:使用組塊更改塊的高度和寬度
您還可以使用組塊調(diào)整塊的寬度和高度。它允許您對不同的塊進(jìn)行分組并將它們樣式化在一起。
首先,您需要單擊頂部的“添加塊”(+)按鈕。接下來,您必須找到組塊并將其添加到內(nèi)容編輯器。
完成此操作后,組塊將顯示三種不同的布局選項供您選擇。在本教程中,我們將使用“組”布局。

之后,“添加塊”按鈕將顯示在屏幕上。您現(xiàn)在可以添加所需的任何塊。
在本教程中,我們將添加標(biāo)題塊、段落塊和圖像塊并調(diào)整其大小。

要將多個塊添加到組,您必須單擊塊工具欄中的“選擇組”按鈕。
選擇組后,只需單擊底部的“添加塊”按鈕(+)。

單擊“選擇組”按鈕還會打開右列中的塊設(shè)置。從這里,您可以輕松調(diào)整所有塊的布局、對齊和方向。
更改布局也會更改不同的塊大小。您可以配置這些設(shè)置,直到您對結(jié)果滿意為止。

完成后,單擊“更新”或“發(fā)布”按鈕以存儲您的設(shè)置。
這就是組塊在我們的演示網(wǎng)站上的外觀。

方法 4:使用覆蓋塊更改塊高度
如果要使用“覆蓋”塊,此大小調(diào)整方法適合您。它使您能夠在圖像或視頻之上顯示文本和其他內(nèi)容。
首先,您需要單擊頂部的“添加塊”(+)按鈕并找到覆蓋塊。
完成此操作后,系統(tǒng)會要求您選擇顏色或從WordPress媒體庫中上傳圖像。此圖像或顏色將用作封面塊的背景。

接下來,只需將您想要的任何塊拖放到 Cover 塊中。
之后,您需要單擊 覆蓋 塊以在右列中打開其塊設(shè)置。
從這里,向下滾動到“尺寸”面板,您可以在其中使用像素調(diào)整覆蓋塊的高度。

最后,不要忘記單擊“保存更改”按鈕來存儲您的設(shè)置。
使用種子生產(chǎn)中的高級塊創(chuàng)建漂亮的頁面
您可以使用 SeedProd 插件輕松創(chuàng)建美觀且美觀的頁面。
它是市場上最好的WordPress頁面構(gòu)建器,可讓您使用塊創(chuàng)建登錄頁面。這些塊也非常容易根據(jù)您的需要進(jìn)行自定義和調(diào)整大小。
首先,您需要安裝并激活 SeedProd 插件。
注意: SeedProd 也提供免費版本,但我們將在本教程中使用高級版本。
激活后,您必須從WordPress儀表板轉(zhuǎn)到SeedProd ?設(shè)置頁面,然后在“許可證密鑰”框中輸入許可證密鑰。
您可以在 SeedProd 網(wǎng)站的帳戶頁面上找到許可證密鑰。

接下來,您需要從管理側(cè)邊欄訪問 SeedProd ? 登錄頁面屏幕以開始創(chuàng)建登錄頁面。
從這里,只需單擊“添加新登錄頁面”按鈕。

現(xiàn)在,您將被帶到“選擇新頁面模板”頁面。種子生產(chǎn)提供了許多預(yù)制模板供您選擇。
選擇模板后,系統(tǒng)會要求您提供著陸頁的名稱和網(wǎng)址。
添加這些詳細(xì)信息后,只需單擊“保存并開始編輯頁面”按鈕即可繼續(xù)。

這將啟動 SeedProd 的拖放頁面構(gòu)建器,您現(xiàn)在可以在其中開始編輯頁面。
在本教程中,我們將添加圖像塊和按鈕塊并調(diào)整其大小。
首先,您需要將圖像塊從左側(cè)的塊面板中拖放到頁面上的任何位置。
接下來,只需單擊 圖片 塊以在左欄中打開其塊設(shè)置。從這里,您可以從媒體庫中上傳圖像。
接下來,您可以使用像素或百分比更改塊的高度和寬度。
您還可以通過切換到設(shè)置面板頂部的“高級”選項卡來調(diào)整圖像大小和位置。
然后,只需單擊 間距 面板以展開其設(shè)置。
在這里,只需添加值即可根據(jù)需要調(diào)整塊的邊距和填充。
您可以調(diào)整塊的頂部、底部、左側(cè)和右側(cè)區(qū)域的邊距和填充。

使用 Seedprod,您還可以在兩個不同的塊之間添加一個間隔塊,以便在它們之間留出一些空間。
首先,您需要從左列中找到并添加“間隔”塊。然后,單擊它以打開其設(shè)置。

現(xiàn)在,您可以使用“高度”滑塊控制墊片的高度。
間隔塊可以幫助您創(chuàng)建一個整潔的網(wǎng)站。





