創(chuàng)新互聯(lián)長(zhǎng)期為近千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西湖企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，西湖網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

wordpress 5.0中正式引入的古騰堡區(qū)塊編輯器讓用戶(hù)有機(jī)會(huì)完全自定義他們的WordPress內(nèi)容和網(wǎng)站。不再受需要在TinyMCE經(jīng)典編輯器等WYSIWYG工具中創(chuàng)建的限制，Gutenberg為文章或頁(yè)面內(nèi)容的每個(gè)元素提供單獨(dú)的區(qū)塊。通過(guò)控制每個(gè)特定區(qū)塊的設(shè)置，用戶(hù)可以比以往更輕松地設(shè)計(jì)WordPress內(nèi)容。讓設(shè)計(jì)脫穎而出的最簡(jiǎn)單方法之一就是讓它們超越默認(rèn)設(shè)置。因此，我們將研究如何在WordPress中調(diào)整區(qū)塊的大小，以便您可以開(kāi)始跳出框框思考（和設(shè)計(jì)）。

由于區(qū)塊的響應(yīng)性質(zhì)，區(qū)塊編輯器中的大多數(shù)調(diào)整大小仍然受限于站點(diǎn)的內(nèi)容區(qū)域。如果您將頁(yè)面的內(nèi)容區(qū)域設(shè)置為全幅，您將在該空間內(nèi)工作。例如，如果您將文章內(nèi)容區(qū)域設(shè)置為580像素或1200像素，您將在那里工作。我們用來(lái)教您如何在WordPress中調(diào)整區(qū)塊大小的方法都是基于這樣的想法，即您將停留在任何特定區(qū)塊容器的邊界內(nèi)。

如何在編輯器中調(diào)整區(qū)塊大小

一些（但不是全部）塊具有內(nèi)置的調(diào)整大小選項(xiàng)。由于顯而易見(jiàn)的原因，這些是最容易調(diào)整大小的。但是，根據(jù)區(qū)塊的不同，調(diào)整大小選項(xiàng)將位于不同的位置。

示例 #1：圖片區(qū)塊

單擊區(qū)塊會(huì)彈出上下文菜單，這里的調(diào)整大小選項(xiàng)實(shí)際上是間距選項(xiàng)。但是， 寬幅寬度和全幅寬度對(duì)齊會(huì)將圖片區(qū)塊的大小更改為容器的寬度（寬幅）或整個(gè)頁(yè)面的寬度（全幅）。

您還可以使用右側(cè)邊欄中的塊設(shè)置調(diào)整圖片區(qū)塊的大小。恰當(dāng)命名的圖像大小部分有許多選項(xiàng)，您可以使用這些選項(xiàng)調(diào)整區(qū)塊的大小。

WordPress有一個(gè)用于快速調(diào)整大小的下拉菜單，您可以從縮略圖、中、大和全尺寸中選擇預(yù)設(shè) 。選擇全尺寸將因您的主題而異，無(wú)論它是實(shí)際完全顯示還是適合內(nèi)容區(qū)域。

您還可以按像素專(zhuān)門(mén)調(diào)整寬度和高度。在此之下，您可以按百分比進(jìn)行調(diào)整。該百分比基于在寬度和高度字段中的數(shù)值。不是您從下拉菜單中選擇的預(yù)設(shè)圖像尺寸。

最后，您可以單擊圖像本身以顯示帶有白色圓形錨點(diǎn)的藍(lán)色邊框 。您可以拖動(dòng)它們來(lái)調(diào)整區(qū)塊的大小。

您只需單擊并拖動(dòng)任何錨點(diǎn)即可縮放圖像。這樣做將調(diào)整塊設(shè)置菜單中高度和寬度字段的大小。

示例#2：活動(dòng)區(qū)塊

對(duì)于活動(dòng)區(qū)塊，調(diào)整大小設(shè)置僅在編輯器本身的上下文菜單中。（Event Block是您將安裝的Automattic的一個(gè)單獨(dú)插件，它不是古騰堡核心編輯器的一部分。）

像一些圖片區(qū)塊選項(xiàng)一樣，這里的調(diào)整大小選項(xiàng)在技術(shù)上是間距選項(xiàng)。但是這兩個(gè)選項(xiàng)是居中對(duì)齊和全幅寬度。您可以選擇一個(gè)在容器中居中或在屏幕上的整個(gè)寬度。

在編輯器本身中調(diào)整區(qū)塊的高度有點(diǎn)麻煩，但有效。如果您只是在空區(qū)塊字段中按Enter/return，則可以通過(guò)插入額外的空段落區(qū)塊來(lái)擴(kuò)展高度。

這是一個(gè)不太理想的解決方案。但它很快，而且在緊要關(guān)頭工作——特別是考慮到活動(dòng)區(qū)塊沒(méi)有真正的高度調(diào)整選項(xiàng)。

示例 3#：在WordPress中使用欄目調(diào)整區(qū)塊大小

如果您需要調(diào)整大小的區(qū)塊在其設(shè)置面板或上下文菜單中沒(méi)有調(diào)整大小選項(xiàng)，則使用區(qū)塊編輯器的欄目是您可以調(diào)整任何塊大小的另一種方式。只需按任意+ 按鈕搜索欄目區(qū)塊即可添加新區(qū)塊。

在欄目區(qū)塊中，您可以添加所需的任何其他區(qū)塊。在搜索選項(xiàng)中，還會(huì)出現(xiàn)區(qū)塊編輯器模式。這些是您可以插入到文章或頁(yè)面中的模板，其中內(nèi)容已經(jīng)調(diào)整大小和放置，等待您的內(nèi)容替換占位符。

從一開(kāi)始，欄目區(qū)塊就允許您選擇欄目本身的大小。它分為6個(gè)不同的方向，每個(gè)方向都有不同的頁(yè)面百分比用于各個(gè)欄目。

這些不是您可以使用的唯一配置。您可以使用塊內(nèi)的 藍(lán)色 + 按鈕 隨時(shí)添加新欄目。每個(gè)單獨(dú)的欄目都有自己的設(shè)置面板，您可以在其中按百分比單獨(dú)調(diào)整其寬度。

可能需要進(jìn)行一些實(shí)驗(yàn)才能使尺寸適合您的設(shè)計(jì)。但是，當(dāng)它完成后，您可以在首頁(yè)上放置一些精心設(shè)計(jì)且間隔適當(dāng)?shù)膬?nèi)容。請(qǐng)記住，區(qū)塊編輯器中的任何空欄目也將在前端顯示為空。

通過(guò)調(diào)整不同欄目的寬度、位置和數(shù)量，您的區(qū)塊幾乎可以以任何方式調(diào)整大小和放置。

需要更多尺寸選擇？考慮使用更高級(jí)的頁(yè)面構(gòu)建器

我們意識(shí)到其中一些調(diào)整區(qū)塊大小的方法可能會(huì)受到限制。如果您發(fā)現(xiàn)它們對(duì)您來(lái)說(shuō)限制太多，那么可能是時(shí)候研究更高級(jí)的頁(yè)面構(gòu)建器了。

例如， Divi為每個(gè)模塊（區(qū)塊）提供了大小調(diào)整和變換選項(xiàng)，與古騰堡相比，您可以更好地控制形狀、大小和間距。大多數(shù)高級(jí)頁(yè)面構(gòu)建器也是如此，因此如果您發(fā)現(xiàn)Gutenberg的選項(xiàng)過(guò)于有限，那么查看Divi之類(lèi)的內(nèi)容可能是下一步的最佳選擇。

如何使用CSS調(diào)整WordPress區(qū)塊大小

每個(gè)區(qū)塊在高級(jí)設(shè)置下的設(shè)置面板中都有一個(gè)CSS部分 。除了任何其他特定于塊的高級(jí)設(shè)置外，每個(gè)設(shè)置都有一個(gè)字段用于額外CSS類(lèi)。您可以將您想要的任何選擇器分配給這個(gè)單獨(dú)的區(qū)塊，無(wú)論它們是否已經(jīng)存在于您的站點(diǎn)上，或者您是否專(zhuān)門(mén)為此區(qū)塊創(chuàng)建了它。

通常，我們建議對(duì)單個(gè)區(qū)塊使用CSS ID而不是類(lèi)，但區(qū)塊編輯器不支持（至少默認(rèn)情況下）。因此，您將只想使用多個(gè)類(lèi)來(lái)跟上單個(gè)區(qū)塊而不是ID。類(lèi)實(shí)際上是為了涵蓋大類(lèi)的元素類(lèi)型，而ID是為了單個(gè)元素。在這種情況下，我們建議使用清晰的命名約定來(lái)保持代碼中的簡(jiǎn)潔。

無(wú)論如何，您只需將類(lèi)輸入到文本字段中即可。 請(qǐng)勿在此字段中的類(lèi)名稱(chēng)前包含句點(diǎn)/點(diǎn)。

現(xiàn)在，您應(yīng)該導(dǎo)航到外觀(guān)– 自定義并在最底部找到額外CSS部分。編寫(xiě)或粘貼CSS代碼以根據(jù)您的喜好調(diào)整區(qū)塊的大小。

我們建議避免使用以像素 (px)為單位的度量，因?yàn)樗鼈兪墙^對(duì)的。最好使用 vw（視口寬度）、vh（視口高度）或% （百分比）來(lái)調(diào)整區(qū)塊。這些都將參考設(shè)備和/或它周?chē)钠渌麅?nèi)容進(jìn)行縮放。

.block-1 {
    height:35vh;
    max-height:50vh;
}
 
.block-2 {
    width: 100vw;
}
 
.block-3 {
    max-width:80vw;
}

請(qǐng)記住，%和vw/vh也不同，盡管它們的功能相似。它們都按百分比起作用，但它們與不同的錨點(diǎn)有關(guān)。

百分比測(cè)量與元素所在的容器有關(guān)。因此，如果元素所在的部分或行沒(méi)有到達(dá)屏幕的邊緣，即使設(shè)置width:100%也不會(huì)到達(dá)邊界。

然而，使用 vh/vw將是相對(duì)于設(shè)備本身的視口，而不是站點(diǎn)的元素。使用height:80vh，您可以始終確保此塊占據(jù)屏幕高度的 80%，無(wú)論它是顯示在移動(dòng)設(shè)備、臺(tái)式機(jī)還是平板電腦上。

小結(jié)

WordPress中的區(qū)塊編輯器為用戶(hù)提供了大量以前不可用的自定義選項(xiàng)（即在編輯器本身內(nèi)）。了解如何在WordPress中調(diào)整區(qū)塊大小對(duì)于能夠最大程度地利用區(qū)塊編輯器至關(guān)重要?，F(xiàn)在有了全站點(diǎn)編輯功能，這項(xiàng)技能只會(huì)隨著時(shí)間的推移變得更加有用。

分享文章：古騰堡編輯器教程：如何調(diào)整WordPress區(qū)塊大小
URL鏈接：http://uogjgqi.cn/article/djdsceh.html