建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西湖企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計，西湖網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
wordpress 5.0中正式引入的古騰堡區(qū)塊編輯器讓用戶有機會完全自定義他們的WordPress內(nèi)容和網(wǎng)站。不再受需要在TinyMCE經(jīng)典編輯器等WYSIWYG工具中創(chuàng)建的限制，Gutenberg為文章或頁面內(nèi)容的每個元素提供單獨的區(qū)塊。通過控制每個特定區(qū)塊的設(shè)置，用戶可以比以往更輕松地設(shè)計WordPress內(nèi)容。讓設(shè)計脫穎而出的最簡單方法之一就是讓它們超越默認(rèn)設(shè)置。因此，我們將研究如何在WordPress中調(diào)整區(qū)塊的大小，以便您可以開始跳出框框思考（和設(shè)計）。
由于區(qū)塊的響應(yīng)性質(zhì)，區(qū)塊編輯器中的大多數(shù)調(diào)整大小仍然受限于站點的內(nèi)容區(qū)域。如果您將頁面的內(nèi)容區(qū)域設(shè)置為全幅，您將在該空間內(nèi)工作。例如，如果您將文章內(nèi)容區(qū)域設(shè)置為580像素或1200像素，您將在那里工作。我們用來教您如何在WordPress中調(diào)整區(qū)塊大小的方法都是基于這樣的想法，即您將停留在任何特定區(qū)塊容器的邊界內(nèi)。
如何在編輯器中調(diào)整區(qū)塊大小
一些（但不是全部）塊具有內(nèi)置的調(diào)整大小選項。由于顯而易見的原因，這些是最容易調(diào)整大小的。但是，根據(jù)區(qū)塊的不同，調(diào)整大小選項將位于不同的位置。
示例 #1：圖片區(qū)塊
單擊區(qū)塊會彈出上下文菜單，這里的調(diào)整大小選項實際上是間距選項。但是， 寬幅寬度和全幅寬度對齊會將圖片區(qū)塊的大小更改為容器的寬度（寬幅）或整個頁面的寬度（全幅）。
您還可以使用右側(cè)邊欄中的塊設(shè)置調(diào)整圖片區(qū)塊的大小。恰當(dāng)命名的圖像大小部分有許多選項，您可以使用這些選項調(diào)整區(qū)塊的大小。
WordPress有一個用于快速調(diào)整大小的下拉菜單，您可以從縮略圖、中、大和全尺寸中選擇預(yù)設(shè) 。選擇全尺寸將因您的主題而異，無論它是實際完全顯示還是適合內(nèi)容區(qū)域。
您還可以按像素專門調(diào)整寬度和高度。在此之下，您可以按百分比進行調(diào)整。該百分比基于在寬度和高度字段中的數(shù)值。不是您從下拉菜單中選擇的預(yù)設(shè)圖像尺寸。
最后，您可以單擊圖像本身以顯示帶有白色圓形錨點的藍色邊框 。您可以拖動它們來調(diào)整區(qū)塊的大小。
您只需單擊并拖動任何錨點即可縮放圖像。這樣做將調(diào)整塊設(shè)置菜單中高度和寬度字段的大小。
示例#2：活動區(qū)塊
對于活動區(qū)塊，調(diào)整大小設(shè)置僅在編輯器本身的上下文菜單中。（Event Block是您將安裝的Automattic的一個單獨插件，它不是古騰堡核心編輯器的一部分。）
像一些圖片區(qū)塊選項一樣，這里的調(diào)整大小選項在技術(shù)上是間距選項。但是這兩個選項是居中對齊和全幅寬度。您可以選擇一個在容器中居中或在屏幕上的整個寬度。
在編輯器本身中調(diào)整區(qū)塊的高度有點麻煩，但有效。如果您只是在空區(qū)塊字段中按Enter/return，則可以通過插入額外的空段落區(qū)塊來擴展高度。
這是一個不太理想的解決方案。但它很快，而且在緊要關(guān)頭工作——特別是考慮到活動區(qū)塊沒有真正的高度調(diào)整選項。
示例 3#：在WordPress中使用欄目調(diào)整區(qū)塊大小
如果您需要調(diào)整大小的區(qū)塊在其設(shè)置面板或上下文菜單中沒有調(diào)整大小選項，則使用區(qū)塊編輯器的欄目是您可以調(diào)整任何塊大小的另一種方式。只需按任意+ 按鈕搜索欄目區(qū)塊即可添加新區(qū)塊。
在欄目區(qū)塊中，您可以添加所需的任何其他區(qū)塊。在搜索選項中，還會出現(xiàn)區(qū)塊編輯器模式。這些是您可以插入到文章或頁面中的模板，其中內(nèi)容已經(jīng)調(diào)整大小和放置，等待您的內(nèi)容替換占位符。
從一開始，欄目區(qū)塊就允許您選擇欄目本身的大小。它分為6個不同的方向，每個方向都有不同的頁面百分比用于各個欄目。
這些不是您可以使用的唯一配置。您可以使用塊內(nèi)的 藍色 + 按鈕 隨時添加新欄目。每個單獨的欄目都有自己的設(shè)置面板，您可以在其中按百分比單獨調(diào)整其寬度。
可能需要進行一些實驗才能使尺寸適合您的設(shè)計。但是，當(dāng)它完成后，您可以在首頁上放置一些精心設(shè)計且間隔適當(dāng)?shù)膬?nèi)容。請記住，區(qū)塊編輯器中的任何空欄目也將在前端顯示為空。
通過調(diào)整不同欄目的寬度、位置和數(shù)量，您的區(qū)塊幾乎可以以任何方式調(diào)整大小和放置。
需要更多尺寸選擇？考慮使用更高級的頁面構(gòu)建器
我們意識到其中一些調(diào)整區(qū)塊大小的方法可能會受到限制。如果您發(fā)現(xiàn)它們對您來說限制太多，那么可能是時候研究更高級的頁面構(gòu)建器了。
例如， Divi為每個模塊（區(qū)塊）提供了大小調(diào)整和變換選項，與古騰堡相比，您可以更好地控制形狀、大小和間距。大多數(shù)高級頁面構(gòu)建器也是如此，因此如果您發(fā)現(xiàn)Gutenberg的選項過于有限，那么查看Divi之類的內(nèi)容可能是下一步的最佳選擇。
如何使用CSS調(diào)整WordPress區(qū)塊大小
每個區(qū)塊在高級設(shè)置下的設(shè)置面板中都有一個CSS部分 。除了任何其他特定于塊的高級設(shè)置外，每個設(shè)置都有一個字段用于額外CSS類。您可以將您想要的任何選擇器分配給這個單獨的區(qū)塊，無論它們是否已經(jīng)存在于您的站點上，或者您是否專門為此區(qū)塊創(chuàng)建了它。
通常，我們建議對單個區(qū)塊使用CSS ID而不是類，但區(qū)塊編輯器不支持（至少默認(rèn)情況下）。因此，您將只想使用多個類來跟上單個區(qū)塊而不是ID。類實際上是為了涵蓋大類的元素類型，而ID是為了單個元素。在這種情況下，我們建議使用清晰的命名約定來保持代碼中的簡潔。
無論如何，您只需將類輸入到文本字段中即可。 請勿在此字段中的類名稱前包含句點/點。
現(xiàn)在，您應(yīng)該導(dǎo)航到外觀– 自定義并在最底部找到額外CSS部分。編寫或粘貼CSS代碼以根據(jù)您的喜好調(diào)整區(qū)塊的大小。
我們建議避免使用以像素 (px)為單位的度量，因為它們是絕對的。最好使用 vw（視口寬度）、vh（視口高度）或% （百分比）來調(diào)整區(qū)塊。這些都將參考設(shè)備和/或它周圍的其他內(nèi)容進行縮放。
.block-1 {
height:35vh;
max-height:50vh;
}
.block-2 {
width: 100vw;
}
.block-3 {
max-width:80vw;
}
請記住，%和vw/vh也不同，盡管它們的功能相似。它們都按百分比起作用，但它們與不同的錨點有關(guān)。
百分比測量與元素所在的容器有關(guān)。因此，如果元素所在的部分或行沒有到達屏幕的邊緣，即使設(shè)置width:100%也不會到達邊界。
然而，使用 vh/vw將是相對于設(shè)備本身的視口，而不是站點的元素。使用height:80vh，您可以始終確保此塊占據(jù)屏幕高度的 80%，無論它是顯示在移動設(shè)備、臺式機還是平板電腦上。
小結(jié)
WordPress中的區(qū)塊編輯器為用戶提供了大量以前不可用的自定義選項（即在編輯器本身內(nèi)）。了解如何在WordPress中調(diào)整區(qū)塊大小對于能夠最大程度地利用區(qū)塊編輯器至關(guān)重要?，F(xiàn)在有了全站點編輯功能，這項技能只會隨著時間的推移變得更加有用。
分享名稱：古騰堡編輯器教程：如何調(diào)整WordPress區(qū)塊大小
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/djdsceh.html
