WordPress 5.0中正式引入的古騰堡區塊編輯器讓使用者有機會完全自定義他們的WordPress內容和網站。不再受需要在TinyMCE經典編輯器等WYSIWYG工具中建立的限制，Gutenberg為文章或頁面內容的每個元素提供單獨的區塊。通過控制每個特定區塊的設定，使用者可以比以往更輕鬆地設計WordPress內容。讓設計脫穎而出的最簡單方法之一就是讓它們超越預設設定。因此，我們將研究如何在WordPress中調整區塊的大小，以便您可以開始跳出框框思考（和設計）。
由於區塊的響應性質，區塊編輯器中的大多數調整大小仍然受限於站點的內容區域。如果您將頁面的內容區域設定為全幅，您將在該空間內工作。例如，如果您將文章內容區域設定為580畫素或1200畫素，您將在那裡工作。我們用來教您如何在WordPress中調整區塊大小的方法都是基於這樣的想法，即您將停留在任何特定區塊容器的邊界內。
如何在編輯器中調整區塊大小
一些（但不是全部）塊具有內建的調整大小選項。由於顯而易見的原因，這些是最容易調整大小的。但是，根據區塊的不同，調整大小選項將位於不同的位置。
示例 #1：圖片區塊
單擊區塊會彈出上下文選單，這裡的調整大小選項實際上是間距選項。但是， 寬幅寬度和全幅寬度對齊會將圖片區塊的大小更改為容器的寬度（寬幅）或整個頁面的寬度（全幅）。
您還可以使用右側邊欄中的塊設定調整圖片區塊的大小。恰當命名的影象大小部分有許多選項，您可以使用這些選項調整區塊的大小。 
WordPress有一個用於快速調整大小的下拉選單，您可以從縮圖、中、大和全尺寸中選擇預設 。選擇全尺寸將因您的主題而異，無論它是實際完全顯示還是適合內容區域。
您還可以按畫素專門調整寬度和高度。在此之下，您可以按百分比進行調整。該百分比基於在寬度和高度欄位中的數值。不是您從下拉選單中選擇的預設影象尺寸。
最後，您可以單擊影象本身以顯示帶有白色圓形錨點的藍色邊框 。您可以拖動它們來調整區塊的大小。
您只需單擊並拖動任何錨點即可縮放影象。這樣做將調整塊設定選單中高度和寬度欄位的大小。
示例#2：活動區塊
對於活動區塊，調整大小設定僅在編輯器本身的上下文選單中。（Event Block是您將安裝的Automattic的一個單獨外掛，它不是古騰堡核心編輯器的一部分。）
像一些圖片區塊選項一樣，這裡的調整大小選項在技術上是間距選項。但是這兩個選項是居中對齊和全幅寬度。您可以選擇一個在容器中居中或在螢幕上的整個寬度。
在編輯器本身中調整區塊的高度有點麻煩，但有效。如果您只是在空區塊欄位中按Enter/return，則可以通過插入額外的空段落區塊來擴充套件高度。
這是一個不太理想的解決方案。但它很快，而且在緊要關頭工作——特別是考慮到活動區塊沒有真正的高度調整選項。
示例 3#：在WordPress中使用欄目調整區塊大小
如果您需要調整大小的區塊在其設定面板或上下文選單中沒有調整大小選項，則使用區塊編輯器的欄目是您可以調整任何塊大小的另一種方式。只需按任意+ 按鈕搜尋欄目區塊即可新增新區塊。
在欄目區塊中，您可以新增所需的任何其他區塊。在搜尋選項中，還會出現區塊編輯器模式。這些是您可以插入到文章或頁面中的模板，其中內容已經調整大小和放置，等待您的內容替換佔位符。
從一開始，欄目區塊就允許您選擇欄目本身的大小。它分為6個不同的方向，每個方向都有不同的頁面百分比用於各個欄目。
這些不是您可以使用的唯一配置。您可以使用塊內的 藍色 + 按鈕 隨時新增新欄目。每個單獨的欄目都有自己的設定面板，您可以在其中按百分比單獨調整其寬度。
可能需要進行一些實驗才能使尺寸適合您的設計。但是，當它完成後，您可以在首頁上放置一些精心設計且間隔適當的內容。請記住，區塊編輯器中的任何空欄目也將在前端顯示為空。
通過調整不同欄目的寬度、位置和數量，您的區塊幾乎可以以任何方式調整大小和放置。
需要更多尺寸選擇？考慮使用更高階的頁面構建器
我們意識到其中一些調整區塊大小的方法可能會受到限制。如果您發現它們對您來說限制太多，那麼可能是時候研究更高階的頁面構建器了。
例如， Divi為每個模組（區塊）提供了大小調整和變換選項，與古騰堡相比，您可以更好地控制形狀、大小和間距。大多數高階頁面構建器也是如此，因此如果您發現Gutenberg的選項過於有限，那麼檢視Divi之類的內容可能是下一步的最佳選擇。
如何使用CSS調整WordPress區塊大小
每個區塊在高階設定下的設定面板中都有一個CSS部分 。除了任何其他特定於塊的高階設定外，每個設定都有一個欄位用於額外CSS類。您可以將您想要的任何選擇器分配給這個單獨的區塊，無論它們是否已經存在於您的站點上，或者您是否專門為此區塊建立了它。
通常，我們建議對單個區塊使用CSS ID而不是類，但區塊編輯器不支援（至少預設情況下）。因此，您將只想使用多個類來跟上單個區塊而不是ID。類實際上是為了涵蓋大類的元素型別，而ID是為了單個元素。在這種情況下，我們建議使用清晰的命名約定來保持程式碼中的簡潔。
無論如何，您只需將類輸入到文字欄位中即可。 請勿在此欄位中的類名稱前包含句點/點。
現在，您應該導航到外觀– 自定義並在最底部找到額外CSS部分。編寫或貼上CSS程式碼以根據您的喜好調整區塊的大小。
我們建議避免使用以畫素 (px)為單位的度量，因為它們是絕對的。最好使用 vw（視口寬度）、vh（視口高度）或% （百分比）來調整區塊。這些都將參考裝置和/或它周圍的其他內容進行縮放。
.block-1 {
height:35vh;
max-height:50vh;
}
.block-2 {
width: 100vw;
}
.block-3 {
max-width:80vw;
}
請記住，%和vw/vh也不同，儘管它們的功能相似。它們都按百分比起作用，但它們與不同的錨點有關。
百分比測量與元素所在的容器有關。因此，如果元素所在的部分或行沒有到達螢幕的邊緣，即使設定width:100%也不會到達邊界。
然而，使用 vh/vw將是相對於裝置本身的視口，而不是站點的元素。使用height:80vh，您可以始終確保此塊佔據螢幕高度的 80%，無論它是顯示在移動裝置、桌上型電腦還是平板電腦上。
小結
WordPress中的區塊編輯器為使用者提供了大量以前不可用的自定義選項（即在編輯器本身內）。瞭解如何在WordPress中調整區塊大小對於能夠最大程度地利用區塊編輯器至關重要。現在有了全站點編輯功能，這項技能只會隨著時間的推移變得更加有用。
評論留言