如何使用 Divi 的轉換設置創建家譜
已發表: 2019-05-03曾經嘗試為您的網站創建家譜，但不知道如何處理它？ 好吧，在今天的 Divi 教程中，我們將向您展示如何做到這一點。 除了創建家譜之外，我們還確保它在所有屏幕尺寸上都保持響應。 完成創建家譜後，您始終可以根據自己的喜好修改圖像、文本和設計，並準備好上線！ 想立即開始這個家譜設計嗎？ 您將能夠免費下載 JSON 文件並將其添加到您正在創建的任何網站！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載家譜佈局
要了解免費的家譜佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
定位家庭成員
添加新部分
間距
讓我們開始創作吧！ 我們需要做的第一件事是向我們正在處理的頁面添加一個新的常規部分。 打開部分設置並使用視口寬度添加一些自定義頂部和底部填充。
- 頂部填充：8vw
- 底部填充：8vw
添加第 1 行
列結構
繼續使用以下列結構將第一行添加到您的部分：
漿紗
在不添加任何模塊的情況下，打開行設置並允許行佔據部分和屏幕的整個寬度。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
間距
要在桌面行的左側和右側添加空白，我們將使用視口寬度單位添加一些自定義的左右填充。
- 頂部填充：0px
- 底部填充：0px
- 左填充：15vw（台式機），0vw（平板電腦和手機）
- 右填充：15vw（台式機），0vw（平板電腦和手機）
將圖像模塊添加到列
上傳圖片
是時候開始添加模塊了！ 我們需要的第一個是圖像模塊。 上傳寬度和高度為“180px”的圖片。
結盟
然後，轉到設計選項卡並更改圖像對齊方式。
- 圖像對齊：居中
漿紗
接下來修改大小設置。
- 寬度：49%
- 模塊對齊：居中
邊界
並通過為邊框設置中的每個角添加高值將圖像變成圓形。 我們使用的是“20vw”，但您可以使用任意大的數字。
將文本模塊添加到列
添加內容
進入下一個模塊，即文本模塊。 在此處添加家庭成員的姓名。
背景顏色
然後，轉到背景設置並將背景顏色更改為白色。
- 背景顏色：#ffffff
文字設置
接下來修改文本設置。 如果您想為家譜創建另一種外觀和感覺，請隨意使用這些設置。
- 文字字體：Open Sans
- 文字顏色：#000000
- 文字大小：0.8vw（桌面）、1.2vw（平板電腦）、1.9vw（手機）
- 文本行高：0.4em
- 文字方向：居中
間距
轉到間距設置並添加一些自定義邊距和填充值。 這些值將幫助我們塑造文本模塊並使其與圖像模塊略微重疊。
- 最高利潤率：-0.5vw
- 左邊距：1vw
- 右邊距：1vw
- 頂部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）
- 底部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）
邊界
移至邊框設置並添加頂部邊框。
- 頂部邊框寬度：5px
- 頂部邊框顏色：#000000
盒子陰影
與框陰影一起在頁面上創建深度。
- 框陰影垂直位置：10px
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.17)
Z索引
為了確保文本模塊保持在圖像模塊的頂部，我們將在文本模塊的可見性設置中增加 Z 索引。
- Z指數：2
克隆行 3 次
完成創建第一行並修改其中的所有模塊後，您可以繼續克隆該行 3 次。 這將幫助我們在本教程的後續步驟中節省時間。 這些行中的每一行都將用於在族譜中創建不同的級別。
自定義第 1 行
克隆兩個模塊 7 次
讓我們開始定製家譜的第一層！ 切換到線框模式並克隆您行中的兩個模塊 7 次。 完成後，行的後端應如下所示：
列主要元素 CSS
我們正在將整個列變成一個網格。 您的列中總共應該有 16 個模塊。 我們將把這 16 個模塊放入 8 個網格列中。 這意味著 8 個網格列中的每一列都將包含 2 個模塊； 一個圖像模塊和一個文本模塊。 打開第一行的行設置，在列主元素中添加以下幾行CSS代碼：
display: grid; grid-template-columns: repeat(8, 12.5%);
自定義第 2 行
克隆兩個模塊 3 次
到第二排！ 在這裡，我們將克隆這兩個模塊 3 次。
列主要元素
通過將以下 CSS 代碼行添加到行的列主要元素，我們將列變成具有 4 個網格列的網格：
display: grid; grid-template-columns: repeat(4, 25%);
我們之所以使用這種方法，而不是僅僅選擇具有 4 列的現有行列結構，是因為我們希望所有內容在較小的屏幕尺寸上都能保持 100% 響應。
自定義第 3 行
克隆兩個模塊
到第三排！ 克隆每個模塊一次。
列主要元素
然後，將以下 CSS 代碼行添加到列主元素：
display: grid; grid-template-columns: repeat(2, 50%);
自定義第 4 行
行間距
進入下一行和最後一行！ 在這裡，我們唯一需要做的就是修改行填充值。
- 頂部填充：0px
- 底部填充：0px
- 左填充：31vw
- 右填充：31vw
使用圖像模塊連接家庭成員
添加第 1 行
列結構
現在我們已經把所有的家庭成員都排好了，我們可以開始連接他們了！ 為此，請在第一行和第二行之間添加一個新行。
漿紗
在不添加任何模塊的情況下，打開行設置並更改大小值。
- 寬度：100%
- 最大寬度：100%
間距
接下來轉到間距設置並添加一些自定義填充值。
- 頂部填充：0px
- 底部填充：0px
- 左填充：15vw（台式機），0vw（平板電腦和手機）
- 右填充：15vw（台式機），0vw（平板電腦和手機）
將圖像模塊添加到列
上傳插圖
然後，添加一個圖像模塊並上傳您可以在本文開頭下載的文件夾中找到的插圖。
漿紗
轉到圖像模塊的大小設置並啟用“強制全寬”選項。
- 強制全角：是
間距
確保在間距設置中禁用“在圖像下方顯示空間”選項。
- 在圖像下方顯示空間：否
克隆行兩次並改變他們的位置
完成修改行和其中的圖像模塊後，繼續克隆兩次。 相應地放置重複項：
自定義第 1 行
克隆圖像模塊三次
返回第一行並克隆模塊 3 次。
列主要元素
通過將以下 CSS 代碼行添加到行的列主要元素，將這些圖像模塊放置在具有 4 個網格列的網格中：
display: grid; grid-template-columns: repeat(4, 25%);
自定義第 2 行
克隆圖像模塊
移至第二行並克隆圖像模塊一次。
列主要元素
通過將以下 CSS 代碼行添加到行的列主要元素，將兩個模塊放在具有兩個網格列的網格中：
display: grid; grid-template-columns: repeat(2, 50%);
自定義第 3 行
更改間距
轉到下一個也是最後一個副本。 在這裡，您唯一需要做的就是更改自定義填充值，您就大功告成了！
- 頂部填充：0px
- 底部填充：0px
- 左填充：27vw
- 右填充：27vw
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 創建現代家譜！ 我們重新創建的家譜在所有屏幕尺寸上看起來都很棒。 在本教程開始時，您還可以免費下載 JSON 文件並立即開始使用。 如果您有任何問題或建議，請務必在下方評論區留言！