<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      舟山網站制作設計:在WordPress中設計寬而寬的古騰堡塊體

      日期:2020-03-01 閱讀:324   作者:舟山網站設計開發公司

      WordPress的Gutenberg塊編輯器已經改變了我們在CMS中創建內容的方式。但它也在前端開辟了一些新的可能性。

      這一領域的一個更有趣的發展是能夠在頁面或帖子中添加“完整”或“寬”塊。這個特性增加了Gutenberg塊從主題內容的默認寬度中突破的可能性--這在舊的經典編輯器中幾乎是不可能的。

      對于全對齊塊或寬對齊塊,有許多可能的用途。例如,您可以引入具有全寬度的新頁面部分。蓋塊它覆蓋在圖像背景上的文本?;蛘吣憧梢岳眠@個特性來構建一個不能錯過的呼叫到行動區域。幾乎任何類型的內容都可以在這里添加,這是上訴的一部分。

      然而,有一個小警告:您的主題必須支持完整和寬對齊塊。謝天謝地,這很容易做到。下面是一個快速教程,用于向WordPress主題添加廣泛的對齊支持,并通過CSS對塊進行樣式設置。

      添加主題支持

      第一步涉及添加單線的代碼到活動主題的functions.php檔案。如果您還沒有下載此文件,請從您的網站下載(可在/wp-content/themes/yourtheme/文件夾--用“你的主題”代替文件夾的實際名稱)。然后,復制并粘貼以下PHP片段:

      add_theme_support( 'align-wide' );

      添加代碼后,上傳更改后的functions.php文件回你的主題的文件夾。

      此代碼將意味著您希望打開完全和寬對齊的塊?,F在,當您登錄WordPress并轉到頁面/POST編輯器時,您應該注意到一些塊(并非全部)具有新的“完整”和“寬”對齊選項。

      使用商業主題還是默認主題?
      如果使用的是廣告主題或默認WordPress主題,則需要確保使用的是兒童主題。這將使您可以對主題進行更改,而不會在更新后丟失它們。

      基本塊造型

      設計一個寬的或完全對齊的塊可能有點棘手。這里有很多不同的技術。我們這里要用的是這個例子在密碼筆上。

      @media screen and (min-width: 960px) {
           .alignwide, .alignfull {          width:  100vw;          max-width:  100vw;          margin-left:  calc(50% - 50vw);
           }}

      請注意,當屏幕大小為960像素或更寬時,我們使用CSS媒體查詢來集成此樣式。這是因為我們不一定希望在較小的屏幕上產生這種效果。

      在本例中,我們對兩個塊對齊使用了相同的樣式。當然,完全有可能將它們分開,這樣它們都能在前端提供獨特的外觀。

      同樣值得注意的是一個潛在的缺點:當使用這種技術時,水平滾動條可能會出現在一些布局上??梢酝ㄟ^將以下內容添加到body要素:

      body {
           overflow-x:  hidden;}

      結果

      現在我們已經啟用了對齊塊和寬對齊塊的功能,現在是時候測試一下了。在這里,我們創建了一個覆蓋塊的頁面,設置為寬對齊。

      當查看網站的前端時,封面塊按預期工作。元素跨越頁面的整個寬度,而下面的內容則停留在主題預定義的960像素寬度內。

      舟山網站制作設計

      僅使用默認樣式,這個元素就非常突出。盡管如此,還是有很多機會來做更多的設計。

      通過添加額外的CSS類或以特定塊為目標,我們有大量的設計可能性可供使用。比如背景,邊界或者剪裁路徑可以添加一個獨特的觸摸。

      拓展WordPress主題

      舟山網站制作設計在默認安裝中,Gutenberg不提供頁面生成器插件。但封鎖確實使我們能夠涉足該領土。

      這是一件好事,因為網頁設計是從經典編輯器第一次出現的時代演變而來的。當時,網站傾向于使用統一的內容寬度貫穿始終。

      如今,全寬度的版面是比較受歡迎和有用的布局選擇之一。能夠利用這一點,而不需要插件或主題黑客,使WordPress所有的設計師更好。

       


      网赚团队