如何使用 Divi 的足球俱樂部佈局包創建遊戲記分牌
已發表: 2018-10-24每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。 本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的足球俱樂部佈局包創建一個很酷的遊戲記分牌。 我們將僅使用 Divi 的內置選項創建這個最新的遊戲記分牌，讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的最終結果。
上傳足球俱樂部佈局包的佈局包
要創建本教程，我們將使用 Soccer Club Layout Pack 的登錄頁面，因此請繼續使用此佈局添加一個新頁面。
添加新部分
然後，在此處添加一個新部分：
背景顏色
打開部分設置，然後添加背景顏色。
- 背景顏色：#f4f4f4
間距
也可以使用間距值。
- 頂部填充：55px
- 底部填充：140px
克隆行和放置在部分
定位行並創建克隆
為了節省時間，我們將在下一節中克隆標題行。
放置在新部分
更改文本
更改行中文本模塊的副本以匹配新部分。
添加第 2 行
列結構
在上一行的正下方，使用以下列結構添加新行：
背景顏色
打開行設置並更改背景顏色。
- 背景顏色：#ffffff
第 1 列背景顏色
還要添加第 1 列的背景顏色。
- 第 1 列背景顏色：#fcfcfc
第 3 列背景顏色
對第 3 列重複相同的步驟。
- 第 3 列背景顏色：#fcfcfc
漿紗
也更改大小設置。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡列高：是
間距
接下來刪除所有默認填充。
- 頂部填充：0px
- 底部填充：0px
邊界
要匹配佈局包，請向行添加頂部和底部邊框。
- 底部邊框寬度：8px
- 底部邊框顏色：#00aaff
盒子陰影
最後，添加一個微妙的框陰影以在頁面上創建深度。
- 框陰影垂直位置：20px
- 框陰影模糊強度：80px
- 框陰影傳播強度：-20px
- 陰影顏色：rgba(0,0,0,0.56)
將文本模塊 #1 添加到第 1 列
添加內容
是時候開始添加模塊了！ 從第 1 列中的文本模塊開始並添加一些內容。
背景顏色
接下來更改背景顏色。
- 背景顏色：#E8E8E8
文字設置
繼續玩弄文本設置。
- 文字字體：Squada One
- 文本字體樣式：大寫
- 文字顏色：#333333
- 文字大小：20px
- 文字方向：居中
間距
然後，添加一些自定義間距值。
- 頂部填充：10px
- 底部填充：10px
- 左填充：10px
- 右填充：10px
將文本模塊 #2 添加到第 1 列
添加內容
在第 1 列中前一個文本模塊的正下方添加一個新的文本模塊。完成後，將內容添加到內容框中。
文字設置
接下來更改文本設置。
- 文字字體：Open Sans
- 文字字體粗細：粗體
- 文字顏色：#333333
- 文字大小：18px
- 文字方向：居中
間距
也可以使用間距值。
- 頂部填充：20px
- 底部填充：20px
將圖像模塊添加到第 1 列
上傳俱樂部標誌
第 1 列中需要的最後一個模塊是一個圖像模塊，其中包含其中一支參賽球隊的俱樂部徽標。
漿紗
上傳俱樂部徽標圖像後，請轉到尺寸設置並進行一些更改。
- 寬度：45%（桌面）、16%（平板）、28%（手機）
- 模塊對齊：居中
間距
繼續在間距設置中添加自定義邊距值。
- 上邊距：20px
- 下邊距：50px
克隆模塊並在第 3 列中放置重複項
完成第 1 列中的所有三個模塊後，您可以克隆它們並將重複項放在第三列中。
更改內容
當然，您需要更改每個克隆模塊的內容。
將文本模塊 #1 添加到第 2 列
添加內容
在第二列中，我們將放置日期和結束分數。 首先添加一個帶有日期的文本模塊。
背景顏色
接下來添加與佈局包匹配的背景顏色。
- 背景顏色：#00aaff
文字設置
還要更改文本設置。
- 文字字體：Squada One
- 文本字體樣式：大寫
- 文字顏色：#FFFFFF
- 文字大小：42px
- 文字方向：居中
間距
然後，轉到間距設置並為模塊提供更多填充。
- 頂部填充：30px
- 底部填充：30px
能見度
最後，在手機和平板電腦上禁用該模塊。
將文本模塊 #2 添加到第 2 列
添加內容
第 2 列中的第二個文本模塊需要包含遊戲分數。
文字設置
添加內容後，更改文本設置。
- 文字字體：Squada One
- 文字顏色：#333333
- 文字大小：150px
- 文本行高：1em
- 文字方向：居中
間距
繼續修改間距值。
- 上邊距：40px（桌面），20px（平板和手機）
- 下邊距：20px（平板電腦和手機）
- 左填充：10px
- 右填充：10px
能見度
在手機和平板電腦上也隱藏此模塊。 在下一部分中，我們將為較小的屏幕尺寸創建替代方案。
克隆兩個模塊並放入第 1 列
克隆您可以在第 2 列中找到的兩個模塊，並將重複項放在其他模塊上方的第一列中。
更改可見性
我們正在使用這兩個模塊來在平板電腦和手機上獲得更好的結果。 要確保這些模塊僅顯示在較小的屏幕上，請在桌面上禁用它們。
添加第 3 行
列結構
在下一行，我們將在桌面上顯示不同的目標。 使用以下列結構：
背景顏色
尚未添加任何模塊，打開行設置並更改背景顏色。
- 背景顏色：#FFFFFF
第 2 列背景顏色
還要更改第 2 列的背景顏色。
- 第 2 列背景顏色：#f7f7f7
漿紗
接下來在大小設置中刪除列之間的所有空間。
- 使用自定義裝訂線寬度：是
- 天溝寬度：0
- 均衡列高：是
間距
也添加自定義間距值。
- 頂部填充：0px
- 底部填充：0px
- 第 1 列底部填充：100px
- 第 1 列右填充：10px
- 第 3 列左填充：10px
邊界
然後，為該行添加一個微妙的底部邊框。
- 底部邊框寬度：8px
- 底部邊框顏色：#00aaff
盒子陰影
要為頁面創建深度，請添加行框陰影。
- 框陰影垂直位置：20px
- 框陰影模糊強度：80px
- 框陰影傳播強度：-20px
- 陰影顏色：rgba(0,0,0,0.56)
能見度
如前所述，我們僅使用此行在桌面上顯示目標，因此請繼續在手機和平板電腦上禁用該行。 稍後，我們將創建平板電腦和手機的替代品。
將文本模塊 #1 添加到第 1 列
添加內容
將新的文本模塊添加到包含第一個目標詳細信息的第一列。
文字設置
接下來更改文本設置。
- 文字字體：Squada One
- 文本字體樣式：大寫
- 文字顏色：#333333
- 文字大小：27px
- 文字方向：右
間距
也可以使用間距值。
- 上邊距：100px
- 底部填充：20px
邊界
繼續添加一個微妙的底部邊框。
- 底部邊框寬度：1px
- 底部邊框顏色：#333333
克隆文本模塊兩次
更改重複項的間距
克隆您剛剛創建的文本模塊兩次並更改兩個副本的間距值。
- 上邊距：200px
- 底部填充：20px
克隆文本模塊 #1 並在第 3 列中放置重複項
更改文本設置
再次克隆第 1 列中的第一個文本模塊並將副本放置在第 3 列中。繼續更改文本方向。
- 文本方向：左
更改間距
上邊距也需要增加。
- 上邊距：200px
克隆第 3 列中的文本模塊
您現在可以再次克隆此文本模塊。
添加第 4 行
列結構
是時候添加最後一行了！ 選擇以下列結構：
背景顏色
更改行的背景顏色。
- 背景顏色：#FFFFFF
漿紗
接下來刪除列之間的所有空間。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
添加一些額外的頂部和底部填充。
- 頂部填充：100px
- 底部填充：100px
邊界
我們還需要為這一行添加一個微妙的底部邊框。
- 底部邊框寬度：8px
- 底部邊框顏色：#00aaff
盒子陰影
接下來，向該行添加一個框陰影。
- 框陰影垂直位置：20px
- 框陰影模糊強度：80px
- 框陰影傳播強度：-20px
- 陰影顏色：rgba(0,0,0,0.56)
能見度
最後，隱藏桌面上的行。
添加文本模塊 #1
添加內容
在行的列中添加一個新的文本模塊並添加目標詳細信息。
文字設置
接下來更改文本設置。
- 文字字體：Squada One
- 文本字體樣式：大寫
- 文字大小：27px
- 文字方向：右
間距
接下來使用自定義間距值。
- 右邊距：150px
- 底部填充：20px
邊界
我們還添加了一個微妙的底部邊框。
- 底部邊框寬度：1px
- 底部邊框顏色：#333333
克隆文本模塊
更改文本設置
克隆您創建的文本模塊並更改副本的文本方向。
- 文本方向：左
間距
還要修改間距值。
- 上邊距：200px
- 左邊距：150px
根據需要多次克隆兩個文本模塊
您現在可以根據需要多次克隆這些模塊以顯示所有不同的目標。
預覽
現在我們已經完成了所有步驟，讓我們最後看看在不同屏幕尺寸上的結果。
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的 Soccer Club Layout Pack 創建遊戲記分牌。 這是為您的網站添加更多激勵措施並與您的受眾建立聯繫的好方法。 如果您有任何問題或建議，請務必在下方評論區留言！