• <dd id="iyeig"></dd>
  • <code id="iyeig"></code>
  • <nav id="iyeig"></nav>
    <object id="iyeig"><sup id="iyeig"></sup></object>
  • <input id="iyeig"><strong id="iyeig"></strong></input>
  • 舟山定制網站設計:如何向DiviBuilder文章或頁面中添加更多列

    舟山網站建設 | 2019-04-30

    DiviBuilder允許頁面布局最多有四列。而且,對大多數網站來說,四列是你所需要的。但有時您需要添加更多的列。當然,有一些插件可以讓您嵌入短代碼來向布局中添加額外的列。但是,在使用DiviBuilder時,這可能會受到限制,因為短代碼要求您在模塊中工作。

    這就是為什么在今天的文章中,我將向您展示如何使用DiviBuilder將更多的列添加到您的行中,而無需使用插件或短代碼。通過這種方式,您可以添加任意數量的列來組織任何類型的Divi模塊。您是否需要一個十列布局來使用圖像模塊顯示客戶標識或投資組合部分?是否需要使用Blurb模塊列出公司服務的六列布局?你可以的!最好的部分是,您仍然可以使用DiviBuilder編輯這些列中的模塊。

    首先,部署DiviBuilder并堅持使用顯示的標準區段布局。

    選擇行模塊設置。舟山定制網站設計在“常規設置”下,選擇使行完全寬度的選項。

    舟山定制網站設計

    在“自定義CSS”選項卡下,在“CSS類”文本框中輸入“六列”。稍后我們將向該類添加CSS。

    儲蓄與退出

    現在,將一個全寬度列插入到您的行中。

    插入Blurb模塊。

    在“常規設置”下的“Blurb模塊設置”中,更新以下設置:

    插入標題:[輸入標題]
    上傳圖片(寬度300 px,我使用unspash.com上的圖片)
    文本定位:中心
    插入內容:[輸入內容]
    輸入管理標簽(可選)

    儲蓄與退出

    現在,舟山定制網站設計需要復制您剛剛自定義的Blurb模塊,以生成五個額外的模塊給您總共六人模糊模塊。這里有六個模塊是很重要的,因為這與您之前創建的“六列”類是一致的。

    舟山定制網站設計

    保存或發布頁面。

    現在您的六個模塊已經準備好了,請轉到divi→主題選項并在“自定義CSS”文本框中添加以下CSS:

    .ten-columns .et_pb_module {width: 10%; float: left;}
    .nine-columns .et_pb_module {width: 11.11%; float: left;}
    .eight-columns .et_pb_module {width: 12.5%; float: left;}
    .seven-columns .et_pb_module {width: 14.28%; float: left;}
    .six-columns .et_pb_module {width: 16.66%; float: left;}
    .five-columns .et_pb_module {width: 20%; float: left;}

    現在預覽你的頁面。您應該看到六列布局中的blurb模塊。

    您可能已經注意到您輸入的自定義CSS代碼包括六個不同的類。這使您能夠為五列、六列、七列、八列、九列和/或十列創建布局。

    現在要創建的是六列類。但是,如果您想要不同數量的列,您只需更改兩件事。

    第一個更改是用不同的CSS類更新行模塊設置自定義CSS。例如,如果您想要五列,您會將“五列”放在CSSClass文本框中。

    第二個改變是確保您有五個BUURB模塊,而不是六個。

    需要更多的列布局嗎?

    如果你擅長數學(我們在開玩笑嗎?)只需使用您的計算器應用程序),您可以添加任意數量的列到您的布局。只需計算所需百分比并為該百分比創建一個類即可。

    例如,如果您想要一個12列布局,下面是您所做的工作:

    使您的專欄布局更具創造性

    舟山定制網站設計要創建更有創意的列布局,可以將此功能與專業部分結合起來。

    例如,下面是如何進行五分之五的布局。

    從DiviBuilder中選擇“特定”部分。

    插入以下列布局:

    在左半欄中插入一個blurb模塊:

    轉到右行模塊上的行模塊設置。

    在“自定義CSS”選項卡下,在“CSS類”文本框中輸入“五列”。

    插入一個全寬度列,并將五個模塊添加到您的行中,重復前面執行的步驟。

    舟山定制網站設計

    結果是五分之一的列布局。

    照顧移動

    如果不希望在所有設備上保持自定義列布局相同,則可以輸入一些額外的CSS,以便在移動設備上將列縮小到更易讀的大小。隨意改變百分比以滿足你的需要。

    @media (max-width: 980px){
    .ten-columns .et_pb_module {width: 20%;}
    .nine-columns .et_pb_module {width: 33.3%;}
    .eight-columns .et_pb_module {width: 25%;}
    .seven-columns .et_pb_module {width: 25%;}
    .six-columns .et_pb_module {width: 33.3%;}
    .five-columns .et_pb_module {width: 33.3%;}
    }
    
    @media all and (max-width: 767px) {
    .ten-columns .et_pb_module {width: 100%;}
    .nine-columns .et_pb_module {width: 100%;}
    .eight-columns .et_pb_module {width: 100%;}
    .seven-columns .et_pb_module {width: 100%;}
    .six-columns .et_pb_module {width: 100%;}
    .five-columns .et_pb_module {width: 100%;}
    }

    就這樣?,F在,您可以使用DiviBuilder向頁面布局添加更多列。

    最后思想

    在完成一個客戶端的項目時,我首先添加了這個功能,該客戶端希望為一組標識添加更多的列,以顯示它們的特色客戶端和合作伙伴。他們還希望能夠使用DiviBuilder命令和編輯圖像/徽標。解決方案非常有效。我希望你發現這也是一個有用的解決方案。


    上一篇:舟山公司網站設計:分享WordPress文章的初學者指南下一篇:已經沒有了