日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

由于區(qū)塊的響應(yīng)性質(zhì)，區(qū)塊編輯器中的大多數(shù)調(diào)整大小仍然受限于站點(diǎn)的內(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)整大小選項(xiàng)。由于顯而易見的原因，這些是最容易調(diào)整大小的。但是，根據(jù)區(qū)塊的不同，調(diào)整大小選項(xiàng)將位于不同的位置。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

無論如何，您只需將類輸入到文本字段中即可。 請勿在此字段中的類名稱前包含句點(diǎn)/點(diǎn)。

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

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

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

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

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

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

小結(jié)

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

當(dāng)前文章：古騰堡編輯器教程：如何調(diào)整WordPress區(qū)塊大小
標(biāo)題網(wǎng)址：http://www.5511xx.com/article/djdsceh.html