5/6/7/8 Columns Divi 如何新增欄位數量

關於欄位的建立方式，應該是每一位初次使用 Divi 佈景主題的朋友，最要知道如何操作的功能。透過欄位的編排可以豐富整個網頁的樣貌，展現不凡的式樣效果。不過在 Divi 編輯器的內建預設最多就是四欄，想要建立 5/6/7/8 以上欄位時，就需要靠一些技巧來幫助實現。

開始新增欄位

手動置入欄位語法

增加欄位的方法很多，首先第一個方法就是不要使用編輯器預設的欄位建立方式，改以手動置入欄位語法的的方式來建立。

新增 Standard Section，Insert Columns 選擇 1 欄。

接著 Insert Module(s) 置入模組請選擇 code。

手動置入 Columns 欄位語法，首先置入的是 Columns 欄位式樣（CSS）語法。
重複上述步驟 Insert Module(s) 置入模組請選擇 code，這次填入 Columns （HTML）設計語法。

自訂欄位數量式樣（CSS）語法：

<style type="text/css">
* {
    box-sizing: border-box;
}

/* width 設定欄位的百分比，舉例來說：8 欄則數值為 12.5％，其他欄位按比例設定。 */
.column {
    float: left;
    width: 12.5%;
    padding: 5px;   
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>

自訂欄位數量 HTML 語法：

<div class="row">
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-1.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-2.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-3.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-4.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-5.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-6.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-7.png" /></div>
<div class="column" style="background-color: #fff;"><img src="https://yourdomain.com/your-images-8.png" /></div>
</div>

自訂欄位數量程式碼新增完成以後，就可以看到 8 欄的效果了。